Merge pull request jbaysolutions#421 from insighio/master

gmsa · web-flow · commit 57aa4b5a5af6 · 2020-07-31T09:09:14.000+01:00
Support initial responsive layouts and breakpoint change event
diff --git a/README.md b/README.md
@@ -175,6 +175,16 @@ Include the browser-ready bundle (download from [releases](https://github.com/jb
 
     The value must be an `Array` of `Object` items. Each item must have `i`, `x`, `y`, `w` and `h` properties. Please refer to the documentation for `GridItem` below for more information.
 
+* **responsiveLayouts**
+
+    * type: `Object`
+    * required: `false`
+    * default : `{}`
+
+    This is the initial layouts of the grid per breakpoint if `responsive` is set to `true`.
+    The keys of the `Object` are breakpoint names and each value is an `Array` of `Object` items as defined by `layout` prop. eg:{ lg:[layout items], md:[layout items] }.
+    Setting the prop after the creation of the GridLayout has no effect.
+
 * **colNum**
     
     * type: `Number`
@@ -469,6 +479,7 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
             @layout-mounted="layoutMountedEvent"
             @layout-ready="layoutReadyEvent"
             @layout-updated="layoutUpdatedEvent"
+            @breakpoint-changed="breakpointChangedEvent"
     >
 
         <grid-item v-for="item in layout"
@@ -626,6 +637,24 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
     },
 ``` 
 
+* **breakpointChangedEvent**
+
+    Breakpoint Changed event
+
+    Every time the breakpoint value changes due to window resize
+ 
+```javascript
+    /**
+     * 
+     * @param newBreakpoint the breakpoint name
+     * @param newLayout the chosen layout for the breakpoint
+     * 
+     */
+    breakpointChangedEvent: function(newBreakpoint, newLayout){
+        console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
+    },
+``` 
+
 
 ## Contribute
 
diff --git a/examples/06-responsive.html b/examples/06-responsive.html
@@ -14,7 +14,7 @@ <h1>Vue Grid Layout Example 6 - Responsive</h1>
     <br/>
     <a href="05-mirrored.html">Previous example: Mirrored grid layout</a>
     <br/>
-    <a href="07-prevent-collision.html">Next example: Responsive</a>
+    <a href="07-prevent-collision.html">Next example: Prevent collision</a>
 
     <div id="app" style="width: 100%;">
         <!--<pre>{{ $data | json }}</pre>-->
diff --git a/examples/07-prevent-collision.html b/examples/07-prevent-collision.html
@@ -13,6 +13,8 @@ <h1>Vue Grid Layout Example 8 - Prevent Collision</h1>
     <a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
     <br/>
     <a href="06-responsive.html">Previous example: Responsive</a>
+    <br/>
+    <a href="08-responsive-predefined-layouts.html">Next example: Responsive - predefined layouts</a>
 
     <div id="app" style="width: 100%;">
         <!--<pre>{{ $data | json }}</pre>-->
diff --git a/examples/08-responsive-predefined-layouts.html b/examples/08-responsive-predefined-layouts.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Vue Grid Layout Example 1 - Basic Responsive</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="app.css">
+    <!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
+</head>
+<body>
+    <h1>Vue Grid Layout Example 6 - Responsive</h1>
+
+    <a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
+    <br/>
+    <a href="07-prevent-collision.html">Previous example: Prevent collision</a>
+
+    <div id="app" style="width: 100%;">
+        <!--<pre>{{ $data | json }}</pre>-->
+        <div>
+            <div class="layoutJSON">
+                Displayed as <code>[x, y, w, h]</code>:
+                <div class="columns">
+                    <div class="layoutItem" v-for="item in layout">
+                        <b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="content">
+            <!--<button @click="decreaseWidth">Decrease Width</button>
+            <button @click="increaseWidth">Increase Width</button>
+            <button @click="addItem">Add an item</button>-->
+            <input type="checkbox" v-model="draggable"/> Draggable
+            <input type="checkbox" v-model="resizable"/> Resizable
+            <input type="checkbox" v-model="responsive"/> Responsive
+            <br/>
+            <grid-layout :layout.sync="layout"
+                         :responsive-layouts="layouts"
+                         :col-num="12"
+                         :row-height="30"
+                         :is-draggable="draggable"
+                         :is-resizable="resizable"
+                         :vertical-compact="true"
+                         :use-css-transforms="true"
+                         :responsive="responsive"
+                         @breakpoint-changed="breakpointChangedEvent"
+            >
+                <grid-item v-for="item in layout"
+                           :x="item.x"
+                           :y="item.y"
+                           :w="item.w"
+                           :h="item.h"
+                           :i="item.i"
+                        >
+                    <span class="text">{{item.i}}</span>
+                </grid-item>
+            </grid-layout>
+        </div>
+
+    </div>
+    <script src="vue.min.js"></script>
+    <script src="../dist/vue-grid-layout.umd.min.js"></script>
+    <script src="08-responsive-predefined-layouts.js"></script>
+</body>
+</html>
diff --git a/examples/08-responsive-predefined-layouts.js b/examples/08-responsive-predefined-layouts.js
@@ -0,0 +1,115 @@
+var testLayouts = {
+    md: [
+        {"x":0, "y":0, "w":2, "h":2, "i":"0"},
+        {"x":2, "y":0, "w":2, "h":4, "i":"1"},
+        {"x":4, "y":0, "w":2, "h":5, "i":"2"},
+        {"x":6, "y":0, "w":2, "h":3, "i":"3"},
+        {"x":2, "y":4, "w":2, "h":3, "i":"4"},
+        {"x":4, "y":5, "w":2, "h":3, "i":"5"},
+        {"x":0, "y":2, "w":2, "h":5, "i":"6"},
+        {"x":2, "y":7, "w":2, "h":5, "i":"7"},
+        {"x":4, "y":8, "w":2, "h":5, "i":"8"},
+        {"x":6, "y":3, "w":2, "h":4, "i":"9"},
+        {"x":0, "y":7, "w":2, "h":4, "i":"10"},
+        {"x":2, "y":19, "w":2, "h":4, "i":"11"},
+        {"x":0, "y":14, "w":2, "h":5, "i":"12"},
+        {"x":2, "y":14, "w":2, "h":5, "i":"13"},
+        {"x":4, "y":13, "w":2, "h":4, "i":"14"},
+        {"x":6, "y":7, "w":2, "h":4, "i":"15"},
+        {"x":0, "y":19, "w":2, "h":5, "i":"16"},
+        {"x":8, "y":0, "w":2, "h":2, "i":"17"},
+        {"x":0, "y":11, "w":2, "h":3, "i":"18"},
+        {"x":2, "y":12, "w":2, "h":2, "i":"19"}
+        ],
+    lg: [
+        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
+        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
+        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
+        {"x":6,"y":0,"w":2,"h":3,"i":"3"},
+        {"x":8,"y":0,"w":2,"h":3,"i":"4"},
+        {"x":10,"y":0,"w":2,"h":3,"i":"5"},
+        {"x":0,"y":5,"w":2,"h":5,"i":"6"},
+        {"x":2,"y":5,"w":2,"h":5,"i":"7"},
+        {"x":4,"y":5,"w":2,"h":5,"i":"8"},
+        {"x":6,"y":4,"w":2,"h":4,"i":"9"},
+        {"x":8,"y":4,"w":2,"h":4,"i":"10"},
+        {"x":10,"y":4,"w":2,"h":4,"i":"11"},
+        {"x":0,"y":10,"w":2,"h":5,"i":"12"},
+        {"x":2,"y":10,"w":2,"h":5,"i":"13"},
+        {"x":4,"y":8,"w":2,"h":4,"i":"14"},
+        {"x":6,"y":8,"w":2,"h":4,"i":"15"},
+        {"x":8,"y":10,"w":2,"h":5,"i":"16"},
+        {"x":10,"y":4,"w":2,"h":2,"i":"17"},
+        {"x":0,"y":9,"w":2,"h":3,"i":"18"},
+        {"x":2,"y":6,"w":2,"h":2,"i":"19"}
+    ],
+};
+
+// var GridLayout = VueGridLayout.GridLayout;
+// var GridItem = VueGridLayout.GridItem;
+
+new Vue({
+    el: '#app',
+    // components: {
+    //     "GridLayout": GridLayout,
+    //     "GridItem": GridItem
+    // },
+    data: {
+        layouts: testLayouts,
+        layout: testLayouts["lg"],
+        draggable: true,
+        resizable: true,
+        responsive: true,
+        index: 0
+    },
+/*
+    mounted: function () {
+        this.index = this.layout.length;
+    },
+    methods: {
+        increaseWidth: function(item) {
+            var width = document.getElementById("content").offsetWidth;
+            width += 20;
+            document.getElementById("content").style.width = width+"px";
+        },
+        decreaseWidth: function(item) {
+
+            var width = document.getElementById("content").offsetWidth;
+            width -= 20;
+            document.getElementById("content").style.width = width+"px";
+        },
+        removeItem: function(item) {
+            //console.log("### REMOVE " + item.i);
+            this.layout.splice(this.layout.indexOf(item), 1);
+        },
+        addItem: function() {
+            var self = this;
+            //console.log("### LENGTH: " + this.layout.length);
+            var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
+            this.index++;
+            this.layout.push(item);
+        },
+        breakpointChangedEvent: function(newBreakpoint, newLayout){
+            console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
+        }
+    }
+*/
+});
+
+/*
+function generateLayout() {
+    return _.map(_.range(0, 25), function (item, i) {
+        var y = Math.ceil(Math.random() * 4) + 1;
+        return {
+            x: _.random(0, 5) * 2 % 12,
+            y: Math.floor(i / 6) * y,
+            w: 2,
+            h: y,
+            i: i.toString(),
+            static: Math.random() < 0.05
+        };
+    });
+}*/
+
+
+
diff --git a/src/App.vue b/src/App.vue
@@ -50,6 +50,7 @@
                     @layout-mounted="layoutMountedEvent"
                     @layout-ready="layoutReadyEvent"
                     @layout-updated="layoutUpdatedEvent"
+                    @breakpoint-changed="breakpointChangedEvent"
             >
                 <grid-item v-for="item in layout" :key="item.i"
                            :static="item.static"
@@ -225,6 +226,9 @@
             layoutUpdatedEvent: function(newLayout){
                 console.log("Updated layout: ", newLayout)
             },
+            breakpointChangedEvent: function(newBreakpoint, newLayout){
+                console.log("breakpoint changed breakpoint=", newBreakpoint, ", layout: ", newLayout );
+            }
 
         },
     }
diff --git a/src/components/GridLayout.vue b/src/components/GridLayout.vue
@@ -89,6 +89,12 @@
                 type: Boolean,
                 default: false
             },
+            responsiveLayouts: {
+                type: Object,
+                default: function() {
+                    return {};
+                }
+            },
             breakpoints:{
                 type: Object,
                 default: function(){return{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
@@ -381,7 +387,6 @@
 
             // finds or generates new layouts for set breakpoints
             responsiveGridLayout(){
-
                 let newBreakpoint = getBreakpointFromWidth(this.breakpoints, this.width);
                 let newCols = getColsFromBreakpoint(newBreakpoint, this.cols);
 
@@ -403,6 +408,10 @@
                 // Store the new layout.
                 this.layouts[newBreakpoint] = layout;
 
+                if (this.lastBreakpoint !== newBreakpoint) {
+                    this.$emit('breakpoint-changed', newBreakpoint, layout);
+                }
+
                 // new prop sync
                 this.$emit('update:layout', layout);
 
@@ -413,7 +422,7 @@
             // clear all responsive layouts
             initResponsiveFeatures(){
                 // clear layouts
-                this.layouts = {};
+                this.layouts = Object.assign({}, this.responsiveLayouts);
             },
 
             // find difference in layouts
