Added different colors for each window , WindowView is not prototype any more, made it OLOO , problems : by destroying windows , can't destroy more than one window and can't remove icons from footer

Author: An2kataluna

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

@@ -23,7 +23,7 @@ var Events = {
      * @param {Object} params
      * returns void
      */
-    subscribe: function (el,eventName,handler,params) {
+    subscribe: function (el,eventName,handler) {
 
         el.addEventListener(eventName,handler,false);
     },
@@ -35,7 +35,7 @@ var Events = {
      * @param {Object} params
      * returns void
      */
-    publish: function (el,eventName,params) {
+    publish: function (el,eventName) {
 
         var event = this.create(eventName);
         el.dispatchEvent(event);

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

@@ -23,7 +23,7 @@ var app = app || {};
 
     app.ContentView.createNewWindow = function () {
         console.log(2);
-        app.windowInstances.push(new global.windowView({
+        app.windowInstances.push(global.WindowView.init({
             /***
              * TO DO Homework: create UNIQUE ID
              */

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

@@ -43,15 +43,25 @@ var app = app || {};
         var wrapper=document.createElement('li');
         wrapper.className='window-tab';
         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() {
+        //     var letters = '0123456789ABCDEF'.split('');
+        //     var color = '#';
+        //     for (var i = 0; i < 6; i++ ) {
+        //         color += letters[Math.floor(Math.random() * 16)];
+        //     }
+        //     return color;
+        // }
+        // wrapper.firstChild.style.color = GetRandomColor();
+        wrapper.firstChild.style.color = iconcolor;
         this.el.firstChild.appendChild(wrapper);
     };
 
     app.FooterView.destroyWindow = function () {
         /***
          * Need to add code to remove icon
          */
-
-
+         this.wrapper.parentNode.removeChild(this.wrapper);
     };
 
 
@@ -66,6 +76,16 @@ var app = app || {};
      */
     app.FooterView.selectors = {
         createNewWindow: '.icon-smile',
-        destroyWindow: '.icon-delete-circle'
+        destroyWindow: '.window-tab'
     };
+
+    // app.FooterView.iconcolor= function() {
+    //     var letters = '0123456789ABCDEF'.split('');
+    //     var color = '#';
+    //     for (var i = 0; i < 6; i++ ) {
+    //         color += letters[Math.floor(Math.random() * 16)];
+    //     }
+    //     return color;
+    // };
+
 })(window,app);

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

@@ -1,48 +1,64 @@
 /***
  * Window view
  */
+ /***
+  * @param {Object} options
+  * returns void
+  */
 var app = app || {};
 
-(function (){
+(function(global){
 
-    /***
-     * @param {Object} options
-     * returns void
-     */
-    function windowView (options) {
+    global.WindowView = {
 
-        //Execpional template or default template
-        this.template = options.template || app.templates.windowTemplate;
-        this.id = options.id;
-        this.type = options.type || 'maximized'; //minimized or maximized
+        /***
+         * Generic initialization method
+         */
+        init: function (options) {
+           this.template = options.template || app.templates.windowTemplate;
+           this.id = options.id;
+           this.type = options.type || 'maximized'; //minimized or maximized
 
-        this.render();
+            this.render();
 
-        this.closeIcon=this.wrapper.querySelector('.icon-delete-circle');
-        Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
+            this.closeIcon=this.wrapper.querySelector('.icon-delete-circle');
+            Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
+            // app.events.listen('window:' + this.id + ':render', this.render.bind(this));
+        },
 
-        // app.events.listen('window:' + this.id + ':render', this.render.bind(this));
-    };
+        /***
+         * Window render
+         */
+        render: function () {
+           this.wrapper=document.createElement('section');
+           this.wrapper.className='window';
+           this.wrapper.innerHTML=this.template.join('');
+           app.ContentView.el.appendChild(this.wrapper);
+        },
 
-    windowView.prototype.render = function() {
-        this.wrapper=document.createElement('section');
-        this.wrapper.className='window';
-        this.wrapper.innerHTML=this.template.join('');
-        app.ContentView.el.appendChild(this.wrapper);
+        /***
+         * Window destroy
+         */
+        destroy: function () {
+            this.wrapper.parentNode.removeChild(this.wrapper);
+            console.log('destroy', this.template);
 
+            app.events.notify('app:window:destroy',{id: this.id});
+        },
 
+        events: {
 
-        // .el.innerHTML += this.template;
-    };
+            on: function () {
 
-    windowView.prototype.destroy = function() {
-        this.wrapper.parentNode.removeChild(this.wrapper);
-        console.log('destroy', this.template);
+            },
 
-        app.events.notify('app:window:destroy',{id: this.id});
-    };
+            off: function () {
 
+            }
+        },
 
+        selectors: {
 
-    window.windowView = windowView;
-})();
+        }
+    };
+})(window);