Главная Обзор Помощь
Вход
pwa
/
Lungo2.0.js
зеркало из https://github.com/xabstract/Lungo2.0.js.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

New feature: navigation via data-target attribute

In Release 1.0.1 will be discontinued navigation via <class>
Javier Jiménez Villar 14 лет назад
Родитель
77bd0ad072
Сommit
34c3a997ce
5 измененных файлов с 65 добавлено и 48 удалено
Единый вид Показать статистику Diff
  1. 31 31
      examples/test_src/index.html
  2. 6 6
      examples/todo.js/index.html
  3. 1 1
      src/attributes/Lungo.Attributes.Data.js
  4. 4 5
      src/boot/Lungo.Boot.Events.js
  5. 23 5
      src/router/Lungo.Router.js

+ 31 - 31
examples/test_src/index.html
Просмотреть файл 

@@ -2,7 +2,7 @@
 
 <html>
 
 <html>
 
 <head>
 
 <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
-    <title>LungoJS - Test Source</title>
 
+    <title>LungoJS - Test Source 1.0.1</title>
 
     <meta name="description" content="">
 
     <meta name="description" content="">
 
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
     <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
 
     <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
 
@@ -33,7 +33,7 @@
 
 			<div class="form">
 
 			<div class="form">
 
 				<input type="text" placeholder="Type your user"/>
 
 				<input type="text" placeholder="Type your user"/>
 
 				<input type="password" placeholder="Type your password"/>
 
 				<input type="password" placeholder="Type your password"/>
 
-				<a href="#demo" class="section button big blue" data-icon="play">Go to demo!</a>
 
+				<a href="#demo" data-target="section" class="button big blue" data-icon="play">Go to demo!</a>
 
 			</div>
 
 			</div>
 
 			<div class="copyright">Copyright TapQuo Inc, 2011</div>
 
 			<div class="copyright">Copyright TapQuo Inc, 2011</div>
 
 		</article>
 
 		</article>
 
@@ -43,8 +43,8 @@
 
 		<header data-title="LungoJS Framework">
 
 		<header data-title="LungoJS Framework">
 
 			<nav class="onright">
 
 			<nav class="onright">
 
 				<a href="#"><span class="counter">8</span></a>
 
 				<a href="#"><span class="counter">8</span></a>
 
-				<a href="#main" class="article current" data-title="LungoJS Framework" data-icon="config"></a>
 
-				<a href="#author" class="article" data-title="Authors" data-icon="user"></a>
 
+				<a href="#main" data-target="article" class="current" data-title="LungoJS Framework" data-icon="config"></a>
 
+				<a href="#author" data-target="article" data-title="Authors" data-icon="user"></a>
 
 			</nav>
 
 			</nav>
 
 		</header>
 
 		</header>
 
 		<article id="main" class="list">
 
 		<article id="main" class="list">
 
@@ -56,24 +56,24 @@
 
                         <small class="margin-top-4">version 1.0.0</small>
 
                         <small class="margin-top-4">version 1.0.0</small>
 
                         <small>by TapQuo Inc.</small>
 
                         <small>by TapQuo Inc.</small>
 
                     </li>
 
                     </li>
 
-    				<li><a href="#demo_header_footer" class="section arrow" data-icon="wifi">
 
+    				<li><a href="#demo_header_footer" data-target="section" class="arrow" data-icon="wifi">
 
     					<strong>Header + Footer + Articles</strong><small>paodapod</small></a></li>
 
     					<strong>Header + Footer + Articles</strong><small>paodapod</small></a></li>
 
-    				<li><a href="#demo_toolbar" class="section arrow" data-icon="download">
 
+    				<li><a href="#demo_toolbar" data-target="section" class="arrow" data-icon="download">
 
     					<strong>Toolbar</strong><small>Toolbar</small></a></li>	
     					<strong>Toolbar</strong><small>Toolbar</small></a></li>	
-    				<li><a href="#demo_list" class="section arrow" id="load_list" data-icon="note">
 
+    				<li><a href="#demo_list" data-target="section" class="arrow" id="load_list" data-icon="note">
 
                         <div class="bubble highlight">3 types</div>
 
                         <div class="bubble highlight">3 types</div>
 
     					<strong>Lists</strong>
 
     					<strong>Lists</strong>
 
     					<small>paodapod</small></a></li>
 
     					<small>paodapod</small></a></li>
 
-    				<li><a href="#demo_events" class="section arrow" data-icon="user">
 
+    				<li><a href="#demo_events" data-target="section" class="arrow" data-icon="user">
 
     						<strong>Events handler</strong><small>paodapod</small></a></li>
 
     						<strong>Events handler</strong><small>paodapod</small></a></li>
 
-    				<li><a href="#demo_scroll" class="section arrow" id="load_scroll_mocks" data-icon="points">
 
+    				<li><a href="#demo_scroll" data-target="section" class="arrow" id="load_scroll_mocks" data-icon="points">
 
     						<strong>Scroll</strong><small>paodapod</strong></small></a></li>
 
     						<strong>Scroll</strong><small>paodapod</strong></small></a></li>
 
-    				<li><a href="#demo_buttons" class="section arrow" data-icon="plus">
 
+    				<li><a href="#demo_buttons" data-target="section" class="arrow" data-icon="plus">
 
     						<strong>Buttons</strong><small>paodapod</small></a></li>
 
     						<strong>Buttons</strong><small>paodapod</small></a></li>
 
-    				<li><a href="#demo_forms" class="section arrow" data-icon="write">
 
+    				<li><a href="#demo_forms" data-target="section" class="arrow" data-icon="write">
 
                         <strong>Forms</strong><small>paodapod</small></a></li>
 
                         <strong>Forms</strong><small>paodapod</small></a></li>
 
     				<li class="anchor" data-icon="key">Tapquo Sugars</li>
 
     				<li class="anchor" data-icon="key">Tapquo Sugars</li>
 
-    				<li><a href="#demo_sugars" class="section" data-icon="box">
 
+    				<li><a href="#demo_sugars" data-target="section" data-icon="box">
 
     					<strong>Sugars</strong><small>paodapod</small></a></li>
 
     					<strong>Sugars</strong><small>paodapod</small></a></li>
 
     			</ul>
 
     			</ul>
 
 			</scroll>
 
 			</scroll>
 
@@ -100,8 +100,8 @@
 
 	<section id="demo_header_footer"  class="popup">
 
 	<section id="demo_header_footer"  class="popup">
 
 		<header data-title="Summary" data-back="home blue">
 
 		<header data-title="Summary" data-back="home blue">
 
             <nav class="onright">
 
             <nav class="onright">
 
-                <a href="#summary" class="article current" data-title="Summary" data-icon="user"></a>
 
-                <a href="#messages" class="article" data-title="Message" data-icon="chat"><abbr>Messages</abbr></a>
 
+                <a href="#summary" data-target="article" class="current" data-title="Summary" data-icon="user"></a>
 
+                <a href="#messages" data-target="article" data-title="Message" data-icon="chat"><abbr>Messages</abbr></a>
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
 
 
@@ -117,8 +117,8 @@
 
 		<footer>
 
 		<footer>
 
 		    <a href="#" class="button articblue onright" data-icon="key">Sign In</a>
 
 		    <a href="#" class="button articblue onright" data-icon="key">Sign In</a>
 
             <nav class="onleft">
 
             <nav class="onleft">
 
-                <a href="#summary" class="article" alt="Test Article Nº1"><span class="icon user"></span></a>
 
-                <a href="#messages" class="article" alt="Test Article Nº2"><span class="icon chat"></span></a>
 
+                <a href="#summary" data-target="article"><span class="icon user"></span></a>
 
+                <a href="#messages" data-target="article"><span class="icon chat"></span></a>
 
             </nav>
 
             </nav>
 
         </footer>
 
         </footer>
 
 	</section>
 
 	</section>
 
@@ -156,9 +156,9 @@
 
 	<section id="demo_list">
 
 	<section id="demo_list">
 
 		<header data-back="home articblue" data-title="LISTS">
 
 		<header data-back="home articblue" data-title="LISTS">
 
 			<nav class="onright">
 
 			<nav class="onright">
 
-				<a href="#list_sample" class="article current" data-icon="note"><abbr>Simple List</abbr></a>
 
-				<a href="#list_grouped_sample" class="article" data-icon="folder"><abbr>Grouped List</abbr></a>
 
-				<a href="#list_info_sample" class="article" data-icon="cloudup"><abbr>Special .class</abbr></a>
 
+				<a href="#list_sample" data-target="article" class="current" data-icon="note"><abbr>Simple List</abbr></a>
 
+				<a href="#list_grouped_sample" data-target="article" data-icon="folder"><abbr>Grouped List</abbr></a>
 
+				<a href="#list_info_sample" data-target="article" data-icon="cloudup"><abbr>Special .class</abbr></a>
 
 			</nav>
 
 			</nav>
 
 		</header>
 
 		</header>
 
 		<article id="list_sample" class="list"></article>
 
 		<article id="list_sample" class="list"></article>
 
@@ -181,9 +181,9 @@
 
                  
                  
                 <li class="toolbar contrast">
 
                 <li class="toolbar contrast">
 
                     <nav>
 
                     <nav>
 
-                        <a href="#list_sample" class="article current" data-icon="note"></a>
 
-        				<a href="#list_grouped_sample" class="article" data-icon="folder"></a>
 
-        				<a href="#list_info_sample" class="article" data-icon="cloudup"></a>
 
+                        <a href="#list_sample" data-target="article" class="current" data-icon="note"></a>
 
+        				<a href="#list_grouped_sample" data-target="article" data-icon="folder"></a>
 
+        				<a href="#list_info_sample" data-target="article" data-icon="cloudup"></a>
 
                     </nav>
 
                     </nav>
 
                 </li>
 
                 </li>
 
                 <li class="info contrast highlight">
 
                 <li class="info contrast highlight">
 
@@ -194,9 +194,9 @@
 
                 </li>
 
                 </li>
 
                 <li class="toolbar highlight">
 
                 <li class="toolbar highlight">
 
                     <nav>
 
                     <nav>
 
-                        <a href="#list_sample" class="article current" data-icon="note"></a>
 
-        				<a href="#list_grouped_sample" class="article" data-icon="folder"></a>
 
-        				<a href="#list_info_sample" class="article" data-icon="cloudup"></a>
 
+                        <a href="#list_sample" data-target="article" class="current" data-icon="note"></a>
 
+        				<a href="#list_grouped_sample" data-target="article" data-icon="folder"></a>
 
+        				<a href="#list_info_sample" data-target="article" data-icon="cloudup"></a>
 
                     </nav>
 
                     </nav>
 
                 </li>
 
                 </li>
 
 		    </ul>
 
 		    </ul>
 
@@ -212,11 +212,11 @@
 
 		<article id="toolbar_4"></article>
 
 		<article id="toolbar_4"></article>
 
 		<footer class="toolbar">
 
 		<footer class="toolbar">
 
             <nav>
 
             <nav>
 
-                <a href="#back" class="section" alt="Test Article Nº1" data-icon="left"></a>
 
-                <a href="#toolbar_1" class="article current" alt="Test Article Nº2" data-icon="chat"></a>
 
-				<a href="#toolbar_2" class="article" alt="Test Article Nº1" data-icon="user"></a>
 
-                <a href="#toolbar_3" class="article" alt="Test Article Nº2" data-icon="chat"></a>
 
-				<a href="#toolbar_4" class="article" alt="Test Article Nº1" data-icon="user"></a>
 
+                <a href="#back" data-target="section" alt="Test Article Nº1" data-icon="left"></a>
 
+                <a href="#toolbar_1" data-target="article" class="current" data-icon="chat"></a>
 
+				<a href="#toolbar_2" data-target="article" data-icon="user"></a>
 
+                <a href="#toolbar_3" data-target="article" data-icon="chat"></a>
 
+				<a href="#toolbar_4" data-target="article" data-icon="user"></a>
 
             </nav>
 
             </nav>
 
         </footer>
 
         </footer>
 
 	</section> 
 	</section> 
@@ -245,7 +245,7 @@
 
 			</scroll>
 
 			</scroll>
 
 		</article>
 
 		</article>
 
 		<footer>
 
 		<footer>
 
-		    <a href="#back" class="section back onleft button articblue" data-icon="home">Home</a>
 
+		    <a href="#back" data-target="section" class="back onleft button articblue" data-icon="home">Home</a>
 
 			<a href="#" class="button red onleft" data-icon="picture">Picture</a>
 
 			<a href="#" class="button red onleft" data-icon="picture">Picture</a>
 
 			<a href="#" class="button articblue onleft" data-icon="wifi"></a>
 
 			<a href="#" class="button articblue onleft" data-icon="wifi"></a>
 
 			<a href="#" class="button yellow onleft" data-icon="home">Home</a>
 
 			<a href="#" class="button yellow onleft" data-icon="home">Home</a>

+ 6 - 6
examples/todo.js/index.html
Просмотреть файл 

@@ -31,7 +31,7 @@
 
 			<div class="form">
 
 			<div class="form">
 
 				<input type="text" placeholder="Type your user" disabled/>
 
 				<input type="text" placeholder="Type your user" disabled/>
 
 				<input type="password" placeholder="Type your password" disabled/>
 
 				<input type="password" placeholder="Type your password" disabled/>
 
-				<a href="#main" class="section button big blue" data-icon="key">Go to app!</a>
 
+				<a href="#main" data-target="section" class="button big blue" data-icon="key">Go to app!</a>
 
 			</div>
 
 			</div>
 
 			<div class="copyright">Copyright TapQuo Inc, 2011</div>
 
 			<div class="copyright">Copyright TapQuo Inc, 2011</div>
 
 		</article>
 
 		</article>
 
@@ -39,7 +39,7 @@
 
 
 
 	<section id="main">
 
 	<section id="main">
 
 		<header data-title="ToDo.js">
 
 		<header data-title="ToDo.js">
 
-			<a href="#new" class="section button onright articblue" data-icon="add">&nbsp;New</a>
 
+			<a href="#new" data-target="section" class="button onright articblue" data-icon="add">&nbsp;New</a>
 
 		</header>
 
 		</header>
 
 
 
         <article id="pending" class="list"></article>
 
         <article id="pending" class="list"></article>
 
@@ -47,9 +47,9 @@
 
 
 
         <footer class="toolbar">
 
         <footer class="toolbar">
 
             <nav>
 
             <nav>
 
-                <a href="#pending" class="article current" data-title="Pending ToDo's" data-icon="inbox"></a>
 
-                <a href="#done" class="article" data-title="Done ToDo's" data-icon="folder"></a>
 
-                <a href="#settings" class="section" data-icon="config"></a>
 
+                <a href="#pending" data-target="article" class="current" data-title="Pending ToDo's" data-icon="inbox"></a>
 
+                <a href="#done" data-target="article" data-title="Done ToDo's" data-icon="folder"></a>
 
+                <a href="#settings" data-target="section" data-icon="config"></a>
 
             </nav>
 
             </nav>
 
         </footer>
 
         </footer>
 
     </section>
 
     </section>
 
@@ -101,7 +101,7 @@
 
 				<br/>
 
 				<br/>
 
 				
 				
 				<a href="#" id="btnNewTodo" class="button big articblue" data-icon="check">Add ToDo</a>
 
 				<a href="#" id="btnNewTodo" class="button big articblue" data-icon="check">Add ToDo</a>
 
-				<a href="#back" class="section button big red" data-icon="cancel">Cancel</a>
 
+				<a href="#back" data-target="section" class="button big red" data-icon="cancel">Cancel</a>
 
 			</p>
 
 			</p>
 
 		</article>
 
 		</article>
 
 	</section> 
 	</section>

+ 1 - 1
src/attributes/Lungo.Attributes.Data.js
Просмотреть файл 

@@ -27,6 +27,6 @@ LUNGO.Attributes.Data = {
 
      back: {
 
      back: {
 
          tag: 'back',
 
          tag: 'back',
 
          selector: 'header, footer',
 
          selector: 'header, footer',
 
-         html: '<a href="#back" class="section back onleft button icon {{value}}"></a>'
 
+         html: '<a href="#back" data-target="section" class="back onleft button icon {{value}}"></a>'
 
      }
 
      }
 
 };
 
 };

+ 4 - 5
src/boot/Lungo.Boot.Events.js
Просмотреть файл 

@@ -20,7 +20,7 @@ LUNGO.Boot.Events = (function(lng, undefined) {
 
         var touch_move_event  = 'TOUCH_MOVE';
 
         var touch_move_event  = 'TOUCH_MOVE';
 
         var touch_start_event = 'TOUCH_START';
 
         var touch_start_event = 'TOUCH_START';
 
         var orientation_change = 'ORIENTATION_CHANGE';
 
         var orientation_change = 'ORIENTATION_CHANGE';
 
-        var events_selector   = 'a[href].section, a[href].article';
 
+        var events_selector   = 'a[href][data-target]';
 
 
 
         lng.Dom.Event.bind(document, touch_move_event, _iScroll);
 
         lng.Dom.Event.bind(document, touch_move_event, _iScroll);
 
         lng.Dom.Event.bind(window, orientation_change, _changeOrientation);
 
         lng.Dom.Event.bind(window, orientation_change, _changeOrientation);
 
@@ -39,11 +39,10 @@ LUNGO.Boot.Events = (function(lng, undefined) {
 
         event.preventDefault();
 
         event.preventDefault();
 
 
 
         var link = lng.Dom.query(this);
 
         var link = lng.Dom.query(this);
 
-        var destination_id = link.attr('href');
 
+        var target_id = link.attr('href');
 
+        var target_type = link.data('target');
 
 
 
-        if (destination_id.length > 0) {
 
-            (link.hasClass('section')) ? _goSection(destination_id) : _goArticle(link);
 
-        }
 
+        (target_type === 'section') ? _goSection(target_id) : _goArticle(link);
 
     };
 
     };
 
 
 
     var _goSection = function(id) {
 
     var _goSection = function(id) {

+ 23 - 5
src/router/Lungo.Router.js
Просмотреть файл 

@@ -24,12 +24,15 @@ LUNGO.Router = (function(lng, undefined) {
 
      * @param {string} Id of the <section>
 
      * @param {string} Id of the <section>
 
      */
 
      */
 
     var section = function(section_id) {
 
     var section = function(section_id) {
 
-        section_id = (section_id.indexOf('#')) ? '#' + section_id : section_id;
 
+        var section_id = (section_id.indexOf('#')) ? '#' + section_id : section_id;
 
+        var target = 'section' + section_id;
 
 
 
-        lng.Dom.query(_getHistoryCurrent()).removeClass(CSS_CLASSES.SHOW).addClass(CSS_CLASSES.HIDE);
 
-        lng.Dom.query(section_id).addClass(CSS_CLASSES.SHOW);
 
+        if (_existsTarget(target)) {
 
+            lng.Dom.query(_getHistoryCurrent()).removeClass(CSS_CLASSES.SHOW).addClass(CSS_CLASSES.HIDE);
 
+            lng.Dom.query(section_id).addClass(CSS_CLASSES.SHOW);
 
 
 
-        lng.Router.History.add(section_id);
 
+            lng.Router.History.add(section_id);
 
+        }
 
     };
 
     };
 
 
 
     /**
 
     /**
 
@@ -41,7 +44,11 @@ LUNGO.Router = (function(lng, undefined) {
 
      * @param {string} <article> Id
 
      * @param {string} <article> Id
 
      */
 
      */
 
     var article = function(section_id, article_id) {
 
     var article = function(section_id, article_id) {
 
-        lng.View.Article.show(section_id, article_id);
 
+        var target = section_id + ' article' + article_id;
 
+
 
+        if (_existsTarget(target)) {
 
+            lng.View.Article.show(section_id, article_id);
 
+        }
 
     };
 
     };
 
 
 
     /**
 
     /**
 
@@ -56,6 +63,17 @@ LUNGO.Router = (function(lng, undefined) {
 
         lng.Dom.query(_getHistoryCurrent()).removeClass(CSS_CLASSES.HIDE).addClass(CSS_CLASSES.SHOW);
 
         lng.Dom.query(_getHistoryCurrent()).removeClass(CSS_CLASSES.HIDE).addClass(CSS_CLASSES.SHOW);
 
     };
 
     };
 
 
 
+    var _existsTarget = function(target) {
 
+        var exists = false;
 
+
 
+        if ($(target).length > 0) {
 
+            exists = true;
 
+        } else {
 
+            lng.Core.log(3, 'Lungo.Router ERROR: The target ' + target + ' does not exists.');
 
+        }
 
+        return exists;
 
+    }
 
+
 
     var _getHistoryCurrent = function() {
 
     var _getHistoryCurrent = function() {
 
         return lng.Router.History.current();
 
         return lng.Router.History.current();
 
     };
 
     };