Skip to content

Commit 8aeb2ce

Browse files
gmsagmsa
committed
responsive grid working
1 parent 6c0c9d2 commit 8aeb2ce

16 files changed

+614
-10490
lines changed

‎dist/vue-grid-layout.js

Lines changed: 381 additions & 10380 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 & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/01-basic-responsive.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,17 @@ <h1>Vue Grid Layout Example 1 - Basic Responsive</h1>
2121
</div>
2222
</div>
2323
<div id="content">
24-
<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
24+
<responsive-grid-layout :layout.sync="layout"
25+
:layouts="layouts"
26+
:row-height="30"
27+
:is-draggable="true"
28+
:vertical-compact="true">
2529
<grid-item v-for="item in layout"
2630
:x.sync="item.x"
2731
:y.sync="item.y"
2832
:w.sync="item.w"
2933
:h.sync="item.h"
30-
:id="item.i"
34+
:i="item.i"
3135
>
3236
<span class="text">{{item.i}}</span>
3337
</grid-item>

‎examples/01-basic-responsive.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,11 @@ new Vue({
3737
},
3838
data: {
3939
layout: testLayout,
40-
layouts: {lg: testLayout}
40+
layouts: {}
4141
},
42+
ready: function() {
43+
this.layouts = {lg: this.layout};
44+
}
4245
});
4346

4447

‎examples/02-basic.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="app.css">
88
</head>
99
<body>
10-
<h1>Vue Grid Layout Example 1 - Basic Responsive</h1>
10+
<h1>Vue Grid Layout Example 2 - Basic</h1>
1111
<div id="app" style="width: 100%;">
1212
<!--<pre>{{ $data | json }}</pre>-->
1313
<div>

‎index.html

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>vue-grid-layout</title>
5+
<title>Vue Grid Layout</title>
66
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
77
<link rel="stylesheet" href="examples/app.css">
88
</head>
99
<body>
1010
<h1>Vue Grid Layout</h1>
1111
<div id="app" style="width: 100%;">
1212
<!--<pre>{{ $data | json }}</pre>-->
13+
<!--<pre>{{ layouts | json }}</pre>-->
1314
<div>
1415
<div class="layoutJSON">
1516
Displayed as <code>[x, y, w, h]</code>:
@@ -21,15 +22,25 @@ <h1>Vue Grid Layout</h1>
2122
</div>
2223
</div>
2324
<div id="content">
24-
<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
25+
<button @click="addItem">Add an item</button>
26+
<br/>
27+
Current Breakpoint: {{breakpoint}} ({{colNum}} columns)
28+
<responsive-grid-layout :layouts.sync="layouts"
29+
:layout.sync="layout"
30+
:col-num.sync="colNum"
31+
:breakpoint.sync="breakpoint"
32+
:row-height="30"
33+
:is-draggable="true"
34+
:vertical-compact="true">
2535
<grid-item v-for="item in layout"
2636
:x.sync="item.x"
2737
:y.sync="item.y"
2838
:w.sync="item.w"
2939
:h.sync="item.h"
30-
:id="item.i"
40+
:i="item.i"
3141
>
3242
<span class="text">{{item.i}}</span>
43+
<button @click="removeItem(item)">REMOVE {{item.i}}</button>
3344
</grid-item>
3445
</responsive-grid-layout>
3546
<!--<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
@@ -38,14 +49,15 @@ <h1>Vue Grid Layout</h1>
3849
:y.sync="item.y"
3950
:w.sync="item.w"
4051
:h.sync="item.h"
41-
:id="item.i"
52+
:i="item.i"
4253
>
4354
<span class="text">{{item.i}}</span>
4455
</grid-item>
4556
</grid-layout>-->
4657
</div>
4758

4859
</div>
60+
<script src="node_modules/vue/dist/vue.js"></script>
4961
<script src="build/bundle.js"></script>
5062
</body>
5163
</html>

‎src/GridItem.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,11 @@
173173
type: Boolean,
174174
required: true
175175
},*/
176+
static: {
177+
type: Boolean,
178+
required: false,
179+
default: false
180+
},
176181
x: {
177182
type: Number,
178183
required: true
@@ -189,7 +194,7 @@
189194
type: Number,
190195
required: true
191196
},
192-
id: {
197+
i: {
193198
required: true
194199
},
195200
},
@@ -370,7 +375,7 @@
370375
this.lastH = y;
371376
372377
if (shouldUpdate) {
373-
this.$dispatch("resizeEvent", event.type, this.id, this.h, this.w);
378+
this.$dispatch("resizeEvent", event.type, this.i, this.h, this.w);
374379
}
375380
376381
},
@@ -445,7 +450,7 @@
445450
this.lastY = y;
446451
447452
if (shouldUpdate) {
448-
this.$dispatch("dragEvent", eventName, this.id, this.x, this.y);
453+
this.$dispatch("dragEvent", eventName, this.i, this.x, this.y);
449454
}
450455
},
451456
calcPosition: function(x, y, w, h) {
@@ -531,7 +536,7 @@
531536
this.containerWidth = width;
532537
},
533538
compact: function(layout) {
534-
var l = getLayoutItem(layout, this.id);
539+
var l = getLayoutItem(layout, this.i);
535540
this.x = l.x;
536541
this.y = l.y;
537542
this.h = l.h;

‎src/GridLayout.vue

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
2-
<div class="vue-grid-layout container" :style="mergedStyle">
2+
<div v-el:item class="vue-grid-layout" :style="mergedStyle">
33
<slot></slot>
44
</div>
5+
<!--<pre>{{width|json}}</pre>-->
56
</template>
67
<style>
78
.vue-grid-layout {
@@ -12,7 +13,7 @@
1213
<script>
1314
var Vue = require('vue');
1415
15-
import {bottom, compact, getLayoutItem, moveElement} from './utils';
16+
import {bottom, compact, getLayoutItem, moveElement, validateLayout} from './utils';
1617
import GridItem from './GridItem.vue'
1718
1819
export default {
@@ -67,21 +68,23 @@
6768
},
6869
data: function() {
6970
return {
70-
mergedStyle: {
71-
}
71+
mergedStyle: {},
72+
lastLayoutLength: 0
7273
};
7374
},
7475
ready() {
75-
if (this.width === null) {
76-
this.$nextTick(function() {
77-
// this.width = this.$parent.$el.offsetWidth - (this.margin[0] * 2);
78-
this.width = this.$parent.$el.offsetWidth;
79-
window.addEventListener('resize', this.onWindowResize);
80-
});
81-
}
82-
this.layout = compact(this.layout, this.verticalCompact);
76+
validateLayout(this.layout);
77+
var self = this;
78+
window.onload = function() {
79+
if (self.width === null) {
80+
self.onWindowResize();
81+
//self.width = self.$el.offsetWidth;
82+
window.addEventListener('resize', self.onWindowResize);
83+
}
84+
compact(self.layout, self.verticalCompact);
8385
84-
this.updateHeight();
86+
self.updateHeight();
87+
}
8588
},
8689
watch: {
8790
width: function() {
@@ -90,6 +93,17 @@
9093
this.updateHeight();
9194
});
9295
},
96+
layout: function() {
97+
if (this.layout.length !== this.lastLayoutLength) {
98+
this.lastLayoutLength = this.layout.length;
99+
compact(this.layout, this.verticalCompact);
100+
101+
//this.$nextTick(function () {
102+
this.$broadcast("updateWidth", this.width);
103+
this.updateHeight();
104+
//});
105+
}
106+
}
93107
},
94108
methods: {
95109
updateHeight: function() {
@@ -98,9 +112,12 @@
98112
};
99113
},
100114
onWindowResize: function() {
101-
if (this.$parent !== null && this.$parent.$el.offsetWidth !== undefined) {
115+
/*if (this.$parent !== null && this.$parent.$el.offsetWidth !== undefined) {
102116
this.width = this.$parent.$el.offsetWidth;
103-
}
117+
}*/
118+
/*console.log("### WIDTH: " + this.$el.offsetWidth);
119+
console.log("### WIDTH 2: " + this.$els.item.offsetWidth);*/
120+
this.width = this.$el.offsetWidth;
104121
},
105122
containerHeight: function() {
106123
if (!this.autoSize) return;
@@ -124,7 +141,7 @@
124141
125142
// Move the element to the dragged ___location.
126143
this.layout = moveElement(this.layout, l, x, y, true);
127-
this.layout = compact(this.layout, this.verticalCompact);
144+
compact(this.layout, this.verticalCompact);
128145
// needed because vue can't detect changes on array element properties
129146
this.$broadcast("compact", this.layout);
130147
this.updateHeight();
@@ -143,8 +160,9 @@
143160
*/
144161
145162
// Move the element to the dragged ___location.
146-
this.layout = compact(this.layout, this.verticalCompact);
163+
compact(this.layout, this.verticalCompact);
147164
this.$broadcast("compact", this.layout);
165+
this.updateHeight();
148166
},
149167
}
150168
}

0 commit comments

Comments
 (0)