From c33a31c08ee08a06bc0a8d27c8459b347407b02f Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Fri, 26 May 2017 21:45:32 +0200
Subject: [PATCH] Allow selector and dom observer

---
 UI/ActionManager.js | 64 +++++++++++++++++++++++++++++++++------------
 UI/UIManager.js     | 24 +++++++++++++++++
 2 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/UI/ActionManager.js b/UI/ActionManager.js
index c4cb370..ca3706d 100644
--- a/UI/ActionManager.js
+++ b/UI/ActionManager.js
@@ -66,32 +66,62 @@
     {
         const listeners      = JSON.parse(e.getAttribute('data-action')),
             listenerLength = listeners.length,
-            self           = this;
-
-        let actionLength   = 0;
+            self = this;
 
         // For everey action an event is registered
         for (let i = 0; i < listenerLength; i++) {
-            actionLength = listeners[i].action.length;
+            let c = [e], hasSelector = false;
 
-            for (let j = 1; j < actionLength; j++) {
-                console.log(e);
-                this.app.eventManager.attach(e.id + listeners[i].action[j - 1].key, function (data)
-                {
-                    self.runAction(e, listeners[i].action[j], data);
-                }, false, true);
-                // todo: the true here is a memory leak since it should be removed at some point?!
-                // todo: handle onload action right after registering everything. this will be used for onload api calls in order to get content such as lists or models. Maybe in the main application after registering a invoke('onload') should be called if the application wants to execute the onload elements
+            if(listener.hasOwnProperty('selector')) {
+                c = documents.querySelectorAll(listenrs[i].selector);
+                hasSelector = true;
             }
 
-            // Register event for first action
-            e.addEventListener(listeners[i].listener, function ()
-            {
-                self.runAction(this, listeners[i].action[0]);
-            });
+            let childLength = c.length;
+
+            for(let j = 0; j < childLength; j++) {
+                this.bindListener(c[j], listeners[i]);
+            }
+
+            // if it has selector then a listener for child events must be implemented since these can potentially changed without any knowledge
+            // todo: what if the selector parent is different from "e"? then this doesn't make sense! Maybe this isn't allowed to happen!
+            if(hasSelector) {
+                this.app.eventManager.attach(e.id + 'childList', function(data) {
+                    const length = data.addedNodes.length;
+
+                    for(let j = 0; j < length; j++) {
+                        self.bindListener(data.addedNodes[j], listeners[i]);
+                    }
+                });
+                this.app.uiManager.getDOMObserver().observe(e, {childList: true, subtree: true});
+            }
         }
     };
 
+    jsOMS.UI.ActionManager.prototype.bindListener = function(e, listener) 
+    {
+        const self = this,
+            actionLength = listener.action.length;
+
+        for (let j = 1; j < actionLength; j++) {
+            console.log(e);
+
+            this.app.eventManager.attach(e.id + listener.action[j - 1].key, function (data)
+            {
+                self.runAction(e, listener.action[j], data);
+            }, false, true);
+        }
+        // todo: the true here is a memory leak since it should be removed at some point?!
+        // todo: handle onload action right after registering everything. this will be used for onload api calls in order to get content such as lists or models. Maybe in the main application after registering a invoke('onload') should be called if the application wants to execute the onload elements
+
+        // only if this element is registered/no selector is specified
+        // Register event for first action
+        e.addEventListener(listener.listener, function ()
+        {
+            self.runAction(this, listener.action[0]);
+        });
+    };
+
     /**
      * Run event action.
      *
diff --git a/UI/UIManager.js b/UI/UIManager.js
index be92985..f25afeb 100644
--- a/UI/UIManager.js
+++ b/UI/UIManager.js
@@ -30,6 +30,15 @@
         this.tableManager  = new jsOMS.UI.Component.Table(this.app.responseManager);
         this.actionManager = new jsOMS.UI.ActionManager(this.app);
         this.dragNDrop     = new jsOMS.UI.DragNDrop(this.app);
+
+        let self = this;
+        this.domObserver = new MutationObserver(function(mutations) {
+            const length = mutations.length;
+
+            for(let i = 0; i < length; i++) {
+                self.app.eventManager.trigger(mutations[i].target.id + mutations[i].type, 0, mutations[i]);
+            }
+        });
     };
 
     /**
@@ -144,4 +153,19 @@
     {
         return this.tabManager;
     };
+
+    /**
+     * Get DOM observer
+     *
+     * @return {Object}
+     *
+     * @method
+     *
+     * @since  1.0.0
+     * @author Dennis Eichhorn <d.eichhorn@oms.com>
+     */
+    jsOMS.UI.UIManager.prototype.getDOMObserver = function ()
+    {
+        return this.domObserver;
+    };
 }(window.jsOMS = window.jsOMS || {}));