First commit

Author: An2kataluna

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

@@ -20,9 +20,10 @@ var Events = {
      * @param {Dom Object} el
      * @param {String} eventName
      * @param {Function} handler
+     * @param {Object} params
      * returns void
      */
-    subscribe: function (el,eventName,handler) {
+    subscribe: function (el,eventName,handler,params) {
 
         el.addEventListener(eventName,handler,false);
     },
@@ -31,9 +32,10 @@ var Events = {
      * Publishes an event to the listneres
      * @param {Dom Object} el
      * @param {String} eventName
+     * @param {Object} params
      * returns void
      */
-    publish: function (el,eventName) {
+    publish: function (el,eventName,params) {
 
         var event = this.create(eventName);
         el.dispatchEvent(event);
@@ -50,4 +52,4 @@ var Events = {
     unsubscribe: function (el,eventName,handler) {
         el.removeEventListener(eventName,handler,false);
     }
-};
+};

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

@@ -47,6 +47,7 @@ var app = app || {};
 
     /***
      * Internal application events
+     * @param {Object} params
      */
     app.events = {
 
@@ -55,7 +56,7 @@ var app = app || {};
             Events.subscribe(elements.el, eventName, handler);
         },
 
-        notify: function (eventName) {
+        notify: function (eventName,params) {
 
             Events.publish(elements.el, eventName);
         }
@@ -114,4 +115,4 @@ var app = app || {};
         elements.el = doc.querySelector(config.el);
     }
 
-})(window, document);
+})(window, document);

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

@@ -9,10 +9,10 @@ var app = app || {};
 
         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>'
+    		Footer: '<nav class="menu" id="template-Footer"><ul><li class="start"><a href="javascript:;" class="icon-smile"></a></li></ul></nav>'
         },
 
-        windowTemplate: ['<section class="window" id="test">',
+        windowTemplate: [
             '<header class="header">',
                 '<div class="window-actions">',
                     '<span class="action icon-dash"></span>',
@@ -31,7 +31,8 @@ var app = app || {};
             '</div>',
             '<footer class="footer">',
                 '<strong> Status bar :) </strong>',
-            '</footer>',
-        '</section>']
+            '</footer>'],
+
+        footerTemplate:'<a href="#" class="icon-browser"></a>'
 	};
-})();
+})();

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

@@ -28,7 +28,7 @@
             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
                 for(var selector in this.selectors) {
                     this.elements[selector] = document.querySelector(this.selectors[selector]);
                 }
@@ -58,4 +58,4 @@
         }
     };
 
-})(window);
+})(window);

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

@@ -27,9 +27,30 @@ var app = app || {};
             /***
              * TO DO Homework: create UNIQUE ID
              */
-            id: app.windowInstances.length
+
+             /**
+                * Creates a string that can be used for dynamic id attributes
+                * Example: "id-wm68fu1uk63cjtt9"
+                * @returns {string}
+                */
+             // var uniqueId =
+
+             id: 'id-' + Math.random().toString(36).substr(2, 16)
+
+            // id: 'id' + (new Date()).getTime()
+             // app.windowInstances.length
         }));
     };
 
+    // app.ContentView.selectors={
+    //     destroyWindow: '.icon-delete-circle'
+    // }
+
+    app.ContentView.destroyWindow = function () {
+        console.log(0);
+        // this.parentElement.removeChild(this[i]);
+        app.windowInstances.pop();
+    };
+
 
-})(window, app);
+})(window, app);

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

@@ -16,7 +16,12 @@ var app = app || {};
     app.FooterView.events = {
         on: function () {
 
-            Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow);
+            Events.subscribe(this.elements.createNewWindow, 'click', this.createNewWindow.bind(this));
+            app.events.listen('app:window:destroy', this.destroyWindow.bind(this));
+        },
+
+        off: function () {
+
         }
     };
 
@@ -27,9 +32,29 @@ var app = app || {};
         /***
          * TO DO HOMEWORK: add icon for each new window
          */
+
+        this.createNewIcon();
+        // app.FooterView.el.firstChild.innerHTML += app.templates.footerTemplate;
         app.events.notify('app:window:create');
+
     };
 
+    app.FooterView.createNewIcon = function(){
+        var wrapper=document.createElement('li');
+        wrapper.className='window-tab';
+        wrapper.innerHTML=app.templates.footerTemplate;
+        this.el.firstChild.appendChild(wrapper);
+    };
+
+    app.FooterView.destroyWindow = function () {
+        /***
+         * Need to add code to remove icon
+         */
+
+
+    };
+
+
     /***
      * Store cached elements
      */
@@ -40,6 +65,7 @@ var app = app || {};
      * Elements selectors
      */
     app.FooterView.selectors = {
-        createNewWindow: '.icon-smile'
+        createNewWindow: '.icon-smile',
+        destroyWindow: '.icon-delete-circle'
     };
-})(window,app);
+})(window,app);

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

@@ -17,16 +17,32 @@ var app = app || {};
         this.type = options.type || 'maximized'; //minimized or maximized
 
         this.render();
+
+        this.closeIcon=this.wrapper.querySelector('.icon-delete-circle');
+        Events.subscribe(this.closeIcon, 'click', this.destroy.bind(this));
+
         // app.events.listen('window:' + this.id + ':render', this.render.bind(this));
     };
 
     windowView.prototype.render = function() {
-        app.ContentView.el.innerHTML += this.template.join('');
+        this.wrapper=document.createElement('section');
+        this.wrapper.className='window';
+        this.wrapper.innerHTML=this.template.join('');
+        app.ContentView.el.appendChild(this.wrapper);
+
+
+
+        // .el.innerHTML += this.template;
     };
 
     windowView.prototype.destroy = function() {
+        this.wrapper.parentNode.removeChild(this.wrapper);
         console.log('destroy', this.template);
+
+        app.events.notify('app:window:destroy',{id: this.id});
     };
 
+
+
     window.windowView = windowView;
-})();
+})();

EXERCISE/Exercise 4/index.html

@@ -12,7 +12,7 @@
 <body>
 
     <div class="wrapper">
-        <div id="placeholder-header">
+        <div id="placeholder-Header">
 
         </div>
         <div id="placeholder-Content"></div>
@@ -28,4 +28,4 @@
     <script type="text/javascript" src="app/controllers/controller.js"></script>
 
 </body>
-</html>
+</html>