Added minimize and maximize functions , hightlight function doesn't work yet , need to fix(footer view render and highlight functions and to bind events)

Author: An2kataluna

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

@@ -81,7 +81,7 @@ var app = app || {};
 
         for (var i = instanceStorage.length - 1; i >= 0; i--) {
             instanceStorage[i].destroy();
-        };
+        }
     };
 
     /**
@@ -96,7 +96,7 @@ var app = app || {};
                 name: templateName
             });
         }
-    };
+    }
 
     /**
      * Get user specific configuration

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

@@ -15,14 +15,17 @@ var app = app || {};
         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
+            // 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);
 
     };
@@ -34,8 +37,11 @@ var app = app || {};
         on: function () {
 
             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 () {
@@ -47,7 +53,6 @@ var app = app || {};
      * Create new Windown object
      */
     app.FooterView.createNewWindow = function () {
-
         // app.FooterView.el.firstChild.innerHTML += app.templates.footerTemplate;
         app.events.notify('app:window:create');
 
@@ -88,28 +93,24 @@ var app = app || {};
 
     };
 
+    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',
-        destroyWindow: '.window-tab'
+        windowIcon: '.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

@@ -17,7 +17,7 @@ var app = app || {};
         init: function (options) {
            this.template = options.template || app.templates.windowTemplate;
            this.id = options.id;
-           this.type = options.type || 'maximized'; //minimized or maximized
+           this.type = options.type || 'normalized'; //minimized or maximized
 
             this.render();
 
@@ -34,7 +34,11 @@ 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.minimizeIcon = this.wrapper.querySelector(this.selectors.minimizeIcon);
+           this.maximizeIcon = this.wrapper.querySelector(this.selectors.maximizeIcon);
+
 
            this.events.on.call(this);
         },
@@ -49,10 +53,56 @@ var app = app || {};
             app.events.notify('app:window:destroy',{id: this.id});
         },
 
+        minimize: function(){
+          // this.wrapper.remove('fadeInUp');
+          // this.wrapper.remove('animated');
+
+          this.wrapper.classList.add('fadeOutDown');
+          this.wrapper.classList.add('animated');
+
+          app.events.notify('app:window:minimized');
+        },
+
+        popup: function(){
+          // this.wrapper.remove('fadeOutDown');
+          // this.wrapper.remove('animated');
+
+          this.wrapper.classList.add('fadeInUp');
+          this.wrapper.classList.add('animated');
+
+          app.events.notify('app:window:popup');
+        },
+
+        maximize: function(){
+          if(this.type === "maximized"){
+            this.wrapper.removeAttribute("style");
+            this.type="normalized";
+            app.events.notify('app:window:normalized');
+          }
+          else{
+            this.wrapper.style.maxWidth = "100%";
+            this.wrapper.style.height = global.innerHeight-70+"px";
+            this.type="maximized";
+            app.events.notify('app:window:maximized');
+          }
+        },
+
+        highlight: function(evnt){
+          for (var i = app.windowInstances.length - 1; i >= 0; i--) {
+              if(app.windowInstances[i].id === evnt.detail.id){
+                  app.windowInstances[i].wrapper.classList.add('windowhighlight');
+                  this.popup();
+              }
+          }
+        },
+
         events: {
 
             on: function () {
                 Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
+                Events.subscribe(this.minimizeIcon, 'click', this.minimize.bind(this));
+                Events.subscribe(this.maximizeIcon, 'click', this.maximize.bind(this));
+                app.events.listen('app:footericon:highlighted', this.highlight.bind(this));
             },
 
             off: function () {
@@ -61,7 +111,9 @@ var app = app || {};
         },
 
         selectors: {
-            closeIcon:'.icon-delete-circle'
+            closeIcon:'.icon-delete-circle',
+            minimizeIcon: '.icon-dash',
+            maximizeIcon: '.icon-popup'
         }
     };
 })(window);

EXERCISE/Exercise 4/styles/style.css

@@ -64,7 +64,9 @@ body {
 .window {
     max-width: 70%;
     min-width: 400px;
+    margin: 0 auto;
     border: 1px solid #ccc;
+    transition: all .2s ease-in-out;
 }
 
 .window .header {
@@ -125,4 +127,101 @@ body {
     border-right: 1px solid #ccc;
     background-color: #ecf0f1;
     font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
-}
+}
+
+
+/*
+ * Css Animations
+ */
+
+ .animated {
+   -webkit-animation-duration: 2s;
+   animation-duration: 2s;
+   -webkit-animation-fill-mode: both;
+   animation-fill-mode: both;
+ }
+
+ /*
+  * Go Down
+  */
+
+ @-webkit-keyframes fadeOutDown {
+   from {
+     opacity: 1;
+   }
+
+   to {
+     opacity: 0;
+     -webkit-transform: translate3d(0%, 100%, 0);
+     transform: translate3d(-10%, 100%, 0);
+   }
+ }
+
+ @keyframes fadeOutDown {
+   from {
+     opacity: 1;
+   }
+
+   to {
+     opacity: 0;
+     -webkit-transform: translate3d(0%, 100%, 0);
+     transform: translate3d(-10%, 100%, 0);
+   }
+ }
+
+ .fadeOutDown {
+   -webkit-animation-name: fadeOutDown;
+   animation-name: fadeOutDown;
+ }
+
+ @-webkit-keyframes fadeInUp {
+   from {
+     opacity: 0;
+     -webkit-transform: translate3d(0, 100%, 0);
+     transform: translate3d(0, 100%, 0);
+   }
+
+   to {
+     opacity: 1;
+     -webkit-transform: none;
+     transform: none;
+   }
+ }
+
+ /*
+  * Go Up
+  */
+
+ @keyframes fadeInUp {
+   from {
+     opacity: 0;
+     -webkit-transform: translate3d(0, 100%, 0);
+     transform: translate3d(0, 100%, 0);
+   }
+
+   to {
+     opacity: 1;
+     -webkit-transform: none;
+     transform: none;
+   }
+ }
+
+ .fadeInUp {
+   -webkit-animation-name: fadeInUp;
+   animation-name: fadeInUp;
+ }
+
+/*
+ * Highliting
+ */
+
+ /*.window:hover , */
+ .windowhighlight{
+     box-shadow: 0px 0px 26px 0px #05b4ba;
+     /*zoom: 115%;*/
+     transition: all .2s ease-in-out;
+     transform: scale(1.1);
+ }
+ .iconhighlight{
+    background-color: rgba(5,180,186,0.2);
+ }