Skip to content

Commit db5b494

Browse files
ftylitakftylitak
committed
updated examples to utilize responsive-layouts prop and breakpoint-changed event + fix link name at file 06-responsive.html
1 parent 3bb5318 commit db5b494

File tree

5 files changed

+187
-1
lines changed

5 files changed

+187
-1
lines changed

‎examples/06-responsive.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1>Vue Grid Layout Example 6 - Responsive</h1>
1414
<br/>
1515
<a href="05-mirrored.html">Previous example: Mirrored grid layout</a>
1616
<br/>
17-
<a href="07-prevent-collision.html">Next example: Responsive</a>
17+
<a href="07-prevent-collision.html">Next example: Prevent collision</a>
1818

1919
<div id="app" style="width: 100%;">
2020
<!--<pre>{{ $data | json }}</pre>-->

‎examples/07-prevent-collision.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ <h1>Vue Grid Layout Example 8 - Prevent Collision</h1>
1313
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
1414
<br/>
1515
<a href="06-responsive.html">Previous example: Responsive</a>
16+
<br/>
17+
<a href="08-responsive-predefined-layouts.html">Next example: Responsive - predefined layouts</a>
1618

1719
<div id="app" style="width: 100%;">
1820
<!--<pre>{{ $data | json }}</pre>-->

‎examples/08-responsive-predefined-layouts.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 1 - Basic Responsive</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
9+
</head>
10+
<body>
11+
<h1>Vue Grid Layout Example 6 - Responsive</h1>
12+
13+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
14+
<br/>
15+
<a href="07-prevent-collision.html">Previous example: Prevent collision</a>
16+
17+
<div id="app" style="width: 100%;">
18+
<!--<pre>{{ $data | json }}</pre>-->
19+
<div>
20+
<div class="layoutJSON">
21+
Displayed as <code>[x, y, w, h]</code>:
22+
<div class="columns">
23+
<div class="layoutItem" v-for="item in layout">
24+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
<div id="content">
30+
<!--<button @click="decreaseWidth">Decrease Width</button>
31+
<button @click="increaseWidth">Increase Width</button>
32+
<button @click="addItem">Add an item</button>-->
33+
<input type="checkbox" v-model="draggable"/> Draggable
34+
<input type="checkbox" v-model="resizable"/> Resizable
35+
<input type="checkbox" v-model="responsive"/> Responsive
36+
<br/>
37+
<grid-layout :layout.sync="layout"
38+
:responsive-layouts="layouts"
39+
:col-num="12"
40+
:row-height="30"
41+
:is-draggable="draggable"
42+
:is-resizable="resizable"
43+
:vertical-compact="true"
44+
:use-css-transforms="true"
45+
:responsive="responsive"
46+
@breakpoint-changed="breakpointChangedEvent"
47+
>
48+
<grid-item v-for="item in layout"
49+
:x="item.x"
50+
:y="item.y"
51+
:w="item.w"
52+
:h="item.h"
53+
:i="item.i"
54+
>
55+
<span class="text">{{item.i}}</span>
56+
</grid-item>
57+
</grid-layout>
58+
</div>
59+
60+
</div>
61+
<script src="vue.min.js"></script>
62+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
63+
<script src="08-responsive-predefined-layouts.js"></script>
64+
</body>
65+
</html>

‎examples/08-responsive-predefined-layouts.js

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
var testLayouts = {
2+
md: [
3+
{"x":0, "y":0, "w":2, "h":2, "i":"0"},
4+
{"x":2, "y":0, "w":2, "h":4, "i":"1"},
5+
{"x":4, "y":0, "w":2, "h":5, "i":"2"},
6+
{"x":6, "y":0, "w":2, "h":3, "i":"3"},
7+
{"x":2, "y":4, "w":2, "h":3, "i":"4"},
8+
{"x":4, "y":5, "w":2, "h":3, "i":"5"},
9+
{"x":0, "y":2, "w":2, "h":5, "i":"6"},
10+
{"x":2, "y":7, "w":2, "h":5, "i":"7"},
11+
{"x":4, "y":8, "w":2, "h":5, "i":"8"},
12+
{"x":6, "y":3, "w":2, "h":4, "i":"9"},
13+
{"x":0, "y":7, "w":2, "h":4, "i":"10"},
14+
{"x":2, "y":19, "w":2, "h":4, "i":"11"},
15+
{"x":0, "y":14, "w":2, "h":5, "i":"12"},
16+
{"x":2, "y":14, "w":2, "h":5, "i":"13"},
17+
{"x":4, "y":13, "w":2, "h":4, "i":"14"},
18+
{"x":6, "y":7, "w":2, "h":4, "i":"15"},
19+
{"x":0, "y":19, "w":2, "h":5, "i":"16"},
20+
{"x":8, "y":0, "w":2, "h":2, "i":"17"},
21+
{"x":0, "y":11, "w":2, "h":3, "i":"18"},
22+
{"x":2, "y":12, "w":2, "h":2, "i":"19"}
23+
],
24+
lg: [
25+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
26+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
27+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
28+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
29+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
30+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
31+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
32+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
33+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
34+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
35+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
36+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
37+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
38+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
39+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
40+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
41+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
42+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
43+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
44+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
45+
],
46+
};
47+
48+
// var GridLayout = VueGridLayout.GridLayout;
49+
// var GridItem = VueGridLayout.GridItem;
50+
51+
new Vue({
52+
el: '#app',
53+
// components: {
54+
// "GridLayout": GridLayout,
55+
// "GridItem": GridItem
56+
// },
57+
data: {
58+
layouts: testLayouts,
59+
layout: testLayouts["lg"],
60+
draggable: true,
61+
resizable: true,
62+
responsive: true,
63+
index: 0
64+
},
65+
/*
66+
mounted: function () {
67+
this.index = this.layout.length;
68+
},
69+
methods: {
70+
increaseWidth: function(item) {
71+
var width = document.getElementById("content").offsetWidth;
72+
width += 20;
73+
document.getElementById("content").style.width = width+"px";
74+
},
75+
decreaseWidth: function(item) {
76+
77+
var width = document.getElementById("content").offsetWidth;
78+
width -= 20;
79+
document.getElementById("content").style.width = width+"px";
80+
},
81+
removeItem: function(item) {
82+
//console.log("### REMOVE " + item.i);
83+
this.layout.splice(this.layout.indexOf(item), 1);
84+
},
85+
addItem: function() {
86+
var self = this;
87+
//console.log("### LENGTH: " + this.layout.length);
88+
var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
89+
this.index++;
90+
this.layout.push(item);
91+
},
92+
breakpointChangedEvent: function(newBreakpoint, newLayout){
93+
console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
94+
}
95+
}
96+
*/
97+
});
98+
99+
/*
100+
function generateLayout() {
101+
return _.map(_.range(0, 25), function (item, i) {
102+
var y = Math.ceil(Math.random() * 4) + 1;
103+
return {
104+
x: _.random(0, 5) * 2 % 12,
105+
y: Math.floor(i / 6) * y,
106+
w: 2,
107+
h: y,
108+
i: i.toString(),
109+
static: Math.random() < 0.05
110+
};
111+
});
112+
}*/
113+
114+
115+

‎src/App.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
@layout-mounted="layoutMountedEvent"
5151
@layout-ready="layoutReadyEvent"
5252
@layout-updated="layoutUpdatedEvent"
53+
@breakpoint-changed="breakpointChangedEvent"
5354
>
5455
<grid-item v-for="item in layout" :key="item.i"
5556
:static="item.static"
@@ -225,6 +226,9 @@
225226
layoutUpdatedEvent: function(newLayout){
226227
console.log("Updated layout: ", newLayout)
227228
},
229+
breakpointChangedEvent: function(newBreakpoint, newLayout){
230+
console.log("breakpoint changed breakpoint=", newBreakpoint, ", layout: ", newLayout );
231+
}
228232
229233
},
230234
}

0 commit comments

Comments
 (0)