Pull & Refresh 1.0

kitchen-sink/pull.html

@@ -35,8 +35,12 @@
     <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.widgets.pull.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">
@@ -66,9 +70,6 @@
 
         <article id="main-article" class="list indented scroll">
             <ul>
-                <li class="contrast " data-loading="white">
-
-                </li>
 
                 <li class="contrast">
                     <strong>
@@ -175,19 +176,16 @@
         var config = {
             refresh: {
                 title: 'REFRESHING...',
-                icon: 'up',
                 callback: function() {
                     console.error(arguments);
                     setTimeout(function(){
                         pull.hide();
-                        // Lungo.View.pull.hide();
-
-                    }, 1000);
+                    }, 2000);
                 }
             }
         };
 
-        var pull = Lungo.View.Pull('#main-article', config);
+        var pull = new Lungo.Element.Pull('#main-article', config);
 
     </script>
 </body>

src/attributes/Lungo.Attributes.Data.js

@@ -19,6 +19,13 @@ Lungo.Attributes.Data = {
         selector: '*',
         html: '<span class="bubble count">{{value}}</span>'
     },
+    Pull: {
+        tag: 'pull',
+        selector: 'section',
+        html: '<div class="{{value}}" data-control="pull" data-icon="down" data-loading="black">\
+                    <strong>title</strong>\
+                </div>'
+    },
     Progress: {
         tag: 'progress',
         selector: '*',
@@ -56,14 +63,6 @@ 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',

src/element/Lungo.Element.Pull.js

@@ -17,12 +17,13 @@ Lungo.Element.Pull = function(element_selector, config_data) {
     var CURRENT_DISTANCE = 0;
     var REFRESHING = false;
     var ELEMENT = $$(element_selector);
-    var CONFIG = undefined;
+    var CONTAINER = ELEMENT.siblings('div[data-control="pull"]');
+    var CONFIG;
 
     var CONFIG_BASE = {
-        pull: { title: 'Pull to refresh', icon: 'down' },
-        release: { title: 'Release to...', icon: 'up' },
-        refresh: { title: 'Refreshing', icon: 'refresh', callback: undefined }
+        pull: { title: 'Pull to refresh' },
+        release: { title: 'Release to...' },
+        refresh: { title: 'Refreshing', callback: undefined }
     };
 
     CONFIG = Lungo.Core.mix(CONFIG_BASE, config_data);
@@ -50,15 +51,30 @@ Lungo.Element.Pull = function(element_selector, config_data) {
     var _refreshStart = function(event) {
         REFRESHING = true;
         document.addEventListener('touchmove', _blockGestures, false);
-        _setContainerHTML(CONFIG.refresh);
+        _setContainerTitle(CONFIG.refresh.title);
+        _setContainerLoading(true);
         _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 _setContainerTitle = function(title) {
+        CONTAINER.find('strong').html(title);
+    };
+
+    var _setContainerLoading = function(op) {
+        if (op) {
+            CONTAINER.addClass("refresh");
+        } else {
+            CONTAINER.removeClass("refresh");
+        }
+    };
+
+    var _setContainerOnPulling = function(op) {
+        if (op) {
+            CONTAINER.addClass("rotate");
+        } else {
+            CONTAINER.removeClass("rotate");
+        }
     };
 
     var _blockGestures = function(touchEvent) {
@@ -67,7 +83,14 @@ Lungo.Element.Pull = function(element_selector, config_data) {
 
     var _handlePulling = function(event) {
         _moveElementTo(CURRENT_DISTANCE, false);
-        _setContainerHTML((CURRENT_DISTANCE > REFRESHING_HEIGHT) ? CONFIG.release : CONFIG.pull )
+        _setContainerLoading(false);
+        if (CURRENT_DISTANCE > REFRESHING_HEIGHT) {
+            _setContainerTitle(CONFIG.release.title);
+            _setContainerOnPulling(true);
+        } else {
+            _setContainerTitle(CONFIG.pull.title);
+            _setContainerOnPulling(false);
+        }
     };
 
     var _handlePullEnd = function(event) {
@@ -75,7 +98,6 @@ Lungo.Element.Pull = function(element_selector, config_data) {
         else hide();
     };
 
-
     (function() {
         var STARTED = false;
         var INI_Y = {};

src/stylesheets/Lungo.theme.default.less

@@ -71,7 +71,7 @@ section > footer {
 
 }
 
-section > article { background: #f4f5f5; }
+section > article, section > [data-control="pull"] { background: #f4f5f5; }
 
 aside {
     color: #fff;

src/stylesheets/Lungo.widgets.pull.less

@@ -0,0 +1,45 @@
+@import "constants.less";
+
+section > [data-control="pull"] {
+    position: absolute;
+    z-index: -1;
+    top: @header-footer-height;
+    width: 100%;
+    height: 80px;
+    padding: 10px 0;
+    color: #666;
+    text-shadow: 0 1px 0 white;
+    text-align: center;
+
+    & > .icon {
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        font-size: 44px;
+        line-height: 48px;
+
+        .transition(all 300ms @defaultTrasition);
+    }
+
+    & > .loading {
+        display: none;
+        left: 0%; }
+
+    & > strong {
+        position: relative;
+        top: -16px;
+        margin-left: 4px;
+        font-size: 1.1em;
+        text-transform: lowercase; }
+
+    &.rotate {
+        & > .icon {
+            .transform(rotate(180deg));
+        }
+
+    }
+    &.refresh {
+        & > .icon { display: none; }
+        & > .loading { display: inline-block; }
+    }
+}

src/stylesheets/css/Lungo.theme.default.css

@@ -53,7 +53,8 @@ section > footer > nav a.current {
   -moz-box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3;
   box-shadow: -1px 0 0 #252525, 1px 0 0 #252525, inset 0 3px 0 #2A95D3;
 }
-section > article {
+section > article,
+section > [data-control="pull"] {
   background: #f4f5f5;
 }
 aside {

src/stylesheets/css/Lungo.widgets.pull.css

@@ -0,0 +1,49 @@
+/* DIMENSIONS */
+/* COLORS */
+section > [data-control="pull"] {
+  position: absolute;
+  z-index: -1;
+  top: 44px;
+  width: 100%;
+  height: 80px;
+  padding: 10px 0;
+  color: #666;
+  text-shadow: 0 1px 0 white;
+  text-align: center;
+}
+section > [data-control="pull"] > .icon {
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  font-size: 44px;
+  line-height: 48px;
+  -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);
+}
+section > [data-control="pull"] > .loading {
+  display: none;
+  left: 0%;
+}
+section > [data-control="pull"] > strong {
+  position: relative;
+  top: -16px;
+  margin-left: 4px;
+  font-size: 1.1em;
+  text-transform: lowercase;
+}
+section > [data-control="pull"].rotate > .icon {
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+section > [data-control="pull"].refresh > .icon {
+  display: none;
+}
+section > [data-control="pull"].refresh > .loading {
+  display: inline-block;
+}