mufuuuu

[Bookmarklet] ■

Feb 26th, 2021
1,121
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. javascript: void((() => {
  2.     const RECT_COLOR = 'black';
  3.     const RECT_WIDTH = 200;
  4.     const RECT_HEHGHT = 200;
  5.     const RECT_MIN_SIZE = 24;
  6.     const BORDER_COLOR = 'red';
  7.     const BORDER_WIDTH = 8;
  8.  
  9.     let newRect = document.createElement('div');
  10.     newRect.classList.add('draggable-rect');
  11.     newRect.setAttribute('active', 'true');
  12.     newRect.style.width = `${RECT_WIDTH}px`;
  13.     newRect.style.height = `${RECT_HEHGHT}px`;
  14.     let activeRect = document.querySelector('.draggable-rect[active]');
  15.     if(activeRect) {
  16.         activeRect.removeAttribute('active');
  17.         newRect.style.left = `${(document.documentElement.clientWidth - RECT_WIDTH) * Math.random() + document.documentElement.scrollLeft}px`;
  18.         newRect.style.top = `${(document.documentElement.clientHeight - RECT_HEHGHT) * Math.random() + document.documentElement.scrollTop}px`;
  19.     }else {
  20.         newRect.style.left = `${(document.documentElement.clientWidth - RECT_WIDTH) / 2 + document.documentElement.scrollLeft}px`;
  21.         newRect.style.top = `${(document.documentElement.clientHeight - RECT_HEHGHT) / 2 + document.documentElement.scrollTop}px`;
  22.     }
  23.     newRect.innerHTML = `
  24. <div class="draggable-rect-item resize-top resize-left"></div>
  25. <div class="draggable-rect-item resize-top"></div>
  26. <div class="draggable-rect-item resize-top resize-right"></div>
  27. <div class="draggable-rect-item resize-left"></div>
  28. <div class="draggable-rect-item move"></div>
  29. <div class="draggable-rect-item resize-right"></div>
  30. <div class="draggable-rect-item resize-bottom resize-left"></div>
  31. <div class="draggable-rect-item resize-bottom"></div>
  32. <div class="draggable-rect-item resize-bottom resize-right"></div>
  33. `;
  34.     document.body.appendChild(newRect);
  35.  
  36.     let style = document.getElementById('bml-draggable-rect-style');
  37.     if(!style) {
  38.         style = document.createElement('style');
  39.         style.id = 'bml-draggable-rect-style';
  40.         style.type = 'text/css';
  41.         style.innerHTML = `
  42. .draggable-rect {
  43. box-sizing: border-box;
  44. position: absolute;
  45. z-index: 2147483646;
  46. display: grid;
  47. grid-template-rows: ${BORDER_WIDTH}px auto ${BORDER_WIDTH}px;
  48. grid-template-columns: ${BORDER_WIDTH}px auto ${BORDER_WIDTH}px;
  49. grid-template-areas: "resize-tl resize-t resize-tr" "resize-l move resize-r" "resize-bl resize-b resize-br";
  50. background-color: ${RECT_COLOR};
  51. }
  52. .draggable-rect:hover,
  53. .draggable-rect:active {
  54. border: 1px solid ${BORDER_COLOR};
  55. }
  56. .draggable-rect[active] {
  57. z-index: 2147483647;
  58. }
  59.  
  60. .draggable-rect-item:hover,
  61. .draggable-rect-item:active {
  62. background-color: rgba(128, 128, 128, .2);
  63. }
  64. .draggable-rect-item.resize-top.resize-left {
  65. grid-area: resize-tl;
  66. cursor: nwse-resize;
  67. }
  68. .draggable-rect-item.resize-top {
  69. grid-area: resize-t;
  70. cursor: ns-resize;
  71. }
  72. .draggable-rect-item.resize-top.resize-right {
  73. grid-area: resize-tr;
  74. cursor: nesw-resize;
  75. }
  76. .draggable-rect-item.resize-left {
  77. grid-area: resize-l;
  78. cursor: ew-resize;
  79. }
  80. .draggable-rect-item.move {
  81. grid-area: move;
  82. cursor: move;
  83. }
  84. .draggable-rect-item.resize-right {
  85. grid-area: resize-r;
  86. cursor: ew-resize;
  87. }
  88. .draggable-rect-item.resize-bottom.resize-left {
  89. grid-area: resize-bl;
  90. cursor: nesw-resize;
  91. }
  92. .draggable-rect-item.resize-bottom {
  93. grid-area: resize-b;
  94. cursor: ns-resize;
  95. }
  96. .draggable-rect-item.resize-bottom.resize-right {
  97. grid-area: resize-br;
  98. cursor: nwse-resize;
  99. }
  100. `;
  101.         document.head.appendChild(style);
  102.  
  103.         let draggedElement;
  104.         let startX, startY, rectLeft, rectTop, rectWidth, rectHeight;
  105.         document.addEventListener('mousedown', mousedown, true);
  106.         document.addEventListener('mouseup', mouseup, true);
  107.         document.addEventListener('mousemove', mousemove, true);
  108.         function mousedown(e) {
  109.             switch(e.button) {
  110.                 case 0: {
  111.                     if(e.target.classList.contains('draggable-rect-item')) {
  112.                         draggedElement = e.target;
  113.                         activeRect = document.querySelector('.draggable-rect[active]');
  114.                         if(activeRect) {
  115.                             activeRect.removeAttribute('active');
  116.                         }
  117.                         activeRect = e.target.parentNode;
  118.                         activeRect.setAttribute('active', 'true');
  119.                         startX = e.clientX;
  120.                         startY = e.clientY;
  121.                         rectLeft = parseInt(activeRect.style.left);
  122.                         rectTop = parseInt(activeRect.style.top);
  123.                         rectWidth = activeRect.offsetWidth;
  124.                         rectHeight = activeRect.offsetHeight;
  125.                     };
  126.                     break;
  127.                 }
  128.                 case 1: {
  129.                     if(e.target.classList.contains('draggable-rect-item')) {
  130.                         e.preventDefault();
  131.                         activeRect = e.target.parentNode;
  132.                         activeRect.remove();
  133.                     };
  134.                     break;
  135.                 }
  136.             }
  137.         }
  138.         function mouseup(e) {
  139.             draggedElement = null;
  140.         }
  141.         function mousemove(e) {
  142.             if(draggedElement) {
  143.                 e.preventDefault();
  144.                 let deltaX = e.clientX - startX;
  145.                 let deltaY = e.clientY - startY;
  146.                 if(draggedElement.classList.contains('move')) {
  147.                     activeRect.style.left = Math.min(document.documentElement.scrollWidth - rectWidth, Math.max(0, rectLeft + deltaX)) + 'px';
  148.                     activeRect.style.top = Math.min(document.documentElement.scrollHeight - rectHeight, Math.max(0, rectTop + deltaY)) + 'px';
  149.                 }
  150.                 if(draggedElement.classList.contains('resize-left')) {
  151.                     activeRect.style.left = Math.min(rectLeft + rectWidth - RECT_MIN_SIZE, Math.max(0, rectLeft + deltaX)) + 'px';
  152.                     activeRect.style.width = Math.min(rectLeft + rectWidth, Math.max(RECT_MIN_SIZE, rectWidth - deltaX)) + 'px';
  153.                 }
  154.                 if(draggedElement.classList.contains('resize-top')) {
  155.                     activeRect.style.top = Math.min(rectTop + rectHeight - RECT_MIN_SIZE, Math.max(0, rectTop + deltaY)) + 'px';
  156.                     activeRect.style.height = Math.min(rectTop + rectHeight, Math.max(RECT_MIN_SIZE, rectHeight - deltaY)) + 'px';
  157.                 }
  158.                 if(draggedElement.classList.contains('resize-right')) {
  159.                     activeRect.style.width = Math.min(document.documentElement.scrollWidth - rectLeft, Math.max(RECT_MIN_SIZE, rectWidth + deltaX)) + 'px';
  160.                 }
  161.                 if(draggedElement.classList.contains('resize-bottom')) {
  162.                     activeRect.style.height = Math.min(document.documentElement.scrollHeight - rectTop, Math.max(RECT_MIN_SIZE, rectHeight + deltaY)) + 'px';
  163.                 }
  164.             }
  165.         }
  166.     }
  167. })());
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×