Guest User

Untitled

a guest
Dec 14th, 2018
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>JS Bin</title>
  7. <style id="jsbin-css">
  8. #target {
  9. position: absolute;
  10. background: green;
  11.  
  12. top: 100px;
  13. left: 100px;
  14. width: 200px;
  15. height: 200px;
  16. }
  17.  
  18. #handle-ne {
  19. position: absolute;
  20. background: blue;
  21. width: 10px;
  22. height: 10px;
  23.  
  24. top: 0;
  25. left: 0;
  26. margin-top: -5px;
  27. margin-left: -5px;
  28. }
  29. #handle-ws {
  30. position: absolute;
  31. background: blue;
  32. width: 10px;
  33. height: 10px;
  34.  
  35. bottom: 0;
  36. right: 0;
  37. margin-bottom: -5px;
  38. margin-right: -5px;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <div id="target">
  44. <div id="handle-ne" class="handle handle-n handle-w"></div>
  45. <div id="handle-ws" class="handle handle-e handle-s"></div>
  46. </div>
  47. <script id="jsbin-javascript">
  48. makeResizable('#target');
  49. function makeResizable(selectors) {
  50. const resizeGenerators = new Map([
  51. [ 'n', el => (e => {
  52. let diff = e.pageY - start.y;
  53. let top = start.top + diff;
  54. console.log(diff + " " + start.top + " " + start.height + " " + minHeight)
  55. if (top < 0) {
  56. top = 0;
  57. diff = -start.top;
  58. } else if (diff > start.height - minHeight) {
  59. top = start.top + start.height - minHeight;
  60. diff = start.height - minHeight;
  61. }
  62. //console.log(top + " " + diff);
  63. el.style.top = top + 'px';
  64. el.style.height = (start.height - diff) + 'px';
  65. })],
  66. [ 'e', el => (e => {
  67. let width = start.width + e.pageX - start.x;
  68. el.style.width = (width > 0 ? width : 0) + 'px';
  69. })],
  70. [ 'w', el => (e => {
  71. let diff = e.pageX - start.x;
  72. let left = start.left + diff;
  73. if (left < 0) {
  74. left = 0;
  75. diff = -start.left;
  76. } else if (diff > start.width) {
  77. left = start.left + start.width;
  78. diff = start.width;
  79. }
  80. el.style.left = left + 'px';
  81. el.style.width = (start.width - diff) + 'px';
  82. })],
  83. [ 's', el => (e => {
  84. let height = start.height + e.pageY - start.y;
  85. el.style.height = (height > 0 ? height : 0) + 'px';
  86. })],
  87. ]);
  88. let start, minHeight;
  89. let listening = [];
  90.  
  91. getElements(selectors).forEach((element) => {
  92. getElements(selectors + ' .handle').forEach((handle) => {
  93. handle.addEventListener('mousedown', (e) => {
  94. start = {
  95. x: e.pageX,
  96. y: e.pageY,
  97. top: parseInt(window.getComputedStyle(element).top, 10),
  98. left: parseInt(window.getComputedStyle(element).left, 10),
  99. width: parseInt(window.getComputedStyle(element).width, 10),
  100. height: parseInt(window.getComputedStyle(element).height, 10),
  101. }
  102. minHeight = parseInt(window.getComputedStyle(element).minHeight, 10) || 50;
  103. console.log(minHeight);
  104. window.addEventListener('mouseup', stopResize);
  105. Array.from('news').forEach(dir => {
  106. if (handle.classList.contains('handle-' + dir)) {
  107. let func = resizeGenerators.get(dir)(element);
  108. window.addEventListener('mousemove', func);
  109. listening.push(func);
  110. }
  111. });
  112. e.preventDefault();
  113. e.stopPropagation();
  114. })
  115.  
  116. function stopResize() {
  117. listening.forEach(func => {
  118. window.removeEventListener('mousemove', func);
  119. });
  120. listening = [];
  121. }
  122. });
  123. });
  124. }
  125.  
  126. function getElements(selectors) {
  127. try {
  128. return Array.from(document.querySelectorAll(selectors));
  129. } catch (e) {
  130. console.log(e);
  131. return [];
  132. }
  133. }
  134.  
  135. </script>
  136.  
  137.  
  138. <script id="jsbin-source-css" type="text/css">#target {
  139. position: absolute;
  140. background: green;
  141.  
  142. top: 100px;
  143. left: 100px;
  144. width: 200px;
  145. height: 200px;
  146. }
  147.  
  148. #handle-ne {
  149. position: absolute;
  150. background: blue;
  151. width: 10px;
  152. height: 10px;
  153.  
  154. top: 0;
  155. left: 0;
  156. margin-top: -5px;
  157. margin-left: -5px;
  158. }
  159. #handle-ws {
  160. position: absolute;
  161. background: blue;
  162. width: 10px;
  163. height: 10px;
  164.  
  165. bottom: 0;
  166. right: 0;
  167. margin-bottom: -5px;
  168. margin-right: -5px;
  169. }</script>
  170.  
  171. <script id="jsbin-source-javascript" type="text/javascript">makeResizable('#target');
  172. function makeResizable(selectors) {
  173. const resizeGenerators = new Map([
  174. [ 'n', el => (e => {
  175. let diff = e.pageY - start.y;
  176. let top = start.top + diff;
  177. console.log(diff + " " + start.top + " " + start.height + " " + minHeight)
  178. if (top < 0) {
  179. top = 0;
  180. diff = -start.top;
  181. } else if (diff > start.height - minHeight) {
  182. top = start.top + start.height - minHeight;
  183. diff = start.height - minHeight;
  184. }
  185. //console.log(top + " " + diff);
  186. el.style.top = top + 'px';
  187. el.style.height = (start.height - diff) + 'px';
  188. })],
  189. [ 'e', el => (e => {
  190. let width = start.width + e.pageX - start.x;
  191. el.style.width = (width > 0 ? width : 0) + 'px';
  192. })],
  193. [ 'w', el => (e => {
  194. let diff = e.pageX - start.x;
  195. let left = start.left + diff;
  196. if (left < 0) {
  197. left = 0;
  198. diff = -start.left;
  199. } else if (diff > start.width) {
  200. left = start.left + start.width;
  201. diff = start.width;
  202. }
  203. el.style.left = left + 'px';
  204. el.style.width = (start.width - diff) + 'px';
  205. })],
  206. [ 's', el => (e => {
  207. let height = start.height + e.pageY - start.y;
  208. el.style.height = (height > 0 ? height : 0) + 'px';
  209. })],
  210. ]);
  211. let start, minHeight;
  212. let listening = [];
  213.  
  214. getElements(selectors).forEach((element) => {
  215. getElements(selectors + ' .handle').forEach((handle) => {
  216. handle.addEventListener('mousedown', (e) => {
  217. start = {
  218. x: e.pageX,
  219. y: e.pageY,
  220. top: parseInt(window.getComputedStyle(element).top, 10),
  221. left: parseInt(window.getComputedStyle(element).left, 10),
  222. width: parseInt(window.getComputedStyle(element).width, 10),
  223. height: parseInt(window.getComputedStyle(element).height, 10),
  224. }
  225. minHeight = parseInt(window.getComputedStyle(element).minHeight, 10) || 50;
  226. console.log(minHeight);
  227. window.addEventListener('mouseup', stopResize);
  228. Array.from('news').forEach(dir => {
  229. if (handle.classList.contains('handle-' + dir)) {
  230. let func = resizeGenerators.get(dir)(element);
  231. window.addEventListener('mousemove', func);
  232. listening.push(func);
  233. }
  234. });
  235. e.preventDefault();
  236. e.stopPropagation();
  237. })
  238.  
  239. function stopResize() {
  240. listening.forEach(func => {
  241. window.removeEventListener('mousemove', func);
  242. });
  243. listening = [];
  244. }
  245. });
  246. });
  247. }
  248.  
  249. function getElements(selectors) {
  250. try {
  251. return Array.from(document.querySelectorAll(selectors));
  252. } catch (e) {
  253. console.log(e);
  254. return [];
  255. }
  256. }
  257. </script></body>
  258. </html>
Add Comment
Please, Sign In to add comment