From 6e12f5d3e99091925b84c206c3a878c793b3c5ef Mon Sep 17 00:00:00 2001
From: xiaoluoboding <xiaoluoboding@gmail.com>
Date: Mon, 25 Nov 2019 13:41:44 +0800
Subject: [PATCH] feat: add static property on smart-widget-grid

---
 README.md                        |  5 ++++-
 app/views/WidgetWithGrid.vue     |  3 +++
 src/packages/SmartWidget.vue     |  5 ++---
 src/packages/SmartWidgetGrid.vue | 16 ++++++++--------
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index b6f086a..e970c39 100644
--- a/README.md
+++ b/README.md
@@ -124,12 +124,14 @@ new Vue({
 
 | Name | Description | Parameters |
 |:--------:|--------|:--------|
-| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |
 | move | Every time an item is being moved and changes position | `(i, newX, newY)` |
 | moved | Every time an item is finished being moved and changes position | `(i, newX, newY)` |
 | resize | Every time an item is being resized and changes size | `(i, newH, newW, newHPx, newWPx)` |
 | resized | Every time an item is finished being moved and changes position | `(i, newH, newW, newHPx, newWPx)` |
 | container-resized | Every time the grid item/layout container changes size (browser window or other) | `(i, newH, newW, newHPx, newWPx)` |
+| on-refresh | Used when the widget need fetching data from ajax methods, usually used with `loading` attribute | - |
+| before-fullscreen | Used when the widget before fullscreen, usually used with `fullscreen` attribute | `true` or `false` |
+| on-fullscreen | Used when the widget is already fullscreen, usually used with `fullscreen` attribute | `true` or `false` |
 
 ## CSS Selector in SmartWidget
 
@@ -150,6 +152,7 @@ new Vue({
 | margin | Says what are the margins of elements inside the grid. | Array | - | `[10, 10]` |
 | isDraggable | Says if the grids items are draggable. | Boolean | `true` or `false` | `true` |
 | isResizable | Says if the grids items are resizable. | Boolean | `true` or `false` | `true` |
+| static | control all widgets won't be draggable, resizable or moved | Boolean | `true` or `false` | `false` |
 
 ## Slot scopes
 
diff --git a/app/views/WidgetWithGrid.vue b/app/views/WidgetWithGrid.vue
index 8e04d6f..cbc29da 100644
--- a/app/views/WidgetWithGrid.vue
+++ b/app/views/WidgetWithGrid.vue
@@ -3,6 +3,7 @@
     :layout="layout"
     :row-height="48"
     :margin="[15, 15]"
+    :is-static="isStatic"
     @layout-updated="onLayoutUpdated"
     @move="onMove"
     @container-resized="onContainerResized">
@@ -49,6 +50,7 @@
       refresh
       is-actived
       :loading="loading"
+      @before-fullscreen="val => isStatic = val"
       @on-refresh="handleRefresh">
       <template v-slot="{contentH}">
         <ve-bar-chart :data="barData" :height="contentH" />
@@ -114,6 +116,7 @@ export default {
   data () {
     return {
       loading: false,
+      isStatic: false,
       layout: [
         { x: 0, y: 0, w: 4, h: 3, i: '0' },
         { x: 4, y: 0, w: 4, h: 3, i: '1' },
diff --git a/src/packages/SmartWidget.vue b/src/packages/SmartWidget.vue
index 96ecaa8..4fcedef 100644
--- a/src/packages/SmartWidget.vue
+++ b/src/packages/SmartWidget.vue
@@ -191,16 +191,15 @@ export default {
       }
       this.isFullScreen = !this.isFullScreen
 
-      // grid-layout useCssTransforms
+      // widget before fullscreen, change the widget to static, so it won't be draggable, resizable or moved
       if (this.isHasGroup) {
-        this.$parent.useCssTransforms = !this.$parent.useCssTransforms
+        this.$emit('before-fullscreen', this.isFullScreen)
       }
 
       // calculate widge-body height
       if (this.isFullScreen) {
         this.$nextTick(_ => {
           this.widgetBodyOldHeight = this.widgetBodyOffsetHeight
-          console.log(document.body.offsetHeight)
           const widgetBodyOffsetHeight = document.body.offsetHeight - this.rowHeight
           this.widgetBodyOffsetHeight = widgetBodyOffsetHeight
         })
diff --git a/src/packages/SmartWidgetGrid.vue b/src/packages/SmartWidgetGrid.vue
index 178721c..a4ea5fa 100644
--- a/src/packages/SmartWidgetGrid.vue
+++ b/src/packages/SmartWidgetGrid.vue
@@ -1,14 +1,14 @@
 <template>
   <grid-layout
     :layout.sync="layout"
-    :use-css-transforms="useCssTransforms"
-    v-bind="layoutAttribute"
+    v-bind="layoutAttrs"
     v-on="gridLayoutEvents"
   >
     <grid-item
       v-for="item in layout"
       drag-ignore-from=".widget-body"
       :key="item.i"
+      :static="isStatic"
       v-bind="item"
       @move="moveEvent"
       @resize="resizeEvent"
@@ -62,16 +62,15 @@ export default {
     resizable: {
       type: Boolean,
       default: true
+    },
+    isStatic: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
     return {
-      useCssTransforms: false
-    }
-  },
-  computed: {
-    layoutAttribute () {
-      return {
+      layoutAttrs: {
         // layout: this.layout,
         colNum: this.colNum,
         rowHeight: this.rowHeight,
@@ -82,6 +81,7 @@ export default {
         isMirrored: false,
         autoSize: true,
         verticalCompact: true,
+        useCssTransforms: false,
         responsive: false
       }
     }