ina 13 роки тому
батько
коміт
92fac304e9

+ 187 - 0
examples/kitchen-sink/pull.html

@@ -0,0 +1,187 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>KitchenSink - Lungo 2.0</title>
+    <meta name="description" content="">
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="format-detection" content="telephone=no">
+    <meta http-equiv="cleartype" content="on">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
+    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
+    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/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.nav.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.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.widgets.icon.brand.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
+
+    <!--
+    <link rel="stylesheet" href="../../release/lungo.css">
+    <link rel="stylesheet" href="../../release/lungo.icon.css">
+    <link rel="stylesheet" href="../../release/lungo.icon.brand.css">
+    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
+    -->
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="stylesheets/app.css">
+</head>
+
+<body class="app">
+    <section id="main" data-transition="slide" data-pull="normal">
+        <header  class="">
+            <nav class="left button">
+                <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>
+            </nav>
+            <div class="left">
+                <div class="centered title with-subtitle">
+                    Lungo Framework
+                    <small class="subtitle">version 2</small>
+                </div>
+                </div>
+        </header>
+
+        <article id="main-article" class="list indented scroll">
+            <ul>
+                <li class="contrast " data-loading="white">
+
+                </li>
+
+                <li class="contrast">
+                    <strong>
+                    A framework for developers who want to design, build and share cross device apps.
+                </strong>
+                </li>
+                <li data-icon="brand html5" class="feature">
+                    <strong>HTML5 Optimized Apps</strong>
+                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
+                </li>
+                <li data-icon="brand github-2" class="feature">
+                    <strong>Open Source Project</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="book" class="feature">
+                    <strong>Powerfull JavaScript API</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="brand branch" class="feature">
+                    <strong>Multi-Device full support</strong>
+                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
+                </li>
+            </ul>
+        </article>
+
+
+        <article id="second-article" class="list indented scroll"
+            <ul>
+                <li class="contrast " data-loading="white">
+
+                </li>
+
+                <li class="contrast">
+                    <strong>
+                    A framework for developers who want to design, build and share cross device apps.
+                </strong>
+                </li>
+                <li data-icon="brand html5" class="feature">
+                    <strong>HTML5 Optimized Apps</strong>
+                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
+                </li>
+                <li data-icon="brand github-2" class="feature">
+                    <strong>Open Source Project</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="book" class="feature">
+                    <strong>Powerfull JavaScript API</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="brand branch" class="feature">
+                    <strong>Multi-Device full support</strong>
+                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
+                </li>
+            </ul>
+        </article>
+    </section>
+
+    <!-- Lungo dependencies -->
+    <script src="../../src/lib/quo.debug.js"></script>
+    <!--
+    <script src="../../release/lungo.js"></script>
+    -->
+    <script src="../../src/Lungo.js"></script>
+    <script src="../../src/Lungo.init.js"></script>
+    <script src="../../src/Lungo.Core.js"></script>
+    <script src="../../src/Lungo.Dom.js"></script>
+    <script src="../../src/Lungo.Service.js"></script>
+    <script src="../../src/Lungo.Constants.js"></script>
+    <script src="../../src/Lungo.Element.js"></script>
+    <script src="../../src/Lungo.Events.js"></script>
+    <script src="../../src/Lungo.Notification.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.Element.js"></script>
+    <script src="../../src/view/Lungo.View.Pull.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/Lungo.Fallback.js"></script>
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
+    <script src="../../src/boot/Lungo.Boot.Stats.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>
+        Lungo.init();
+
+        var config = {
+            refresh: {
+                title: 'REFRESHING...',
+                icon: 'up',
+                callback: function() {
+                    console.error(arguments);
+                    setTimeout(function(){
+                        pull.hide();
+                        // Lungo.View.pull.hide();
+
+                    }, 1000);
+                }
+            }
+        };
+
+        var pull = Lungo.View.Pull('#main-article', config);
+
+    </script>
+</body>
+</html>

+ 8 - 0
src/attributes/Lungo.Attributes.Data.js

@@ -56,6 +56,14 @@ Lungo.Attributes.Data = {
                     <span class="left"></span>\
                 </div>'
     },
+    Pull: {
+        tag: 'pull',
+        selector: 'section',
+        html: '<div class="pull {{value}}" style="position: absolute; top: 44px; width: 100%; text-align: center; padding-top: 10px; background-color: white; height: 100px; z-index: -10;">\
+                    <span class="icon home"></span>\
+                    <strong>title</strong>\
+                </div>'
+    },
     Back: {
         tag: 'back',
         selector: 'header, footer',

+ 4 - 0
src/stylesheets/Lungo.layout.article.less

@@ -29,6 +29,10 @@ article {
         z-index: 1;
     }
 
+    &.pull {
+        .transition(all 300ms @defaultTrasition);
+    }
+
     & .text {
         margin: 4px 0 8px;
         display: block;

+ 7 - 0
src/stylesheets/css/Lungo.layout.article.css

@@ -24,6 +24,13 @@ article:first-child {
   display: block;
   z-index: 1;
 }
+article.pull {
+  -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+}
 article .text {
   margin: 4px 0 8px;
   display: block;

+ 101 - 1
src/view/Lungo.View.Pull.js

@@ -8,4 +8,104 @@
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
 
-Lungo.View.Pull = {}
+Lungo.View.Pull = function(element_selector, data) {
+
+    var REFRESHING_HEIGHT = 60;
+    var MAX_HEIGHT = 100;
+    var ANIMATION_TIME = 300;
+    var CURRENT_DISTANCE = 0;
+    var REFRESHING = false;
+    var ELEMENT = $$(element_selector);
+
+    var CONFIG_BASE = {
+        pull: {
+            title: 'Pull to refresh',
+            icon: 'down'
+        },
+        release: {
+            title: 'Release to...',
+            icon: 'up'
+        },
+        refresh: {
+            title: 'Refreshing',
+            icon: 'home',
+            callback: undefined
+        }
+    };
+
+    CONFIG = Lungo.Core.mix(CONFIG_BASE, data);
+
+    var hide = function() {
+        _moveElementTo(0, true);
+        setTimeout(function() {
+            REFRESHING = false;
+            document.removeEventListener('touchmove', _blockGestures, false);
+        }, ANIMATION_TIME);
+
+    };
+
+    var _moveElementTo = function(posY, animate) {
+        var newPos = posY > MAX_HEIGHT ? MAX_HEIGHT : posY;
+        if(animate) ELEMENT.addClass('pull');
+        ELEMENT.style('-webkit-transform', 'translate(0, ' + (newPos) + 'px)');
+        if(animate) {
+            setTimeout(function() {
+                ELEMENT.removeClass('pull');
+            }, ANIMATION_TIME);
+        }
+    };
+
+    var _refreshStart = function(event) {
+        REFRESHING = true;
+        document.addEventListener('touchmove', _blockGestures, false);
+        _setContainerHTML(CONFIG.refresh);
+        _moveElementTo(REFRESHING_HEIGHT, true);
+
+        CONFIG.refresh.callback.apply(this);
+    };
+
+    var _setContainerHTML = function(context) {
+        container = ELEMENT.siblings('div.pull');
+
+        container.find('span').attr('class', 'icon ' + context.icon);
+        container.find('strong').html(context.title);
+    };
+
+    var _blockGestures = function(touchEvent) {
+        touchEvent.preventDefault();
+    };
+
+    var _handlePulling = function(event) {
+        _moveElementTo(CURRENT_DISTANCE, false);
+        _setContainerHTML((CURRENT_DISTANCE > REFRESHING_HEIGHT) ? CONFIG.release : CONFIG.pull )
+    };
+
+    _handlePullEnd = function(event) {
+        if(CURRENT_DISTANCE > REFRESHING_HEIGHT) {
+            _refreshStart();
+        } else {
+            hide();
+        }
+    };
+
+    var _handleGestures = function() {
+        ELEMENT.swiping(function(event) {
+            if(ELEMENT[0].scrollTop <= 1 && !REFRESHING) {
+                CURRENT_DISTANCE = event.currentTouch.y - event.iniTouch.y;
+                if(CURRENT_DISTANCE >= 0) {
+                    ELEMENT.style('overflow-y', 'hidden');
+                    _handlePulling();
+                }
+            }
+        }).swipe(function(event) {
+            ELEMENT.style('overflow-y', 'scroll');
+            _handlePullEnd();
+        });
+    };
+
+    _handleGestures();
+
+    return {
+        hide: hide
+    };
+};