@cocreate/resize 1.1.27 → 1.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/package.json +3 -3
  3. package/src/index.js +36 -33
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## [1.1.31](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.30...v1.1.31) (2021-10-15)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * updated dependencies ([06f66f9](https://github.com/CoCreate-app/CoCreate-resize/commit/06f66f9c0ab4c945d769201167ea4a2b8686c071))
7
+
8
+ ## [1.1.30](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.29...v1.1.30) (2021-10-13)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * update dependencies ([d92520c](https://github.com/CoCreate-app/CoCreate-resize/commit/d92520c04e2b5e311527b6e40ae7bdf3e7d84133))
14
+
15
+ ## [1.1.29](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.28...v1.1.29) (2021-10-09)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * calculation when to add and remove a span end ([5329825](https://github.com/CoCreate-app/CoCreate-resize/commit/5329825f5ae03f3598ccdc3ddc22d9338bf64c27))
21
+
22
+ ## [1.1.28](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.27...v1.1.28) (2021-10-06)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * update dependencies ([f0405c6](https://github.com/CoCreate-app/CoCreate-resize/commit/f0405c6e4e5f4ffc5d9371fdec273c81ac59ea23))
28
+
1
29
  ## [1.1.27](https://github.com/CoCreate-app/CoCreate-resize/compare/v1.1.26...v1.1.27) (2021-10-05)
2
30
 
3
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/resize",
3
- "version": "1.1.27",
3
+ "version": "1.1.31",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "resize",
@@ -60,7 +60,7 @@
60
60
  "webpack-log": "^3.0.1"
61
61
  },
62
62
  "dependencies": {
63
- "@cocreate/docs": "^1.2.28",
64
- "@cocreate/observer": "^1.3.25"
63
+ "@cocreate/docs": "^1.2.32",
64
+ "@cocreate/observer": "^1.3.29"
65
65
  }
66
66
  }
package/src/index.js CHANGED
@@ -20,7 +20,7 @@ const coCreateResize = {
20
20
  this.resizers.forEach(function(resize, idx) {
21
21
  let resizeWidget = new CoCreateResize(resize, handleObj);
22
22
  _this.resizeWidgets[idx] = resizeWidget;
23
- })
23
+ });
24
24
  },
25
25
 
26
26
  initElement: function(target) {
@@ -32,7 +32,7 @@ const coCreateResize = {
32
32
  });
33
33
  this.resizeWidgets[0] = resizeWidget;
34
34
  }
35
- }
35
+ };
36
36
 
37
37
  function CoCreateResize(resizer, options) {
38
38
  this.resizeWidget = resizer;
@@ -51,8 +51,8 @@ CoCreateResize.prototype = {
51
51
  //this is for grid
52
52
  this.gridWidth = 0;
53
53
  this.gridHeight = 0;
54
- this.missingWidth = 0;
55
- this.missingHeight = 0;
54
+ // this.missingWidth = 0;
55
+ // this.missingHeight = 0;
56
56
  this.limitSpan = 0;
57
57
  this.widthSpan = 0;
58
58
  this.heightSpan = 0;
@@ -60,7 +60,7 @@ CoCreateResize.prototype = {
60
60
 
61
61
  DIRECTIONS.map(d => {
62
62
  this.Drags[d] = this.resizeWidget.querySelector(handleObj['drag' + d.charAt(0).toUpperCase() + d.slice(1)]);
63
- })
63
+ });
64
64
 
65
65
  this.bindListeners();
66
66
  this.initResize();
@@ -73,7 +73,7 @@ CoCreateResize.prototype = {
73
73
 
74
74
  getGridProperty: function() {
75
75
  let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
76
- let currentCompStyles = window.getComputedStyle(this.resizeWidget);
76
+ // let currentCompStyles = window.getComputedStyle(this.resizeWidget);
77
77
  let gridColumns = compStyles.gridTemplateColumns;
78
78
  let height = compStyles.gridAutoRows;
79
79
 
@@ -81,14 +81,16 @@ CoCreateResize.prototype = {
81
81
  if(gridColumns !== 'none') {
82
82
  let width = gridColumns.split(' ');
83
83
  this.limitSpan = width.length;
84
- this.gridWidth = Number.parseFloat(width[0]) + Number.parseInt(compStyles.gridColumnGap);
85
- this.gridHeight = Number.parseInt(height) + Number.parseInt(compStyles.gridRowGap);
86
- this.missingWidth = Number.parseInt(currentCompStyles.paddingRight) + Number.parseInt(currentCompStyles.paddingLeft)
87
- + Number.parseInt(currentCompStyles.marginRight) + Number.parseInt(currentCompStyles.marginLeft)
88
- + Number.parseInt(currentCompStyles.borderRight) + Number.parseInt(currentCompStyles.borderLeft);
89
- this.missingHeight = Number.parseInt(currentCompStyles.paddingTop) + Number.parseInt(currentCompStyles.paddingBottom)
90
- + Number.parseInt(currentCompStyles.marginTop) + Number.parseInt(currentCompStyles.marginBottom)
91
- + Number.parseInt(currentCompStyles.borderTop) + Number.parseInt(currentCompStyles.borderBottom);
84
+ this.gridColumnGap = Number.parseInt(compStyles.gridColumnGap);
85
+ this.gridRowGap = Number.parseInt(compStyles.gridRowGap);
86
+ this.gridWidth = Number.parseFloat(width[0]);
87
+ this.gridHeight = Number.parseInt(height);
88
+ // this.missingWidth = Number.parseInt(currentCompStyles.paddingRight) + Number.parseInt(currentCompStyles.paddingLeft)
89
+ // + Number.parseInt(currentCompStyles.marginRight) + Number.parseInt(currentCompStyles.marginLeft)
90
+ // + Number.parseInt(currentCompStyles.borderRight) + Number.parseInt(currentCompStyles.borderLeft);
91
+ // this.missingHeight = Number.parseInt(currentCompStyles.paddingTop) + Number.parseInt(currentCompStyles.paddingBottom)
92
+ // + Number.parseInt(currentCompStyles.marginTop) + Number.parseInt(currentCompStyles.marginBottom)
93
+ // + Number.parseInt(currentCompStyles.borderTop) + Number.parseInt(currentCompStyles.borderBottom);
92
94
  }
93
95
  },
94
96
 
@@ -97,24 +99,24 @@ CoCreateResize.prototype = {
97
99
  {
98
100
  let compStylesOfParent = window.getComputedStyle(this.resizeWidget.parentNode);
99
101
  let spans = 0;
100
- let gridColumns = compStylesOfParent.gridTemplateColumns.split(' ')
101
- let temp = gridColumns[0]
102
+ let gridColumns = compStylesOfParent.gridTemplateColumns.split(' ');
103
+ let temp = gridColumns[0];
102
104
  gridColumns.map(v => {
103
105
  if(v == temp) spans ++;
104
- })
106
+ });
105
107
  this.limitSpan = spans;
106
108
  if(this.resizeWidget.style['grid-column-end'])
107
109
  {
108
- let curClassAttributes = this.resizeWidget.getAttribute('class').split(' ')
109
- let prevColumnState = curClassAttributes[curClassAttributes.length - 1].split('_')
110
- let prevSpan = Number.parseInt(prevColumnState[1])
110
+ let curClassAttributes = this.resizeWidget.getAttribute('class').split(' ');
111
+ let prevColumnState = curClassAttributes[curClassAttributes.length - 1].split('_');
112
+ let prevSpan = Number.parseInt(prevColumnState[1]);
111
113
  let curColumnState = this.resizeWidget.style['grid-column-end'].split(' ');
112
- let curSpan = Number.parseInt(curColumnState[1])
114
+ let curSpan = Number.parseInt(curColumnState[1]);
113
115
 
114
116
  let span = 0;
115
117
  if(this.limitSpan >= prevSpan) span = prevSpan;
116
- else if(prevSpan > this.limitSpan) span = this.limitSpan
117
- else span = Math.min(curSpan, this.limitSpan)
118
+ else if(prevSpan > this.limitSpan) span = this.limitSpan;
119
+ else span = Math.min(curSpan, this.limitSpan);
118
120
 
119
121
  this.resizeWidget.style['grid-column-end'] = 'span ' + span;
120
122
  }
@@ -122,7 +124,7 @@ CoCreateResize.prototype = {
122
124
  },
123
125
 
124
126
  initResize: function() {
125
- DIRECTIONS.map(d => { if (this.Drags[d]) this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]); })
127
+ DIRECTIONS.map(d => { if (this.Drags[d]) this.addListenerMulti(this.Drags[d], EVENTS[0], this.checkCorners[d]); });
126
128
  },
127
129
 
128
130
  checkDragImplementation: function(e, from, to, offset, fcur, scur) {
@@ -185,7 +187,8 @@ CoCreateResize.prototype = {
185
187
  //this is just for grid system
186
188
  setRowEnd: function(height) {
187
189
  if(this.gridHeight) {
188
- this.heightSpan = Math.ceil((height + this.missingHeight) / this.gridHeight);
190
+ this.heightSpan = Math.ceil((height - (this.heightSpan - 1) * this.gridRowGap) / this.gridHeight );
191
+ // this.heightSpan = Math.ceil((height + this.missingHeight) / this.gridHeight);
189
192
  this.resizeWidget.style['grid-row-end'] = 'span ' + this.heightSpan;
190
193
  }
191
194
  },
@@ -225,8 +228,8 @@ CoCreateResize.prototype = {
225
228
  //this is just for grid system
226
229
  setColumnEnd: function(width) {
227
230
  if(this.gridWidth) {
228
- let spans = Math.ceil((width + this.missingWidth) / this.gridWidth);
229
- this.widthSpan = (spans > this.limitSpan) ? this.limitSpan : spans
231
+ let spans = Math.ceil((width - (this.widthSpan - 1) * this.gridColumnGap) / this.gridWidth);
232
+ this.widthSpan = (spans > this.limitSpan) ? this.limitSpan : spans;
230
233
  this.resizeWidget.style['grid-column-end'] = 'span ' + this.widthSpan;
231
234
  }
232
235
  },
@@ -260,7 +263,7 @@ CoCreateResize.prototype = {
260
263
  },
261
264
 
262
265
  detectGrid: function() {
263
- let compStyles = window.getComputedStyle(this.resizeWidget.parentNode)
266
+ let compStyles = window.getComputedStyle(this.resizeWidget.parentNode);
264
267
  return (compStyles.display === 'grid') ? true : false;
265
268
  },
266
269
 
@@ -276,11 +279,11 @@ CoCreateResize.prototype = {
276
279
  this.resizeWidget.style.left = null;
277
280
  this.resizeWidget.style.top = null;
278
281
 
279
- if(this.widthSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-column-end:span_' + this.widthSpan)
280
- if(this.heightSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-row-end:span_' + this.heightSpan)
282
+ if(this.widthSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-column-end:span_' + this.widthSpan);
283
+ if(this.heightSpan) this.resizeWidget.setAttribute('class', this.originClassAttribute + ' grid-row-end:span_' + this.heightSpan);
281
284
  }
282
285
 
283
- DIRECTIONS.map(d => { this.removeListenerMulti(document.documentElement, EVENTS[0], this.doDrags[d]); })
286
+ DIRECTIONS.map(d => { this.removeListenerMulti(document.documentElement, EVENTS[0], this.doDrags[d]) });
284
287
  this.removeListenerMulti(document.documentElement, EVENTS[2], this.stopDrag);
285
288
  },
286
289
  checkLeftDragTopCorner: function(e) {
@@ -354,7 +357,7 @@ CoCreateResize.prototype = {
354
357
  item.style.pointerEvents = null;
355
358
  });
356
359
  }
357
- }
360
+ };
358
361
 
359
362
  observer.init({
360
363
  name: 'CoCreateResize',
@@ -364,7 +367,7 @@ observer.init({
364
367
  coCreateResize.initElement(mutation.target);
365
368
 
366
369
  }
367
- })
370
+ });
368
371
 
369
372
  coCreateResize.init({
370
373
  selector: "[resizable]:not([resizable='false'])",