Merge pull request tariqbuilds#150 from arnaudbey/keep-widget-ordered

Keep widget ordered

Author: tariqbuilds

index.html

@@ -71,7 +71,7 @@
                             A simple web dashboard to monitor your server.
                         </div>
                     </div>
-                    <div class="row">
+                    <div id="widgets" class="row">
                         <div class="span3">
                             <div id="general-info-widget" class="widget widget-table action-table">
                                 <div class="widget-header">
@@ -133,7 +133,7 @@ <h3>
                                     <div id="refresh-ram" class="btn icon-refresh js-refresh-info"></div>
                                 </div><!-- /widget-header -->
                                 <div class="widget-content">
-                                    <div class="widget big-stats-container">
+                                    <div class="big-stats-container">
                                         <div class="widget-content">
                                             <div class="cf big_stats">
                                                 <div class="stat">
@@ -153,8 +153,8 @@ <h3>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="row">
+                    
+
                         <div class="span6">
                             <div id="disk-usage-widget" class="widget widget-table">
                                 <div class="widget-header">
@@ -183,8 +183,7 @@ <h3>
                                 </div><!-- /widget-content -->
                             </div><!-- /widget -->
                         </div><!-- /span -->
-                    </div><!-- /row -->
-                    <div class="row">
+                    
                         <div class="span6">
                             <div id="dns-lease-widget" class="widget widget-table">
                                 <div class="widget-header">
@@ -229,8 +228,7 @@ <h3>
                                 </div><!-- /widget-content -->
                             </div><!-- /widget -->
                         </div><!-- /span -->
-                    </div><!-- /row -->
-                    <div class="row">
+                    
                         <div class="span4">
                             <div id="netstat-widget" class="widget widget-table">
                                 <div class="widget-header">
@@ -275,8 +273,7 @@ <h3>
                                 </div><!-- /widget-content -->
                             </div><!-- /widget -->
                         </div><!-- /span -->
-                    </div>
-                    <div class="row">
+                    
                         <div class="span6">
                             <div id="users-widget" class="widget widget-table action-table">
                                 <div class="widget-header">
@@ -305,8 +302,7 @@ <h3>
                                 </div><!-- /widget-content -->
                             </div><!-- /widget -->
                         </div><!-- /span6 -->
-                    </div><!-- /row -->
-                    <div class="row">
+                    
                         <div class="span12">
                             <div id="process-widget" class="widget widget-table">
                                 <div class="widget-header">

js/base.js

@@ -1,4 +1,7 @@
 $(document).ready(function() {
+    // keep widgets ordered
+    keepWidgetOrdered();
+
     // hide localstored hidden widgets
     keepWidgetHidden();
 
@@ -70,14 +73,21 @@ function pulseElement(element, times, interval) {
  *
  */
 
-$( ".row" ).sortable({
-      connectWith: ".row",
+$( "#widgets" ).sortable({
       handle: ".widget-header",
       cancel: "#filter-ps",
       cursor: "move",
       opacity: 0.7,
       scrollSensitivity:10,
-      tolerance: 'pointer'
+      tolerance: 'pointer',
+      stop: function(event, ui) {
+            // save widget order in localstorage
+            var newOrder = new Array();
+            $('.widget').each(function() {
+                newOrder.push($(this).attr("id"));
+            });
+            localStorage.setItem('positions', JSON.stringify(newOrder));
+        }
  });
 
 /**
@@ -114,8 +124,14 @@ $('.open-widget').live('click',function(){
     // decrement closed-widget-count 
     closedWidgetCount.text( Number(closedWidgetCount.text()) - 1);
 
-    // remove widget from localstorage
-    window.localStorage.removeItem( widgetIdentifier );
+     // remove widget from localstorage
+    var localData = JSON.parse(window.localStorage.getItem('hidden'));
+    for(var i = localData.length; i--;){
+        if (localData[i] == widgetIdentifier) {
+            localData.splice(i, 1);
+        } 
+    }
+    localStorage.setItem('hidden', JSON.stringify(localData));
 });
 
 
@@ -133,12 +149,41 @@ function hideWidget(widget, speed){
     // add to hidden list
     closedWidgets.append('<li><a class="open-widget" data-id="'+widgetIdentifier+'"><i class="icon-plus-sign"></i>  '+widgetName+'</a></li>');
 
-    // add widget to localstorage
-    window.localStorage.setItem(widgetIdentifier, null);
+    // add widget to localstorage (and create item if needed)
+    var localData = JSON.parse(window.localStorage.getItem('hidden'));
+    if(localData == null) {
+        hidden = new Array();
+        hidden.push(widgetIdentifier);
+        localStorage.setItem('hidden', JSON.stringify(hidden));
+    }
+    else{
+        if (!isInArray(localData, widgetIdentifier)) {
+            localData.push(widgetIdentifier);
+            localStorage.setItem('hidden', JSON.stringify(localData));
+        }
+    }
 }
 
 function keepWidgetHidden(){
-    for(var i in window.localStorage){
-        hideWidget( $("#" + i), 0 );
+    var localData = JSON.parse(window.localStorage.getItem('hidden'));
+    if(localData!=null) {
+        $.each(localData, function(i,value){
+             hideWidget( $("#" + value), 0 );
+        });
     }
+}
+
+function keepWidgetOrdered(){
+    var localData = JSON.parse(window.localStorage.getItem('positions'));
+    if(localData!=null) {
+        $.each(localData, function(i,value){
+            var widgetId ="#" + value;
+            $("#widgets").append($(widgetId).parent());
+        });
+    }
+}
+
+function isInArray(array, search)
+{
+    return (array.indexOf(search) >= 0) ? true : false; 
 }