Refactor tabbed menu and loading spinner + fix a bug in event manager

src/app/loading-spinner.js

 var yo = require('yo-yo')
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var styleGuide = require('./style-guide')
-var styles = styleGuide()
 
 module.exports = loadingSpinner
 
@@ -22,16 +20,7 @@ var css = csjs`
       100% { transform: rotate(360deg); }
   }
 `
-function loadingSpinner (cb) {
+function loadingSpinner () {
   var el = yo`<div class=${css.loader}></div>`
-  if (cb) {
-    cb(function finish () {
-      var p = el.parentElement
-      if (p) p.removeChild(el)
-      var node = document.querySelector('[class^=contractTabView]')
-      var loadingMsg = document.querySelector('[class^=loadingMsg]')
-      node.removeChild(loadingMsg)
-    })
-  }
   return el
 }

src/app/tabbed-menu.js

@@ -22,20 +22,23 @@ function tabbedMenu (compiler, loadingSpinner, self) {
   // initialize tabbed menu
   selectTab($('#options .envView'))
 
-  function cb (finish) {
-    compiler.event.register('compilerLoaded', finish)
-  }
   // add event listeners for loading spinner
-  compiler.event.register('loadingCompiler', function compilationStarted () {
-    var contractTab = document.querySelector('.envView')
-    if (!contractTab.children.length) {
-      var el = document.querySelector('[class^=contractTabView]')
-      var loadingMsg = yo`<div class=${css.loadingMsg}>Solidity compiler is currently loading. Please wait a moment...</div>`
-      el.appendChild(loadingMsg)
-    }
+  compiler.event.register('loadingCompiler', function start () {
     var settingsTab = document.querySelector('.settingsView')
-    if (!settingsTab.children.length) {
-      settingsTab.appendChild(loadingSpinner(cb))
+    if (settingsTab.children.length) return
+
+    var contractTabView = document.querySelector('[class^=contractTabView]')
+
+    var loadingMsg = yo`<div class=${css.loadingMsg}>Solidity compiler is currently loading. Please wait a moment...</div>`
+    var spinner = loadingSpinner()
+    settingsTab.appendChild(spinner)
+    contractTabView.appendChild(loadingMsg)
+
+    compiler.event.register('compilerLoaded', finish)
+    function finish () {
+      compiler.event.unregister('compilerLoaded', finish)
+      contractTabView.removeChild(loadingMsg)
+      settingsTab.removeChild(spinner)
     }
   })
 

src/lib/eventManager.js

+'use strict'
+
+function eventManager () {
+  this.registered = {}
+}
+
+/*
+   * Unregister a listenner.
+   * Note that if obj is a function. the unregistration will be applied to the dummy obj {}.
+   *
+   * @param {String} eventName  - the event name
+   * @param {Object or Func} obj - object that will listen on this event
+   * @param {Func} func         - function of the listenners that will be executed
+*/
+eventManager.prototype.unregister = function (eventName, obj, func) {
+  if (obj instanceof Function) {
+    func = obj
+    obj = {}
+  }
+  for (var reg in this.registered[eventName]) {
+    if (this.registered[eventName][reg] && (!func || this.registered[eventName][reg].func === func)) {
+      this.registered[eventName].splice(reg, 1)
+      return
+    }
+  }
+}
+
+/*
+   * Register a new listenner.
+   * Note that if obj is a function, the function registration will be associated with the dummy object {}
+   *
+   * @param {String} eventName  - the event name
+   * @param {Object or Func} obj - object that will listen on this event
+   * @param {Func} func         - function of the listenners that will be executed
+*/
+eventManager.prototype.register = function (eventName, obj, func) {
+  if (!this.registered[eventName]) {
+    this.registered[eventName] = []
+  }
+  if (obj instanceof Function) {
+    func = obj
+    obj = {}
+  }
+  this.registered[eventName].push({
+    obj: obj,
+    func: func
+  })
+}
+
+/*
+   * trigger event.
+   * Every listenner have their associated function executed
+   *
+   * @param {String} eventName  - the event name
+   * @param {Array}j - argument that will be passed to the exectued function.
+*/
+eventManager.prototype.trigger = function (eventName, args) {
+  for (var listener in this.registered[eventName]) {
+    var l = this.registered[eventName][listener]
+    l.func.apply(l.obj, args)
+  }
+}
+
+module.exports = eventManager