A lot of things changed, 1) fix some stuff that didn't work(see last commit) + app.initApplication() works automatic in controller

Author: An2kataluna

EXERCISE/Exercise 4/app/components/events.js

@@ -6,11 +6,12 @@ var Events = {
     /***
      * Create event
      * @param {String} eventName
+     * @param {Object} eventDetail
      * returns {Event Object}
      */
-    create: function(eventName){
+    create: function(eventName, eventDetail){
 
-        var event = new CustomEvent(eventName);
+        var event = new CustomEvent(eventName, { detail: eventDetail });
 
         return event;
     },
@@ -28,17 +29,27 @@ var Events = {
         el.addEventListener(eventName,handler,false);
     },
 
+    // elem.addEventListener(eventName, function(e) {
+    //        // in the event handler function here, you can directly refer
+    //        // to arg1 and arg2 from the parent function arguments
+    // }, false);
+
+    // element.addEventListener('click', (function(passedInElement) {
+    //     return function(e) {func(e, passedInElement); };
+    // }) (this.elements[i]), false);
+
+
     /***
      * Publishes an event to the listneres
      * @param {Dom Object} el
      * @param {String} eventName
      * @param {Object} params
      * returns void
      */
-    publish: function (el,eventName) {
+    publish: function (el,eventName,params) {
 
-        var event = this.create(eventName);
-        el.dispatchEvent(event);
+        var evnt = this.create(eventName, params);
+        el.dispatchEvent(evnt);
 
     },
 

EXERCISE/Exercise 4/app/controllers/controller.js

@@ -58,7 +58,7 @@ var app = app || {};
 
         notify: function (eventName,params) {
 
-            Events.publish(elements.el, eventName);
+            Events.publish(elements.el, eventName,params);
         }
     };
 
@@ -115,4 +115,6 @@ var app = app || {};
         elements.el = doc.querySelector(config.el);
     }
 
+    app.init();
+
 })(window, document);

EXERCISE/Exercise 4/app/views/content-view.js

@@ -14,6 +14,7 @@ var app = app || {};
     app.ContentView.events = {
         on: function () {
             app.events.listen('app:window:create', this.createNewWindow);
+            app.events.listen('app:window:destroy', this.destroyWindow);
         },
 
         off: function (argument) {
@@ -23,33 +24,29 @@ var app = app || {};
 
     app.ContentView.createNewWindow = function () {
         console.log(2);
-        app.windowInstances.push(global.WindowView.init({
-            /***
-             * TO DO Homework: create UNIQUE ID
-             */
-
-             /**
-                * Creates a string that can be used for dynamic id attributes
-                * Example: "id-wm68fu1uk63cjtt9"
-                * @returns {string}
-                */
-             // var uniqueId =
-
-             id: 'id-' + Math.random().toString(36).substr(2, 16)
-
-            // id: 'id' + (new Date()).getTime()
-             // app.windowInstances.length
-        }));
+        var windowInstance = Object.create(global.WindowView);
+        /**
+           * Creates a string that can be used for dynamic id attributes
+           * Example: "id-wm68fu1uk63cjtt9"
+           * @returns {string}
+           */
+        windowInstance.init({id: 'id-' + Math.random().toString(36).substr(2, 16)});
+        app.windowInstances.push(windowInstance);
     };
 
     // app.ContentView.selectors={
     //     destroyWindow: '.icon-delete-circle'
     // }
 
-    app.ContentView.destroyWindow = function () {
+    app.ContentView.destroyWindow = function (evnt) {
         console.log(0);
         // this.parentElement.removeChild(this[i]);
-        app.windowInstances.pop();
+        for (var i = app.windowInstances.length - 1; i >= 0; i--) {
+            if(app.windowInstances[i].id === evnt.detail.id){
+                app.windowInstances.splice(i,1);
+            }
+        }
+
     };
 
 

EXERCISE/Exercise 4/app/views/footer-view.js

@@ -10,6 +10,23 @@ var app = app || {};
      */
     app.FooterView = Object.create(global.BaseView);
 
+    app.FooterView.render= function () {
+        this.placeholder.innerHTML = this.template;
+        this.el = document.getElementById('template-' + this.name);
+
+        if(this.selectors) {
+            // in contentView selectors is undefined; in footer view we have createNewWindow and destroyWindow as selectors
+            for(var selector in this.selectors) {
+                this.elements[selector] = document.querySelector(this.selectors[selector]);
+            }
+        }
+
+        this.iconList = this.el.firstChild;
+
+        this.events.on.call(this);
+
+    };
+
     /***
      * Bind event listeners to view elements
      */
@@ -18,6 +35,7 @@ var app = app || {};
 
             Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow.bind(this));
             app.events.listen('app:window:destroy', this.destroyWindow.bind(this));
+            app.events.listen('app:window:created', this.createNewIcon.bind(this));
         },
 
         off: function () {
@@ -29,19 +47,21 @@ var app = app || {};
      * Create new Windown object
      */
     app.FooterView.createNewWindow = function () {
-        /***
-         * TO DO HOMEWORK: add icon for each new window
-         */
 
-        this.createNewIcon();
         // app.FooterView.el.firstChild.innerHTML += app.templates.footerTemplate;
         app.events.notify('app:window:create');
 
     };
 
-    app.FooterView.createNewIcon = function(){
+    /***
+     * Creates a new icon in footer
+     * @param  {EventObject} evnt
+     * @return void
+     */
+    app.FooterView.createNewIcon = function(evnt){
         var wrapper=document.createElement('li');
         wrapper.className='window-tab';
+        wrapper.id = evnt.detail.id;
         wrapper.innerHTML=app.templates.footerTemplate;
         var iconcolor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
         // function GetRandomColor() {
@@ -54,14 +74,18 @@ var app = app || {};
         // }
         // wrapper.firstChild.style.color = GetRandomColor();
         wrapper.firstChild.style.color = iconcolor;
-        this.el.firstChild.appendChild(wrapper);
+        this.iconList.appendChild(wrapper);
     };
 
-    app.FooterView.destroyWindow = function () {
+    app.FooterView.destroyWindow = function (evnt) {
+
         /***
          * Need to add code to remove icon
          */
-         this.wrapper.parentNode.removeChild(this.wrapper);
+        var iconToRemove = this.iconList.querySelector('#'+evnt.detail.id);
+
+        iconToRemove.parentNode.removeChild(iconToRemove);
+
     };
 
 

EXERCISE/Exercise 4/app/views/window-view.js

@@ -21,8 +21,8 @@ var app = app || {};
 
             this.render();
 
-            this.closeIcon=this.wrapper.querySelector('.icon-delete-circle');
-            Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
+            app.events.notify('app:window:created',{id: this.id});
+
             // app.events.listen('window:' + this.id + ':render', this.render.bind(this));
         },
 
@@ -34,6 +34,9 @@ var app = app || {};
            this.wrapper.className='window';
            this.wrapper.innerHTML=this.template.join('');
            app.ContentView.el.appendChild(this.wrapper);
+           this.closeIcon = this.wrapper.querySelector(this.selectors.closeIcon);
+
+           this.events.on.call(this);
         },
 
         /***
@@ -49,7 +52,7 @@ var app = app || {};
         events: {
 
             on: function () {
-
+                Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
             },
 
             off: function () {
@@ -58,7 +61,7 @@ var app = app || {};
         },
 
         selectors: {
-
+            closeIcon:'.icon-delete-circle'
         }
     };
 })(window);