Trying to build out application interface and integrate listener interactions.

app/js/main.js

@@ -1,4 +1,6 @@
-import EventWindow from "/app/js/ui/EventWindow.js";
+import GlobalEvents from "/app/js/EventCaller.js";
+//import EventWindow from "/app/js/ui/EventWindow.js";
+import EmitterElements from "/app/js/ui/Emitters.js";
 import Modal from "/app/js/ui/Modal.js";
 import {NESPainter} from "/app/js/NESPainter.js";
 import {NESPalette} from "/app/js/NESPalette.js";
@@ -13,18 +15,14 @@ function on_palette_changed(e){
   }
 }
 
-function on_click(e){
-  console.log(e.target);
-}
-
 function handle_emitted(){
   console.log("EMITTED EVENT!");
 }
 
 function initialize(DOC){
-  EventWindow.listen("onclick", on_click);
-  EventWindow.enable_emitter_attributes();
-  EventWindow.listen("emitted-event", handle_emitted);
+  EmitterElements.initialize();
+  //EventWindow.enable_emitter_attributes();
+  GlobalEvents.listen("emitted-event", handle_emitted);
 
   var nespainter = new NESPainter(DOC.getElementById("painter"));
 

app/js/ui/Emitters.js

@@ -0,0 +1,47 @@
+import GlobalEvents from "/app/js/EventCaller.js";
+
+
+function handle_emitter(event){
+  var el = event.target;
+  if (el){
+    if (el.hasAttribute("emit")){
+      var args = [el.getAttribute("emit")];
+      if (el.hasAttribute("emit-args")){
+        try {
+          var j = JSON.parse(el.getAttribute("emit-args"));
+          if (j instanceof Array){
+            args.concat(j);
+          } else {
+            args.push(j);
+          }
+        } catch (e) {
+          console.log("Failed to emit '" + args[0] + "'. Attribute 'emit-args' contains malformed JSON.");
+        }
+      }
+      GlobalEvents.emit.apply(GlobalEvents, args);
+    }
+  }
+}
+
+
+
+export default {
+  initialize: function(){
+    var elist = document.querySelectorAll("[emit]");
+    elist.forEach(function(el){
+      el.addEventListener("click", handle_emitter);
+    });
+  },
+
+  initialize_element: function(el){
+    if (el.hasAttribute("emit")){
+      el.addEventListener("click", handle_emitter);
+    }
+  }
+}
+
+
+
+
+
+

app/js/ui/Modal.js

@@ -1,24 +1,24 @@
-import EventWindow from "/app/js/ui/EventWindow.js";
+import GlobalEvents from "/app/js/EventCaller.js";
 
 
 class Modal{
   constructor(){
     this.__currentModalEl = null;
 
-    EventWindow.listen("onclick", (function(event){
+    window.addEventListener("click", (function(event){
       if (event.target === this.__currentModalEl){
         this.close_modal();
       }
     }).bind(this));
 
-    EventWindow.listen("modal-open", (function(event){
+    GlobalEvents.listen("modal-open", (function(event){
       if (event.hasOwnProperty("id") && typeof(event.id) === 'string'){
         var force = (event.hasOwnProperty("force")) ? event.force === true : false;
         this.open_modal_id(event.id, force);
       }
     }).bind(this));
 
-    EventWindow.listen("modal-close", (function(event){
+    GlobalEvents.listen("modal-close", (function(event){
       this.close_modal();
     }).bind(this));
   }

index.html

@@ -22,17 +22,24 @@
       <div class="home-menu pure-menu pure-menu-horizontal">
         <a class="pure-menu-heading" href="">Your Site</a>
         <ul class="pure-menu-list">
-          <li class="pure-menu-item pure-menu-selected"><a href="#" emit="modal-open" emit-args='{"id":"Welcome"}' class="pure-menu-link">Home</a></li>
-          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
-          <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
+          <li class="pure-menu-item pure-menu-selected">
+            <button emit="modal-open" emit-args='{"id":"Welcome"}' class="pure-button">
+              <i class="fa fa-brush"></i>
+            </button>
+          </li>
+          <li class="pure-menu-item">
+            <button emit="modal-open" emit-args='{"id":"Welcome"}' class="pure-button">
+              <i class="fa fa-eraser"></i>
+            </button>
+          </li>
         </ul>
       </div>
     </div>
 
     <div class="content-wrapper">
       <div class="pure-g">
-        <div class="pure-u-1-6"></div>
-        <div class="pure-u-2-3">
+        <div class="pure-u-1-8"></div>
+        <div class="pure-u-3-4">
           <canvas id="painter" width:"128" height:"256"></canvas>
         </div>
       </div>