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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
/// <reference path="../bower_components/jquery/dist/jquery.js" />
/*
jquery-resizable
Version 0.32 - 5/5/2018
© 2015-2018 Rick Strahl, West Wind Technologies
www.west-wind.com
Licensed under MIT License
*/
(function(factory, undefined) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') {
// CommonJS
module.exports = factory(require('jquery'));
} else {
// Global jQuery
factory(jQuery);
}
}(function($, undefined) {
if ($.fn.resizable)
return;
$.fn.resizable = function fnResizable(options) {
var defaultOptions = {
// selector for handle that starts dragging
handleSelector: null,
// resize the width
resizeWidth: true,
// resize the height
resizeHeight: true,
// the side that the width resizing is relative to
resizeWidthFrom: 'right',
// the side that the height resizing is relative to
resizeHeightFrom: 'bottom',
// hook into start drag operation (event passed)
onDragStart: null,
// hook into stop drag operation (event passed)
onDragEnd: null,
// hook into each drag operation (event passed)
onDrag: null,
// disable touch-action on $handle
// prevents browser level actions like forward back gestures
touchActionNone: true,
// instance id
instanceId: null
};
if (typeof options == "object")
defaultOptions = $.extend(defaultOptions, options);
return this.each(function () {
var opt = $.extend({}, defaultOptions);
if (!opt.instanceId)
opt.instanceId = "rsz_" + new Date().getTime();
var startPos, startTransition;
// get the element to resize
var $el = $(this);
var $handle;
if (options === 'destroy') {
opt = $el.data('resizable');
if (!opt)
return;
$handle = getHandle(opt.handleSelector, $el);
$handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
if (opt.touchActionNone)
$handle.css("touch-action", "");
$el.removeClass("resizable");
return;
}
$el.data('resizable', opt);
// get the drag handle
$handle = getHandle(opt.handleSelector, $el);
if (opt.touchActionNone)
$handle.css("touch-action", "none");
$el.addClass("resizable");
$handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
function noop(e) {
e.stopPropagation();
e.preventDefault();
};
function startDragging(e) {
// Prevent dragging a ghost image in HTML5 / Firefox and maybe others
if ( e.preventDefault ) {
e.preventDefault();
}
startPos = getMousePos(e);
startPos.width = parseInt($el.width(), 10);
startPos.height = parseInt($el.height(), 10);
startTransition = $el.css("transition");
$el.css("transition", "none");
if (opt.onDragStart) {
if (opt.onDragStart(e, $el, opt) === false)
return;
}
$(document).on('mousemove.' + opt.instanceId, doDrag);
$(document).on('mouseup.' + opt.instanceId, stopDragging);
if (window.Touch || navigator.maxTouchPoints) {
$(document).on('touchmove.' + opt.instanceId, doDrag);
$(document).on('touchend.' + opt.instanceId, stopDragging);
}
$(document).on('selectstart.' + opt.instanceId, noop); // disable selection
$("iframe").css("pointer-events","none");
}
function doDrag(e) {
var pos = getMousePos(e), newWidth, newHeight;
if (opt.resizeWidthFrom === 'left')
newWidth = startPos.width - pos.x + startPos.x;
else
newWidth = startPos.width + pos.x - startPos.x;
if (opt.resizeHeightFrom === 'top')
newHeight = startPos.height - pos.y + startPos.y;
else
newHeight = startPos.height + pos.y - startPos.y;
if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
if (opt.resizeHeight)
$el.height(newHeight);
if (opt.resizeWidth)
$el.width(newWidth);
}
}
function stopDragging(e) {
e.stopPropagation();
e.preventDefault();
$(document).off('mousemove.' + opt.instanceId);
$(document).off('mouseup.' + opt.instanceId);
if (window.Touch || navigator.maxTouchPoints) {
$(document).off('touchmove.' + opt.instanceId);
$(document).off('touchend.' + opt.instanceId);
}
$(document).off('selectstart.' + opt.instanceId, noop);
// reset changed values
$el.css("transition", startTransition);
$("iframe").css("pointer-events","auto");
if (opt.onDragEnd)
opt.onDragEnd(e, $el, opt);
return false;
}
function getMousePos(e) {
var pos = { x: 0, y: 0, width: 0, height: 0 };
if (typeof e.clientX === "number") {
pos.x = e.clientX;
pos.y = e.clientY;
} else if (e.originalEvent.touches) {
pos.x = e.originalEvent.touches[0].clientX;
pos.y = e.originalEvent.touches[0].clientY;
} else
return null;
return pos;
}
function getHandle(selector, $el) {
if (selector && selector.trim()[0] === ">") {
selector = selector.trim().replace(/^>\s*/, "");
return $el.find(selector);
}
// Search for the selector, but only in the parent element to limit the scope
// This works for multiple objects on a page (using .class syntax most likely)
// as long as each has a separate parent container.
return selector ? $el.parent().find(selector) : $el;
}
});
};
}));
|
