update gridstack.js

troolee · troolee · commit d26c2d662164 · 2015-03-08T11:59:42.000-07:00
diff --git a/demo/knockout.html b/demo/knockout.html
@@ -39,6 +39,7 @@ <h1>knockout.js Demo</h1>
 
         <div>
             <button data-bind="click: add_new_widget">Add new widget</button>
+            <button data-bind="click: change_cell_height">Change Cell Height</button>
         </div>
 
         <br>
@@ -103,6 +104,11 @@ <h1>knockout.js Demo</h1>
                 this.delete_widget = function (item) {
                     self.widgets.remove(item);
                 };
+
+                this.change_cell_height = function (item) {
+                    var grid = $('.grid-stack').data('gridstack');
+                    grid.cell_height(50 + 100 * Math.random());
+                }.bind(this);
             };
 
             var widgets = [
diff --git a/gridstack.js b/gridstack.js
@@ -25,9 +25,10 @@
             return _.sortBy(nodes, function (n) { return dir * (n.x + n.y * width); });
         },
 
-        create_stylesheet: function () {
+        create_stylesheet: function (id) {
             var style = document.createElement("style");
             style.setAttribute("type", "text/css");
+            style.setAttribute("data-gs-id", id);
             if (style.styleSheet) {
                 style.styleSheet.cssText = "";
             }
@@ -387,9 +388,7 @@
         });
 
         this.container.addClass(this.opts._class);
-        this._styles = Utils.create_stylesheet();
-        if (this._styles != null)
-            this._styles._max = 0;
+        this._init_styles();
 
         this.grid = new GridStackEngine(this.opts.width, function (nodes) {
             var max_height = 0;
@@ -469,6 +468,16 @@
         on_resize_handler();
     };
 
+    GridStack.prototype._init_styles = function () {
+        if (this._styles_id) {
+            $('link[rel=stylesheet][data-gs-id=' + this._styles_id + ']').remove();
+        }
+        this._styles_id = 'gridstack-style-' + (Math.random() * 100000).toFixed();
+        this._styles = Utils.create_stylesheet();
+        if (this._styles != null)
+            this._styles._max = 0;
+    };
+
     GridStack.prototype._update_styles = function (max_height) {
         if (this._styles == null) {
             return;
@@ -478,15 +487,7 @@
 
         if (typeof max_height == 'undefined') {
             max_height = this._styles._max;
-            this._styles._max = 0;
-            var f = function () {};
-            if (typeof this._styles.removeRule === 'function')
-                f = this._styles.removeRule;
-            else if (typeof this._styles.deleteRule === 'function')
-                f = this._styles.deleteRule;
-            while (this._styles.rules.length) {
-                f.call(this._styles, 0);
-            }
+            this._init_styles();
             this._update_container_height();
         }
 
