首頁 探索 說明
登入
pwa
/
Lungo.js
镜像来自 https://github.com/tapquo/Lungo.js.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

Carousel

ina 13 年之前
父節點
d4ddf3d4b9
當前提交
45560b5ad0
共有 2 個文件被更改，包括 307 次插入 和 3 次删除
分割檢視 顯示文件統計
  1. 156 0
      examples/kitchen-sink/carousel.html
  2. 151 3
      src/view/Lungo.View.Carousel.js

+ 156 - 0
examples/kitchen-sink/carousel.html
查看文件 

@@ -0,0 +1,156 @@
 
+<!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="#main-article" data-router="article" data-icon="menu"></a>
 
+                <a href="#second-article" data-router="article" 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>
 
+
 
+        <style>
 
+            .carousel {
 
+                padding:50px;
 
+                height: 100px;
 
+            }
 
+        </style>
 
+
 
+        <article id="main-article" class="scroll">
 
+            <a href="#" id="start1">start me!</a>
 
+            <div data-control="carousel-1" class="carousel" style="background: #aaa">
 
+                <ul>
 
+                    <li style="display:block">Lorem</li>
 
+                    <li style="display:none">2222</li>
 
+                    <li style="display:none">3333</li>
 
+                </ul>
 
+            </div>
 
+        </article>
 
+
 
+
 
+        <article id="second-article" class="scroll">
 
+            <a href="#" id="start2">start me!</a>
 
+            <div data-control="carousel-2" class="carousel" style="background: #ccc">
 
+                <ul>
 
+                    <li style="display:block">1111</li>
 
+                    <li style="display:none">2222</li>
 
+                    <li style="display:none">3333</li>
 
+                </ul>
 
+            </div>
 
+        </article>
 
+
 
+    </section>
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="../../src/lib/quo.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/view/Lungo.View.Carousel.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();
 
+
 
+        $$('#start1').tap(function() {
 
+            var carousel1 = Lungo.View.Carousel($$('[data-control=carousel-1]')[0]);
 
+            alert("active");
 
+        });
 
+        $$('#start2').tap(function() {
 
+            var carousel2 = Lungo.View.Carousel($$('[data-control=carousel-2]')[0]);
 
+            setInterval(function() {
 
+                carousel2.next();
 
+            }, 750)
 
+        });
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 151 - 3
src/view/Lungo.View.Carousel.js
查看文件 

@@ -1,11 +1,159 @@
 
 /**
 
- * Initialize the <articles> layout of a certain <section>
 
+ * CAROUSEL
 
  *
 
  * @namespace Lungo.View
 
- * @class Element
 
+ * @class Carousel
 
+ * @version 1.0
 
  *
 
  * @author Ignacio Olalde <ina@tapquo.com> || @piniphone
 
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
  */
 
 
-Lungo.View.Carousel = {}
 
+
 
+Lungo.View.Carousel = function(element, callback) {
 
+
 
+    var _instance = {
 
+        index: 0,
 
+        speed: 300,
 
+        callback: callback,
 
+        container: element,
 
+        element: element.children[0],
 
+        slide: undefined,
 
+        slides: [],
 
+        slides_length: 0,
 
+        width: 0,
 
+        start: {},
 
+        isScrolling: undefined,
 
+        deltaX: 0
 
+    };
 
+
 
+    var getPos = function() {
 
+        return _instance.index;
 
+    };
 
+
 
+    var prev = function(delay) {
 
+        if (_instance.index) {
 
+            _slide(_instance.index-1, _instance.speed);
 
+        }
 
+    };
 
+
 
+    var next = function(delay) {
 
+        if (_instance.index < _instance.slides_length - 1) {
 
+            _slide(_instance.index + 1, _instance.speed);
 
+        } else {
 
+            _slide(0, _instance.speed);
 
+        }
 
+    };
 
+
 
+    var _setup = function() {
 
+        _instance.container.style.overflow = 'hidden';
 
+        _instance.element.style.listStyle = 'none';
 
+        _instance.element.style.margin = 0;
 
+        _instance.slides = _instance.element.children;
 
+        _instance.slides_length = _instance.slides.length;
 
+        if (_instance.slides_length < 2) return null;
 
+        _instance.width = ("getBoundingClientRect" in _instance.container) ?
 
+                            _instance.container.getBoundingClientRect().width :
 
+                            _instance.container.offsetWidth;
 
+
 
+        if (!_instance.width) return null;
 
+        _instance.container.style.visibility = 'hidden';
 
+        _instance.element.style.width = (_instance.slides.length * _instance.width) + 'px';
 
+        var index = _instance.slides.length;
 
+        while (index--) {
 
+            var el = _instance.slides[index];
 
+            el.style.width = _instance.width + 'px';
 
+            el.style.display = 'table-cell';
 
+            el.style.verticalAlign = 'top';
 
+        }
 
+        _slide(_instance.index, 0);
 
+        _instance.container.style.visibility = 'visible';
 
+    };
 
+
 
+    var _slide = function(index, duration) {
 
+        var style = _instance.element.style;
 
+        if (duration == undefined) {
 
+            duration = _instance.speed;
 
+        }
 
+        style.webkitTransitionDuration = style.MozTransitionDuration =
 
+        style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration =
 
+        duration + 'ms';
 
+
 
+        style.MozTransform = style.webkitTransform = 'translate3d(' + -(index * _instance.width) + 'px,0,0)';
 
+        style.msTransform = style.OTransform = 'translateX(' + -(index * _instance.width) + 'px)';
 
+        _instance.index = index;
 
+    };
 
+
 
+    var _handleGestures = function() {
 
+        _instance.element.addEventListener('touchstart', _touchStart, false);
 
+        _instance.element.addEventListener('touchmove', _touchMove, false);
 
+        _instance.element.addEventListener('touchend', _touchEnd, false);
 
+        _instance.element.addEventListener('webkitTransitionEnd', _transitionEnd, false);
 
+        _instance.element.addEventListener('msTransitionEnd', _transitionEnd, false);
 
+        _instance.element.addEventListener('oTransitionEnd', _transitionEnd, false);
 
+        _instance.element.addEventListener('transitionend', _transitionEnd, false);
 
+        window.addEventListener('resize', _setup, false);
 
+    };
 
+
 
+    var _touchStart = function(e) {
 
+        _instance.start = {
 
+            pageX: e.touches[0].pageX,
 
+            pageY: e.touches[0].pageY,
 
+            time: Number(new Date())
 
+        };
 
+        _instance.isScrolling = undefined;
 
+        _instance.deltaX = 0;
 
+        _instance.element.style.MozTransitionDuration = _instance.element.style.webkitTransitionDuration = 0;
 
+        e.stopPropagation();
 
+    };
 
+
 
+    var _touchMove = function(e) {
 
+        if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
 
+        _instance.deltaX = e.touches[0].pageX - _instance.start.pageX;
 
+        if ( typeof _instance.isScrolling == 'undefined') {
 
+            _instance.isScrolling = !!( _instance.isScrolling || Math.abs(_instance.deltaX) < Math.abs(e.touches[0].pageY - _instance.start.pageY) );
 
+        }
 
+        if (!_instance.isScrolling) {
 
+            e.preventDefault();
 
+            var factor = ((!_instance.index && _instance.deltaX > 0
 
+                    || _instance.index == _instance.slides_length - 1
 
+                    && _instance.deltaX < 0
 
+                    ) ?
 
+                    (Math.abs(_instance.deltaX) / _instance.width + 1)
 
+                    :1);
 
+            _instance.deltaX = _instance.deltaX / factor;
 
+            var pos = (_instance.deltaX - _instance.index * _instance.width);
 
+            _instance.element.style.MozTransform = _instance.element.style.webkitTransform = 'translate3d(' + pos + 'px,0,0)';
 
+            e.stopPropagation();
 
+        }
 
+    };
 
+
 
+    var _touchEnd = function(e) {
 
+        var isValidSlide =
 
+            Number(new Date()) - _instance.start.time < 250
 
+            && Math.abs(_instance.deltaX) > 20
 
+            || Math.abs(_instance.deltaX) > _instance.width/2;
 
+        var isPastBounds =
 
+            !_instance.index && _instance.deltaX > 0
 
+            || _instance.index == _instance.slides_length - 1
 
+            && _instance.deltaX < 0;
 
+        if (!_instance.isScrolling) {
 
+            _slide( _instance.index + ( isValidSlide && !isPastBounds ? (_instance.deltaX < 0 ? 1 : -1) : 0 ), _instance.speed );
 
+        }
 
+        e.stopPropagation();
 
+    };
 
+
 
+    var _transitionEnd = function(e) {
 
+        if(_instance.callback != undefined)
 
+            _instance.callback(e, (_instance.index + 1), _instance.slides[this.index]);
 
+    };
 
+
 
+    _setup();
 
+    _handleGestures();
 
+
 
+    return {
 
+        prev: prev,
 
+        next: next,
 
+        getPos: getPos
 
+    };
 
+};