このファイル: /home/web6047/www/cgi-bin/prj/20180128-home_javascript/20191113-newapp.js/20191120-汎用要素リサイズ試作 - snapshot 20191211/AdditionalResize.js
1
2
3
4
function delpx( value ) {
5
return Number( value.replace( /px/, "" ) );
6
}
7
8
function getSize( element, isBorder ) {
9
10
11
12
let w, h;
13
let r = element.getBoundingClientRect();
14
if( isBorder ) {
15
w = r.width;
16
h = r.height;
17
} else {
18
let s = getComputedStyle( element );
19
let bl = delpx( s.borderLeftWidth );
20
let bt = delpx( s.borderTopWidth );
21
let br = delpx( s.borderRightWidth );
22
let bb = delpx( s.borderBottomWidth );
23
w = r.width - bl - br;
24
h = r.height - bt - bb;
25
}
26
return { width : w, height : h };
27
}
28
29
30
function AdditionalResize( element ) {
31
32
33
this.element = element;
34
let s = getSize( this.element, true );
35
this.initialWidth = s.width;
36
this.initialHeight = s.height;
37
this.element.style.transformOrigin = "0 0";
38
39
this.onresizex = this.onresizex.bind( this );
40
addEventListener( "resize", this.onresizex );
41
this.onresizex();
42
}
43
AdditionalResize.prototype.setPosition = function( horizontal, vertical ) {
44
45
46
47
48
this.verticalPosition = vertical ? vertical : "m";
49
this.horizontalPosition = horizontal ? horizontal : "c";
50
this.element.parentNode.style.position = "relative";
51
this.element.style.position = "absolute";
52
this.onresizex();
53
}
54
AdditionalResize.prototype.onresizex = function( e ) {
55
let ps = getSize( this.element.parentNode, false );
56
let horRate = ps.width / this.initialWidth;
57
let verRate = ps.height / this.initialHeight;
58
59
if( horRate < verRate ) {
60
61
this.element.style.transform = "scale(" + horRate + "," + horRate + ")";
62
this.element.style.left = 0;
63
let s = getSize( this.element, true );
64
switch( this.verticalPosition ) {
65
case "t": this.element.style.top = 0; break;
66
case "b": this.element.style.top = ps.height - s.height + "px"; break;
67
case "m": this.element.style.top = ( ps.height - s.height ) / 2 + "px"; break;
68
}
69
} else {
70
71
this.element.style.transform = "scale(" + verRate + "," + verRate + ")";
72
this.element.style.top = 0;
73
let s = getSize( this.element, true );
74
switch( this.horizontalPosition ) {
75
case "l": this.element.style.left = 0; break;
76
case "r": this.element.style.left = ps.width - s.width + "px"; break;
77
case "c": this.element.style.left = ( ps.width - s.width ) / 2 + "px"; break;
78
}
79
}
80
}