@cocreate/resize 1.2.35 → 1.3.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [1.3.1](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.3.0...v1.3.1) (2022-12-21)
+
+
+### Bug Fixes
+
+* bump dependencies ([7f36c49](https://github.com/CoCreate-app/CoCreate-resize/commit/7f36c49640d289c9a7fd10c4ed34be33dd49dd12))
+
+# [1.3.0](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.2.35...v1.3.0) (2022-12-20)
+
+
+### Bug Fixes
+
+* bump dependencies ([f89c206](https://github.com/CoCreate-app/CoCreate-resize/commit/f89c206b33fc91cf4efd9df925771b758458537c))
+
+
+### Features
+
+* apply styleTag to insert and remove style pointer-events none on iframes during resize ([8c86165](https://github.com/CoCreate-app/CoCreate-resize/commit/8c86165028c23ad850c9f4e693cb3c8bd7ca7668))
+
 ## [1.2.35](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.2.34...v1.2.35) (2022-12-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/resize",
-  "version": "1.2.35",
+  "version": "1.3.1",
   "description": "A light weight resize handler make any element resizable by adding data attributes or usinng init object. Great for Customized text box or text area.",
   "keywords": [
     "resize",
@@ -59,7 +59,7 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/docs": "^1.4.19",
-    "@cocreate/observer": "^1.5.39"
+    "@cocreate/docs": "^1.4.21",
+    "@cocreate/observer": "^1.5.43"
   }
 }

package/src/index.js

@@ -5,6 +5,11 @@ import "./index.css";
 const EVENTS = ['mousemove touchmove', 'mousedown touchstart', 'mouseup touchend'];
 const DIRECTIONS = ['left', 'right', 'top', 'bottom'];
 
+const styleEl = document.createElement("style");
+styleEl.setAttribute('component', 'resize');
+document.head.appendChild(styleEl);
+const styleSheet = styleEl.sheet;
+
 const coCreateResize = {
     selector: '', //'.resize',
     resizers: [],
@@ -156,7 +161,7 @@ CoCreateResize.prototype = {
         }
 
         let selector = document.defaultView.getComputedStyle(this.resizeWidget);
-        this.processIframe();
+        styleSheet.insertRule('iframe {pointer-events: none}', 0)
 
         if (idx == 'top' || idx == 'bottom') {
             this.startTop = parseInt(selector.top, 10);
@@ -295,9 +300,7 @@ CoCreateResize.prototype = {
     },
 
     stopDrag: function(e) {
-        document.querySelectorAll('iframe').forEach(function(item) {
-            item.style.pointerEvents = null;
-        });
+        styleSheet.deleteRule(0)
         if (this.resizeWidget.hasAttribute('resizing')){
             this.resizeWidget.removeAttribute('resizing', '')
         }
@@ -400,17 +403,10 @@ CoCreateResize.prototype = {
         }
     },
 
-    // style="pointer-events:none" for iframe when drag event starts
-    processIframe: function() {
-        document.querySelectorAll('iframe').forEach(function(item) {
-            item.style.pointerEvents = null;
-        });
-    },
-
     collaborate: function({left, top, width, height, rowEnd, columnEnd}) {
         if (window.CoCreate && window.CoCreate.text) {
             let domTextEditor = this.resizeWidget.closest('[contenteditable]');
-            if (domTextEditor){
+            if (domTextEditor) {
                 if (left)
                     CoCreate.text.setStyle({ 
                         domTextEditor, target: this.resizeWidget, property: 'left', value: left + 'px'