controlElement generation changed to top because of strange errors.

javascript/src/Plugins/qfq.fabric.js

@@ -20,7 +20,9 @@ $(function (n) {
         this.parentElement = {};
         this.rotation = 0;
         this.imageToEdit = 0;
-        this.controlElement = {};
+        this.controlElement = $('<div>', {
+            id: 'qfq-fabric-control'
+        });
         this.emojiContainer = {};
         this.eventEmitter = new EventEmitter();
         this.QfqForm = n.QfqForm;
@@ -131,18 +133,9 @@ $(function (n) {
             this.myModes.currentMode = modeName;
             var that = this;
             $.each(this.myModes.modes, function(i, o) {
-                if (o.name == that.myModes.currentMode) {
-                    if (o.requiresDrawing) {
-                        that.qFabric.canvas.isDrawingMode = true;
-                    } else {
-                        that.qFabric.canvas.isDrawingMode = false;
-                    }
-
-                    if (o.requiresSelection) {
-                        that.qFabric.canvas.selection = true;
-                    } else {
-                        that.qFabric.canvas.selection = false;
-                    }
+                if (o.name === that.myModes.currentMode) {
+                    that.qFabric.canvas.isDrawingMode = !!o.requiresDrawing;
+                    that.qFabric.canvas.selection = !!o.requiresSelection;
                     if (o.isToggle) {
                         $button.removeClass("btn-default");
                         $button.addClass("btn-primary");
@@ -186,7 +179,7 @@ $(function (n) {
 
         ModeSettings.prototype.getModeByName = function (string) {
             $.each(this.myModes.modes, function(i, o) {
-                if (o.name == string) {
+                if (o.name === string) {
                     return o;
                 }
             });
@@ -282,18 +275,15 @@ $(function (n) {
         var ratio = height / width;
         var canvas = document.createElement('canvas');
         var that = this;
-        var controlElement = $('<div>', {
-            id: 'qfq-fabric-control'
-        });
         canvas.width = this.parentElement.innerWidth();
         canvas.height = canvas.width * ratio;
+        this.parentElement.append(this.controlElement);
         this.parentElement.append(canvas);
         this.canvas = this.__canvas = new fabric.Canvas(canvas, {
             isDrawingMode: false,
             stateful: true,
             enableRetinaScaling: true
         });
-        this.controlElement = controlElement;
 
         fabric.Image.fromURL(this.backgroundImage, function(oImg) {
             oImg.set({
@@ -367,9 +357,6 @@ $(function (n) {
     n.Fabric.prototype.generateCanvas = function() {
         var canvas = document.createElement('canvas');
         canvas.setAttribute('draggable', true);
-        var controlElement = $('<div>', {
-            id: 'qfq-fabric-control'
-        });
         var emojiContainer = $('<div>', {
             style: 'display: none;'
         });
@@ -387,13 +374,10 @@ $(function (n) {
         canvas.width = this.parentElement.innerWidth();
         canvas.height = canvas.width * ratio;
         textContainer.append(textArea);
-        this.parentElement.append(controlElement);
+        this.parentElement.append(this.controlElement);
         this.parentElement.append(emojiContainer);
         this.parentElement.append(textContainer);
-        this.controlElement = controlElement;
         this.emojiContainer = emojiContainer;
-        this.textContainer = textContainer;
-        this.userTextInput = textArea;
         this.parentElement.append(canvas);
         this.canvas = this.__canvas = new fabric.Canvas(canvas, {
             isDrawingMode: true,
@@ -437,10 +421,9 @@ $(function (n) {
         console.log("resize canvas started");
         var backgroundSizing = false;
         var oldWidth = this.canvas.getWidth();
+        var backgroundImageWidth = 0;
         if (this.canvas.backgroundImage) {
-            var backgroundImageWidth = this.canvas.backgroundImage.getWidth() || 0;
-        } else {
-            var backgroundImageWidth = 0;
+            backgroundImageWidth = this.canvas.backgroundImage.getWidth() || 0;
         }
         if (oldWidth !== backgroundImageWidth && backgroundImageWidth !== 0) {
             oldWidth = backgroundImageWidth;
@@ -680,8 +663,7 @@ $(function (n) {
     };
 
     n.Fabric.prototype.setBrush = function() {
-        var color = this.getActiveRGBA();
-        this.canvas.freeDrawingBrush.color = color;
+        this.canvas.freeDrawingBrush.color = this.getActiveRGBA();
         this.canvas.freeDrawingBrush.width = this.brushSize;
     };
 
@@ -708,7 +690,7 @@ $(function (n) {
         }
     };
 
-    n.Fabric.prototype.defaultMouseOutEvent = function(e) {
+    n.Fabric.prototype.defaultMouseOutEvent = function() {
         this.mouseInsideCanvas = false;
 
         if (this.moveMode) {
@@ -822,18 +804,18 @@ $(function (n) {
         this.drawRectangleMode = true;
     };
 
-    n.Fabric.prototype.setColor = function(color, $button) {
+    n.Fabric.prototype.setColor = function(color) {
         this.activeColor.red = color.red;
         this.activeColor.blue = color.blue;
         this.activeColor.green = color.green;
         this.setBrush();
     };
 
-    n.Fabric.prototype.defaultRenderHandler = function (e) {
+    n.Fabric.prototype.defaultRenderHandler = function () {
         this.canvas.calcOffset();
     };
 
-    n.Fabric.prototype.defaultChangeHandler = function (e) {
+    n.Fabric.prototype.defaultChangeHandler = function () {
         /* Important! Changes only possible after initialisation */
         if (this.userChangePossible) {
             var that = this;
@@ -848,65 +830,65 @@ $(function (n) {
     n.Fabric.prototype.defaultKeyStrokeHandler = function(e) {
         if (this.mouseInsideCanvas) {
             // Delete key
-            if (e.keyCode == 46) {
+            if (e.keyCode === 46) {
                 this.delete();
             }
 
             // Numpad +
-            if (e.keyCode == 107) {
+            if (e.keyCode === 107) {
                 this.zoomCanvasToCenter(0.1);
             }
 
             // Numpad -
-            if (e.keyCode == 109) {
+            if (e.keyCode === 109) {
                 this.zoomCanvasToCenter(-0.1);
             }
 
             // Up Arrow
-            if (e.keyCode == 38) {
+            if (e.keyCode === 38) {
                 this.panWithZoom(0, 10);
                 e.preventDefault();
             }
 
             // Down Arrow
-            if (e.keyCode == 40) {
+            if (e.keyCode === 40) {
                 this.panWithZoom(0, -10);
                 e.preventDefault();
             }
 
             // Left Arrow
-            if (e.keyCode == 37) {
+            if (e.keyCode === 37) {
                 this.panWithZoom(-10, 0);
             }
 
             // Numpad 0
-            if (e.keyCode == 96) {
+            if (e.keyCode === 96) {
                 this.resetZoom();
             }
 
             // Right Arrow
-            if (e.keyCode == 39) {
+            if (e.keyCode === 39) {
                 this.panWithZoom(10, 0);
             }
         }
     };
 
-    n.Fabric.prototype.defaultObjectHoverHandler = function(e) {
+    n.Fabric.prototype.defaultObjectHoverHandler = function() {
         console.log("Over object");
         this.overObject = true;
     };
 
-    n.Fabric.prototype.defaultObjectOutHandler = function(e) {
+    n.Fabric.prototype.defaultObjectOutHandler = function() {
         console.log("Left object");
         this.overObject = false;
     };
 
-    n.Fabric.prototype.defaultSelectionCreateHandler = function(e) {
+    n.Fabric.prototype.defaultSelectionCreateHandler = function() {
         console.log("Selection created");
         this.selectionActive = true;
     };
 
-    n.Fabric.prototype.defaultSelectionClearHandler = function(e) {
+    n.Fabric.prototype.defaultSelectionClearHandler = function() {
         console.log("Selection cleared");
         this.selectionActive = false;
     };