Skip to content

Commit e551007

Browse files
gmsagmsa
committed
resize handler
1 parent 8aeb2ce commit e551007

File tree

11 files changed

+1946
-252
lines changed

11 files changed

+1946
-252
lines changed

‎README.md

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,8 @@ or autogenerated.
1919
- [Features](#features)
2020
- [Installation](#installation)
2121
- [Usage](#usage)
22-
- [Responsive Usage](#responsive-usage)
2322
- [Providing Grid Width](#providing-grid-width)
2423
- [Grid Layout Props](#grid-layout-props)
25-
- [Responsive Grid Layout Props](#responsive-grid-layout-props)
2624
- [Grid Item Props](#grid-item-props)
2725
- [Contribute](#contribute)
2826
- [TODO List](#todo-list)
@@ -45,13 +43,9 @@ or autogenerated.
4543
* Draggable widgets
4644
* Resizable widgets
4745
* Static widgets
48-
* Vertical auto-packing
4946
* Bounds checking for dragging and resizing
5047
* Widgets may be added or removed without rebuilding grid
5148
* Layout can be serialized and restored
52-
* Responsive breakpoints
53-
* Separate layouts per responsive breakpoint
54-
* Grid Items placed using CSS Transforms
5549

5650

5751
## Installation
@@ -69,13 +63,8 @@ If you have a feature request, please add it as an issue or make a pull request.
6963
## TODO List
7064

7165
- [x] Basic grid layout
72-
- [x] Fluid grid layout
73-
- [x] Grid packing
7466
- [x] Draggable grid items
75-
- [x] Live grid packing while dragging
7667
- [x] Resizable grid items
77-
- [x] Layouts per responsive breakpoint
7868
- [ ] Static elements
7969
- [ ] Min/max w/h per item
8070
- [ ] Resizable handles on other corners
81-
- [ ] Configurable w/h per breakpoint

‎dist/vue-grid-layout.js

Lines changed: 1884 additions & 227 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-grid-layout.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/02-basic.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h1>Vue Grid Layout Example 2 - Basic</h1>
2727
:y.sync="item.y"
2828
:w.sync="item.w"
2929
:h.sync="item.h"
30-
:id="item.i"
30+
:i="item.i"
3131
>
3232
<span class="text">{{item.i}}</span>
3333
</grid-item>

‎index.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@ <h1>Vue Grid Layout</h1>
2222
</div>
2323
</div>
2424
<div id="content">
25+
<button @click="decreaseWidth">Decrease Width</button>
26+
<button @click="increaseWidth">Increase Width</button>
2527
<button @click="addItem">Add an item</button>
2628
<br/>
2729
Current Breakpoint: {{breakpoint}} ({{colNum}} columns)
28-
<responsive-grid-layout :layouts.sync="layouts"
30+
<!--<responsive-grid-layout :layouts.sync="layouts"
2931
:layout.sync="layout"
3032
:col-num.sync="colNum"
3133
:breakpoint.sync="breakpoint"
@@ -42,8 +44,8 @@ <h1>Vue Grid Layout</h1>
4244
<span class="text">{{item.i}}</span>
4345
<button @click="removeItem(item)">REMOVE {{item.i}}</button>
4446
</grid-item>
45-
</responsive-grid-layout>
46-
<!--<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
47+
</responsive-grid-layout>-->
48+
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
4749
<grid-item v-for="item in layout"
4850
:x.sync="item.x"
4951
:y.sync="item.y"
@@ -53,7 +55,7 @@ <h1>Vue Grid Layout</h1>
5355
>
5456
<span class="text">{{item.i}}</span>
5557
</grid-item>
56-
</grid-layout>-->
58+
</grid-layout>
5759
</div>
5860

5961
</div>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"vue-style-loader": "^1.0.0",
4444
"vue-loader": "^8.5.2",
4545
"lodash": "^4.13.1",
46+
"element-resize-detector": "^1.1.3",
4647
"webpack": "^1.13.1",
4748
"webpack-dev-server": "^1.14.1",
4849
"extract-text-webpack-plugin": "^1.0.1",

‎src/GridItem.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,7 @@
311311
this.style = createMarkup(style);
312312
},
313313
handleResize: function(event) {
314+
//event.dataTransfer.setData('text', this.i);
314315
const position = getControlPosition(event);
315316
// Get the current drag point from the event. This is used as the offset.
316317
if (position == null) return; // not possible but satisfies flow
@@ -382,12 +383,14 @@
382383
handleDragStart: function(event) {
383384
// console.log("### DRAG START");
384385
this.dragHandler(event, "dragstart");
386+
//event.dataTransfer.setData('text', this.i);
385387
/*// Create an event object with all the data parents need to make a decision here.
386388
const coreEvent = createCoreData(this, x, y);*/
387389
388390
389391
},
390392
handleDrag: function(event) {
393+
//console.log("### DRAG!");
391394
this.dragHandler(event, "drag");
392395
},
393396
handleDragEnd: function(event) {
@@ -433,6 +436,9 @@
433436
const coreEvent = createCoreData(this.lastX, this.lastY, x, y);
434437
newPosition.left = this.dragging.left + coreEvent.deltaX;
435438
newPosition.top = this.dragging.top + coreEvent.deltaY;
439+
// console.log("### drag => " + event.type + ", x=" + x + ", y=" + y);
440+
// console.log("### drag => " + event.type + ", deltaX=" + coreEvent.deltaX + ", deltaY=" + coreEvent.deltaY);
441+
// console.log("### drag end => " + JSON.stringify(newPosition));
436442
this.dragging = newPosition;
437443
break;
438444
}

‎src/GridLayout.vue

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
<script>
1414
var Vue = require('vue');
1515
16+
var elementResizeDetectorMaker = require("element-resize-detector");
17+
1618
import {bottom, compact, getLayoutItem, moveElement, validateLayout} from './utils';
1719
import GridItem from './GridItem.vue'
1820
@@ -84,6 +86,19 @@
8486
compact(self.layout, self.verticalCompact);
8587
8688
self.updateHeight();
89+
self.$nextTick(function() {
90+
// self.onWindowResize();
91+
var erd = elementResizeDetectorMaker({
92+
strategy: "scroll" //<- For ultra performance.
93+
});
94+
erd.listenTo(self.$els.item, function(element) {
95+
self.onWindowResize();
96+
/*var width = element.offsetWidth;
97+
var height = element.offsetHeight;
98+
console.log("Size: " + width + "x" + height);*/
99+
});
100+
});
101+
87102
}
88103
},
89104
watch: {
@@ -94,7 +109,7 @@
94109
});
95110
},
96111
layout: function() {
97-
if (this.layout.length !== this.lastLayoutLength) {
112+
if (this.layout !== undefined && this.layout.length !== this.lastLayoutLength) {
98113
this.lastLayoutLength = this.layout.length;
99114
compact(this.layout, this.verticalCompact);
100115
@@ -117,7 +132,9 @@
117132
}*/
118133
/*console.log("### WIDTH: " + this.$el.offsetWidth);
119134
console.log("### WIDTH 2: " + this.$els.item.offsetWidth);*/
120-
this.width = this.$el.offsetWidth;
135+
if (this.$els !== null && this.$els.item !== null) {
136+
this.width = this.$els.item.offsetWidth;
137+
}
121138
},
122139
containerHeight: function() {
123140
if (!this.autoSize) return;
@@ -129,7 +146,7 @@
129146
if (eventName === "drag" && x == 0 && y == 0) {
130147
return;
131148
}
132-
// console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);
149+
//console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);
133150
var l = getLayoutItem(this.layout, id);
134151
135152
/*

‎src/ResponsiveGridLayout.vue

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
<script>
2020
var Vue = require('vue');
2121
22+
var elementResizeDetectorMaker = require("element-resize-detector");
23+
2224
import {bottom, compact, getLayoutItem, moveElement, validateLayout, findItemInArray, findAndRemove} from './utils';
2325
import {getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, generateResponsiveLayout} from './responsiveUtils';
2426
import GridItem from './GridItem.vue'
@@ -105,7 +107,7 @@
105107
width: null,
106108
lastBreakpoint: null,
107109
mergedStyle: {},
108-
lastLayoutLength: 0
110+
lastLayoutLength: 0,
109111
};
110112
},
111113
ready() {
@@ -129,7 +131,16 @@
129131
130132
self.updateHeight();
131133
self.$nextTick(function() {
132-
self.onWindowResize();
134+
// self.onWindowResize();
135+
var erd = elementResizeDetectorMaker({
136+
strategy: "scroll" //<- For ultra performance.
137+
});
138+
erd.listenTo(self.$els.item, function(element) {
139+
self.onWindowResize();
140+
/*var width = element.offsetWidth;
141+
var height = element.offsetHeight;
142+
console.log("Size: " + width + "x" + height);*/
143+
});
133144
});
134145
}
135146
},
@@ -187,7 +198,7 @@
187198
},
188199
methods: {
189200
onWindowResize: function() {
190-
if (this.$el !== null) {
201+
if (this.$els !== null && this.$els.item !== null) {
191202
this.width = this.$els.item.offsetWidth;
192203
}
193204
},

0 commit comments

Comments
 (0)