Merge

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/form.html

@@ -6,48 +6,47 @@
     </header>
 
     <article class="scroll">
-            <form>
-                <input type="search" placeholder="type your search" />
-                <a href="#" class="button theme" data-icon="search"></a>
-
-                <div class="six columns">
-                    <label>Address</label>
-                    <input type="text" placeholder="placeholder"/>
-                </div>
-                <div class="three columns right">
-                    <label>Pin Code</label>
-                    <input type="password" value="value" disabled/>
+        <form class="margined">
+            <input type="search" placeholder="type your search" />
+            <a href="#" class="button theme" data-icon="search"></a>
+
+            <div class="six columns">
+                <label>Address</label>
+                <input type="text" placeholder="placeholder"/>
+            </div>
+            <div class="three columns right">
+                <label>Pin Code</label>
+                <input type="password" value="value" disabled/>
+            </div>
+            <textarea></textarea>
+
+            <label>Select your skill</label>
+            <label class="select">
+                <select class="custom">
+                    <option value="1">HTML5 Jedi</option>
+                    <option value="2">Two</option>
+                    <option value="3">Three</option>
+                </select>
+            </label>
+
+
+            <label>Progress of project</label>
+            <div id="progress-normal" data-progress="25%"></div>
+
+            <label>Range 50%</label>
+            <input type="range" placeholder="type your name" />
+
+            <div class="one row">
+                <input type="range" min="0" max="1" class="checkbox left" value="0">
+                <input type="range" min="0" max="1" class="checkbox right active" value="1">
+            </div>
+                <div class="four columns left">
+                    <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
                 </div>
-                <textarea></textarea>
-
-                <label>Select your skill</label>
-                <label class="select">
-                    <select class="custom">
-                        <option value="1">HTML5 Jedi</option>
-                        <option value="2">Two</option>
-                        <option value="3">Three</option>
-                    </select>
-                </label>
-
-
-                <label>Progress of project</label>
-                <div id="progress-normal" data-progress="25%"></div>
-
-                <label>Range 50%</label>
-                <input type="range" placeholder="type your name" />
-
-                <div class="one row">
-                    <input type="range" min="0" max="1" class="checkbox left" value="0">
-                    <input type="range" min="0" max="1" class="checkbox right active" value="1">
+                <div class="four columns right">
+                    <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
                 </div>
-                    <div class="four columns left">
-                        <a href="#" class="button big theme" data-label="Accept" data-icon="check"></a>
-                    </div>
-                    <div class="four columns right">
-                        <a href="#" class="button big red" data-label="Cancel" data-icon="close"></a>
-                    </div>
-            </form>
-        </ul>
+        </form>
 
 
     </article>

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/app/sections/list.html

@@ -97,7 +97,7 @@
 
             <li>
                 <a href="#">
-                    <a href="#" class="button small red right" data-label="delete"></a>
+                    <a href="#" class="button small red right" data-label="button"></a>
                     <strong>&lt;strong&gt; element</strong>
                     <small>with &lt;small&gt; element</small>
                 </a>
@@ -222,6 +222,15 @@
                 </a>
             </li>
 
+            <li>
+                <a href="#">
+                    <a href="#" class="button small red right" data-label="button"></a>
+                    <strong>&lt;strong&gt; element</strong>
+                    <small>with &lt;small&gt; element</small>
+                </a>
+            </li>
+
+
             <li class="anchor">With data-icon or data-image attribute</li>
             <li data-image="http://lungo.tapquo.com/resources/icon@2x.png">
                 <strong>&lt;li data-image&gt; + &lt;strong&gt; </strong>

kitchen-sink/index.html

@@ -55,8 +55,8 @@
             </nav>
             <div class="left">
                 <div class="centered title with-subtitle">
-                    Lungo Framework
-                    <small class="subtitle">BETA 2.d</small>
+                    Lungo
+                    <small class="subtitle">HTML5 Cross-Device Framework</small>
                 </div>
                 </div>
         </header>
@@ -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',
@@ -170,6 +172,6 @@
         <script src="app/events.touch.js"></script>
         <script src="app/events.pull.js"></script>
         <script src="app/events.carousel.js"></script>
-
+        <script src="app/events.trigger.js"></script>
 </body>
 </html>

src/router/Lungo.Router.js

@@ -29,9 +29,9 @@ Lungo.Router = (function(lng, undefined) {
         var current =  lng.Element.Cache.section;
 
         if (_notCurrentTarget(section_id, current)) {
-            var target = lng.Element.Cache.sections.siblings(ELEMENT.SECTION + section_id);
-            if (target.length > 0) {
+            var target = current.siblings(ELEMENT.SECTION + section_id);
 
+            if (target.length > 0) {
                 target_transition = target.data('transition');
                 if (target_transition) {
                     _assignTransitionOrigin(current);
@@ -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);
@@ -106,7 +107,7 @@ Lungo.Router = (function(lng, undefined) {
         current.removeClass(CLASS.SHOW);
 
         lng.Router.History.removeLast();
-        target = lng.Element.Cache.sections.siblings(ELEMENT.SECTION + lng.Router.History.current());
+        target = current.siblings(ELEMENT.SECTION + lng.Router.History.current());
 
         _assignTransition(target, target.data('transition-origin'));
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);

src/stylesheets/Lungo.widgets.form.less

@@ -15,7 +15,6 @@
 
 
 form {
-    margin: 3%;
 
     &.wrapper input:not([type=checkbox]), textarea, select {
         margin: 3px 0px 3px 0px;

src/stylesheets/Lungo.widgets.less

@@ -36,9 +36,10 @@
     &.right { float: right;}
 }
 
-
 .hidden { display: none; }
 .indented > * { margin: 10px; }
+.margined { margin: 3%; }
+
 .wrapper { padding: 8px 8px; }
 
 .icon.small { font-size: 1.3em; }

src/stylesheets/css/Lungo.widgets.css

@@ -41,6 +41,9 @@
 .indented > * {
   margin: 10px;
 }
+.margined {
+  margin: 3%;
+}
 .wrapper {
   padding: 8px 8px;
 }

src/stylesheets/css/Lungo.widgets.form.css

@@ -9,7 +9,6 @@
 /* DIMENSIONS */
 /* COLORS */
 form {
-  margin: 3%;
   /* @group search */
 
 }
@@ -77,13 +76,13 @@ form input[type=search] {
   width: 86%;
   display: inline-block;
 }
-form input[type=search]  + .button {
+form input[type=search] + .button {
   float: right;
   padding: 0px;
   width: 11%;
   height: 30px;
 }
-form input[type=search]  + .button .icon {
+form input[type=search] + .button .icon {
   top: -3px;
   float: none;
 }