pub / sub design pattern example - 16.08.2015

Author: samuil4

EXERCISE/Exercise 4/js/events.js renamed to EXERCISE/Exercise 4/app/components/events.js

@@ -1,9 +1,7 @@
-window.app = window.app || {};
-
 /***
  * Subsciing and Publishing application events
  */
-app.events = {
+var Events = {
 
     /***
      * Create event

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

@@ -13,23 +13,50 @@ var app = app || {};
     var config = {
         el: '.wrapper'
     },
-    
+
         /***
          * Cached App elements
          */
         elements = {},
-    
         instanceStorage = [];
-    
+
     /**
      * Initialize Application
      * @public
      */
     app.init = function () {
-            
+
         cacheElements();
-        setConfig();
-        createLayout();
+        this.bindEvents();
+        app.events.notify('app:layout:cached');
+        app.events.notify('app:ready');
+    };
+
+    app.layout = {};
+
+    /***
+     * Binds apllication wide events
+     */
+    app.bindEvents = function () {
+
+        app.events.listen('app:ready', setConfig.bind(this));
+        app.events.listen('app:layout:cached', createLayout.bind(this));
+    };
+
+    /***
+     * Internal application events
+     */
+    app.events = {
+
+        listen: function (eventName, handler) {
+
+            Events.subscribe(elements.el, eventName, handler);
+        },
+
+        notify: function (eventName) {
+
+            Events.publish(elements.el, eventName);
+        }
     };
 
     /**
@@ -38,8 +65,8 @@ var app = app || {};
      * returns {Object} config
      */
     app.getConfig = function () {
-        
-        return config;  
+
+        return config;
     };
 
     /**
@@ -48,27 +75,33 @@ var app = app || {};
      * returns void
      */
     app.exit = function () {
-        
+
         for (var i = instanceStorage.length - 1; i >= 0; i--) {
             instanceStorage[i].destroy();
         };
     };
-    
+
     /**
      * Create application layout
      */
     function createLayout () {
-        
-        for (var template in app.templates) {
-            instanceStorage.push(new app.view(app.templates[template]));            
+
+        for (var templateName in this.templates.layout) {
+
+            app.layout[templateName] = new this.layoutView({
+                template: this.templates.layout[templateName],
+                name: templateName
+            });
+
+            app.events.notify('view:' + templateName + ':render');
         }
     };
 
     /**
      * Get user specific configuration
      */
     function setConfig () {
-        
+
         config.appWidth = global.innerWidth;
         config.appHeight = global.innerHeight;
     }
@@ -77,7 +110,7 @@ var app = app || {};
      * Cache app main elements
      */
     function cacheElements () {
-        
+
         elements.el = doc.querySelector(config.el);
     }
 

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

@@ -0,0 +1,18 @@
+/***
+ * Stored templates as plain text
+ */
+var app = app || {};
+
+(function () {
+
+	app.templates = {
+
+        layout: {
+    		header: '<header id="template-header">Header</header>',
+    		footer: '<footer id="template-footer">Footer</footer>',
+    		content: '<section id="template-content">CONTENT</section>'
+        },
+
+        windowTemplate: '<div>Window :) yeeeh</div>'
+	};
+})();

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

@@ -0,0 +1,35 @@
+/***
+ * Layout view
+ */
+var app = app || {};
+
+(function (){
+
+    /***
+     * @param {Object} options
+     * returns void
+     */
+    function layoutView (options) {
+
+        this.template = options.template;
+        this.name = options.name;
+        this.placeholder = document.getElementById('placeholder-' + options.name);
+
+
+
+
+        this.render = function () {
+
+            this.placeholder.innerHTML = this.template;
+            this.el = document.getElementById('template-' + options.name)
+        };
+
+        this.destroy = function  () {
+            console.log('destroy', this.template);
+        };
+
+        app.events.listen('view:' + this.name + ':render', this.render.bind(this));
+    };
+
+    app.layoutView = layoutView;
+})();

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

@@ -0,0 +1,32 @@
+/***
+ * Window view
+ */
+var app = app || {};
+
+(function (){
+
+    /***
+     * @param {Object} options
+     * returns void
+     */
+    function windowView (options) {
+
+        //Execpional template or default template
+        this.template = options.template || app.templates.windowTemplate;
+        this.id = options.id;
+        this.type = options.type; //minimized or maximized
+
+        this.render = function () {
+
+            app.layout.content.el.innerHTML += this.template;
+        };
+
+        this.destroy = function  () {
+            console.log('destroy', this.template);
+        };
+
+        app.events.listen('window:' + this.id + ':render', this.render.bind(this));
+    };
+
+    window.windowView = windowView;
+})();

EXERCISE/Exercise 4/index.html

@@ -7,12 +7,19 @@
 </head>
 <body>
 
-    <div class="wrapper"></div>
+    <div class="wrapper">
+        <div id="placeholder-header">
 
-    <script type="text/javascript" src="js/templates.js"></script>
-    <script type="text/javascript" src="js/events.js"></script>
-    <script type="text/javascript" src="js/base-view.js"></script>
-    <script type="text/javascript" src="js/controller.js"></script>
+        </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/layout-view.js"></script>
+    <script type="text/javascript" src="app/views/window-view.js"></script>
+    <script type="text/javascript" src="app/controllers/controller.js"></script>
 
 </body>
 </html>