UNPKG

5.65 kBJavaScriptView Raw
1/// <reference path="jquery.js" />
2/*
3jquery-resizable
4Version 0.20 - 3/10/2017
5© 2015-2017 Rick Strahl, West Wind Technologies
6www.west-wind.com
7Licensed under MIT License
8*/
9(function(factory, undefined) {
10 if (typeof define === 'function' && define.amd) {
11 // AMD
12 define(['jquery'], factory);
13 } else if (typeof module === 'object' && typeof module.exports === 'object') {
14 // CommonJS
15 module.exports = factory(require('jquery'));
16 } else {
17 // Global jQuery
18 factory(jQuery);
19 }
20}(function($, undefined) {
21
22 function getHandle(selector, $el) {
23 if (selector && selector.trim()[0] === ">") {
24 selector = selector.trim().replace(/^>\s*/, "");
25
26 return $el.find(selector);
27 }
28
29 return selector ? $(selector) : $el;
30 }
31
32 if ($.fn.resizable)
33 return;
34
35 $.fn.resizable = function fnResizable(options) {
36 var opt = {
37 // selector for handle that starts dragging
38 handleSelector: null,
39 // resize the width
40 resizeWidth: true,
41 // resize the height
42 resizeHeight: true,
43 // the side that the width resizing is relative to
44 resizeWidthFrom: 'right',
45 // the side that the height resizing is relative to
46 resizeHeightFrom: 'bottom',
47 // hook into start drag operation (event passed)
48 onDragStart: null,
49 // hook into stop drag operation (event passed)
50 onDragEnd: null,
51 // hook into each drag operation (event passed)
52 onDrag: null,
53 // disable touch-action on $handle
54 // prevents browser level actions like forward back gestures
55 touchActionNone: true
56 };
57 if (typeof options == "object") opt = $.extend(opt, options);
58
59 return this.each(function () {
60 var startPos, startTransition;
61
62 var $el = $(this);
63
64 var $handle = getHandle(opt.handleSelector, $el);
65
66 if (opt.touchActionNone)
67 $handle.css("touch-action", "none");
68
69 $el.addClass("resizable");
70 $handle.bind('mousedown.rsz touchstart.rsz', startDragging);
71
72 function noop(e) {
73 e.stopPropagation();
74 e.preventDefault();
75 };
76
77 function startDragging(e) {
78 // Prevent dragging a ghost image in HTML5 / Firefox and maybe others
79 if ( e.preventDefault ) {
80 e.preventDefault();
81 }
82
83 startPos = getMousePos(e);
84 startPos.width = parseInt($el.width(), 10);
85 startPos.height = parseInt($el.height(), 10);
86
87 startTransition = $el.css("transition");
88 $el.css("transition", "none");
89
90 if (opt.onDragStart) {
91 if (opt.onDragStart(e, $el, opt) === false)
92 return;
93 }
94 opt.dragFunc = doDrag;
95
96 $(document).bind('mousemove.rsz', opt.dragFunc);
97 $(document).bind('mouseup.rsz', stopDragging);
98 if (window.Touch || navigator.maxTouchPoints) {
99 $(document).bind('touchmove.rsz', opt.dragFunc);
100 $(document).bind('touchend.rsz', stopDragging);
101 }
102 $(document).bind('selectstart.rsz', noop); // disable selection
103 }
104
105 function doDrag(e) {
106 var pos = getMousePos(e), newWidth, newHeight;
107
108 if (opt.resizeWidthFrom === 'left')
109 newWidth = startPos.width - pos.x + startPos.x;
110 else
111 newWidth = startPos.width + pos.x - startPos.x;
112
113 if (opt.resizeHeightFrom === 'top')
114 newHeight = startPos.height - pos.y + startPos.y;
115 else
116 newHeight = startPos.height + pos.y - startPos.y;
117
118 if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
119 if (opt.resizeHeight)
120 $el.height(newHeight);
121
122 if (opt.resizeWidth)
123 $el.width(newWidth);
124 }
125 }
126
127 function stopDragging(e) {
128 e.stopPropagation();
129 e.preventDefault();
130
131 $(document).unbind('mousemove.rsz', opt.dragFunc);
132 $(document).unbind('mouseup.rsz', stopDragging);
133
134 if (window.Touch || navigator.maxTouchPoints) {
135 $(document).unbind('touchmove.rsz', opt.dragFunc);
136 $(document).unbind('touchend.rsz', stopDragging);
137 }
138 $(document).unbind('selectstart.rsz', noop);
139
140 // reset changed values
141 $el.css("transition", startTransition);
142
143 if (opt.onDragEnd)
144 opt.onDragEnd(e, $el, opt);
145
146 return false;
147 }
148
149 function getMousePos(e) {
150 var pos = { x: 0, y: 0, width: 0, height: 0 };
151 if (typeof e.clientX === "number") {
152 pos.x = e.clientX;
153 pos.y = e.clientY;
154 } else if (e.originalEvent.touches) {
155 pos.x = e.originalEvent.touches[0].clientX;
156 pos.y = e.originalEvent.touches[0].clientY;
157 } else
158 return null;
159
160 return pos;
161 }
162 });
163 };
164}));