Skip to content

Commit 447de88

Browse files
gmsagmsa
committed
fixes #32
updated vue to 2.2.4 updated interact.js to 1.2.8 updated vue-loader to 11.1.4 updated vue-template-compiler to 2.2.4 updated webpack to 2.2.1 udpated webpack-dev-server to 2.2.4
1 parent 51dadac commit 447de88

File tree

8 files changed

+3566
-2819
lines changed

8 files changed

+3566
-2819
lines changed

‎examples/vue.js‎

Lines changed: 3498 additions & 2770 deletions
Large diffs are not rendered by default.

‎examples/vue.min.js‎

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

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"author": "Gustavo Santos (JBay Solutions) <gustavo.santos@jbaysolutions.com> (http://www.jbaysolutions.com)",
2626
"dependencies": {
2727
"element-resize-detector": "^1.1.10",
28-
"interact.js": "^1.2.6"
28+
"interact.js": "^1.2.8"
2929
},
3030
"devDependencies": {
3131
"babel-core": "^6.0.0",
@@ -38,11 +38,11 @@
3838
"cross-env": "^3.0.0",
3939
"css-loader": "^0.25.0",
4040
"file-loader": "^0.9.0",
41-
"vue-loader": "^10.0.0",
42-
"vue-template-compiler": "^2.1.10",
43-
"webpack": "^2.1.0-beta.25",
44-
"webpack-dev-server": "^2.1.0-beta.9",
45-
"vue": "^2.1.10"
41+
"vue-loader": "^11.1.4",
42+
"vue-template-compiler": "^2.2.4",
43+
"webpack": "^2.2.1",
44+
"webpack-dev-server": "^2.4.2",
45+
"vue": "^2.2.4"
4646
},
4747
"license": "MIT"
4848
}

‎src/App.vue‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,24 @@
3232
:vertical-compact="true"
3333
:use-css-transforms="true"
3434
>
35-
<grid-item v-for="item in layout"
35+
<grid-item v-for="item in layout" :key="item.i"
36+
:x="item.x"
37+
:y="item.y"
38+
:w="item.w"
39+
:h="item.h"
40+
:min-w="2"
41+
:min-h="2"
42+
:i="item.i"
43+
@resize="resize"
44+
@move="move"
45+
@resized="resized"
46+
@moved="moved"
47+
>
48+
<test-element :text="item.i"></test-element>
49+
<!--<button @click="clicked">CLICK ME!</button>-->
50+
</grid-item>
51+
<!--
52+
<grid-item v-for="item in layout" :key="item.i"
3653
:x="item.x"
3754
:y="item.y"
3855
:w="item.w"
@@ -48,8 +65,8 @@
4865
@moved="moved"
4966
>
5067
<test-element :text="item.i"></test-element>
51-
<!--<button @click="clicked">CLICK ME!</button>-->
5268
</grid-item>
69+
-->
5370
</grid-layout>
5471
</div>
5572
</div>
@@ -60,7 +77,7 @@
6077
import GridLayout from './GridLayout.vue';
6178
//import ResponsiveGridLayout from './ResponsiveGridLayout.vue';
6279
import TestElement from './TestElement.vue';
63-
var eventBus = require('./eventBus');
80+
//var eventBus = require('./eventBus');
6481
6582
var testLayout = [
6683
{"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true},
@@ -159,7 +176,7 @@
159176
}
160177
var html = document.getElementsByTagName("html")[0];
161178
html.setAttribute("dir", toggle);
162-
eventBus.$emit('directionchange');
179+
//eventBus.$emit('directionchange');
163180
}
164181
},
165182
}

‎src/GridItem.vue‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
<script>
7070
import {setTopLeft, setTopRight, setTransformRtl, setTransform, createMarkup, getLayoutItem} from './utils';
7171
import {getControlPosition, offsetXYFromParentOf, createCoreData} from './draggableUtils';
72-
var eventBus = require('./eventBus');
72+
// var eventBus = require('./eventBus');
7373
7474
var interact = require("interact.js");
7575
@@ -157,6 +157,7 @@
157157
required: true
158158
}
159159
},
160+
inject: ["eventBus"],
160161
data: function() {
161162
return {
162163
cols: 1,
@@ -224,14 +225,14 @@
224225
this.compact();
225226
};
226227
227-
eventBus.$on('updateWidth', self.updateWidthHandler);
228-
eventBus.$on('compact', self.compactHandler);
229-
eventBus.$on('setDraggable', self.setDraggableHandler);
230-
eventBus.$on('setResizable', self.setResizableHandler);
231-
eventBus.$on('setRowHeight', self.setRowHeightHandler);
232-
eventBus.$on('directionchange', self.directionchangeHandler);
228+
this.eventBus.$on('updateWidth', self.updateWidthHandler);
229+
this.eventBus.$on('compact', self.compactHandler);
230+
this.eventBus.$on('setDraggable', self.setDraggableHandler);
231+
this.eventBus.$on('setResizable', self.setResizableHandler);
232+
this.eventBus.$on('setRowHeight', self.setRowHeightHandler);
233+
this.eventBus.$on('directionchange', self.directionchangeHandler);
233234
234-
/*eventBus.$on('setColNum', function(colNum) {
235+
/*this.eventBus.$on('setColNum', function(colNum) {
235236
self.cols = colNum;
236237
});*/
237238
var direction = (document.dir !=undefined) ?
@@ -241,12 +242,12 @@
241242
},
242243
beforeDestroy: function(){
243244
//Remove listeners
244-
eventBus.$off('updateWidth', self.updateWidthHandler);
245-
eventBus.$off('compact', self.compactHandler);
246-
eventBus.$off('setDraggable', self.setDraggableHandler);
247-
eventBus.$off('setResizable', self.setResizableHandler);
248-
eventBus.$off('setRowHeight', self.setRowHeightHandler);
249-
eventBus.$off('directionchange', self.directionchangeHandler);
245+
this.eventBus.$off('updateWidth', self.updateWidthHandler);
246+
this.eventBus.$off('compact', self.compactHandler);
247+
this.eventBus.$off('setDraggable', self.setDraggableHandler);
248+
this.eventBus.$off('setResizable', self.setResizableHandler);
249+
this.eventBus.$off('setRowHeight', self.setRowHeightHandler);
250+
this.eventBus.$off('directionchange', self.directionchangeHandler);
250251
},
251252
mounted: function() {
252253
this.cols = this.$parent.colNum;
@@ -466,7 +467,7 @@
466467
if (event.type === "resizeend" && (this.previousW !== this.w || this.previousH !== this.h)) {
467468
this.$emit("resized", this.i, pos.h, pos.w);
468469
}
469-
eventBus.$emit("resizeEvent", event.type, this.i, this.x, this.y, pos.h, pos.w);
470+
this.eventBus.$emit("resizeEvent", event.type, this.i, this.x, this.y, pos.h, pos.w);
470471
},
471472
handleDrag(event) {
472473
if (this.isResizing) return;
@@ -544,7 +545,7 @@
544545
if (event.type === "dragend" && (this.previousX !== this.x || this.previousY !== this.y)) {
545546
this.$emit("moved", this.i, pos.x, pos.y);
546547
}
547-
eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
548+
this.eventBus.$emit("dragEvent", event.type, this.i, pos.x, pos.y, this.h, this.w);
548549
},
549550
calcPosition: function(x, y, w, h) {
550551
const colWidth = this.calcColWidth();

‎src/GridLayout.vue‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,18 @@
1717
}
1818
</style>
1919
<script>
20+
import Vue from 'vue';
2021
var elementResizeDetectorMaker = require("element-resize-detector");
2122
2223
import {bottom, compact, getLayoutItem, moveElement, validateLayout} from './utils';
23-
var eventBus = require('./eventBus');
24+
//var eventBus = require('./eventBus');
2425
import GridItem from './GridItem.vue'
2526
2627
export default {
2728
name: "GridLayout",
29+
provide: {
30+
eventBus: new Vue()
31+
},
2832
components: {
2933
GridItem,
3034
},
@@ -100,13 +104,14 @@
100104
self.dragEvent(eventType, i, x, y, h, w);
101105
};
102106
103-
eventBus.$on('resizeEvent', self.resizeEventHandler);
104-
eventBus.$on('dragEvent', self.dragEventHandler);
107+
self.eventBus = self._provided.eventBus;
108+
self.eventBus.$on('resizeEvent', self.resizeEventHandler);
109+
self.eventBus.$on('dragEvent', self.dragEventHandler);
105110
},
106111
beforeDestroy: function(){
107112
//Remove listeners
108-
eventBus.$off('resizeEvent', self.resizeEventHandler);
109-
eventBus.$off('dragEvent', self.dragEventHandler);
113+
this.eventBus.$off('resizeEvent', self.resizeEventHandler);
114+
this.eventBus.$off('dragEvent', self.dragEventHandler);
110115
window.removeEventListener("resize", self.onWindowResize)
111116
},
112117
mounted: function() {
@@ -156,21 +161,21 @@
156161
width: function () {
157162
this.$nextTick(function () {
158163
//this.$broadcast("updateWidth", this.width);
159-
eventBus.$emit("updateWidth", this.width);
164+
this.eventBus.$emit("updateWidth", this.width);
160165
this.updateHeight();
161166
});
162167
},
163168
layout: function () {
164169
this.layoutUpdate();
165170
},
166171
rowHeight: function() {
167-
eventBus.$emit("setRowHeight", this.rowHeight);
172+
this.eventBus.$emit("setRowHeight", this.rowHeight);
168173
},
169174
isDraggable: function() {
170-
eventBus.$emit("setDraggable", this.isDraggable);
175+
this.eventBus.$emit("setDraggable", this.isDraggable);
171176
},
172177
isResizable: function() {
173-
eventBus.$emit("setResizable", this.isResizable);
178+
this.eventBus.$emit("setResizable", this.isResizable);
174179
}
175180
},
176181
methods: {
@@ -181,7 +186,7 @@
181186
compact(this.layout, this.verticalCompact);
182187
183188
//this.$broadcast("updateWidth", this.width);
184-
eventBus.$emit("updateWidth", this.width);
189+
this.eventBus.$emit("updateWidth", this.width);
185190
this.updateHeight();
186191
}
187192
},
@@ -208,7 +213,7 @@
208213
this.placeholder.w = w;
209214
this.placeholder.h = h;
210215
//this.$broadcast("updateWidth", this.width);
211-
eventBus.$emit("updateWidth", this.width);
216+
this.eventBus.$emit("updateWidth", this.width);
212217
} else {
213218
this.isDragging = false;
214219
}
@@ -220,7 +225,7 @@
220225
this.layout = moveElement(this.layout, l, x, y, true);
221226
compact(this.layout, this.verticalCompact);
222227
// needed because vue can't detect changes on array element properties
223-
eventBus.$emit("compact");
228+
this.eventBus.$emit("compact");
224229
this.updateHeight();
225230
},
226231
resizeEvent: function (eventName, id, x, y, h, w) {
@@ -232,7 +237,7 @@
232237
this.placeholder.w = w;
233238
this.placeholder.h = h;
234239
//this.$broadcast("updateWidth", this.width);
235-
eventBus.$emit("updateWidth", this.width);
240+
this.eventBus.$emit("updateWidth", this.width);
236241
237242
} else {
238243
this.isDragging = false;
@@ -241,7 +246,7 @@
241246
l.h = h;
242247
l.w = w;
243248
compact(this.layout, this.verticalCompact);
244-
eventBus.$emit("compact");
249+
this.eventBus.$emit("compact");
245250
this.updateHeight();
246251
},
247252
},

‎src/app.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ var testLayout = [
2121
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
2222
];
2323

24-
// var Vue = require('vue');
2524

2625
//Vue.config.devtools = true;
2726

‎src/eventBus.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)