/jdk-1.5-parent/jquery-parent/jquery/src/main/resources/org/wicketstuff/jquery/crop/iresizable.js

https://github.com/adben/core · JavaScript · 452 lines · 327 code · 43 blank · 82 comment · 74 complexity · b395f8aef74ec61b0faf610de816e7a7 MD5 · raw file

  1. /**
  2. * Interface Elements for jQuery
  3. * Resizable
  4. *
  5. * http://interface.eyecon.ro
  6. *
  7. * Copyright (c) 2006 Stefan Petre
  8. * Dual licensed under the MIT (MIT-LICENSE.txt)
  9. * and GPL (GPL-LICENSE.txt) licenses.
  10. *
  11. *
  12. */
  13. jQuery.iResize = {
  14. resizeElement: null,
  15. resizeDirection: null,
  16. dragged: null,
  17. pointer: null,
  18. sizes: null,
  19. position: null,
  20. /**
  21. * internal: Start function
  22. */
  23. startDrag: function(e) {
  24. jQuery.iResize.dragged = (this.dragEl) ? this.dragEl: this;
  25. jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);
  26. // Save original size
  27. jQuery.iResize.sizes = {
  28. width: parseInt(jQuery(jQuery.iResize.dragged).css('width')) || 0,
  29. height: parseInt(jQuery(jQuery.iResize.dragged).css('height')) || 0
  30. };
  31. // Save original position
  32. jQuery.iResize.position = {
  33. top: parseInt(jQuery(jQuery.iResize.dragged).css('top')) || 0,
  34. left: parseInt(jQuery(jQuery.iResize.dragged).css('left')) || 0
  35. };
  36. // Assign event handlers
  37. jQuery(document)
  38. .bind('mousemove', jQuery.iResize.moveDrag)
  39. .bind('mouseup', jQuery.iResize.stopDrag);
  40. // Callback?
  41. if (typeof jQuery.iResize.dragged.resizeOptions.onDragStart === 'function') {
  42. jQuery.iResize.dragged.resizeOptions.onDragStart.apply(jQuery.iResize.dragged);
  43. }
  44. return false;
  45. },
  46. /**
  47. * internal: Stop function
  48. */
  49. stopDrag: function(e) {
  50. // Unbind event handlers
  51. jQuery(document)
  52. .unbind('mousemove', jQuery.iResize.moveDrag)
  53. .unbind('mouseup', jQuery.iResize.stopDrag);
  54. // Callback?
  55. if (typeof jQuery.iResize.dragged.resizeOptions.onDragStop === 'function') {
  56. jQuery.iResize.dragged.resizeOptions.onDragStop.apply(jQuery.iResize.dragged);
  57. }
  58. // Remove dragged element
  59. jQuery.iResize.dragged = null;
  60. },
  61. /**
  62. * internal: Move function
  63. */
  64. moveDrag: function(e) {
  65. if (!jQuery.iResize.dragged) {
  66. return;
  67. }
  68. pointer = jQuery.iUtil.getPointer(e);
  69. // Calculate new positions
  70. newTop = jQuery.iResize.position.top - jQuery.iResize.pointer.y + pointer.y;
  71. newLeft = jQuery.iResize.position.left - jQuery.iResize.pointer.x + pointer.x;
  72. newTop = Math.max(
  73. Math.min(newTop, jQuery.iResize.dragged.resizeOptions.maxBottom - jQuery.iResize.sizes.height),
  74. jQuery.iResize.dragged.resizeOptions.minTop
  75. );
  76. newLeft = Math.max(
  77. Math.min(newLeft, jQuery.iResize.dragged.resizeOptions.maxRight- jQuery.iResize.sizes.width),
  78. jQuery.iResize.dragged.resizeOptions.minLeft
  79. );
  80. // Callback
  81. if (typeof jQuery.iResize.dragged.resizeOptions.onDrag === 'function') {
  82. var newPos = jQuery.iResize.dragged.resizeOptions.onDrag.apply(jQuery.iResize.dragged, [newLeft, newTop]);
  83. if (typeof newPos == 'array' && newPos.length == 2) {
  84. newLeft = newPos[0];
  85. newTop = newPos[1];
  86. }
  87. }
  88. // Update the element
  89. jQuery.iResize.dragged.style.top = newTop + 'px';
  90. jQuery.iResize.dragged.style.left = newLeft + 'px';
  91. return false;
  92. },
  93. start: function(e) {
  94. // Bind event handlers
  95. jQuery(document)
  96. .bind('mousemove', jQuery.iResize.move)
  97. .bind('mouseup', jQuery.iResize.stop);
  98. // Initialize resizable
  99. jQuery.iResize.resizeElement = this.resizeElement;
  100. jQuery.iResize.resizeDirection = this.resizeDirection;
  101. jQuery.iResize.pointer = jQuery.iUtil.getPointer(e);
  102. jQuery.iResize.sizes = {
  103. width: parseInt(jQuery(this.resizeElement).css('width'))||0,
  104. height: parseInt(jQuery(this.resizeElement).css('height'))||0
  105. };
  106. jQuery.iResize.position = {
  107. top: parseInt(jQuery(this.resizeElement).css('top'))||0,
  108. left: parseInt(jQuery(this.resizeElement).css('left'))||0
  109. };
  110. // Callback function
  111. if (jQuery.iResize.resizeElement.resizeOptions.onStart) {
  112. jQuery.iResize.resizeElement.resizeOptions.onStart.apply(jQuery.iResize.resizeElement, [this]);
  113. }
  114. return false;
  115. },
  116. stop: function() {
  117. // Unbind event handlers
  118. jQuery(document)
  119. .unbind('mousemove', jQuery.iResize.move)
  120. .unbind('mouseup', jQuery.iResize.stop);
  121. // Callback function
  122. if (jQuery.iResize.resizeElement.resizeOptions.onStop) {
  123. jQuery.iResize.resizeElement.resizeOptions.onStop.apply(jQuery.iResize.resizeElement, [jQuery.iResize.resizeDirection]);
  124. }
  125. // Unbind
  126. jQuery.iResize.resizeElement = null;
  127. jQuery.iResize.resizeDirection = null;
  128. },
  129. getWidth: function(dx, side) {
  130. return Math.min(
  131. Math.max(jQuery.iResize.sizes.width + dx * side, jQuery.iResize.resizeElement.resizeOptions.minWidth),
  132. jQuery.iResize.resizeElement.resizeOptions.maxWidth
  133. );
  134. },
  135. getHeight: function(dy, side) {
  136. return Math.min(
  137. Math.max(jQuery.iResize.sizes.height + dy * side, jQuery.iResize.resizeElement.resizeOptions.minHeight),
  138. jQuery.iResize.resizeElement.resizeOptions.maxHeight
  139. );
  140. },
  141. getHeightMinMax: function(height) {
  142. return Math.min(
  143. Math.max(height, jQuery.iResize.resizeElement.resizeOptions.minHeight),
  144. jQuery.iResize.resizeElement.resizeOptions.maxHeight
  145. );
  146. },
  147. move: function(e) {
  148. if (jQuery.iResize.resizeElement == null) {
  149. return;
  150. }
  151. pointer = jQuery.iUtil.getPointer(e);
  152. dx = pointer.x - jQuery.iResize.pointer.x;
  153. dy = pointer.y - jQuery.iResize.pointer.y;
  154. newSizes = {
  155. width: jQuery.iResize.sizes.width,
  156. height: jQuery.iResize.sizes.height
  157. };
  158. newPosition = {
  159. top: jQuery.iResize.position.top,
  160. left: jQuery.iResize.position.left
  161. };
  162. switch (jQuery.iResize.resizeDirection){
  163. case 'e':
  164. newSizes.width = jQuery.iResize.getWidth(dx,1);
  165. break;
  166. case 'se':
  167. newSizes.width = jQuery.iResize.getWidth(dx,1);
  168. newSizes.height = jQuery.iResize.getHeight(dy,1);
  169. break;
  170. case 'w':
  171. newSizes.width = jQuery.iResize.getWidth(dx,-1);
  172. newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;
  173. break;
  174. case 'sw':
  175. newSizes.width = jQuery.iResize.getWidth(dx,-1);
  176. newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;
  177. newSizes.height = jQuery.iResize.getHeight(dy,1);
  178. break;
  179. case 'nw':
  180. newSizes.height = jQuery.iResize.getHeight(dy,-1);
  181. newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;
  182. newSizes.width = jQuery.iResize.getWidth(dx,-1);
  183. newPosition.left = jQuery.iResize.position.left - newSizes.width + jQuery.iResize.sizes.width;
  184. break;
  185. case 'n':
  186. newSizes.height = jQuery.iResize.getHeight(dy,-1);
  187. newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;
  188. break;
  189. case 'ne':
  190. newSizes.height = jQuery.iResize.getHeight(dy,-1);
  191. newPosition.top = jQuery.iResize.position.top - newSizes.height + jQuery.iResize.sizes.height;
  192. newSizes.width = jQuery.iResize.getWidth(dx,1);
  193. break;
  194. case 's':
  195. newSizes.height = jQuery.iResize.getHeight(dy,1);
  196. break;
  197. }
  198. if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
  199. if (jQuery.iResize.resizeDirection == 'n' || jQuery.iResize.resizeDirection == 's')
  200. nWidth = newSizes.height * jQuery.iResize.resizeElement.resizeOptions.ratio;
  201. else
  202. nWidth = newSizes.width;
  203. nHeight = jQuery.iResize.getHeightMinMax(nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio);
  204. nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;
  205. switch (jQuery.iResize.resizeDirection){
  206. case 'n':
  207. case 'nw':
  208. case 'ne':
  209. newPosition.top += newSizes.height - nHeight;
  210. break;
  211. }
  212. switch (jQuery.iResize.resizeDirection){
  213. case 'nw':
  214. case 'w':
  215. case 'sw':
  216. newPosition.left += newSizes.width - nWidth;
  217. break;
  218. }
  219. newSizes.height = nHeight;
  220. newSizes.width = nWidth;
  221. }
  222. if (newPosition.top < jQuery.iResize.resizeElement.resizeOptions.minTop) {
  223. nHeight = newSizes.height + newPosition.top - jQuery.iResize.resizeElement.resizeOptions.minTop;
  224. newPosition.top = jQuery.iResize.resizeElement.resizeOptions.minTop;
  225. if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
  226. nWidth = nHeight / jQuery.iResize.resizeElement.resizeOptions.ratio;
  227. switch (jQuery.iResize.resizeDirection){
  228. case 'nw':
  229. case 'w':
  230. case 'sw':
  231. newPosition.left += newSizes.width - nWidth;
  232. break;
  233. }
  234. newSizes.width = nWidth;
  235. }
  236. newSizes.height = nHeight;
  237. }
  238. if (newPosition.left < jQuery.iResize.resizeElement.resizeOptions.minLeft ) {
  239. nWidth = newSizes.width + newPosition.left - jQuery.iResize.resizeElement.resizeOptions.minLeft;
  240. newPosition.left = jQuery.iResize.resizeElement.resizeOptions.minLeft;
  241. if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
  242. nHeight = nWidth * jQuery.iResize.resizeElement.resizeOptions.ratio;
  243. switch (jQuery.iResize.resizeDirection){
  244. case 'n':
  245. case 'nw':
  246. case 'ne':
  247. newPosition.top += newSizes.height - nHeight;
  248. break;
  249. }
  250. newSizes.height = nHeight;
  251. }
  252. newSizes.width = nWidth;
  253. }
  254. if (newPosition.top + newSizes.height > jQuery.iResize.resizeElement.resizeOptions.maxBottom) {
  255. newSizes.height = jQuery.iResize.resizeElement.resizeOptions.maxBottom - newPosition.top;
  256. if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
  257. newSizes.width = newSizes.height / jQuery.iResize.resizeElement.resizeOptions.ratio;
  258. }
  259. }
  260. if (newPosition.left + newSizes.width > jQuery.iResize.resizeElement.resizeOptions.maxRight) {
  261. newSizes.width = jQuery.iResize.resizeElement.resizeOptions.maxRight - newPosition.left;
  262. if (jQuery.iResize.resizeElement.resizeOptions.ratio) {
  263. newSizes.height = newSizes.width * jQuery.iResize.resizeElement.resizeOptions.ratio;
  264. }
  265. }
  266. var newDimensions = false;
  267. if (jQuery.iResize.resizeElement.resizeOptions.onResize) {
  268. newDimensions = jQuery.iResize.resizeElement.resizeOptions.onResize.apply( jQuery.iResize.resizeElement, [ newSizes, newPosition ] );
  269. if (newDimensions) {
  270. if (newDimensions.sizes) {
  271. jQuery.extend(newSizes, newDimensions.sizes);
  272. }
  273. if (newDimensions.position) {
  274. jQuery.extend(newPosition, newDimensions.position);
  275. }
  276. }
  277. }
  278. elS = jQuery.iResize.resizeElement.style;
  279. elS.left = newPosition.left + 'px';
  280. elS.top = newPosition.top + 'px';
  281. elS.width = newSizes.width + 'px';
  282. elS.height = newSizes.height + 'px';
  283. return false;
  284. },
  285. /**
  286. * Builds the resizable
  287. */
  288. build: function(options) {
  289. if (!options || !options.handlers || options.handlers.constructor != Object) {
  290. return;
  291. }
  292. return this.each(
  293. function() {
  294. var el = this;
  295. el.resizeOptions = options;
  296. el.resizeOptions.minWidth = options.minWidth || 10;
  297. el.resizeOptions.minHeight = options.minHeight || 10;
  298. el.resizeOptions.maxWidth = options.maxWidth || 3000;
  299. el.resizeOptions.maxHeight = options.maxHeight || 3000;
  300. el.resizeOptions.minTop = options.minTop || 0;
  301. el.resizeOptions.minLeft = options.minLeft || 0;
  302. el.resizeOptions.maxRight = options.maxRight || 3000;
  303. el.resizeOptions.maxBottom = options.maxBottom || 3000;
  304. elPosition = jQuery(el).css('position');
  305. if (!(elPosition == 'relative' || elPosition == 'absolute')) {
  306. el.style.position = 'relative';
  307. }
  308. directions = /n|ne|e|se|s|sw|w|nw/g;
  309. for (i in el.resizeOptions.handlers) {
  310. if (i.toLowerCase().match(directions) != null) {
  311. if (el.resizeOptions.handlers[i].constructor == String) {
  312. handle = jQuery(el.resizeOptions.handlers[i]);
  313. if (handle.size() > 0) {
  314. el.resizeOptions.handlers[i] = handle.get(0);
  315. }
  316. }
  317. if (el.resizeOptions.handlers[i].tagName) {
  318. el.resizeOptions.handlers[i].resizeElement = el;
  319. el.resizeOptions.handlers[i].resizeDirection = i;
  320. jQuery(el.resizeOptions.handlers[i]).bind('mousedown', jQuery.iResize.start);
  321. }
  322. }
  323. }
  324. if (el.resizeOptions.dragHandle) {
  325. if (typeof el.resizeOptions.dragHandle === 'string') {
  326. handleEl = jQuery(el.resizeOptions.dragHandle);
  327. if (handleEl.size() > 0) {
  328. handleEl.each(function() {
  329. this.dragEl = el;
  330. });
  331. handleEl.bind('mousedown', jQuery.iResize.startDrag);
  332. }
  333. } else if (el.resizeOptions.dragHandle == true) {
  334. jQuery(this).bind('mousedown', jQuery.iResize.startDrag);
  335. }
  336. }
  337. }
  338. );
  339. },
  340. /**
  341. * Destroys the resizable
  342. */
  343. destroy: function() {
  344. return this.each(
  345. function() {
  346. var el = this;
  347. // Unbind the handlers
  348. for (i in el.resizeOptions.handlers) {
  349. el.resizeOptions.handlers[i].resizeElement = null;
  350. el.resizeOptions.handlers[i].resizeDirection = null;
  351. jQuery(el.resizeOptions.handlers[i]).unbind('mousedown', jQuery.iResize.start);
  352. }
  353. // Remove the draghandle
  354. if (el.resizeOptions.dragHandle) {
  355. if (typeof el.resizeOptions.dragHandle === 'string') {
  356. handle = jQuery(el.resizeOptions.dragHandle);
  357. if (handle.size() > 0) {
  358. handle.unbind('mousedown', jQuery.iResize.startDrag);
  359. }
  360. } else if (el.resizeOptions.dragHandle == true) {
  361. jQuery(this).unbind('mousedown', jQuery.iResize.startDrag);
  362. }
  363. }
  364. // Reset the options
  365. el.resizeOptions = null;
  366. }
  367. );
  368. }
  369. };
  370. jQuery.fn.extend ({
  371. /**
  372. * Create a resizable element with a number of advanced options including callback, dragging
  373. *
  374. * @name Resizable
  375. * @description Create a resizable element with a number of advanced options including callback, dragging
  376. * @param Hash hash A hash of parameters. All parameters are optional.
  377. * @option Hash handlers hash with keys for each resize direction (e, es, s, sw, w, nw, n) and value string selection
  378. * @option Integer minWidth (optional) the minimum width that element can be resized to
  379. * @option Integer maxWidth (optional) the maximum width that element can be resized to
  380. * @option Integer minHeight (optional) the minimum height that element can be resized to
  381. * @option Integer maxHeight (optional) the maximum height that element can be resized to
  382. * @option Integer minTop (optional) the minmum top position to wich element can be moved to
  383. * @option Integer minLeft (optional) the minmum left position to wich element can be moved to
  384. * @option Integer maxRight (optional) the maximum right position to wich element can be moved to
  385. * @option Integer maxBottom (optional) the maximum bottom position to wich element can be moved to
  386. * @option Float ratio (optional) the ratio between width and height to constrain elements sizes to that ratio
  387. * @option Mixed dragHandle (optional) true to make the element draggable, string selection for drag handle
  388. * @option Function onDragStart (optional) A function to be executed whenever the dragging starts
  389. * @option Function onDragStop (optional) A function to be executed whenever the dragging stops
  390. * @option Function onDrag (optional) A function to be executed whenever the element is dragged
  391. * @option Function onStart (optional) A function to be executed whenever the element starts to be resized
  392. * @option Function onStop (optional) A function to be executed whenever the element stops to be resized
  393. * @option Function onResize (optional) A function to be executed whenever the element is resized
  394. * @type jQuery
  395. * @cat Plugins/Interface
  396. * @author Stefan Petre
  397. */
  398. Resizable: jQuery.iResize.build,
  399. /**
  400. * Destroy a resizable
  401. *
  402. * @name ResizableDestroy
  403. * @description Destroy a resizable
  404. * @type jQuery
  405. * @cat Plugins/Interface
  406. * @author Stefan Petre
  407. */
  408. ResizableDestroy: jQuery.iResize.destroy
  409. });