Reworked Text Boxes

javascript/src/Plugins/qfq.fabric.js

@@ -132,6 +132,29 @@ $(function () {
         canvas.renderAll();
     }
 
+    function addText(displayText) {
+        var text = new fabric.Text(displayText, {
+            fontSize: textSize,
+            color: '#000',
+            left: 10,
+            top: 10
+        });
+        var rect = new fabric.Rect();
+        rect.set({
+            width: text.width + 20,
+            height: text.height + 20,
+            fill: bgColor,
+            opacity: bgOpacity
+        });
+        var group = new fabric.Group([rect, text], {
+            left: addPositionLeft,
+            top: addPositionTop
+        });
+        canvas.add(group);
+        canvas.setActiveGroup(group);
+        adjustDefaultPosition();
+    }
+
     // Custom Mouse / Touch Events on Canvas
 
     canvas.on('mouse:up', function (e) {
@@ -185,27 +208,7 @@ $(function () {
     $("#text-bg-submit").on("click", function() {
         deactivateToggles();
         var userText = $("#text-user-value").val();
-        console.log(userText);
-        var text = new fabric.Text(userText, {
-            fontSize: textSize,
-            color: '#000',
-            left: 10,
-            top: 10
-        });
-        var rect = new fabric.Rect();
-        rect.set({
-            width: text.width + 20,
-            height: text.height + 20,
-            fill: bgColor,
-            opacity: bgOpacity
-        });
-        var group = new fabric.Group([rect, text], {
-            left: addPositionLeft,
-            top: addPositionTop
-        });
-        canvas.add(group);
-        canvas.setActiveGroup(group);
-        adjustDefaultPosition();
+        addText(userText);
         $("#text-user-value").val('');
     });
 
@@ -239,8 +242,7 @@ $(function () {
     });
 
     $("#add-text").on("click", function() {
-        var text = new fabric.IText('type your text here', { fontSize: 20, left: 100, top: 100, editable: true});
-        canvas.add(text);
+        $("#user-text-control").slideToggle();
         deactivateDrawing();
     });
 

mockup/fabric.html

@@ -45,7 +45,7 @@
                 <button class="btn btn-default" id="add-rect"><span class="glyphicon glyphicon-stop"></span></button>
                 <button class="btn btn-default" id="move-mode"><span class="glyphicon glyphicon-move"></span></button>
             </div>
-            <div class="text-insert">
+            <div class="text-insert" style="display:none;" id="user-text-control">
                 <textarea class="fabric-text" placeholder="Remember, be nice!" id="text-user-value"></textarea>
                 <div class="text-options">
                     <button type="button" class="text-bg-toggle" id="text-no-bg"></button>