Головна сторінка Огляд Довідка
Увійти
pwa
/
Lungo.js
дзеркало https://github.com/tapquo/Lungo.js.git
2
0
Відгалуження 0
Файли Проблеми 0 Wiki
Переглянути джерело

Merge branch 'TabletSupport'

@soyjavi 14 роки тому
батько
3bccd40b44 bd8e8515ee
коміт
d6845a3802
18 змінених файлів з 336 додано та 33 видалено
Розділений вигляд Показати статистику Diff
  1. 12 0
      examples/tablet/app/app.js
  2. BIN
      examples/tablet/assets/images/default.png
  3. BIN
      examples/tablet/assets/images/icon-72.png
  4. BIN
      examples/tablet/assets/images/icon.png
  5. BIN
      examples/tablet/assets/images/icon@2x.png
  6. 0 0
      examples/tablet/assets/stylesheets/app.css
  7. 116 0
      examples/tablet/index.html
  8. 1 1
      src/Lungo.js
  9. 9 2
      src/attributes/Lungo.Attributes.Section.js
  10. 4 4
      src/boot/Lungo.Boot.Article.js
  11. 43 6
      src/boot/Lungo.Boot.Events.js
  12. 3 3
      src/boot/Lungo.Boot.Section.js
  13. 7 2
      src/stylesheets/css/Lungo.layout.css
  14. 11 0
      src/stylesheets/css/Lungo.theme.default.css
  15. 63 7
      src/stylesheets/less/Lungo.layout.less
  16. 14 0
      src/stylesheets/less/Lungo.theme.default.less
  17. 43 0
      src/view/Lungo.View.Aside.js
  18. 10 8
      src/view/Lungo.View.Resize.js

+ 12 - 0
examples/tablet/app/app.js
Переглянути файл 

@@ -0,0 +1,12 @@
 
+var App = (function(lng, undefined) {
 
+
 
+    lng.App.init({
 
+        name: 'LungoJS Test Source',
 
+        version: '1.0.0'
 
+    });
 
+
 
+    return {
 
+
 
+    };
 
+
 
+})(LUNGO);

BIN
examples/tablet/assets/images/default.png
Переглянути файл


BIN
examples/tablet/assets/images/icon-72.png
Переглянути файл


BIN
examples/tablet/assets/images/icon.png
Переглянути файл


BIN
examples/tablet/assets/images/icon@2x.png
Переглянути файл


+ 0 - 0
examples/tablet/assets/stylesheets/app.css
Переглянути файл


+ 116 - 0
examples/tablet/index.html
Переглянути файл 

@@ -0,0 +1,116 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>LungoJS - Test Source 1.0.2</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="MobileOptimized" content="320">
 
+    <meta http-equiv="cleartype" content="on">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <!-- For iPhone 4 with high-resolution Retina display: -->
 
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
 
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
 
+    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
 
+    <link rel="apple-touch-startup-image" href="assets/images/default.png">
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
 
+    <!-- App Stylesheet -->
 
+    <link rel="stylesheet" href="assets/stylesheets/app.css?v=1">
 
+</head>
 
+
 
+<body class="app">
 
+
 
+	<section id="demo" class="_static">
 
+		<header>
 
+            <a href="#" id="btnAside" data-target="aside" class="button pink onleft" data-icon="note"></a>
 
+        </header>
 
+        <aside>
 
+            <a href="#main" data-target="article" data-icon="facebook">Facebook</a>
 
+            <a href="#second" data-target="article" data-icon="twitter">Twitter</a>
 
+            <a href="#main" data-target="article" data-icon="picture">Flickr</a>
 
+            <a href="#main" data-target="article" data-icon="cloudup">Upload by ...</a>
 
+            <a href="#main" data-target="article" data-icon="user">Connect with facebook</a>
 
+            <a href="#main" data-target="article" data-icon="music">Download music</a>
 
+            <a href="#main" data-target="article" data-icon="key">Logout</a>
 
+        </aside>
 
+		<article id="main" class="list">
 
+            <scroll id="main_scroll">
 
+                <ul>
 
+    				<li><a href="#demo_header_footer" data-target="section" class="arrow" data-icon="wifi">
 
+    					<strong>Header + Footer + Articles</strong><small>paodapod</small></a></li>
 
+    				<li><a href="#demo_toolbar" data-target="section" class="arrow" data-icon="download">
 
+    					<strong>Toolbar</strong><small>Toolbar</small></a></li>
 
+    				<li><a href="#demo_list" data-target="section" class="arrow" id="load_list" data-icon="note">
 
+                        <div class="bubble highlight">3 types</div>
 
+    					<strong>Lists</strong>
 
+    					<small>paodapod</small></a></li>
 
+    				<li><a href="#demo_events" data-target="section" class="arrow" data-icon="user">
 
+    						<strong>Events handler</strong><small>paodapod</small></a></li>
 
+    				<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>
 
+    				<li><a href="#demo_buttons" data-target="section" class="arrow" data-icon="plus">
 
+    						<strong>Buttons</strong><small>paodapod</small></a></li>
 
+    				<li><a href="#demo_forms" data-target="section" class="arrow" data-icon="write">
 
+                        <strong>Forms</strong><small>paodapod</small></a></li>
 
+    				<li class="anchor" data-icon="key">Tapquo Sugars</li>
 
+    				<li><a href="#demo_sugars" data-target="section" data-icon="box">
 
+    					<strong>Sugars</strong><small>paodapod</small></a></li>
 
+    			</ul>
 
+			</scroll>
 
+        </article>
 
+
 
+        <article id="second">
 
+            second
 
+        </article>
 
+    </section>
 
+
 
+    <!-- Third parties dependencies -->
 
+    <script src="../../src/lib/zepto.js"></script>
 
+    <script src="../../src/lib/iscroll.js"></script>
 
+    <!-- LungoJS Libraries (Development mode)-->
 
+    <script src="../../src/Lungo.js"></script>
 
+    <script src="../../src/Lungo.App.js" ></script>
 
+    <script src="../../src/Lungo.Environment.js" ></script>
 
+    <script src="../../src/Lungo.Core.js"></script>
 
+    <script src="../../src/Lungo.Events.js"></script>
 
+    <script src="../../src/Lungo.Service.js"></script>
 
+    <script src="../../src/router/Lungo.Router.js"></script>
 
+    <script src="../../src/router/Lungo.Router.History.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Resize.js"></script>
 
+    <script src="../../src/view/Lungo.View.Article.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Aside.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Scroll.js"></script>
 
+    <script src="../../src/view/Lungo.View.Template.js"></script>
 
+    <script src="../../src/view/Lungo.View.Template.Binding.js"></script>
 
+    <script src="../../src/view/Lungo.View.Template.List.js"></script>
 
+    <script src="../../src/dom/Lungo.Dom.js"></script>
 
+    <script src="../../src/dom/Lungo.Dom.Event.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Cache.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Sql.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Storage.js"></script>
 
+    <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
 
+    <script src="../../src/attributes/Lungo.Attributes.Section.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Events.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script src="app/app.js"></script>
 
+</body>
 
+</html>

+ 1 - 1
src/Lungo.js
Переглянути файл 

@@ -23,7 +23,7 @@
 
 
 var LUNGO = LUNGO || {};
 
 
-LUNGO.VERSION = '1.0.1';
 
+LUNGO.VERSION = '1.0.3';
 
 
 LUNGO.Attributes || (LUNGO.Attributes = {});
 
 LUNGO.Data || (LUNGO.Data = {});

+ 9 - 2
src/attributes/Lungo.Attributes.Section.js
Переглянути файл 

@@ -1,6 +1,6 @@
 
-/** 
+/**
 
  * Make an analysis of <elements> in a <section>.
 
- * 
+ *
 
  * @namespace LUNGO.Attributes
 
  * @class Section
 
  *
 
@@ -11,10 +11,17 @@
 
 LUNGO.Attributes.Section = {
 
      header: {
 
          name: 'header',
 
+         reference: 'height',
 
          bind: 'top'
 
      },
 
      footer: {
 
          name: 'footer',
 
+         reference: 'height',
 
          bind: 'bottom'
 
+     },
 
+     aside: {
 
+         name: 'aside',
 
+         reference: 'width',
 
+         bind: 'left'
 
      }
 
 };

+ 4 - 4
src/boot/Lungo.Boot.Article.js
Переглянути файл 

@@ -1,6 +1,6 @@
 
-/** 
+/**
 
  * Initialize the <article> element
 
- * 
+ *
 
  * @namespace LUNGO.Boot
 
  * @class Article
 
  * @requires Zepto
 
@@ -25,7 +25,7 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
     var start = function() {
 
         _initElement(SELECTORS.LIST_IN_ARTICLE, _createListElement);
 
         _initElement(SELECTORS.SCROLL_IN_ARTICLE, _createScrollElement);
 
-        _initElement(SELECTORS.CHECKBOX_IN_ARTICLE, _b);
 
+        _initElement(SELECTORS.CHECKBOX_IN_ARTICLE, _createCheckboxElement);
 
     };
 
 
     var _initElement = function(selector, callback) {
 
@@ -49,7 +49,7 @@ LUNGO.Boot.Article = (function(lng, undefined) {
 
         lng.View.Scroll.create(scroll_id);
 
     };
 
 
-    var _b = function(checkbox) {
 
+    var _createCheckboxElement = function(checkbox) {
 
         checkbox.append('<span>&nbsp;</span>');
 
     };

+ 43 - 6
src/boot/Lungo.Boot.Events.js
Переглянути файл 

@@ -1,6 +1,6 @@
 
-/** 
+/**
 
  * Initialize the automatic DOM UI events
 
- * 
+ *
 
  * @namespace LUNGO.Boot
 
  * @class Events
 
  *
 
@@ -20,10 +20,12 @@ LUNGO.Boot.Events = (function(lng, undefined) {
 
         var touch_move_event  = 'TOUCH_MOVE';
 
         var touch_start_event = 'TOUCH_START';
 
         var orientation_change = 'ORIENTATION_CHANGE';
 
-        var target_selector   = 'a[href][data-target]';
 
+        var target_selector = 'a[href][data-target]';
 
+        var target_selector_from_aside = 'ASIDE a[href][data-target]';
 
 
         lng.Dom.Event.listener(document, touch_move_event, _iScroll);
 
         lng.Dom.Event.listener(window, orientation_change, _changeOrientation);
 
+        lng.Dom.Event.live(target_selector_from_aside, touch_start_event, _hideAside);
 
         lng.Dom.Event.live(target_selector, touch_start_event, _loadTarget);
 
     };
 
 
@@ -35,14 +37,39 @@ LUNGO.Boot.Events = (function(lng, undefined) {
 
         lng.View.Resize.toolbars();
 
     };
 
 
+    var _hideAside = function(event) {
 
+        event.preventDefault();
 
+
 
+        var link = lng.Dom.query(this);
 
+        var section_id =  _getParentIdOfElement(link);
 
+
 
+        lng.View.Aside.toggle(section_id);
 
+    };
 
+
 
     var _loadTarget = function(event) {
 
         event.preventDefault();
 
 
         var link = lng.Dom.query(this);
 
-        var target_id = link.attr('href');
 
+        _selectTarget(link);
 
+    };
 
+
 
+    var _selectTarget = function(link) {
 
         var target_type = link.data('target');
 
 
-        (target_type === 'section') ? _goSection(target_id) : _goArticle(link);
 
+        switch(target_type) {
 
+            case 'section':
 
+                var target_id = link.attr('href');
 
+                _goSection(target_id);
 
+                break;
 
+
 
+            case 'article':
 
+                _goArticle(link);
 
+                break;
 
+
 
+            case 'aside':
 
+                _goAside(link);
 
+                break;
 
+        }
 
     };
 
 
     var _goSection = function(id) {
 
@@ -54,12 +81,22 @@ LUNGO.Boot.Events = (function(lng, undefined) {
 
     };
 
 
     var _goArticle = function(element) {
 
-        var section_id =  '#' + element.parents('section').attr('id');
 
+        var section_id =  _getParentIdOfElement(element);
 
         var article_id =  element.attr('href');
 
 
         lng.Router.article(section_id, article_id);
 
     };
 
 
+    var _goAside = function(element) {
 
+        var section_id = _getParentIdOfElement(element);
 
+        lng.View.Aside.toggle(section_id);
 
+    };
 
+
 
+    var _getParentIdOfElement = function(element) {
 
+        var parent_id = '#' + element.parents('section').attr('id');
 
+        return parent_id;
 
+    };
 
+
 
     return {
 
         start: start
 
     };

+ 3 - 3
src/boot/Lungo.Boot.Section.js
Переглянути файл 

@@ -1,6 +1,6 @@
 
-/** 
+/**
 
  * Initialize the <section> element
 
- * 
+ *
 
  * @namespace LUNGO.Boot
 
  * @class Section
 
  * @requires Zepto
 
@@ -57,7 +57,7 @@ LUNGO.Boot.Section = (function(lng, undefined) {
 
         for (var attribute in section_attributes) {
 
             if (lng.Core.isOwnProperty(section_attributes, attribute)) {
 
                 var property = section_attributes[attribute];
 
-                lng.View.Resize.article(section, property.name, property.bind);
 
+                lng.View.Resize.article(section, property.name, property.bind, property.reference);
 
             }
 
         }
 
     };

+ 7 - 2
src/stylesheets/css/Lungo.layout.css
Переглянути файл 

@@ -20,5 +20,10 @@ nav a.current abbr{display:inline;}
 
 nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
 
 article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
 
 article.current{z-index:1;opacity:1;}
 
-.toolbar{height:48px;line-height:44px;display:block;}
 
-.toolbar a{float:left;padding:0;font-size:2.0em;}
 
+article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;z-index:0;opacity:0;}
 
+article.current{z-index:1;opacity:1;}
 
+article.aside{left:256px !important;}
 
+aside{position:absolute;top:0px;bottom:0px;width:256px;height:auto;padding-top:40px;}
 
+aside a{display:block;width:100%;height:48px;padding:0 8px;font-size:1.1em;font-weight:bold;line-height:48px;}
 
+aside a .icon{width:32px;float:left;margin:8px 4px 0 0;opacity:0.5;font-size:2.2em;text-align:center;}
 
+@media handheld, only screen and (max-width: 768px){article{-webkit-transition:left 0.3s ease-in-out;} aside{width:0px;} aside.show{width:256px;}}

+ 11 - 0
src/stylesheets/css/Lungo.theme.default.css
Переглянути файл 

@@ -48,6 +48,17 @@ nav a.current {
 
   -webkit-box-shadow: none;
 
 }
 
 /* @end */
 
+/* @group <aside> */
 
+aside {
 
+  background: #42474d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #42474d), color-stop(1, #2c3137));
 
+  -webkit-box-shadow: inset -4px 0px 8px rgba(0, 0, 0, 0.5);
 
+}
 
+aside a {
 
+  color: #fff !important;
 
+  text-shadow: 0px 1px 0px #000 !important;
 
+  border-bottom: 1px inset rgba(255, 255, 255, 0.1);
 
+}
 
+/* @end */
 
 /* @group .list */
 
 .list {
 
   background: #c5c5c5;

+ 63 - 7
src/stylesheets/less/Lungo.layout.less
Переглянути файл 

@@ -145,16 +145,72 @@ article.current {
 
 }
 
 /* @end */
 
 
-/* @group .toolbar */
 
-.toolbar {
 
-	height: 48px; 
-	line-height: 44px;
 
+/* @group <article> */
 
+article {
 
+	position: absolute; 
+	width: 100%;
 
+	height: auto;
 
+	top: 0px; 
+	bottom: 0px;
 
+	
+	z-index: 0;
 
+	opacity: 0;
 
+}
 
+
 
+article.current { 
+	z-index: 1;
 
+	opacity: 1; 
+}
 
+
 
+article.aside {
 
+    left: 256px !important;
 
+}
 
+/* @end */
 
+
 
+/* @group <aside> */
 
+aside {
 
+	position: absolute;
 
+	top: 0px; 
+	bottom: 0px;
 
+	width: 256px;
 
+	height: auto;
 
+	/* @ToDo */
 
+	padding-top: 40px;
 
+}
 
+
 
+aside a{
 
 	display: block;
 
+	width: 100%;
 
+	height: 48px;
 
+	padding: 0 8px;
 
+	
+	font-size: 1.1em;
 
+	font-weight: bold;
 
+	line-height: 48px;
 
 }
 
 
-.toolbar a  {
 
+aside a .icon {
 
+	width: 32px;
 
 	float: left;
 
-	padding: 0;
 
-	font-size: 2.0em;
 
+	margin: 8px 4px 0 0;
 
+    
+	opacity: 0.5;
 
+    
+    font-size: 2.2em;
 
+    text-align: center;
 
+}
 
+
 
+@media handheld, only screen and (max-width: 768px) {
 
+	article {
 
+    	-webkit-transition: left 0.3s ease-in-out;
 
+	}
 
+	
+	aside {
 
+    	width: 0px;
 
+	}
 
+
 
+	aside.show {
 
+	    width: 256px;
 
+	}
 
 }
 
 /* @end */

+ 14 - 0
src/stylesheets/less/Lungo.theme.default.less
Переглянути файл 

@@ -74,6 +74,20 @@ not(.toolbar) nav a.current {
 
 	
 /* @end */
 
 
+/* @group <aside> */
 
+aside {
 
+    background: #42474d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #42474d), color-stop(1, #2c3137));
 
+	-webkit-box-shadow: inset -4px 0px 8px rgba(0,0,0, 0.5);
 
+}
 
+
 
+aside a{
 
+	color: #fff !important;
 
+    text-shadow: 0px 1px 0px #000 !important;
 
+    border-bottom: 1px inset rgba(255,255,255,0.1);
 
+}
 
+
 
+/* @end */
 
+
 
 /* @group .list */
 
 .list {
 
 	background: #c5c5c5;

+ 43 - 0
src/view/Lungo.View.Aside.js
Переглянути файл 

@@ -0,0 +1,43 @@
 
+/**
 
+ * Initialize the <articles> layout of a certain <section>
 
+ *
 
+ * @namespace LUNGO.View
 
+ * @class Article
 
+ *
 
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+ * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
 
+ */
 
+
 
+LUNGO.View.Aside = (function(lng, undefined) {
 
+
 
+    var toggle = function(section_id) {
 
+        if (_isVisible(section_id)) {
 
+            _hide(section_id);
 
+        } else {
 
+            _show(section_id);
 
+        }
 
+    };
 
+
 
+    var _show = function(section_id) {
 
+        lng.Dom.query(section_id + ' aside').addClass('show');
 
+
 
+        var articles = lng.Dom.query(section_id + ' article');
 
+        articles.toggleClass('aside');
 
+    };
 
+
 
+    var _hide = function(section_id) {
 
+        var articles = lng.Dom.query(section_id + ' article');
 
+        articles.toggleClass('aside');
 
+    };
 
+
 
+    var _isVisible = function(section_id) {
 
+        var isVisible = lng.Dom.query(section_id + ' aside').hasClass('show');
 
+
 
+        return isVisible;
 
+    };
 
+
 
+    return {
 
+        toggle: toggle
 
+    };
 
+
 
+})(LUNGO);

+ 10 - 8
src/view/Lungo.View.Resize.js
Переглянути файл 

@@ -1,6 +1,6 @@
 
-/** 
- * 
- * 
+/**
 
+ *
 
+ *
 
  * @namespace LUNGO.View
 
  * @class Resize
 
  *
 
@@ -34,15 +34,17 @@ LUNGO.View.Resize = (function(lng, undefined) {
 
      * @method article
 
      *
 
      * @param {object} Object reference of a determinated <section>
 
-     * @param {string} Selector that refers to a section element 
+     * @param {string} Selector that refers to a section element
 
      * @param {string} CSS property
 
+     * @param {string} Element reference for resizing
 
      */
 
-    var article = function(section, selector, property) {
 
+    var article = function(section, selector, property, reference) {
 
         var element = section.children(selector);
 
-        var ARTICLE = 'article'; //@todo >> refactor
 
+        var ARTICLE = 'article';
 
 
-        if (element) {
 
-            section.children(ARTICLE).css(property, element.height() + 'px');
 
+        if (element.length > 0) {
 
+            var reference_dimension = element[reference]();
 
+            section.children(ARTICLE).css(property, reference_dimension + 'px');
 
         }
 
     };