kgrgreer · hchoura · Dec 20, 2021 · Apr 19, 2022 · Apr 19, 2022 · Apr 19, 2022
diff --git a/src/com/foamdev/demos/onTest/Controller.js b/src/com/foamdev/demos/onTest/Controller.js
@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2021 The FOAM Authors. All Rights Reserved.
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+foam.CLASS({
+  package: 'com.foamdev.demos.onTest',
+  name: 'Controller',
+  extends: 'foam.u2.Controller',
+
+  reactions: [
+    //simple
+    ['', 'propertyChange', 'reactionTestListener']
+    //using slot
+    //['', 'propertyChange.slotListener', 'reactionTestListener']
+  ],
+
+  css: `
+    h1 { color: #aaa; }
+    body, input[text] { color: #888; }
+  `,
+
+  properties: [
+    {
+      class: 'String',
+      name: 'yourName',
+      value: 'Jane Doe',
+      view: {
+        class: 'foam.u2.TextField',
+        onKey: true,
+        placeholder: 'Your name please'
+      }
+    },
+    {
+      class: 'String',
+      name: 'slotListener',
+      value: 'active listener ...',
+      view: {
+        class: 'foam.u2.TextField',
+        onKey: true
+      }
+    }
+  ],
+
+  methods: [
+    function render() {
+      this.start('div').add('Name:').end().start('div').add(this.YOUR_NAME).end().
+        start('h1').add('Hello ').add(this.yourName$).add('!').end().
+        start('div').add('listener:').end().start('div').add(this.SLOT_LISTENER).end();
+    }
+  ],
+
+  listeners: [
+    {
+      name: 'onTestListener',
+      on: [
+        //we can use :
+        //obj.topic or obj.evt.topic
+        //  'this.propertyChange.slotListener',//work
+        //  'this.propertyChange.yourName',//work
+        'this.propertyChange',//work
+
+        // we can use also :
+        //  'yourName.propertyChange',//work
+        //  'data.propertyChange'//work
+      ],
+      code: function(evt) {
+        console.log('Test Listener code')//TODO print this.yourName
+      }
+    },
+    {
+      name: 'reactionTestListener',
+      code: function() {
+        console.log('Reaction Test Listener '+this.yourName)
+      }
+    }
+  ]
+});
diff --git a/src/com/foamdev/demos/onTest/index.html b/src/com/foamdev/demos/onTest/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <script language="javascript" src="../../../../foam.js"></script>
+  <script language="javascript" src="Controller.js"></script>
+</head>
+<body>
+  <foam class="com.foamdev.demos.onTest.Controller"></foam>
+</body>
+</html>
diff --git a/src/foam/comics/DAOControllerView.js b/src/foam/comics/DAOControllerView.js
@@ -134,13 +134,6 @@ foam.CLASS({
     }
   ],
 
-  reactions: [
-    ['data', 'action.create', 'onCreate'],
-    ['data', 'edit', 'onEdit'],
-    ['data', 'finished', 'onFinished'],
-    ['data', 'export', 'onExport']
-  ],
-
   methods: [
     function render() {
       var self = this;
@@ -250,28 +243,51 @@ foam.CLASS({
   ],
 
   listeners: [
-    function onCreate() {
-      this.stack.push(this.createControllerView, this.__subContext__);
+    {
+      name: 'onCreate',
+      on: [
+        //obj.topic
+        'data.action',
+        'data.create'
+      ],
+      code: function() {
+        this.stack.push(this.createControllerView, this.__subContext__);
+      }
     },
-
-    function onEdit(s, edit, id) {
-      this.stack.push({
-        class: this.updateView.class,
-        detailView: this.data.detailView,
-        editEnabled: this.data.editEnabled,
-        key: id
-      }, this.__subContext__);
+    {
+      name: 'onEdit',
+      on: [
+        'data.edit'
+      ],
+      code: function(s, edit, id) {
+        this.stack.push({
+          class: this.updateView.class,
+          detailView: this.data.detailView,
+          editEnabled: this.data.editEnabled,
+          key: id
+        }, this.__subContext__);
+      }
     },
-
-    function onFinished() {
-      this.stack.back();
+    {
+      name: 'onFinished',
+      on: [
+        'data.finished'
+      ],
+      code: function() {
+        this.stack.back();
+      }
     },
-
-    function onExport(dao) {
-      this.add(this.Popup.create().tag({
-        class: 'foam.u2.ExportModal',
-        exportData: dao.src.filteredDAO
-      }));
+    {
+      name: 'onExport',
+      on: [
+        'data.export'
+      ],
+      code: function(dao) {
+        this.add(this.Popup.create().tag({
+          class: 'foam.u2.ExportModal',
+          exportData: dao.src.filteredDAO
+        }));
+      }
     }
   ]
 });
diff --git a/src/foam/comics/DAOCreateControllerView.js b/src/foam/comics/DAOCreateControllerView.js
@@ -78,11 +78,6 @@ foam.CLASS({
     }
   ],
 
-  reactions: [
-    [ 'data', 'finished', 'onFinished' ],
-    [ 'data', 'throwError', 'onThrowError' ],
-  ],
-
   methods: [
     function render() {
       this
@@ -131,12 +126,24 @@ foam.CLASS({
   ],
 
   listeners: [
-    function onFinished() {
-      this.stack.back();
+    {
+      name: 'onFinished',
+      on: [
+        'data.finished'
+      ],
+      code: function() {
+        this.stack.back();
+      }
+    },
+    {
+      name: 'onThrowError',
+      on: [
+        'data.throwError'
+      ],
+      code: function() {
+        var self = this;
+        self.notify(self.data.exception.message, '', self.LogLevel.ERROR, true);
+      }
     },
-    function onThrowError() {
-      var self = this;
-      self.notify(self.data.exception.message, '', self.LogLevel.ERROR, true);
-    }
   ]
 });
diff --git a/src/foam/comics/DAOUpdateControllerView.js b/src/foam/comics/DAOUpdateControllerView.js
@@ -120,11 +120,6 @@ foam.CLASS({
     }
   ],
 
-  reactions: [
-    [ 'data', 'finished', 'onFinished' ],
-    [ 'data', 'throwError', 'onThrowError' ]
-  ],
-
   methods: [
     function render() {
 
@@ -203,12 +198,24 @@ foam.CLASS({
   ],
 
   listeners: [
-    function onFinished() {
-      this.stack.back();
+    {
+      name: 'onFinished',
+      on: [
+        'data.finished'
+      ],
+      code: function() {
+        this.stack.back();
+      }
     },
-    function onThrowError() {
-      var self = this;
-      self.notify(self.data.exception.message, '', self.LogLevel.ERROR, true);
+    {
+      name: 'onThrowError',
+      on: [
+        'data.throwError'
+      ],
+      code: function() {
+        var self = this;
+        self.notify(self.data.exception.message, '', self.LogLevel.ERROR, true);
+      }
     }
   ]
 });
diff --git a/src/foam/core/Listener.js b/src/foam/core/Listener.js
@@ -69,6 +69,10 @@ foam.CLASS({
           })
         ];
       }
+    },
+    {
+      class:  'StringArray',
+      name: 'on'
     }
   ],
 
@@ -87,6 +91,7 @@ foam.CLASS({
       var isMerged   = this.isMerged;
       var isFramed   = this.isFramed;
       var mergeDelay = this.mergeDelay;
+      var on         = this.on;
 
       Object.defineProperty(proto, name, {
         get: function listenerGetter() {
@@ -97,7 +102,9 @@ foam.CLASS({
             var l = function(sub) {
               // Is it possible to detect stale subscriptions?
               // ie. after an object has been detached.
-              return code.apply(self, arguments);
+              return code && code.apply(self, arguments);//@kgr After make the change in the listener,
+              // it will generate an exception.
+              // I tried adding initObject(), but the problem remain.
             };
 
             if ( isMerged ) {
@@ -113,6 +120,26 @@ foam.CLASS({
         configurable: true,
         enumerable: false
       });
+
+      if ( on.length > 0 ) {
+        var listener = proto[this.name];
+        for ( var i = 0 ; i < on.length ; i++ ) {
+          let o        = on[i].split('.');
+          let objectOn = o.shift();
+          let topic    = o;
+
+          if ( objectOn !== 'this' && objectOn !== '' ) {
+            var path = objectOn.split('.');
+
+            var slot = objectOn ;
+            for ( var i = 0 ; i < path.length ; i++ ) {
+               slot = slot.dot(path[i]);//just data
+            }
+            objectOn.onDetach(listener.sub.apply(target, topic.concat(listener)));
+
+          }
+        }
+      }
     }
   ]
 });

diff --git a/src/foam/dashboard/model/Visualization.js b/src/foam/dashboard/model/Visualization.js
@@ -164,18 +164,22 @@ foam.CLASS({
       return x.lookup('foam.dashboard.view.Card').create({ data: this }, x);
     }
   ],
-  reactions: [
-    [ 'sink', 'propertyChange', 'update' ],
-    [ 'sink', 'nestedPropertyChange', 'update' ],
-    [ '', 'propertyChange.sink', 'update' ],
-    [ '', 'propertyChange.dao', 'update' ],
-  ],
+
   listeners: [
-    function update() {
-      var sink = this.sink.clone();
-      this.dao.select(sink).then(function(result) {
-        this.data = result;
-      }.bind(this));
+    {
+      name: 'update',
+      on: [
+        'sink.propertyChange',
+        'sink.nestedPropertyChange',
+        'this.propertyChange.sink',
+        'this.propertyChange.dao'
+      ],
+      code: function() {
+        var sink = this.sink.clone();
+        this.dao.select(sink).then(function(result) {
+          this.data = result;
+        }.bind(this));
+      }
     }
   ]
-});
+});
diff --git a/src/foam/u2/CitationView.js b/src/foam/u2/CitationView.js
@@ -38,15 +38,14 @@ foam.CLASS({
     }
   ],
 
-  reactions: [
-    ['', 'propertyChange.data', 'updateSummary'],
-    ['data', 'propertyChange', 'updateSummary']
-  ],
-
   listeners: [
     {
       name: 'updateSummary',
       isFramed: true,
+      on: [
+        'data.propertyChange',
+        'this.propertyChange.data'//TODO check if we can delete it.
+      ],
       code: function() {
         this.summary = this.data && this.data.toSummary ? this.data.toSummary() : undefined;
       }