latest changes - OLOO style added

Author: samuil4

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

@@ -90,12 +90,10 @@ var app = app || {};
 
         for (var templateName in this.templates.layout) {
 
-            app.layout[templateName] = new this[templateName + 'View']({
+            this[templateName + 'View'].init({
                 template: this.templates.layout[templateName],
                 name: templateName
             });
-
-            app.events.notify('view:' + templateName + ':render');
         }
     };
 

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

@@ -8,8 +8,8 @@ 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><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/base-view.js

@@ -0,0 +1,61 @@
+/***
+ * Base view
+ * - render
+ * - destroy
+ * - bind events
+ * - unbind events
+ */
+(function(global){
+
+    global.BaseView = {
+
+        /***
+         * Generic initialization method
+         */
+        init: function (options) {
+            this.template = options.template;
+            this.name = options.name;
+            this.placeholder = document.getElementById('placeholder-' + options.name);
+
+            this.render();
+        },
+
+        /***
+         * Generic render
+         */
+        render: function () {
+            this.placeholder.innerHTML = this.template;
+            this.el = document.getElementById('template-' + this.name);
+
+            if(this.selectors) {
+
+                for(var selector in this.selectors) {
+                    this.elements[selector] = document.querySelector(this.selectors[selector]);
+                }
+            }
+
+            this.events.on.call(this);
+        },
+
+        /***
+         * Generic destroy
+         */
+        destroy: function () {
+            console.log('destroy', this.template);
+
+            this.events.off();
+        },
+
+        events: {
+
+            on: function () {
+
+            },
+
+            off: function () {
+
+            }
+        }
+    };
+
+})(window);

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

@@ -3,58 +3,33 @@
  */
 var app = app || {};
 
-(function (global){
+(function (global, app){
 
     /***
      * @param {Object} options
      * returns void
      */
-    function contentView (options) {
+    app.ContentView = Object.create(global.BaseView);
 
-        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.ContentView.events = {
+        on: 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
-            }));
-        };
+        },
 
+        off: function (argument) {
 
-        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.createNewWindow = function () {
+        console.log(2);
+        app.windowInstances.push(new global.windowView({
+            /***
+             * TO DO Homework: create UNIQUE ID
+             */
+            id: app.windowInstances.length
+        }));
     };
 
-    app.contentView = contentView;
-})(window);
+
+})(window, app);

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

@@ -3,71 +3,43 @@
  */
 var app = app || {};
 
-(function (global){
-
+(function (global,app){
     /***
      * @param {Object} options
      * returns void
      */
-    function footerView (options) {
-
-        this.template = options.template;
-        this.name = options.name;
-        this.placeholder = document.getElementById('placeholder-' + options.name);
-
-        /***
-         * Elements selectors
-         */
-        this.selectors = {
-            createNewWindow: '.icon-smile'
-        };
-
-        /***
-         * Store cached elements
-         */
-        this.elements = {
+    app.FooterView = Object.create(global.BaseView);
 
-        };
-
-        /***
-         * Bind event listeners to view elements
-         */
-        this.bindEvents = function () {
+    /***
+     * Bind event listeners to view elements
+     */
+    app.FooterView.events = {
+        on: function () {
 
             Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow);
-        };
-
-        this.unbindEvents = function () {
-
-        };
+        }
+    };
 
+    /***
+     * Create new Windown object
+     */
+    app.FooterView.createNewWindow = function () {
         /***
-         * Create new Windown object
+         * TO DO HOMEWORK: add icon for each new window
          */
-        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.elements.createNewWindow = this.el.querySelector(this.selectors.createNewWindow);
-
-            this.bindEvents();
-        };
+        app.events.notify('app:window:create');
+    };
 
-        this.destroy = function  () {
-            console.log('destroy', this.template);
-        };
+    /***
+     * Store cached elements
+     */
+    app.FooterView.elements = {
 
-        app.events.listen('view:' + this.name + ':render', this.render.bind(this));
     };
-
-    app.footerView = footerView;
-})(window);
+    /***
+     * Elements selectors
+     */
+    app.FooterView.selectors = {
+        createNewWindow: '.icon-smile'
+    };
+})(window,app);

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

@@ -21,7 +21,7 @@ var app = app || {};
     };
 
     windowView.prototype.render = function() {
-        app.layout.content.el.innerHTML += this.template.join('');
+        app.ContentView.el.innerHTML += this.template.join('');
     };
 
     windowView.prototype.destroy = function() {

EXERCISE/Exercise 4/index.html

@@ -15,12 +15,13 @@
         <div id="placeholder-header">
 
         </div>
-        <div id="placeholder-content"></div>
-        <div id="placeholder-footer"></div>
+        <div id="placeholder-Content"></div>
+        <div id="placeholder-Footer"></div>
     </div>
 
     <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/base-view.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>