Added Documentation

An2kataluna · An2kataluna · commit 194572b2bbb0 · 2015-11-22T14:34:04.000+02:00
diff --git a/EXERCISE/Exercise 4/app/views/content-view.js b/EXERCISE/Exercise 4/app/views/content-view.js
@@ -6,8 +6,8 @@ var app = app || {};
 (function (global, app){
 
     /***
-     * @param {Object} options
-     * returns void
+     * Created ContentView
+     * @returns void
      */
     app.ContentView = Object.create(global.BaseView);
 
@@ -22,6 +22,10 @@ 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);
@@ -38,6 +42,11 @@ 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]);
diff --git a/EXERCISE/Exercise 4/app/views/footer-view.js b/EXERCISE/Exercise 4/app/views/footer-view.js
@@ -10,9 +10,14 @@ 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
@@ -47,11 +52,12 @@ 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');
 
     };
@@ -78,28 +84,68 @@ var app = app || {};
         // wrapper.firstChild.style.color = GetRandomColor();
         wrapper.firstChild.style.color = iconcolor;
         this.iconList.appendChild(wrapper);
+        app.FooterView.footerInstances.push({id: wrapper.id});
 
+        this.resetFooter();
 
-        Events.subscribe(wrapper, 'click', this.iconHighlight);
+        wrapper.classList.add("iconHighlight");
+        Events.subscribe(wrapper, 'click', this.iconHighlight(wrapper));
     };
 
-    app.FooterView.destroyWindow = function (evnt) {
+    /***
+     * Creates a new icon in footer
+     * @return void
+     */
+    app.FooterView.resetFooter = function(){
+        // var footerview = this.el;
+        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') {
+                    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);
+    };
 
-
-
+    /***
+     * Highlights the current icon in footer
+     * @param  {Object} elm
+     * @return void
+     */
+    app.FooterView.iconHighlight = function (elm) {
+        if(elm.classList.contains('iconhighlight')){
+            elm.classList.remove('iconhighlight');
+            app.events.notify('app:footericon:unhighlighted:' + elm.id);
+        }
+        else{
+            this.resetFooter();
+            elm.classList.add('iconhighlight');
+            app.events.notify('app:footericon:highlighted:' + elm.id);
+        }
     };
 
-    app.FooterView.iconHighlight = function () {
-        this.classList.add('iconhighlight');
+    app.FooterView.checkState = function (elm){
 
-        app.events.notify('app:footericon:highlighted:' + this.id);
     };
 
 
@@ -108,6 +154,9 @@ var app = app || {};
      */
     app.FooterView.elements = {
     };
+
+    app.FooterView.footerInstances = [];
+
     /***
      * Elements selectors
      */
diff --git a/EXERCISE/Exercise 4/app/views/window-view.js b/EXERCISE/Exercise 4/app/views/window-view.js
@@ -14,7 +14,9 @@ var app = app || {};
         internelMethods: ['destroy', 'minimize', 'maximize', 'highlight'],
 
         /***
-         * Generic initialization method
+         * Window initialization method
+         * @param  {Object} options
+         * @returns void
          */
         init: function (options) {
             this.template = options.template || app.templates.windowTemplate;
@@ -29,6 +31,11 @@ var app = app || {};
             // app.events.listen('window:' + this.id + ':render', this.render.bind(this));
         },
 
+
+        /***
+         * Binds the events of internal methods
+         * @returns void
+         */
         bindInternalMethods: function () {
             var view = this;
 
@@ -39,6 +46,7 @@ var app = app || {};
 
         /***
          * Window render
+         * @returns void
          */
         render: function () {
             this.wrapper=document.createElement('section');
@@ -56,6 +64,7 @@ var app = app || {};
 
         /***
          * Window destroy
+         * @returns void
          */
         destroy: function () {
             this.events.off.call(this);
@@ -65,6 +74,10 @@ var app = app || {};
             app.events.notify('app:window:destroy',{id: this.id});
         },
 
+        /***
+         * Window minimize
+         * @returns void
+         */
         minimize: function(){
             this.resetView();
 
@@ -74,6 +87,10 @@ var app = app || {};
             app.events.notify('app:window:minimized');
         },
 
+        /***
+         * Window reset- removes the extra styles added in code
+         * @returns void
+         */
         resetView: function () {
             var view = this;
             this.wrapper.classList.forEach(function(className){
@@ -83,6 +100,10 @@ var app = app || {};
             });
         },
 
+        /***
+         * Window popup
+         * @returns void
+         */
         popup: function(){
             this.resetView();
 
@@ -92,6 +113,10 @@ var app = app || {};
             // app.events.notify('app:window:popup');
         },
 
+        /***
+         * Window maximize
+         * @returns void
+         */
         maximize: function(){
             if(this.type === "maximized"){
                 this.wrapper.removeAttribute("style");
@@ -106,27 +131,52 @@ var app = app || {};
             }
         },
 
+        /***
+         * Window highlight
+         * @param  {EventObject} evnt
+         * @returns void
+         */
         highlight: function(evnt){
+            this.resetView();
             this.wrapper.classList.add('windowhighlight');
         },
 
+        /***
+         * Window unhighlight
+         * @param  {EventObject} evnt
+         * @returns void
+         */
+        unhighlight: function(evnt){
+            this.wrapper.classList.remove('windowhighlight');
+        },
+
+        /***
+         * Bind event listeners to view elements
+         */
         events: {
 
             on: function () {
                 Events.subscribe(this.closeIcon, 'click', this.destroy);
                 Events.subscribe(this.minimizeIcon, 'click', this.minimize);
                 Events.subscribe(this.maximizeIcon, 'click', this.maximize);
+                app.events.listen('app:footericon:unhighlighted:' + this.id, this.unhighlight);
                 app.events.listen('app:footericon:highlighted:' + this.id, this.highlight);
+
             },
 
             off: function () {
                 Events.unsubscribe(this.closeIcon, 'click', this.destroy);
                 Events.unsubscribe(this.minimizeIcon, 'click', this.minimize);
                 Events.unsubscribe(this.maximizeIcon, 'click', this.maximize);
+                app.events.remove('app:footericon:unhighlighted:' + this.id, this.unhighlight);
                 app.events.remove('app:footericon:highlighted:' + this.id, this.highlight);
+
             }
         },
 
+        /***
+         * Elements selectors
+         */
         selectors: {
             closeIcon:'.icon-delete-circle',
             minimizeIcon: '.icon-dash',
diff --git a/EXERCISE/Exercise 4/styles/style.css b/EXERCISE/Exercise 4/styles/style.css
@@ -225,3 +225,21 @@ body {
  .wrapper .menu li.iconhighlight{
     background-color: rgba(5,180,186,0.2);
  }
+
+/*
+ * Hidden Window by initialization
+ */
+
+ .hidden{
+  display: none;
+ }
+
+/*
+ * Maximized Window
+ */
+ .maxi{
+  position: absolute;
+  top: 0;
+  max-width: 100%;
+ }
+
