Merge pull request CodiCamp#1 from An2kataluna/master

08.11.2015 Tasks

Author: samuil4

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;
     },
@@ -20,23 +21,35 @@ var Events = {
      * @param {Dom Object} el
      * @param {String} eventName
      * @param {Function} handler
+     * @param {Object} params
      * returns void
      */
     subscribe: function (el,eventName,handler) {
 
         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);
 
     },
 
@@ -50,4 +63,4 @@ var Events = {
     unsubscribe: function (el,eventName,handler) {
         el.removeEventListener(eventName,handler,false);
     }
-};
+};

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

@@ -47,6 +47,7 @@ var app = app || {};
 
     /***
      * Internal application events
+     * @param {Object} params
      */
     app.events = {
 
@@ -55,9 +56,9 @@ var app = app || {};
             Events.subscribe(elements.el, eventName, handler);
         },
 
-        notify: function (eventName) {
+        notify: function (eventName,params) {
 
-            Events.publish(elements.el, eventName);
+            Events.publish(elements.el, eventName,params);
         }
     };
 
@@ -80,7 +81,7 @@ var app = app || {};
 
         for (var i = instanceStorage.length - 1; i >= 0; i--) {
             instanceStorage[i].destroy();
-        };
+        }
     };
 
     /**
@@ -95,7 +96,7 @@ var app = app || {};
                 name: templateName
             });
         }
-    };
+    }
 
     /**
      * Get user specific configuration
@@ -114,4 +115,6 @@ var app = app || {};
         elements.el = doc.querySelector(config.el);
     }
 
-})(window, document);
+    app.init();
+
+})(window, document);

EXERCISE/Exercise 4/app/templates/templates.js

@@ -9,10 +9,10 @@ var app = app || {};
 
         layout: {
             Content: '<div id="template-Content"></div>',
-    		Footer: '<nav class="menu" id="template-Footer"><ul><li class="start"><a href="javascript:;" class="icon-smile"></a></li><li class="window-tab"><a href="#" class="icon-browser"></a></li></ul></nav>'
+    		Footer: '<nav class="menu" id="template-Footer"><ul><li class="start"><a href="javascript:;" class="icon-smile"></a></li></ul></nav>'
         },
 
-        windowTemplate: ['<section class="window" id="test">',
+        windowTemplate: [
             '<header class="header">',
                 '<div class="window-actions">',
                     '<span class="action icon-dash"></span>',
@@ -31,7 +31,8 @@ var app = app || {};
             '</div>',
             '<footer class="footer">',
                 '<strong> Status bar :) </strong>',
-            '</footer>',
-        '</section>']
+            '</footer>'],
+
+        footerTemplate:'<a href="#" class="icon-browser"></a>'
 	};
-})();
+})();

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

@@ -28,7 +28,7 @@
             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]);
                 }
@@ -58,4 +58,4 @@
         }
     };
 
-})(window);
+})(window);

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,13 +24,30 @@ var app = app || {};
 
     app.ContentView.createNewWindow = function () {
         console.log(2);
-        app.windowInstances.push(new global.windowView({
-            /***
-             * TO DO Homework: create UNIQUE ID
-             */
-            id: 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 (evnt) {
+        console.log(0);
+        // this.parentElement.removeChild(this[i]);
+        for (var i = app.windowInstances.length - 1; i >= 0; i--) {
+            if(app.windowInstances[i].id === evnt.detail.id){
+                app.windowInstances.splice(i,1);
+            }
+        }
+
     };
 
 
-})(window, app);
+})(window, app);

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

@@ -10,36 +10,107 @@ 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 windowIcon as selectors
+            for(var selector in this.selectors) {
+                this.elements[selector] = document.querySelector(this.selectors[selector]);
+            }
+        }
+
+        this.iconList = this.el.firstChild;
+
+        // this.iconToHighlight = this.iconList.querySelector(this.selectors.windowIcon);
+        this.elements.iconToHighlight =this.selectors.windowIcon;
+
+        this.events.on.call(this);
+
+    };
+
     /***
      * Bind event listeners to view elements
      */
     app.FooterView.events = {
         on: function () {
 
-            Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow);
+            Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow.bind(this));
+            // Events.subscribe(this.elements.iconToHighlight, 'click', this.iconHighlight.bind(this));
+            app.events.listen('app:window:destroy', this.destroyWindow.bind(this));
+            app.events.listen('app:window:created', this.createNewIcon.bind(this));
+
+            // Events.subscribe(this.iconToHighlight,'click', this.iconHighlight.bind(this));
+        },
+
+        off: function () {
+
         }
     };
 
     /***
      * Create new Windown object
      */
     app.FooterView.createNewWindow = function () {
+        // app.FooterView.el.firstChild.innerHTML += app.templates.footerTemplate;
+        app.events.notify('app:window:create');
+
+    };
+
+    /***
+     * 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() {
+        //     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.iconList.appendChild(wrapper);
+    };
+
+    app.FooterView.destroyWindow = function (evnt) {
+
         /***
-         * TO DO HOMEWORK: add icon for each new window
+         * Need to add code to remove icon
          */
-        app.events.notify('app:window:create');
+        var iconToRemove = this.iconList.querySelector('#'+evnt.detail.id);
+
+        iconToRemove.parentNode.removeChild(iconToRemove);
+
+    };
+
+    app.FooterView.iconHighlight = function () {
+        this.iconToHighlight.classList.add('iconhighlight');
+
+        app.events.notify('app:footericon:highlighted',{ id: this.iconList.id });
     };
 
+
     /***
      * Store cached elements
      */
     app.FooterView.elements = {
-
     };
     /***
      * Elements selectors
      */
     app.FooterView.selectors = {
-        createNewWindow: '.icon-smile'
+        createNewWindow: '.icon-smile',
+        windowIcon: '.window-tab'
     };
-})(window,app);
+
+})(window,app);