Now data-target attribute is data-router

… in API JavaScript Lungo.Router...

examples/kitchen-sink/app/resources/asides/features.html

@@ -4,7 +4,7 @@
         <ul>
             <!-- Basic Layout -->
             <li class="current">
-                <a href="#main-article" data-target="article">
+                <a href="#main-article" data-router="article">
                     <strong>Meet the frameworks</strong>
                     <small>A brief summary of features.</small>
                 </a>
@@ -12,7 +12,7 @@
 
             <!-- Layout & Navigation -->
             <li>
-                <a href="#layout" data-target="section">
+                <a href="#layout" data-router="section">
                     <div class="bubble right">5</div>
                     <strong>Layout</strong>
                     <small>How to distribute the content in your app.</small>
@@ -21,7 +21,7 @@
 
             <!-- List -->
             <li>
-                <a href="#list" data-target="section" data-count="17">
+                <a href="#list" data-router="section" data-count="17">
                     <strong>Lists</strong>
                     <small>Different formats for creating lists.</small>
                 </a>
@@ -29,7 +29,7 @@
 
             <!-- Forms -->
             <li>
-                <a href="#form" data-target="section">
+                <a href="#form" data-router="section">
                     <div class="bubble right">8</div>
                     <strong>Form Elements</strong>
                     <small>Controls available in BETA version</small>
@@ -38,7 +38,7 @@
 
             <!-- Asides -->
             <li>
-                <a href="#aside" data-target="section">
+                <a href="#aside" data-router="section">
                     <div class="bubble right">8</div>
                     <strong>Asides</strong>
                     <small>The fashion element in all cool Apps</small>
@@ -47,7 +47,7 @@
 
             <!-- Data-Attributes -->
             <li>
-                <a href="#data" data-target="section">
+                <a href="#data" data-router="section">
                     <div class="bubble right">9</div>
                     <strong>Data-attributes</strong>
                     <small>Semantic links to create complex elements</small>
@@ -56,7 +56,7 @@
 
             <!-- Icons -->
             <li>
-                <a href="#icon" data-target="section">
+                <a href="#icon" data-router="section">
                     <div class="bubble right">109</div>
                     <strong>Icons</strong>
                     <small>A huge repository vectorized icons</small>
@@ -65,7 +65,7 @@
 
             <!-- Scrolls -->
             <li>
-                <a href="#scroll" data-target="section">
+                <a href="#scroll" data-router="section">
                     <div class="bubble right">2</div>
                     <strong>Scrolls</strong>
                     <small>Everything is scrollable</small>
@@ -74,7 +74,7 @@
 
             <!-- Touch Events -->
             <li>
-                <a href="#touchevents" data-target="section">
+                <a href="#touchevents" data-router="section">
                     <div class="bubble right">19</div>
                     <strong>Touch Events</strong>
                     <small>Touch, Tap, Double-Tap, Swipe...</small>
@@ -83,7 +83,7 @@
 
             <!-- Notifications -->
             <li>
-                <a href="#notification" data-target="section">
+                <a href="#notification" data-router="section">
                     <div class="bubble right">8</div>
                     <strong>Notifications</strong>
                     <small>Cross-device notification system</small>
@@ -92,7 +92,7 @@
 
             <!-- Colours -->
             <li>
-                <a href="#color" data-target="section" data-title="Colours">
+                <a href="#color" data-router="section" data-title="Colours">
                     <div class="bubble right">14</div>
                     <strong>Colors</strong>
                     <small>Everything is more beautiful if you put a color.</small>
@@ -101,7 +101,7 @@
 
             <!-- Grid System -->
             <li>
-                <a href="#grid" data-target="section">
+                <a href="#grid" data-router="section">
                     <strong>Grid System</strong>
                     <small>System percentage dimension</small>
                 </a>

examples/kitchen-sink/app/resources/asides/left.html

@@ -3,7 +3,7 @@
     <article class="list">
         <ul>
             <li>
-                <a href="#aside-example" data-target="article" data-icon="user">
+                <a href="#aside-example" data-router="article" data-icon="user">
                     <strong>Tap to close</strong>
                     <small>Lorem ipsum dolor sit amet.</small>
                 </a>

examples/kitchen-sink/app/resources/asides/right.html

@@ -1,7 +1,7 @@
 <aside id="right" class="right small">
     <nav>
-        <a href="#aside-example" data-target="article" class="current" data-icon="clock"></a>
-        <a href="#aside-example" data-target="article" data-icon="user" data-count="14"></a>
-        <a href="#aside-example" data-target="article" data-icon="pushpin"></a>
+        <a href="#aside-example" data-router="article" class="current" data-icon="clock"></a>
+        <a href="#aside-example" data-router="article" data-icon="user" data-count="14"></a>
+        <a href="#aside-example" data-router="article" data-icon="pushpin"></a>
     </nav>
 </aside>

examples/kitchen-sink/app/resources/sections/aside.html

@@ -1,13 +1,13 @@
-<section id="aside" data-target="slide">
+<section id="aside" data-router="slide">
     <header data-title="Asides">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
     <article id="aside-example" class="indented">
         <div>
-            <a href="#left" data-target="aside" data-icon="left" class="button big blue">Example of normal aside</a>
-            <a href="#right" data-target="aside" data-icon="right" class="button big red">Example of mini right aside</a>
+            <a href="#left" data-router="aside" data-icon="left" class="button big blue">Example of normal aside</a>
+            <a href="#right" data-router="aside" data-icon="right" class="button big red">Example of mini right aside</a>
         </div>
     </article>
 </section>

examples/kitchen-sink/app/resources/sections/color.html

@@ -1,7 +1,7 @@
 <section id="color" data-transition="slide">
     <header data-title="Colors">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
     <article class="scroll indented">

examples/kitchen-sink/app/resources/sections/data-attribute.html

@@ -1,7 +1,7 @@
 <section id="data" data-transition="slide">
     <header data-title="Data Attributes">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 

examples/kitchen-sink/app/resources/sections/form.html

@@ -1,7 +1,7 @@
 <section id="form" data-transition="slide">
     <header data-title="Form Elements">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 

examples/kitchen-sink/app/resources/sections/grid.html

@@ -1,7 +1,7 @@
 <section id="grid" data-transition="slide">
     <header data-title="Grid System">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 

examples/kitchen-sink/app/resources/sections/icon.html

@@ -1,13 +1,13 @@
 <section id="icon" data-transition="slide">
     <header class="extended" data-title="Icons Repository">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 
     <nav class="groupbar">
-        <a href="#icons-default" data-target="article" data-label="Normal" data-count="72" class="current"></a>
-        <a href="#icons-brands" data-target="article" data-label="Brands" data-count="37" ></a>
+        <a href="#icons-default" data-router="article" data-label="Normal" data-count="72" class="current"></a>
+        <a href="#icons-brands" data-router="article" data-label="Brands" data-count="37" ></a>
     </nav>
 
     <article id="icons-default" class="list scroll indented">

examples/kitchen-sink/app/resources/sections/layout.html

@@ -1,26 +1,26 @@
 <section id="layout" data-transition="slide">
     <header data-title="Layout" class="extended">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
         <nav class="right button">
-            <a href="#splash" data-target="section" data-icon="user" data-label="Splash"></a>
+            <a href="#splash" data-router="section" data-icon="user" data-label="Splash"></a>
         </nav>
     </header>
 
     <nav class="groupbar">
-        <a href="#layout-art1" data-target="article" class="current" data-label="Profile"></a>
-        <a href="#layout-art2" data-target="article" data-label="Inbox" data-count="3"></a>
-        <a href="#layout-art3" data-target="article" data-label="Map"></a>
-        <a href="#layout-art4" data-target="article" data-label="Settings"></a>
+        <a href="#layout-art1" data-router="article" class="current" data-label="Profile"></a>
+        <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="3"></a>
+        <a href="#layout-art3" data-router="article" data-label="Map"></a>
+        <a href="#layout-art4" data-router="article" data-label="Settings"></a>
     </nav>
 
     <footer>
         <nav>
-            <a href="#layout-art1" data-target="article" class="current" data-icon="home"></a>
-            <a href="#layout-art2" data-target="article" data-icon="inbox" data-count="3"></a>
-            <a href="#layout-art3" data-target="article" data-icon="compass"></a>
-            <a href="#layout-art4" data-target="article" data-icon="settings"></a>
+            <a href="#layout-art1" data-router="article" class="current" data-icon="home"></a>
+            <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="3"></a>
+            <a href="#layout-art3" data-router="article" data-icon="compass"></a>
+            <a href="#layout-art4" data-router="article" data-icon="settings"></a>
         </nav>
     </footer>
 

examples/kitchen-sink/app/resources/sections/list.html

@@ -1,13 +1,13 @@
 <section id="list" data-transition="slide">
     <header data-title="Lists" class="extended">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 
     <nav class="groupbar">
-        <a href="#list-normal" data-target="article" class="current" data-icon="checkmark" data-label="Normal"></a>
-        <a href="#list-indented" data-target="article" data-icon="close" data-label="Indented"></a>
+        <a href="#list-normal" data-router="article" class="current" data-icon="checkmark" data-label="Normal"></a>
+        <a href="#list-indented" data-router="article" data-icon="close" data-label="Indented"></a>
     </nav>
 
     <article id="list-normal" class="list scroll">

examples/kitchen-sink/app/resources/sections/notification.html

@@ -1,7 +1,7 @@
 <section id="notification" data-transition="slide">
     <header data-title="Notifications">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 

examples/kitchen-sink/app/resources/sections/scroll.html

@@ -1,7 +1,7 @@
 <section id="scroll" data-transition="slide">
     <header data-title="Scrolls">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 

examples/kitchen-sink/app/resources/sections/splash.html

@@ -5,7 +5,7 @@
             <input type="text" placeholder="Your username" id="txt-signup-name" value="">
             <input type="password" placeholder="Your password" id="txt-signup-password" value="">
             <a href="#" class="button blue big" data-icon="checkmark" data-icon="user">Login</a>
-            <a href="#back" data-target="section" class="button big" data-icon="left">Return to Kichensink</a>
+            <a href="#back" data-router="section" class="button big" data-icon="left">Return to Kichensink</a>
         </form>
     </article>
 </section>

examples/kitchen-sink/app/resources/sections/touchevents.html

@@ -1,7 +1,7 @@
 <section id="touchevents" data-transition="slide">
     <header data-title="Touch Events">
         <nav class="button">
-            <a href="#back" data-target="section" data-label="back"></a>
+            <a href="#back" data-router="section" data-label="back"></a>
         </nav>
     </header>
 

examples/kitchen-sink/index.html

@@ -51,7 +51,7 @@
     <section id="main" data-transition="slide">
         <header  class="">
             <nav class="left button">
-                <a href="#features" data-target="aside" data-icon="menu"></a>
+                <a href="#features" data-router="aside" data-icon="menu"></a>
             </nav>
             <nav class="right button">
                 <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="share" target="_blank" ></a>

examples/kitchen-sink/old_index.html

@@ -60,8 +60,8 @@
                 <label>Mail</label>
                 <input type="password" placeholder="Your password" id="txt-signup-password" value="">
                 <a href="#" class="button blue big" id="btn-signup-call" data-icon="checkmark">Signup</a>
-                <a href="#back" data-target="section" class="button red big" data-icon="close">Return to login</a>
-                <a href="#back" data-target="section" class="button green " data-icon="user">Return to login</a>
+                <a href="#back" data-router="section" class="button red big" data-icon="close">Return to login</a>
+                <a href="#back" data-router="section" class="button green " data-icon="user">Return to login</a>
             </form>
         </article>
     </section>
@@ -94,7 +94,7 @@
     <section id="a" data-transition="pop" >
         <header data-title="a">
             <nav class="right">
-                <a href="#baaaa" data-target="section">B</a>
+                <a href="#baaaa" data-router="section">B</a>
             </nav>
         </header>
         <article class="">
@@ -111,8 +111,8 @@
     <section id="sec-1"  class="popa" data-transition="slide">
         <header class="extended">
             <nav class="left">
-                <a href="#aside-controls" data-target="aside" data-icon="menu"></a>
-                <a href="#kitchen-sink-scroll" data-article="nav-2" data-target="aside" data-icon="heart" data-count="8"></a>
+                <a href="#aside-controls" data-router="aside" data-icon="menu"></a>
+                <a href="#kitchen-sink-scroll" data-article="nav-2" data-router="aside" data-icon="heart" data-count="8"></a>
             </nav>
             <div class="left">
                 <span class="title with-subtitle">Javi Jiménez Villar</span>
@@ -120,11 +120,11 @@
             </div>
             <nav class="right ">
                 <!--
-                <a href="#profiles" data-target="aside" data-label="User"></a>
-                <a href="#profiles" data-target="aside" data-icon="users" data-label="User"></a>
+                <a href="#profiles" data-router="aside" data-label="User"></a>
+                <a href="#profiles" data-router="aside" data-icon="users" data-label="User"></a>
                  -->
                  <a href="#" data-icon="cloud" id="btn-toggle-loading"></a>
-                <a href="#profiles" data-target="aside" data-icon="user" data-count="1"></a>
+                <a href="#profiles" data-router="aside" data-icon="user" data-count="1"></a>
             </nav>
 
             <nav class="right plain ">
@@ -134,29 +134,29 @@
         </header>
 
         <nav class="groupbar">
-            <a href="#nav-1" data-target="article" class="current"  data-icon="html5">&nbsp;Lists</a>
-            <a href="#nav-2" data-target="article" data-icon="calendar">&nbsp;Form</a>
+            <a href="#nav-1" data-router="article" class="current"  data-icon="html5">&nbsp;Lists</a>
+            <a href="#nav-2" data-router="article" data-icon="calendar">&nbsp;Form</a>
         </nav>
 
         <footer class="toolbar with-labels">
             <nav>
-                <a href="#nav-0" data-target="article" data-icon="refresh" class="current" data-label="loading">
+                <a href="#nav-0" data-router="article" data-icon="refresh" class="current" data-label="loading">
                     <span class="bubble count" data-loading="white"></span>
                 </a>
-                <a href="#nav-1" data-target="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
-                <a href="#nav-2" data-target="article" data-title="b" data-icon="close" data-count="12" data-label="Form"></a>
-                <a href="#nav-3" data-target="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
-                <a href="#nav-4" data-target="article" data-title="lists" data-label="lists" data-loading="white"></a>
+                <a href="#nav-1" data-router="article" data-title="d" data-icon="settings" data-label="boxes" data-count="1"></a>
+                <a href="#nav-2" data-router="article" data-title="b" data-icon="close" data-count="12" data-label="Form"></a>
+                <a href="#nav-3" data-router="article" data-title="c"  data-icon="share" data-label="Emails" data-count="123"></a>
+                <a href="#nav-4" data-router="article" data-title="lists" data-label="lists" data-loading="white"></a>
             </nav>
         </footer>
 
         <!--
         <footer class="toolbar">
             <nav>
-                <a href="#nav-1" data-target="article" class="current"  data-icon="clock"></a>
-                <a href="#nav-2" data-target="article" data-icon="calendar" data-count="17"></a>
-                <a href="#a" data-target="article" data-icon="mail" data-count="124"></a>
-                <a href="#a" data-target="article" data-icon="phone" data-count="12"></a>
+                <a href="#nav-1" data-router="article" class="current"  data-icon="clock"></a>
+                <a href="#nav-2" data-router="article" data-icon="calendar" data-count="17"></a>
+                <a href="#a" data-router="article" data-icon="mail" data-count="124"></a>
+                <a href="#a" data-router="article" data-icon="phone" data-count="12"></a>
             </nav>
         </footer>
         -->
@@ -328,7 +328,7 @@
 
         <article id="nav-3" class="list indented">
             <div>
-                <a href="#sec-2" data-target="section" class="button big" data-icon="check">Test 2</a>
+                <a href="#sec-2" data-router="section" class="button big" data-icon="check">Test 2</a>
                 <a href="#sec-2"  class="button big red " data-icon="check">Test 2</a>
                 <a href="#sec-2" class="button big green" data-icon="check">Test 2</a>
             </div>
@@ -339,7 +339,7 @@
     <section id="sec-2" data-transition="pop">
         <header data-title="Auto title centered">
             <nav class="left">
-                <a href="#back" data-target="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
+                <a href="#back" data-router="section" class="cancel" data-icon="close" data-label="CANCEL"></a>
             </nav>
 
             <nav class="right ">

src/Lungo.Constants.js

@@ -47,7 +47,7 @@ Lungo.Constants = {
         HEIGHT: 'height',
         PIXEL: 'px',
         PERCENT: '%',
-        TARGET: 'target',
+        ROUTER: 'router',
         FIRST: 'first',
         LAST: 'last',
         EMPTY: ''

src/attributes/Lungo.Attributes.Data.js

@@ -59,6 +59,6 @@ Lungo.Attributes.Data = {
     Back: {
         tag: 'back',
         selector: 'header, footer',
-        html: '<nav class="left"><a href="#back" data-target="section" class="left"><span class="icon {{value}}"></span></a></nav>'
+        html: '<nav class="left"><a href="#back" data-router="section" class="left"><span class="icon {{value}}"></span></a></nav>'
     }
 };

src/boot/Lungo.Boot.Events.js

@@ -16,8 +16,8 @@ Lungo.Boot.Events = (function(lng, undefined) {
     var SELECTORS = {
         DOCUMENT: document,
         WINDOW: window,
-        HREF_TARGET: 'a[href][data-target]',
-        HREF_TARGET_FROM_ASIDE: 'aside a[href][data-target]',
+        HREF_TARGET: 'a[href][data-router]',
+        HREF_TARGET_FROM_ASIDE: 'aside a[href][data-router]',
         CURRENT_SECTION: 'section.aside, section.current'
     };
 
@@ -37,19 +37,24 @@ Lungo.Boot.Events = (function(lng, undefined) {
     };
 
     var _changeOrientation = function(event) {
-        lng.View.Resize.toolbars();
         event.preventDefault();
+        lng.View.Resize.toolbars();
     };
 
     var _loadTarget = function(event) {
         event.preventDefault();
-
         var link = lng.dom(this);
         _selectTarget(link);
     };
 
+    var _hideAsideIfNecesary = function(event) {
+        //@TODO: refactor
+        if (window.innerWidth < 768) lng.View.Aside.hide();
+        if (event) event.preventDefault();
+    };
+
     var _selectTarget = function(link) {
-        var target_type = link.data(ATTRIBUTE.TARGET);
+        var target_type = link.data(ATTRIBUTE.ROUTER);
 
         switch(target_type) {
             case ELEMENT.SECTION:
@@ -99,12 +104,6 @@ Lungo.Boot.Events = (function(lng, undefined) {
         lng.Router.aside(section_id, aside_id);
     };
 
-    var _hideAsideIfNecesary = function(event) {
-        //@TODO: refactor
-        if (window.innerWidth < 768) lng.View.Aside.hide();
-
-        if (event) event.preventDefault();
-    };
 
     return {
         init: init

src/stylesheets/Lungo.layout.aside.less

@@ -21,7 +21,6 @@ section.aside {
     }
 }
 
-
 aside {
     position: absolute;
     height: auto;
@@ -82,7 +81,7 @@ aside {
 /*
 @TODO: Tablets & TV on final release
 @media handheld, only screen and (min-width: 768px) {
-    .autohide[data-target="aside"] {  display: none !important; }
+    .autohide[data-router="aside"] {  display: none !important; }
 
     section.aside {
         width: auto !important;

src/stylesheets/css/Lungo.layout.aside.css

@@ -107,7 +107,7 @@ aside.small nav .bubble {
 /*
 @TODO: Tablets & TV on final release
 @media handheld, only screen and (min-width: 768px) {
-    .autohide[data-target="aside"] {  display: none !important; }
+    .autohide[data-router="aside"] {  display: none !important; }
 
     section.aside {
         width: auto !important;

src/view/Lungo.View.Article.js

@@ -15,7 +15,7 @@ Lungo.View.Article = (function(lng, undefined) {
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
 
     var SELECTORS = {
-        NAVIGATION_ITEM: 'a[href][data-target="article"]',
+        NAVIGATION_ITEM: 'a[href][data-router="article"]',
         REFERENCE_LINK: ' a[href][data-article]',
         TITLE_OF_ARTICLE: 'header .title, footer .title',
         ASIDE_REFERENCE_LIST: 'li a.current, li.current'
@@ -38,7 +38,7 @@ Lungo.View.Article = (function(lng, undefined) {
     var switchNavItems = function(article_id) {
         lng.Element.Current.section.find(SELECTORS.NAVIGATION_ITEM).removeClass(CLASS.CURRENT);
 
-        var active_nav_items = 'a[href="' + article_id + '"][data-target="article"]';
+        var active_nav_items = 'a[href="' + article_id + '"][data-router="article"]';
         lng.Element.Current.section.find(active_nav_items).addClass(CLASS.CURRENT);
 
         if (lng.Element.Current.aside) {