toggle elements get generated now

javascript/src/Plugins/qfq.fabric.js

@@ -20,6 +20,7 @@ $(function (n) {
         this.controlElement = {};
         this.emojiContainer = {};
         this.textContainer = {};
+        this.userTextInput = {};
         this.canvas = {};
         this.activeColor = {red: 0, green: 68, blue: 255, opacity: 1};
         this.brushSize = 2;
@@ -30,6 +31,7 @@ $(function (n) {
         this.userText = "";
         this.drawRectangleMode = false;
         this.drawTextBoxMode = false;
+        this.emojiMode = false;
         this.isHighlightMode = false;
         this.isDrawingMode = true;
         this.isDown = false;
@@ -133,7 +135,7 @@ $(function (n) {
                     }
                     if (o.hasToggleElement) {
                         console.log(o.toggleElement);
-                        $("#" + o.toggleElement).slideToggle();
+                        that.qFabric[o.toggleElement].slideToggle();
                     }
                 } else {
                     that.deactivateMode(o);
@@ -149,7 +151,9 @@ $(function (n) {
                 $button.addClass("btn-default");
                 this.qFabric[o.toggle] = false;
             }
-
+            if (o.hasToggleElement) {
+                this.qFabric[o.toggleElement].slideUp();
+            }
         };
 
         ModeSettings.prototype.getButtonById = function (needle) {
@@ -239,16 +243,27 @@ $(function (n) {
             id: 'qfq-fabric-control'
         });
         var emojiContainer = $('<div>', {
-            style: 'display: block;'
+            style: 'display: none;'
+        });
+        var textContainer = $('<div>', {
+            style: 'display: none;'
+        });
+        var textArea = $('<textarea>', {
+            class: 'fabric-text',
+            placeholder: 'Write a text and then draw a textbox over the image'
         });
         var that = this;
         canvas.id = "c1";
         canvas.width = $('#fabric').innerWidth();
         canvas.height = canvas.width / 3 * 4;
+        textContainer.append(textArea);
         $('#fabric').append(controlElement);
         $('#fabric').append(emojiContainer);
+        $('#fabric').append(textContainer);
         this.controlElement = controlElement;
         this.emojiContainer = emojiContainer;
+        this.textContainer = textContainer;
+        this.userTextInput = textArea;
         $('#fabric').append(canvas);
         this.canvas = this.__canvas = new fabric.Canvas(canvas, {
             isDrawingMode: true,

mockup/mockData/fabric.modes.json

@@ -30,9 +30,20 @@
             "isToggle": true,
             "toggle": "drawTextBoxMode",
             "hasToggleElement": true,
-            "toggleElement": "user-text-control",
+            "toggleElement": "textContainer",
             "icon": "glyphicon-text-height"
         },
+        {
+          "name": "emoji",
+          "selector": "add-emoji",
+          "requiresDrawing": false,
+          "requiresSelection": true,
+          "isToggle": true,
+          "toggle": "emojiMode",
+          "hasToggleElement": true,
+          "toggleElement": "emojiContainer",
+          "icon": "glyphicon-ice-lolly-tasted"
+        },
         {
             "name": "rectangle",
             "selector": "add-rect",