c

javascript/src/Plugins/qfq.fabric.js

@@ -24,7 +24,7 @@ $(function (n) {
         });
         this.emojiContainer = {};
         this.eventEmitter = new EventEmitter();
-        this.QfqForm = n.QfqForm;
+        this.qfqPage = {};
         this.textContainer = {};
         this.userTextInput = {};
         this.outputField = {};
@@ -244,12 +244,13 @@ $(function (n) {
         fabric.Object.prototype.transparentCorners = false;
     };
 
-    n.Fabric.prototype.initialize = function($fabricElement) {
+    n.Fabric.prototype.initialize = function($fabricElement, qfqPage) {
         var inputField = $fabricElement.data('control-name');
         var imageOutput = $fabricElement.data('image-output');
         var viewOnly = $fabricElement.data('view-only') || false;
         var editImage = $fabricElement.data('edit-image') || false;
         var resizeWidth = $fabricElement.data('image-resize-width') || 0;
+        this.qfqPage = qfqPage;
         this.parentElement = $fabricElement;
         this.backgroundImage = $fabricElement.data('background-image') || false;
         this.fabricJSON = $fabricElement.data('fabric-json') || false;
@@ -940,11 +941,13 @@ $(function (n) {
         /* Important! Changes only possible after initialisation */
         if (this.userChangePossible) {
             var that = this;
+            console.log('test');
             this.outputField.val(JSON.stringify(that.canvas.toJSON()));
-            var $saveButton = $("#save-button");
-            $saveButton.removeClass("disabled");
-            $saveButton.addClass($saveButton.data('class-on-change') || 'alert-warning');
-            $saveButton.removeAttr("disabled");
+            if (this.qfqPage.qfqForm) {
+                this.qfqPage.qfqForm.eventEmitter.emitEvent('form.changed', n.EventEmitter.makePayload(that, null));
+            } else {
+                throw("Error: Couldn't initialize qfqForm - not possible to send form.changed event");
+            }
         }
     };
 

javascript/src/QfqForm.js

@@ -744,6 +744,7 @@ var QfqNS = QfqNS || {};
         if (this.formImmutableDueToConcurrentAccess) {
             return;
         }
+        console.log("QFQForm Changehandler");
         this.getSaveButton().removeClass("disabled");
         this.getSaveButton().addClass(this.getSaveButtonAttentionClass());
         this.getSaveButton().removeAttr("disabled");
@@ -940,8 +941,7 @@ var QfqNS = QfqNS || {};
                     this.applyFormConfiguration(data['form-update']);
                 }
 
-                if (data['element-update']) {
-                    this.applyElementConfiguration(data['element-update']);
+                if (data['element-update']) {this.applyElementConfiguration(data['element-update']);
                 }
 
                 if (data.redirect === "url" && data['redirect-url']) {
@@ -1132,6 +1132,7 @@ var QfqNS = QfqNS || {};
 
     n.QfqForm.prototype.applyElementConfiguration = function (configuration) {
         if (!configuration) {
+            console.error("No configuration for Element Update found");
             return;
         }
 

javascript/src/QfqPage.js

@@ -24,10 +24,11 @@ var QfqNS = QfqNS || {};
      * @name QfqNS.QfqPage
      */
     n.QfqPage = function (settings) {
+        this.qfqForm = {};
         this.settings = $.extend(
             {
                 tabsId: "qfqTabs",
-                formId: "qfqForm",
+                formId: "qfqPage",
                 submitTo: "typo3conf/ext/qfq/qfq/api/save.php",
                 deleteUrl: "typo3conf/ext/qfq/qfq/api/delete.php",
                 refreshUrl: "typo3conf/ext/qfq/qfq/api/load.php",
@@ -88,6 +89,17 @@ var QfqNS = QfqNS || {};
             this.qfqForm = null;
         }
 
+        // Initialize Fabric to access form events
+        try {
+            var page = this;
+            $(".fabric").each(function() {
+                var qfqFabric = new QfqNS.Fabric();
+                qfqFabric.initialize($(this), page);
+            });
+        } catch (e) {
+            n.Log.error(e.message);
+        }
+
         QfqNS.TypeAhead.install(this.settings.typeAheadUrl);
         QfqNS.CharacterCount.initialize();
     };
@@ -99,20 +111,20 @@ var QfqNS = QfqNS || {};
         var message = "\0/";
         n.Log.debug("beforeUnloadHandler()");
 
-        if (this.qfqForm.isFormChanged() && !this.intentionalClose) {
+        if (this.qfqPage.isFormChanged() && !this.intentionalClose) {
 
             event.returnValue = message;
             return message;
         }
 
-        this.qfqForm.releaseLock();
+        this.qfqPage.releaseLock();
     };
 
     /**
      * @private
      */
     n.QfqPage.prototype.destroyFormHandler = function (obj) {
-        this.settings.qfqForm = null;
+        this.settings.qfqPage = null;
         $('#' + this.settings.tabsId).remove();
     };
 

mockup/fabric.html

@@ -77,8 +77,7 @@
 
         QfqNS.Log.level = 0;
         // Just for mockup, init() function called from new QfqNS.Plugin class maybe.
-        var qfqFabric = new QfqNS.Fabric();
-        qfqFabric.initialize($(".fabric"));
+
     });
 </script>
 </body>