gridsterAutoHeight: disable auto-height when widget resized by user

Leedorado · Mar 1, 2018 · 43cd249 · 43cd249
1 parent 570187f
commit 43cd249
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/client/app/directives/gridster-auto-height.js b/client/app/directives/gridster-auto-height.js
@@ -1,15 +1,32 @@
 import * as _ from 'underscore';
 import { requestAnimationFrame } from './utils';
 
-function gridsterAutoHeight($timeout) {
+function gridsterAutoHeight($timeout, $parse) {
   return {
     restrict: 'A',
     require: 'gridsterItem',
     link($scope, $element, attr, controller) {
-      let destroyed = false;
+      let autoSized = true;
+
+      const itemGetter = $parse(attr.gridsterItem);
+
+      $scope.$watch(attr.gridsterItem, () => {
+        const item = _.extend({}, itemGetter($scope));
+        if (!autoSized) {
+          item.autoHeight = false;
+        }
+        if (item.autoHeight) {
+          $element.addClass('gridster-auto-height-enabled');
+        } else {
+          $element.removeClass('gridster-auto-height-enabled');
+        }
+        autoSized = false;
+      }, true);
 
       function updateHeight() {
-        if (controller.gridster) {
+        const item = _.extend({}, itemGetter($scope));
+
+        if (controller.gridster && item.autoHeight) {
           const wrapper = $element[0];
           // Query element, but keep selector order
           const element = _.chain(attr.gridsterAutoHeight.split(','))
@@ -31,25 +48,22 @@ function gridsterAutoHeight($timeout) {
             const additionalHeight = 100 + _.last(controller.gridster.margins);
             const contentsHeight = childrenBounds.bottom - childrenBounds.top;
             $timeout(() => {
-              controller.sizeY = Math.ceil((contentsHeight + additionalHeight) /
+              const sizeY = Math.ceil((contentsHeight + additionalHeight) /
                 controller.gridster.curRowHeight);
+              if (controller.sizeY !== sizeY) {
+                autoSized = true;
+                controller.sizeY = sizeY;
+              } else {
+                autoSized = false;
+              }
             });
           }
 
-          if (!destroyed) {
-            requestAnimationFrame(updateHeight);
-          }
+          requestAnimationFrame(updateHeight);
         }
       }
 
-      if (controller.sizeY < 0) {
-        $element.addClass('gridster-auto-height-enabled');
-        updateHeight();
-
-        $scope.$on('$destroy', () => {
-          destroyed = true;
-        });
-      }
+      updateHeight();
     },
   };
 }

diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
@@ -242,6 +242,7 @@ function DashboardCtrl(
           // Clear saved data and save layout
           _.each(this.dashboard.widgets, (widget) => {
             widget.$savedPosition = undefined;
+            widget.options.position.autoHeight = false;
           });
           saveDashboardLayout();
         } else {

diff --git a/client/app/services/widget.js b/client/app/services/widget.js
@@ -106,6 +106,10 @@ function Widget($resource, $http, Query, Visualization, dashboardGridOptions) {
       pick(widget.options.position, ['col', 'row', 'sizeX', 'sizeY']),
     );
 
+    if (widget.options.position.sizeY < 0) {
+      widget.options.position.autoHeight = true;
+    }
+
     return new WidgetResource(widget);
   }
 

diff --git a/client/app/visualizations/table/index.js b/client/app/visualizations/table/index.js
@@ -20,7 +20,7 @@ const DISPLAY_AS_OPTIONS = [
 const DEFAULT_OPTIONS = {
   itemsPerPage: 15,
   defaultRows: -1,
-  defaultColumns: 4,
+  defaultColumns: 3,
   minColumns: 2,
 };