refactoring

Author: samuil4

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

@@ -43,6 +43,8 @@ var app = app || {};
         app.events.listen('app:layout:cached', createLayout.bind(this));
     };
 
+    app.windowInstances = [];
+
     /***
      * Internal application events
      */

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

@@ -8,7 +8,8 @@ var app = app || {};
 	app.templates = {
 
         layout: {
-    		footer: '<nav class="menu"><ul><li class="start"><a href="#" class="icon-smile"></a></li><li class="window-tab"><a href="#" class="icon-browser"></a></li></ul></nav>'
+            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>'
         },
 
         windowTemplate: ['<section class="window" id="test">',

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

@@ -0,0 +1,61 @@
+/***
+ * Content view
+ */
+var app = app || {};
+
+(function (global){
+
+    /***
+     * @param {Object} options
+     * returns void
+     */
+    function contentView (options) {
+
+        this.template = options.template;
+        this.name = options.name;
+        this.placeholder = document.getElementById('placeholder-' + options.name);
+
+
+
+        /***
+         * Bind event listeners to view elements
+         */
+        this.bindEvents = function () {
+            app.events.listen('app:window:create', this.createNewWindow);
+        };
+
+        this.unbindEvents = function () {
+
+        };
+
+        /***
+         * Create new Windown object
+         */
+        this.createNewWindow = function () {
+            console.log(2);
+            app.windowInstances.push(new global.windowView({
+                /***
+                 * TO DO Homework: create UNIQUE ID
+                 */
+                id: app.windowInstances.length
+            }));
+        };
+
+
+        this.render = function () {
+
+            this.placeholder.innerHTML = this.template;
+            this.el = document.getElementById('template-' + options.name);
+
+            this.bindEvents();
+        };
+
+        this.destroy = function  () {
+            console.log('destroy', this.template);
+        };
+
+        app.events.listen('view:' + this.name + ':render', this.render.bind(this));
+    };
+
+    app.contentView = contentView;
+})(window);

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

@@ -3,7 +3,7 @@
  */
 var app = app || {};
 
-(function (){
+(function (global){
 
     /***
      * @param {Object} options
@@ -15,13 +15,51 @@ var app = app || {};
         this.name = options.name;
         this.placeholder = document.getElementById('placeholder-' + options.name);
 
+        /***
+         * Elements selectors
+         */
+        this.selectors = {
+            createNewWindow: '.icon-smile'
+        };
+
+        /***
+         * Store cached elements
+         */
+        this.elements = {
 
+        };
+
+        /***
+         * Bind event listeners to view elements
+         */
+        this.bindEvents = function () {
+
+            Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow);
+        };
+
+        this.unbindEvents = function () {
+
+        };
+
+        /***
+         * Create new Windown object
+         */
+        this.createNewWindow = function () {
+            /***
+             * TO DO HOMEWORK: add icon for each new window
+             */
+            app.events.notify('app:window:create');
+        };
 
 
         this.render = function () {
 
             this.placeholder.innerHTML = this.template;
-            this.el = document.getElementById('template-' + options.name)
+            this.el = document.getElementById('template-' + options.name);
+
+            this.elements.createNewWindow = this.el.querySelector(this.selectors.createNewWindow);
+
+            this.bindEvents();
         };
 
         this.destroy = function  () {
@@ -32,4 +70,4 @@ var app = app || {};
     };
 
     app.footerView = footerView;
-})();
+})(window);

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

@@ -14,18 +14,19 @@ var app = app || {};
         //Execpional template or default template
         this.template = options.template || app.templates.windowTemplate;
         this.id = options.id;
-        this.type = options.type; //minimized or maximized
+        this.type = options.type || 'maximized'; //minimized or maximized
 
         this.render = function () {
 
-            app.layout.content.el.innerHTML += this.template;
+            app.layout.content.el.innerHTML += this.template.join('');
         };
 
         this.destroy = function  () {
             console.log('destroy', this.template);
         };
 
-        app.events.listen('window:' + this.id + ':render', this.render.bind(this));
+        this.render();
+        // app.events.listen('window:' + this.id + ':render', this.render.bind(this));
     };
 
     window.windowView = windowView;

EXERCISE/Exercise 4/index.html

@@ -22,6 +22,7 @@
     <script type="text/javascript" src="app/components/events.js"></script>
     <script type="text/javascript" src="app/templates/templates.js"></script>
     <script type="text/javascript" src="app/views/footer-view.js"></script>
+    <script type="text/javascript" src="app/views/content-view.js"></script>
     <script type="text/javascript" src="app/views/window-view.js"></script>
     <script type="text/javascript" src="app/controllers/controller.js"></script>
 

EXERCISE/Exercise 4/styles/style.css

@@ -38,7 +38,7 @@ body {
     width: 40px;
     height: 100%;
     text-align: center;
-    padding: 14px 10px 0 10px;
+    /*padding: 14px 10px 0 10px;*/
     background-color: #ecf0f1;
     border-right: 1px solid #ccc;
 }
@@ -56,6 +56,9 @@ body {
 .wrapper .menu li a {
     font-size: 1.3em;
     color: #31535c;
+    display: inline-block;
+    width: 100%;
+    line-height: 40px;
 }
 
 .window {