update component behaviour to init on being added to dom dynamicaly.

typerefinery-ai · Apr 23, 2024 · 7ea6abf · 7ea6abf
1 parent e346dfc
commit 7ea6abf
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 26 deletions.
diff --git a/...c/main/resources/apps/typerefinery/components/forms/fields/button/clientlibs/behaviour.js b/...c/main/resources/apps/typerefinery/components/forms/fields/button/clientlibs/behaviour.js
@@ -3,11 +3,10 @@ window.Typerefinery.Components = Typerefinery.Components || {};
 window.Typerefinery.Components.Forms = Typerefinery.Components.Forms || {};
 window.Typerefinery.Components.Forms.Button = Typerefinery.Components.Forms.Button || {};
 
-(function (ns, document) {
+(function (ns, componentsNs, document) {
     "use strict";
-    $(document).ready(function () {
-        document.querySelectorAll('[component="button"]').forEach(function ($component) {
-            ns.init($component);
-        });
-    });
-})(window.Typerefinery.Components.Forms.Button, document);
+
+    //init and watch for new components
+    componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);
+
+})(window.Typerefinery.Components.Forms.Button, window.Typerefinery.Components, document);
diff --git a/...c/main/resources/apps/typerefinery/components/forms/fields/button/clientlibs/functions.js b/...c/main/resources/apps/typerefinery/components/forms/fields/button/clientlibs/functions.js
@@ -8,6 +8,9 @@ window.Typerefinery.ToggleComponent = Typerefinery.ToggleComponent || {};
 window.Typerefinery.Page.Theme = Typerefinery.Page.Theme || {};
 
 (function (ns, componentNs, modalNs, dropdownNs, toggleComponentNs, themeNs, document, window) {
+    "use strict";
+    ns.selectorComponent = '[component="button"]';
+
     ns.addEventListener = ($component, id) => {
         $component.addEventListener("click", (e) => {
             e?.preventDefault();

diff --git a/...main/resources/apps/typerefinery/components/forms/fields/checkbox/clientlibs/behaviour.js b/...main/resources/apps/typerefinery/components/forms/fields/checkbox/clientlibs/behaviour.js
@@ -5,7 +5,7 @@ window.Typerefinery.Components.Forms.Checkbox = Typerefinery.Components.Forms.Ch
 
 ;(function (ns, document) {
     "use strict";
-    $(document).ready(function () {
-        ns.init();
-    });
+    // $(document).ready(function () {
+    //     ns.init();
+    // });
 })(window.Typerefinery.Components.Forms.Checkbox, document);
diff --git a/...c/main/resources/apps/typerefinery/components/forms/fields/select/clientlibs/behaviour.js b/...c/main/resources/apps/typerefinery/components/forms/fields/select/clientlibs/behaviour.js
@@ -3,12 +3,10 @@ window.Typerefinery.Components = Typerefinery.Components || {};
 window.Typerefinery.Components.Forms = Typerefinery.Components.Forms || {};
 window.Typerefinery.Components.Forms.Select = Typerefinery.Components.Forms.Select || {};
 
-;(function (ns, document) {
+;(function (ns, componentsNs, document) {
     "use strict";
-    $(document).ready(function () {
-      console.log('Select component Behaviour loaded');
-        $("[component='select']").each(function () {
-            ns.init(this);
-        });
-    });
-})(window.Typerefinery.Components.Forms.Select, document);
+
+    //init and watch for new components
+    componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);
+
+})(window.Typerefinery.Components.Forms.Select, window.Typerefinery.Components, document);
diff --git a/...c/main/resources/apps/typerefinery/components/forms/fields/select/clientlibs/functions.js b/...c/main/resources/apps/typerefinery/components/forms/fields/select/clientlibs/functions.js
@@ -9,6 +9,8 @@ window.Typerefinery.Components.Forms.Select.Instances = Typerefinery.Components.
 ;(function (ns, componentNs, selectInstances, window, document) {
     "use strict";
 
+    ns.selectorComponent = '[component="select"]';
+
     ns.getOptionsSelectedAsAnArray = ($component) => {
         const $selectedOption = $component.querySelector('option[selected]');
         if($selectedOption) {

diff --git a/...nd/src/main/resources/apps/typerefinery/components/widgets/editor/clientlibs/behaviour.js b/...nd/src/main/resources/apps/typerefinery/components/widgets/editor/clientlibs/behaviour.js
@@ -3,12 +3,10 @@ window.Typerefinery.Components = Typerefinery.Components || {};
 window.Typerefinery.Components.Widgets = Typerefinery.Components.Widgets || {};
 window.Typerefinery.Components.Widgets.Editor = Typerefinery.Components.Widgets.Editor || {};
 
-(function (ns, document) {
+(function (ns, componentsNs, document) {
     "use strict";
-    $(document).ready(function () {
-      console.log('Editor component Behaviour loaded');
-        $('[component=editor]').each(function () {
-            ns?.init(this);
-        });
-    });
-})(Typerefinery.Components.Widgets.Editor, document);
+
+    //init and watch for new components
+    componentsNs.watchDOMForComponent(`${ns.selectorComponent}`, ns.init);
+
+})(Typerefinery.Components.Widgets.Editor, window.Typerefinery.Components, document);
diff --git a/...nd/src/main/resources/apps/typerefinery/components/widgets/editor/clientlibs/functions.js b/...nd/src/main/resources/apps/typerefinery/components/widgets/editor/clientlibs/functions.js
@@ -9,6 +9,8 @@ window.Typerefinery.Components.Widgets.Editor.Instances = Typerefinery.Component
 (function (ns, componentNs, editorInstanceNs, document, window) {
     "use strict";
 
+    ns.selectorComponent = '[component="editor"]';
+
     ns.getCodeEditorTheme = (editor, theme) => {
         switch (editor) {
             case "MONACO":