Merge pull request CodiCamp#3 from An2kataluna/master

22.11.2015

Author: samuil4

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

@@ -11,6 +11,7 @@ var app = app || {};
      * Base app config
      */
     var config = {
+
         el: '.wrapper'
     },
 

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

@@ -8,11 +8,13 @@ var app = app || {};
 	app.templates = {
 
         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></ul></nav>'
         },
 
         windowTemplate: [
+
             '<header class="header">',
                 '<div class="window-actions">',
                     '<span class="action icon-dash"></span>',

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

@@ -13,6 +13,7 @@
          * Generic initialization method
          */
         init: function (options) {
+
             this.template = options.template;
             this.name = options.name;
             this.placeholder = document.getElementById('placeholder-' + options.name);
@@ -24,6 +25,7 @@
          * Generic render
          */
         render: function () {
+
             this.placeholder.innerHTML = this.template;
             this.el = document.getElementById('template-' + this.name);
 
@@ -41,8 +43,8 @@
          * Generic destroy
          */
         destroy: function () {
-            console.log('destroy', this.template);
 
+            // console.log('destroy', this.template);
             this.events.off();
         },
 

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

@@ -6,13 +6,15 @@ var app = app || {};
 (function (global, app){
 
     /***
-     * @param {Object} options
-     * returns void
+     * Created ContentView
+     * @returns void
      */
     app.ContentView = Object.create(global.BaseView);
 
     app.ContentView.events = {
+
         on: function () {
+
             app.events.listen('app:window:create', this.createNewWindow);
             app.events.listen('app:window:destroy', this.destroyWindow);
         },
@@ -22,9 +24,15 @@ var app = app || {};
         }
     };
 
+    /***
+     * Creates new Instance of WindowView and adds unique id
+     * @returns void
+     */
     app.ContentView.createNewWindow = function () {
+
         console.log(2);
         var windowInstance = Object.create(global.WindowView);
+
         /**
            * Creates a string that can be used for dynamic id attributes
            * Example: "id-wm68fu1uk63cjtt9"
@@ -38,7 +46,13 @@ var app = app || {};
     //     destroyWindow: '.icon-delete-circle'
     // }
 
+    /***
+     * Removes the current WindowView instance
+     * @param  {EventObject} evnt
+     * @returns void
+     */
     app.ContentView.destroyWindow = function (evnt) {
+
         console.log(0);
         // this.parentElement.removeChild(this[i]);
         for (var i = app.windowInstances.length - 1; i >= 0; i--) {
@@ -49,5 +63,4 @@ var app = app || {};
 
     };
 
-
 })(window, app);

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

@@ -10,9 +10,15 @@ var app = app || {};
      */
     app.FooterView = Object.create(global.BaseView);
 
+    /***
+     * FooterView render
+     * @returns void
+     */
     app.FooterView.render= function () {
+
         this.placeholder.innerHTML = this.template;
         this.el = document.getElementById('template-' + this.name);
+        this.state='highlightedIcon';// highlightedIcon, unhighlightedIcon
 
         if(this.selectors) {
             // in contentView selectors is undefined; in footer view we have createNewWindow and windowIcon as selectors
@@ -23,7 +29,6 @@ var app = app || {};
 
         this.iconList = this.el.firstChild;
 
-
         this.events.on.call(this);
 
     };
@@ -32,13 +37,13 @@ var app = app || {};
      * Bind event listeners to view elements
      */
     app.FooterView.events = {
+
         on: function () {
 
             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));
-
-            // Events.subscribe(this.iconToHighlight,'click', this.iconHighlight.bind(this));
+            app.events.listen('app:window:minimized', this.windowMinimized);
         },
 
         off: function () {
@@ -47,13 +52,13 @@ var app = app || {};
     };
 
     /***
-     * Create new Windown object
+     * Create new Window Object
+     * @returns void
      */
     app.FooterView.createNewWindow = function () {
-        // app.FooterView.el.firstChild.innerHTML += app.templates.footerTemplate;
 
+        this.state='highlightedIcon';
         app.events.notify('app:window:create');
-
     };
 
     /***
@@ -62,56 +67,108 @@ var app = app || {};
      * @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.footerInstances.push({id: wrapper.id});
 
+        this.resetFooter();
 
+        wrapper.classList.add("iconhighlight");
         Events.subscribe(wrapper, 'click', this.iconHighlight);
     };
 
+    /***
+     * Highlights the current icon in footer
+     * @param  {Object} elm
+     * @return void
+     */
+    app.FooterView.iconHighlight = function (evnt) {
+
+        var elm = evnt.target.parentNode;
+        if (elm.classList.contains('iconhighlight')){
+            elm.classList.remove('iconhighlight');
+            app.events.notify('app:footericon:unhighlighted:' + elm.id);
+        }
+        else {
+            app.FooterView.resetFooter();
+            elm.classList.add('iconhighlight');
+            app.events.notify('app:footericon:highlighted:' + elm.id);
+        }
+    };
+
+    /***
+     * What happens when window gets minimized
+     * @return void
+     */
+    app.FooterView.windowMinimized = function(evnt){
+
+        if(evnt.detail.id) {
+            var currentElement = document.getElementById(evnt.detail.id);
+            currentElement.classList.remove('iconhighlight');
+        }
+    },
+    /***
+     * Creates a new icon in footer
+     * @return void
+     */
+    app.FooterView.resetFooter = function(){
+
+        for (var i = app.FooterView.footerInstances.length - 1; i >= 0; i--) {
+            var currentElement = document.getElementById(app.FooterView.footerInstances[i].id);
+
+            currentElement.classList.forEach(function(className){
+                if(className !== 'window-tab') {
+                    app.events.notify('app:footericon:unhighlighted:' + app.FooterView.footerInstances[i].id);
+                    currentElement.classList.remove(className);
+                }
+            });
+        }
+    };
+
+    /***
+     * Destroys the footer icon of destroyed window
+     * @param  {EventObject} evnt
+     * @return void
+     */
     app.FooterView.destroyWindow = function (evnt) {
 
+        for (var i = app.FooterView.footerInstances.length - 1; i >= 0; i--) {
+            if(app.FooterView.footerInstances[i].id === evnt.detail.id){
+                app.FooterView.footerInstances.splice(i,1);
+            }
+        }
         /***
          * Need to add code to remove icon
          */
         var iconToRemove = this.iconList.querySelector('#'+evnt.detail.id);
         Events.unsubscribe(iconToRemove,'click',this.iconHighlight);
         iconToRemove.parentNode.removeChild(iconToRemove);
-
-
-
     };
 
-    app.FooterView.iconHighlight = function () {
-        this.classList.add('iconhighlight');
-
-        app.events.notify('app:footericon:highlighted:' + this.id);
-    };
+    // app.FooterView.checkState = function (elm){
 
+    // };
 
     /***
      * Store cached elements
      */
     app.FooterView.elements = {
     };
+
+    app.FooterView.footerInstances = [];
+
     /***
      * Elements selectors
      */
     app.FooterView.selectors = {
+
         createNewWindow: '.icon-smile',
         windowIcon: '.window-tab'
     };