local storage integration and versioning

- Fixed the splitters

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

4 files changed, 64 insertions, 39 deletions

diff --git a/js/controllers/local-storage-controller.js b/js/controllers/local-storage-controller.js
index 6963b245..ea763cff 100755
--- a/js/controllers/local-storage-controller.js
+++ b/js/controllers/local-storage-controller.js
@@ -7,7 +7,46 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage,
     Component       = require("montage/ui/component").Component;
 
-exports.LocalStorage = Montage.create( Montage, {
+exports.LocalStorage = Montage.create( Component, {
+
+    canStore: {
+        value: null
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            this.canStore = window.localStorage;
+            this.application.localStorage = this;
+
+            // Redefine setItem and getItem if local storage is not available.
+            if(!this.canStore) {
+                this._getItem = function() {
+                    console.log("Local Storage is not supported on your browser");
+                    return "";
+                };
+
+                this._setItem = function() {
+                    console.log("Local Storage is not supported on your browser");
+                    return false;
+                }
+            }
+        }
+    },
+
+    _getItem: {
+        value: function(key) {
+            var value = window.localStorage.getItem("ninja-" + key);
+            if(value !== null) value = JSON.parse(value);
+
+            return value;
+        }
+    },
+
+    _setItem: {
+        value: function(key, value) {
+            window.localStorage.setItem("ninja-" + key, JSON.stringify(value));
+        }
+    },
 
     getItem: {
         value: function(item) {
@@ -22,16 +61,6 @@ exports.LocalStorage = Montage.create( Montage, {
                 return null;
             }
 
-            /*
-            if (window.localStorage) {
-                this.getItem = function(item) {
-                    return window.localStorage.getItem(item);
-                }(item);
-            } else {
-                alert("Local Storage is not supported on your browser");
-
-            }
-            */
         }
     },
 
diff --git a/js/data/settings.js b/js/data/settings.js
index ffea2075..6b1af3fc 100755
--- a/js/data/settings.js
+++ b/js/data/settings.js
@@ -10,10 +10,6 @@ var Montage = require("montage/core/core").Montage,
 
 exports.Settings = Montage.create( Component, {
 
-    version: {
-        value: "11.1213"
-    },
-
     _settings: {
         value: null
     },
@@ -54,18 +50,5 @@ exports.Settings = Montage.create( Component, {
                 return null;
             }
         }
-    },
-    
-    deserializedFromSerialization: {
-        value: function() {
-
-            if (LocalStorage.getItem("version") != this.version) {
-                this.settings = {}
-                LocalStorage.setItem("version",this.version);
-            } else {
-                this.settings = LocalStorage.getItem("settings");
-            }
-
-        }
     }
 });
\ No newline at end of file
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 022b3f0a..43774d30 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -22,6 +22,11 @@
                 "name": "Preloader"
             },
 
+            "localStorage": {
+                "module": "js/controllers/local-storage-controller",
+                "name": "LocalStorage"
+            },
+
             "settings1": {
                 "module": "js/data/settings",
                 "name": "Settings"
@@ -324,12 +329,12 @@
             <nav id="mainMenuBar"></nav>
         </section>
 
-        <section id="leftSplitter" class="leftSplitter splitter"></section>
+        <section data-montage-id="leftSplitter" class="leftSplitter splitter"></section>
 
-        <section id="rightSplitter" class="rightSplitter splitter"></section>
+        <section data-montage-id="rightSplitter" class="rightSplitter splitter"></section>
 
         <section id="appContainer">
-            <section id="topSplitter" class="topSplitter splitter"></section>
+            <section data-montage-id="topSplitter" class="topSplitter splitter"></section>
 
             <section id="topPanelContainer" class="panelContainer">
                 <div id="topPanel" class="panel">
@@ -392,7 +397,7 @@
                 </section>
             </section>
 
-            <section id="bottomSplitter" class="bottomSplitter splitter"></section>
+            <section data-montage-id="bottomSplitter" class="bottomSplitter splitter"></section>
         </section>
         
         <section id="popupWindows"></section>
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 9f5b4de7..cb05104d 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -9,6 +9,10 @@ var Component = require("montage/ui/component").Component;
 
 exports.Splitter = Montage.create(Component, {
 
+    version: {
+        value: "1.0"
+    },
+
     hasTemplate: {
         value: false
     },
@@ -49,19 +53,23 @@ exports.Splitter = Montage.create(Component, {
         get: function() {
             return this._collapsed;
         },
-        set: function(value)
-        {
+        set: function(value) {
             this._collapsed = value;
-            this.application.ninja.settings.setSetting(this.element.id, "collapsed", this.collapsed);
+
+            this.application.localStorage._setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value});
         }
     },
 
     prepareForDraw: {
         value: function() {
-            //Get Setting from SettingManager
-            this.application.ninja.settings.getSetting(this.element.id, "collapsed");
-            lapsed = false;
-            if (lapsed != null) this._collapsed = lapsed;
+            //Get splitter initial value from SettingManager
+            var storedData = this.application.localStorage._getItem(this.element.getAttribute("data-montage-id"));
+            if(storedData && this.element.getAttribute("data-montage-id") !== null) {
+                this._collapsed = storedData.value;
+            } else {
+                this._collapsed = false;
+            }
+
             this.element.addEventListener("click", this, false);
         }
     },