@cocreate/resize 1.11.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/resize",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "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",
@@ -58,6 +58,6 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/observer": "^1.16.0"
+    "@cocreate/observer": "^1.16.1"
   }
 }

package/prettier.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+        tabWidth: 4,
+        semi: true,
+        trailingComma: "none",
+        bracketSameLine: true,
+        useTabs: true,
+        overrides: [
+            {
+                files: ["*.json", "*.yml", "*.yaml"],
+                options: {
+                    tabWidth: 2,
+                    useTabs: false
+                },
+            }
+        ],  
+    };

package/src/index.js

@@ -15,20 +15,20 @@ const coCreateResize = {
     resizers: [],
     resizeWidgets: [],
 
-    init: function(handleObj) {
+    init: function (handleObj) {
         for (var handleKey in handleObj)
             if (handleObj.hasOwnProperty(handleKey) && handleKey == 'selector')
                 this.selector = handleObj[handleKey];
 
         this.resizers = document.querySelectorAll(this.selector);
         var _this = this;
-        this.resizers.forEach(function(resize, idx) {
+        this.resizers.forEach(function (resize, idx) {
             let resizeWidget = new CoCreateResize(resize, handleObj);
             _this.resizeWidgets[idx] = resizeWidget;
         });
     },
 
-    initElement: function(target) {
+    initElement: function (target) {
         let resizeWidget = new CoCreateResize(target, {
             dragLeft: "[resize='left']",
             dragRight: "[resize='right']",
@@ -46,13 +46,13 @@ function CoCreateResize(resizer, options) {
 }
 
 CoCreateResize.prototype = {
-    init: function(handleObj) {
+    init: function (handleObj) {
         if (this.resizeWidget) {
             this.initDrags = [];
             this.checkCorners = [];
             this.doDrags = [];
             this.Drags = [];
-            
+
             //this is for grid
             this.isGrid = this.detectGrid();
             this.gridWidth = 0;
@@ -75,12 +75,12 @@ CoCreateResize.prototype = {
         }
     },
 
-    getGridProperty: function() {
+    getGridProperty: function () {
         if (!this.resizeWidget.parentNode) return;
         let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
         let gridColumns = compStyles.gridTemplateColumns;
         let height = compStyles.gridAutoRows;
-        
+
         if (gridColumns !== 'none') {
             let width = gridColumns.split(' ');
             this.limitSpan = width.length;
@@ -91,27 +91,25 @@ CoCreateResize.prototype = {
         }
     },
 
-    checkGridColumns: function() {
-        if (typeof this.resizeWidget !== 'undefined' && this.resizeWidget.parentNode)
-        {
+    checkGridColumns: function () {
+        if (typeof this.resizeWidget !== 'undefined' && this.resizeWidget.parentNode) {
             let compStylesOfParent = window.getComputedStyle(this.resizeWidget.parentNode);
             let spans = 0;
             let gridColumns = compStylesOfParent.gridTemplateColumns.split(' ');
             let temp = gridColumns[0];
             gridColumns.map(v => {
-                if (v == temp)   spans ++;
+                if (v == temp) spans++;
             });
             this.limitSpan = spans;
-            if (this.resizeWidget.style['grid-column-end'])
-            {
+            if (this.resizeWidget.style['grid-column-end']) {
                 let curClassAttributes = this.resizeWidget.getAttribute('class').split(' ');
                 let prevColumnState = curClassAttributes[curClassAttributes.length - 1].split('_');
                 let prevSpan = Number.parseInt(prevColumnState[1]);
                 let curColumnState = this.resizeWidget.style['grid-column-end'].split(' ');
                 let curSpan = Number.parseInt(curColumnState[1]);
-                
+
                 let span = 0;
-                if (this.limitSpan >= prevSpan)   span = prevSpan;
+                if (this.limitSpan >= prevSpan) span = prevSpan;
                 else if (prevSpan > this.limitSpan) span = this.limitSpan;
                 else span = Math.min(curSpan, this.limitSpan);
 
@@ -120,14 +118,14 @@ CoCreateResize.prototype = {
         }
     },
 
-    initResize: function() {
-        DIRECTIONS.map(d => { 
-            if (this.Drags[d]) 
-                this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]); 
+    initResize: function () {
+        DIRECTIONS.map(d => {
+            if (this.Drags[d])
+                this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]);
         });
     },
 
-    checkDragImplementation: function(e, from, to, offset, fcur, scur) {
+    checkDragImplementation: function (e, from, to, offset, fcur, scur) {
         if (e.touches)
             e = e.touches[0];
         let other;
@@ -153,10 +151,10 @@ CoCreateResize.prototype = {
         }
     },
 
-    initDrag: function(e, idx) {
+    initDrag: function (e, idx) {
         e.preventDefault();
 
-        if (!this.resizeWidget.hasAttribute('resizing')){
+        if (!this.resizeWidget.hasAttribute('resizing')) {
             this.resizeWidget.setAttribute('resizing', '')
         }
 
@@ -174,6 +172,7 @@ CoCreateResize.prototype = {
         }
         else {
             this.startLeft = parseInt(selector.left, 10);
+            this.startRight = parseInt(selector.right, 10);
             this.startWidth = parseInt(selector.width, 10);
 
             if (e.touches)
@@ -186,30 +185,30 @@ CoCreateResize.prototype = {
         this.addListenerMulti(document.documentElement, EVENTS[2], this.stopDrag);
     },
 
-    initTopDrag: function(e) {
+    initTopDrag: function (e) {
         this.initDrag(e, 'top');
     },
-    initBottomDrag: function(e) {
+    initBottomDrag: function (e) {
         this.initDrag(e, 'bottom');
     },
-    initLeftDrag: function(e) {
+    initLeftDrag: function (e) {
         this.initDrag(e, 'left');
 
     },
-    initRightDrag: function(e) {
+    initRightDrag: function (e) {
         this.initDrag(e, 'right');
     },
 
     //this is just for grid system
-    setRowEnd: function(height) {
+    setRowEnd: function (height) {
         if (this.gridHeight) {
-            this.heightSpan = Math.ceil((height - (this.heightSpan - 1) * this.gridRowGap) / this.gridHeight );
+            this.heightSpan = Math.ceil((height - (this.heightSpan - 1) * this.gridRowGap) / this.gridHeight);
             this.resizeWidget.style['grid-row-end'] = 'span ' + this.heightSpan;
-            this.collaborate({rowEnd: this.heightSpan})
+            this.collaborate({ rowEnd: this.heightSpan })
         }
     },
 
-    doTopDrag: function(e) {
+    doTopDrag: function (e) {
         let top, height;
 
         if (e.touches)
@@ -221,14 +220,14 @@ CoCreateResize.prototype = {
             return;
         if (!this.isGrid) {
             this.resizeWidget.style.top = top + 'px';
-            this.collaborate({top, height})
+            this.collaborate({ top, height })
         }
         this.resizeWidget.style.height = height + 'px';
         this.setRowEnd(height);
     },
 
 
-    doBottomDrag: function(e) {
+    doBottomDrag: function (e) {
         let height;
 
         if (e.touches)
@@ -239,34 +238,36 @@ CoCreateResize.prototype = {
         if (height < 10)
             return;
         if (!this.isGrid)
-            this.collaborate({height})
-    
+            this.collaborate({ height })
+
         this.resizeWidget.style.height = height + 'px';
         this.setRowEnd(height);
     },
 
     //this is just for grid system
-    setColumnEnd: function(width) {
+    setColumnEnd: function (width) {
         if (this.gridWidth) {
             let spans = Math.ceil((width - (this.widthSpan - 1) * this.gridColumnGap) / this.gridWidth);
             this.widthSpan = (spans > this.limitSpan) ? this.limitSpan : spans;
             this.resizeWidget.style['grid-column-end'] = 'span ' + this.widthSpan;
-            this.collaborate({columnEnd: this.widthSpan})
+            this.collaborate({ columnEnd: this.widthSpan })
         }
     },
 
-    doLeftDrag: function(e) {
-        let left, width;
+    doLeftDrag: function (e) {
+        let left, right, width;
         if (e.touches)
             e = e.touches[0];
         left = this.startLeft + e.clientX - this.startX;
+        right = this.startRight;
         width = this.startWidth - e.clientX + this.startX;
 
         if (width < 10)
             return;
         if (!this.isGrid) {
-            this.resizeWidget.style.left = left + 'px';
-            this.collaborate({left, width})
+            this.resizeWidget.style.left = '';
+            this.resizeWidget.style.right = right + 'px';
+            this.collaborate({ left, width })
         }
 
         this.resizeWidget.style.width = width + 'px';
@@ -274,7 +275,7 @@ CoCreateResize.prototype = {
     },
 
 
-    doRightDrag: function(e) {
+    doRightDrag: function (e) {
         let width;
         if (e.touches)
             e = e.touches[0];
@@ -283,13 +284,13 @@ CoCreateResize.prototype = {
             return;
 
         if (!this.isGrid)
-            this.collaborate({width})
-    
+            this.collaborate({ width })
+
         this.resizeWidget.style.width = width + 'px';
         this.setColumnEnd(width);
     },
 
-    detectGrid: function() {
+    detectGrid: function () {
         let isGrid = false;
         if (this.resizeWidget.parentNode) {
             let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
@@ -299,9 +300,9 @@ CoCreateResize.prototype = {
         return isGrid;
     },
 
-    stopDrag: function(e) {
+    stopDrag: function (e) {
         styleSheet.deleteRule(0)
-        if (this.resizeWidget.hasAttribute('resizing')){
+        if (this.resizeWidget.hasAttribute('resizing')) {
             this.resizeWidget.removeAttribute('resizing', '')
         }
 
@@ -312,14 +313,14 @@ CoCreateResize.prototype = {
             this.resizeWidget.style.left = null;
             this.resizeWidget.style.top = null;
 
-            if (this.widthSpan)  this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-column-end:span_' + this.widthSpan);
+            if (this.widthSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-column-end:span_' + this.widthSpan);
             if (this.heightSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-row-end:span_' + this.heightSpan);
         }
 
         DIRECTIONS.map(d => { this.removeListenerMulti(document.documentElement, EVENTS[0], this.doDrags[d]) });
         this.removeListenerMulti(document.documentElement, EVENTS[2], this.stopDrag);
     },
-    checkLeftCorners: function(e) {
+    checkLeftCorners: function (e) {
         let offset = e.clientY - this.getDistance(this.Drags['left'], true) + document.documentElement.scrollTop;
         if (offset > 10) {
             offset = this.getDistance(this.Drags['left'], true) + this.Drags['left'].clientHeight - e.clientY - document.documentElement.scrollTop;
@@ -328,7 +329,7 @@ CoCreateResize.prototype = {
             this.checkDragImplementation(e, 'left', 'top', offset, 'se-resize', 'e-resize');
         }
     },
-    checkTopCorners: function(e) {
+    checkTopCorners: function (e) {
         let offset = e.clientX - this.getDistance(this.Drags['top'], false) + document.documentElement.scrollTop;
         if (offset > 10) {
             offset = this.getDistance(this.Drags['top'], false) + this.Drags['top'].clientWidth - e.clientX - document.documentElement.scrollLeft;
@@ -337,7 +338,7 @@ CoCreateResize.prototype = {
             this.checkDragImplementation(e, 'top', 'left', offset, 'se-resize', 's-resize');
         }
     },
-    checkBottomCorners: function(e) {
+    checkBottomCorners: function (e) {
         let offset = e.clientX - this.getDistance(this.Drags['bottom'], false) + document.documentElement.scrollTop;
         if (offset > 10) {
             offset = this.getDistance(this.Drags['bottom'], false) + this.Drags['bottom'].clientWidth - e.clientX - document.documentElement.scrollLeft;
@@ -346,7 +347,7 @@ CoCreateResize.prototype = {
             this.checkDragImplementation(e, 'bottom', 'left', offset, 'ne-resize', 's-resize');
         }
     },
-    checkRightCorners: function(e) {
+    checkRightCorners: function (e) {
         let offset = e.clientY - this.getDistance(this.Drags['right'], true) + document.documentElement.scrollTop;
         if (offset > 10) {
             offset = this.getDistance(this.Drags['right'], true) + this.Drags['right'].clientHeight - e.clientY - document.documentElement.scrollTop;
@@ -356,7 +357,7 @@ CoCreateResize.prototype = {
         }
     },
 
-    bindListeners: function() {
+    bindListeners: function () {
         this.doDrags['left'] = this.doLeftDrag.bind(this);
         this.doDrags['top'] = this.doTopDrag.bind(this);
         this.doDrags['right'] = this.doRightDrag.bind(this);
@@ -375,7 +376,7 @@ CoCreateResize.prototype = {
         this.initDrags['right'] = this.initRightDrag.bind(this);
     },
 
-    getDistance: function(elem, flag) {
+    getDistance: function (elem, flag) {
         var location = 0;
         if (!elem) return;
         if (elem.offsetParent) {
@@ -388,7 +389,7 @@ CoCreateResize.prototype = {
     },
 
     // Bind multiiple events to a listener
-    addListenerMulti: function(element, eventNames, listener) {
+    addListenerMulti: function (element, eventNames, listener) {
         var events = eventNames.split(' ');
         for (var i = 0, iLen = events.length; i < iLen; i++) {
             element.addEventListener(events[i], listener, { passive: false });
@@ -396,40 +397,40 @@ CoCreateResize.prototype = {
     },
 
     // Remove multiiple events from a listener
-    removeListenerMulti: function(element, eventNames, listener) {
+    removeListenerMulti: function (element, eventNames, listener) {
         var events = eventNames.split(' ');
         for (var i = 0, iLen = events.length; i < iLen; i++) {
             element.removeEventListener(events[i], listener, { passive: false });
         }
     },
 
-    collaborate: function({left, top, width, height, rowEnd, columnEnd}) {
+    collaborate: function ({ left, top, width, height, rowEnd, columnEnd }) {
         if (window.CoCreate && window.CoCreate.text) {
             let domTextEditor = this.resizeWidget.closest('[contenteditable]');
             if (domTextEditor) {
                 if (left)
-                    CoCreate.text.setStyle({ 
-                        domTextEditor, target: this.resizeWidget, property: 'left', value: left + 'px' 
+                    CoCreate.text.setStyle({
+                        domTextEditor, target: this.resizeWidget, property: 'left', value: left + 'px'
                     })
                 if (top)
-                    CoCreate.text.setStyle({ 
-                        domTextEditor, target: this.resizeWidget, property: 'top', value: top + 'px' 
+                    CoCreate.text.setStyle({
+                        domTextEditor, target: this.resizeWidget, property: 'top', value: top + 'px'
                     })
                 if (width)
-                    CoCreate.text.setStyle({ 
-                        domTextEditor, target: this.resizeWidget, property: 'width', value: width + 'px' 
+                    CoCreate.text.setStyle({
+                        domTextEditor, target: this.resizeWidget, property: 'width', value: width + 'px'
                     })
                 if (height)
-                    CoCreate.text.setStyle({ 
-                        domTextEditor, target: this.resizeWidget, property: 'height', value: height + 'px' 
+                    CoCreate.text.setStyle({
+                        domTextEditor, target: this.resizeWidget, property: 'height', value: height + 'px'
                     })
                 if (rowEnd)
-                    CoCreate.text.setStyle({ 
-                        domTextEditor, target: this.resizeWidget, property: 'grid-row-end', value: 'span ' + rowEnd 
+                    CoCreate.text.setStyle({
+                        domTextEditor, target: this.resizeWidget, property: 'grid-row-end', value: 'span ' + rowEnd
                     })
                 if (columnEnd)
-                    CoCreate.text.setStyle({ 
-                        domTextEditor, target: this.resizeWidget, property: 'grid-column-end', value: 'span ' + columnEnd 
+                    CoCreate.text.setStyle({
+                        domTextEditor, target: this.resizeWidget, property: 'grid-column-end', value: 'span ' + columnEnd
                     })
             }
         }
@@ -440,7 +441,7 @@ observer.init({
     name: 'CoCreateResize',
     observe: ['addedNodes'],
     selector: "[resizable]:not([resizable='false'])",
-    callback: function(mutation) {
+    callback: function (mutation) {
         coCreateResize.initElement(mutation.target);
 
     }