jquery-resizable.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. /// <reference path="../bower_components/jquery/dist/jquery.js" />
  2. /*
  3. jquery-resizable
  4. Version 0.27 - 1/10/2018
  5. © 2015-2017 Rick Strahl, West Wind Technologies
  6. www.west-wind.com
  7. Licensed 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. if ($.fn.myresizable)
  22. return;
  23. $.fn.myresizable = function fnResizable(options) {
  24. var defaultOptions = {
  25. // selector for handle that starts dragging
  26. handleSelector: null,
  27. // resize the width
  28. resizeWidth: true,
  29. // resize the height
  30. resizeHeight: true,
  31. // the side that the width resizing is relative to
  32. resizeWidthFrom: 'right',
  33. // the side that the height resizing is relative to
  34. resizeHeightFrom: 'bottom',
  35. // hook into start drag operation (event passed)
  36. onDragStart: null,
  37. // hook into stop drag operation (event passed)
  38. onDragEnd: null,
  39. // hook into each drag operation (event passed)
  40. onDrag: null,
  41. // disable touch-action on $handle
  42. // prevents browser level actions like forward back gestures
  43. touchActionNone: true,
  44. // instance id
  45. instanceId: null
  46. };
  47. if (typeof options == "object")
  48. defaultOptions = $.extend(defaultOptions, options);
  49. return this.each(function () {
  50. var opt = $.extend({}, defaultOptions);
  51. if (!opt.instanceId)
  52. opt.instanceId = "rsz_" + new Date().getTime();
  53. var startPos, startTransition;
  54. // get the element to resize
  55. var $el = $(this);
  56. var $handle;
  57. if (options === 'destroy') {
  58. opt = $el.data('resizable');
  59. if (!opt)
  60. return;
  61. $handle = getHandle(opt.handleSelector, $el);
  62. $handle.off("mousedown." + opt.instanceId + " touchstart." + opt.instanceId);
  63. if (opt.touchActionNone)
  64. $handle.css("touch-action", "");
  65. $el.removeClass("resizable");
  66. return;
  67. }
  68. $el.data('resizable', opt);
  69. // get the drag handle
  70. $handle = getHandle(opt.handleSelector, $el);
  71. if (opt.touchActionNone)
  72. $handle.css("touch-action", "none");
  73. $el.addClass("resizable");
  74. $handle.on("mousedown." + opt.instanceId + " touchstart." + opt.instanceId, startDragging);
  75. function noop(e) {
  76. e.stopPropagation();
  77. e.preventDefault();
  78. };
  79. function startDragging(e) {
  80. // Prevent dragging a ghost image in HTML5 / Firefox and maybe others
  81. if ( e.preventDefault ) {
  82. e.preventDefault();
  83. }
  84. startPos = getMousePos(e);
  85. startPos.width = parseInt($el.width(), 10);
  86. startPos.height = parseInt($el.height(), 10);
  87. startTransition = $el.css("transition");
  88. $el.css("transition", "none");
  89. if (opt.onDragStart) {
  90. if (opt.onDragStart(e, $el, opt) === false)
  91. return;
  92. }
  93. $(document).on('mousemove.' + opt.instanceId, doDrag);
  94. $(document).on('mouseup.' + opt.instanceId, stopDragging);
  95. if (window.Touch || navigator.maxTouchPoints) {
  96. $(document).on('touchmove.' + opt.instanceId, doDrag);
  97. $(document).on('touchend.' + opt.instanceId, stopDragging);
  98. }
  99. $(document).on('selectstart.' + opt.instanceId, noop); // disable selection
  100. }
  101. function doDrag(e) {
  102. var pos = getMousePos(e), newWidth, newHeight;
  103. if (opt.resizeWidthFrom === 'left')
  104. newWidth = startPos.width - pos.x + startPos.x;
  105. else
  106. newWidth = startPos.width + pos.x - startPos.x;
  107. if (opt.resizeHeightFrom === 'top')
  108. newHeight = startPos.height - pos.y + startPos.y;
  109. else
  110. newHeight = startPos.height + pos.y - startPos.y;
  111. if (!opt.onDrag || opt.onDrag(e, $el, newWidth, newHeight, opt) !== false) {
  112. if (opt.resizeHeight)
  113. $el.height(newHeight);
  114. if (opt.resizeWidth)
  115. $el.width(newWidth);
  116. }
  117. }
  118. function stopDragging(e) {
  119. e.stopPropagation();
  120. e.preventDefault();
  121. $(document).off('mousemove.' + opt.instanceId);
  122. $(document).off('mouseup.' + opt.instanceId);
  123. if (window.Touch || navigator.maxTouchPoints) {
  124. $(document).off('touchmove.' + opt.instanceId);
  125. $(document).off('touchend.' + opt.instanceId);
  126. }
  127. $(document).off('selectstart.' + opt.instanceId, noop);
  128. // reset changed values
  129. $el.css("transition", startTransition);
  130. if (opt.onDragEnd)
  131. opt.onDragEnd(e, $el, opt);
  132. return false;
  133. }
  134. function getMousePos(e) {
  135. var pos = { x: 0, y: 0, width: 0, height: 0 };
  136. if (typeof e.clientX === "number") {
  137. pos.x = e.clientX;
  138. pos.y = e.clientY;
  139. } else if (e.originalEvent.touches) {
  140. pos.x = e.originalEvent.touches[0].clientX;
  141. pos.y = e.originalEvent.touches[0].clientY;
  142. } else
  143. return null;
  144. return pos;
  145. }
  146. function getHandle(selector, $el) {
  147. if (selector && selector.trim()[0] === ">") {
  148. selector = selector.trim().replace(/^>\s*/, "");
  149. return $el.find(selector);
  150. }
  151. // Search for the selector, but only in the parent element to limit the scope
  152. // This works for multiple objects on a page (using .class syntax most likely)
  153. // as long as each has a separate parent container.
  154. return selector ? $el.parent().find(selector) : $el;
  155. }
  156. });
  157. };
  158. }));