Layout events (section or article)

kitchen-sink/app/app.js

@@ -11,8 +11,15 @@ var App = (function(lng, undefined) {
         $$('#touchevents-console').html($$(event.target).data('event'));
     };
 
+    triggerCapture = function(event) {
+        event.stopPropagation();
+        Lungo.Notification.success("Event: " + event.type, "Layout events manager", "info", 2);
+    };
+
     return {
-        eventConsole: eventConsole
+        eventConsole: eventConsole,
+        triggerCapture: triggerCapture
+
     };
 
 })(Lungo);

kitchen-sink/app/asides/features.html

@@ -81,6 +81,15 @@
                 </a>
             </li>
 
+            <!-- Layout Events -->
+            <li>
+                <a href="#layoutevents" data-router="section">
+                    <div class="bubble right">2</div>
+                    <strong>Layout Events</strong>
+                    <small>Load & Unload</small>
+                </a>
+            </li>
+
             <!-- Notifications -->
             <li>
                 <a href="#notification" data-router="section">

kitchen-sink/app/events.trigger.js

@@ -0,0 +1,5 @@
+
+Lungo.Events.init({
+    'load section#layoutevents': App.triggerCapture,
+    'unload section#layoutevents': App.triggerCapture
+});

kitchen-sink/app/sections/layoutevents.html

@@ -0,0 +1,15 @@
+<section id="layoutevents" data-transition="slide">
+    <header data-title="Layout Events">
+        <nav class="box">
+            <a href="#back" data-router="section" data-label="back"></a>
+        </nav>
+    </header>
+
+    <article class="list indented">
+        <ul>
+            <li class="dark">
+                <strong>Lungo gives you the possibility to subscribe to events generated by your layout, for example you'll know when a section/article is loaded or unloaded.</strong>
+            </li>
+        </ul>
+    </article>
+</section>

kitchen-sink/index.html

@@ -149,6 +149,8 @@
                         'app/sections/form.html',
                         'app/sections/aside.html',
                         'app/sections/touchevents.html',
+                        'app/sections/layoutevents.html',
+
                         'app/sections/splash.html',
                         'app/sections/data-attribute.html',
                         'app/sections/scroll.html',
@@ -168,6 +170,8 @@
         <script src="app/events.notification.js"></script>
         <script src="app/events.touch.js"></script>
         <script src="app/events.pull.js"></script>
+        <script src="app/events.trigger.js"></script>
+
 
 </body>
 </html>

src/router/Lungo.Router.js

@@ -67,12 +67,13 @@ Lungo.Router = (function(lng, undefined) {
             var target = lng.Element.Cache.section.find(ELEMENT.ARTICLE + article_id);
 
             if (target.length > 0) {
-                if (_sectionId(current) === _sectionId(target)) {
-                    current.removeClass(CLASS.CURRENT);
-                } else {
-                    lng.Element.Cache.section.children(ELEMENT.ARTICLE).removeClass(CLASS.CURRENT);
+                if (_sectionId(current) !== _sectionId(target)) {
+                    current = lng.Element.Cache.section.children(ELEMENT.ARTICLE);
                 }
-                target.addClass(CLASS.CURRENT);
+
+                current.removeClass(CLASS.CURRENT).trigger(TRIGGER.UNLOAD);
+                target.addClass(CLASS.CURRENT).trigger(TRIGGER.LOAD);
+
                 lng.Element.Cache.article = target;
 
                 lng.View.Article.switchNavItems(article_id);
@@ -124,8 +125,6 @@ Lungo.Router = (function(lng, undefined) {
     };
 
     var _sectionTriggers = function(current, target) {
-
-        console.error("trigger>>", current, target);
         current.trigger(TRIGGER.UNLOAD);
         target.trigger(TRIGGER.LOAD);
     };