-
Notifications
You must be signed in to change notification settings - Fork 3
/
resizable.js
127 lines (99 loc) · 2.99 KB
/
resizable.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var resizable = function( elem, limitByParent ) {
var cornerElem = document.createElement("div");
cornerElem.className = resizable.resizeCornerClass;
elem.appendChild(cornerElem);
elem.addEventListener("change", onChange);
cornerElem.addEventListener("mousedown", onMouseDown);
var startW;
var startH;
var startMouseX;
var startMouseY;
var compStyle;
var parent;
var parentW;
var parentH;
var parentCompStyle;
var limited;
function getStylePixels( style, prop ) {
return parseFloat(style.getPropertyValue(prop).replace(/px/gi, ""))
}
function refresh() {
compStyle = window.getComputedStyle(elem, null);
parent = elem.parentNode;
limited = limitByParent;
if (limited === undefined && parent) {
limited = parent.classList.contains(resizable.resizeLimiterClass);
}
if (parent) {
parentCompStyle = window.getComputedStyle(parent, null);
parentW = parent.offsetWidth;
parentH = parent.offsetHeight;
}
}
function setSize( w, h ) {
if (limited) {
var wMax = parentW - elem.offsetLeft;
var hMax = parentH - elem.offsetTop;
w = (w > wMax) ? wMax : w;
h = (h > hMax) ? hMax : h;
}
w -= getStylePixels(compStyle, "padding-left");
w -= getStylePixels(compStyle, "padding-right");
h -= getStylePixels(compStyle, "padding-top");
h -= getStylePixels(compStyle, "padding-bottom");
w = (w < 0) ? 0 : w;
h = (h < 0) ? 0 : h;
elem.style.width = w + "px";
elem.style.height = h + "px";
}
function dispatchChanged() {
var evt = document.createEvent("Event");
evt.initEvent("change", true, false);
var children = elem.childNodes;
var i = children.length;
while (i--) {
var child = children[i];
child.dispatchEvent(evt);
}
elem.dispatchEvent(evt);
}
function onMouseDown( e ) {
e.stopPropagation();
refresh();
startW = elem.offsetWidth;
startH = elem.offsetHeight;
startMouseX = e.screenX;
startMouseY = e.screenY;
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
}
function onMouseUp( e ) {
onMouseMove(e);
document.removeEventListener("mouseup", onMouseUp);
document.removeEventListener("mousemove", onMouseMove);
}
function onMouseMove( e ) {
var w = startW + e.screenX - startMouseX;
var h = startH + e.screenY - startMouseY;
setSize(w, h);
dispatchChanged();
}
function onChange( e ) {
refresh();
setSize(elem.offsetWidth, elem.offsetHeight);
}
}
resizable.resizableClass = "js-resizable";
resizable.resizeLimiterClass = "js-resizable-limiter";
resizable.resizeCornerClass = "js-resizable-corner";
resizable.init = function() {
var arr = document.querySelectorAll("." + resizable.resizableClass);
var i = -1;
var l = arr.length;
while (++i < l) {
resizable(arr[i]);
}
}
resizable.initOnDocumentReady = function() {
document.addEventListener("DOMContentLoaded", resizable.init);
}