1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | (function(factory, undefined) {
|
10 | if (typeof define === 'function' && define.amd) {
|
11 |
|
12 | define(['jquery'], factory);
|
13 | } else if (typeof module === 'object' && typeof module.exports === 'object') {
|
14 |
|
15 | module.exports = factory(require('jquery'));
|
16 | } else {
|
17 |
|
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 |
|
38 | handleSelector: null,
|
39 |
|
40 | resizeWidth: true,
|
41 |
|
42 | resizeHeight: true,
|
43 |
|
44 | resizeWidthFrom: 'right',
|
45 |
|
46 | resizeHeightFrom: 'bottom',
|
47 |
|
48 | onDragStart: null,
|
49 |
|
50 | onDragEnd: null,
|
51 |
|
52 | onDrag: null,
|
53 |
|
54 |
|
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 |
|
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);
|
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 |
|
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 | }));
|