trying out localStorage, snapshot

javascript/src/LocalStorage.js

+/**
+ * @author Benjamin Baer <benjamin.baer@math.uzh.ch>
+ */
+
+/* global $ */
+/* global EventEmitter */
+/* @depend QfqEvents.js */
+/* @depend Alert.js */
+
+/**
+ * Qfq Namespace
+ *
+ * @namespace QfqNS
+ */
+var QfqNS = QfqNS || {};
+
+(function (n) {
+    'use strict';
+
+    /**
+     * Manages Text Editor for Comments
+     */
+    n.LocalStorage = function (key) {
+        this.storage = {};
+        this.key = key;
+        this.storage[this.key] = {};
+
+        // Event Emitter is a Library qfq uses to emit custom Events.
+        this.eventEmitter = new EventEmitter();
+        this._read();
+        if (this.storage[this.key] !== "undefined") {
+            this.storage[this.key] = {};
+        }
+    };
+
+    n.LocalStorage.prototype.on = n.EventEmitter.onMixin;
+
+    n.LocalStorage.prototype._read = function() {
+        var o = JSON.parse(localStorage.getItem("qfq"));
+        if(o) {
+            this.storage = o;
+        }
+    };
+
+    n.LocalStorage.prototype._write = function() {
+        localStorage.setItem("qfq", JSON.stringify(this.storage));
+        console.log(localStorage.getItem("qfq"));
+    };
+
+    n.LocalStorage.prototype.get = function(key) {
+        if (this.storage[this.key][key] !== "undefined") {
+            console.log(this.storage);
+            return this.storage[this.key][key];
+        } else {
+            return false;
+        }
+    };
+
+    n.LocalStorage.prototype.set = function(key, object) {
+        if (this.storage[this.key][key] === "undefined") {
+            this.storage[this.key][key] = {};
+        }
+        if(object) {
+            this.storage[this.key][key] = object;
+            this._write();
+        }
+    };
+
+    n.LocalStorage.prototype.update = function() {
+        this._read();
+    };
+
+
+}(QfqNS));
\ No newline at end of file

javascript/src/Plugins/qfq.fabric.js

@@ -62,6 +62,7 @@ $(function (n) {
         this.showObject = true;
         this.mouseInsideCanvas = false;
         this.imageOutput = '';
+        this.localStore = new n.LocalStorage("fabric");
 
         // Handles button states and generation of said buttons. Should be renamed.
         function ModeSettings() {
@@ -256,6 +257,18 @@ $(function (n) {
         this.backgroundImage = $fabricElement.data('background-image') || false;
         this.fabricJSON = $fabricElement.data('fabric-json') || false;
         this.resizeWidth = resizeWidth;
+        var defaultColor = $fabricElement.data('fabric-color') || false;
+        if (defaultColor) {
+            this.activeColor.red = defaultColor.red;
+            this.activeColor.blue = defaultColor.blue;
+            this.activeColor.green = defaultColor.green;
+        }
+        var lastColor = this.localStore.get("color");
+        console.log(lastColor);
+        if (lastColor) {
+            this.activeColor = lastColor;
+            this.activeColor.opacity = 1;
+        }
         var that = this;
 
         if (viewOnly) {
@@ -271,10 +284,7 @@ $(function (n) {
             this.generateControls();
             this.getMeta(this.backgroundImage, function(width, height) { that.prepareCanvas(width, height);});
         }
-        var defaultColor = $fabricElement.data('fabric-color') || false;
-        if (defaultColor) {
-            this.setColor(defaultColor);
-        }
+        //localStorage.clear();
     };
 
     n.Fabric.prototype.generateControls = function () {
@@ -317,6 +327,10 @@ $(function (n) {
             that.canvas.renderAll();
             that.userChangePossible = true;
         }
+        var defaultColor = $fabricElement.data('fabric-color') || false;
+        if (defaultColor) {
+            this.setColor(defaultColor);
+        }
     };
 
     n.Fabric.prototype.prepareJSON = function (jsonString) {
@@ -740,6 +754,7 @@ $(function (n) {
     };
 
     n.Fabric.prototype.setBrush = function() {
+        console.log("trying to set brush");
         this.canvas.freeDrawingBrush.color = this.getActiveRGBA();
         this.canvas.freeDrawingBrush.width = this.brushSize;
     };
@@ -973,6 +988,9 @@ $(function (n) {
         this.activeColor.red = color.red;
         this.activeColor.blue = color.blue;
         this.activeColor.green = color.green;
+        if(this.userChangePossible) {
+            this.localStore.set("color", this.activeColor);
+        }
         this.setBrush();
     };