Explorar el Código

New event for pull element

soyjavi hace 13 años
padre
commit
b5d6fa28dc

+ 4 - 1
kitchen-sink/app/events.js

@@ -4,6 +4,9 @@ Lungo.Events.init({
         Lungo.Notification.loading('hole', '1', 'user');
     },
     'tap section#sec-1 header #btn-toggle-loading': App.View.toggleLoading,
-    'load section#sec-2 load': App.View.toggleLoading
+    'load section#sec-2 load': App.View.toggleLoading,
+    'tap section#pull article': function(){
+        alert(1);
+    }
 });
 

+ 8 - 11
kitchen-sink/app/events.pull.js

@@ -1,12 +1,9 @@
-var config = {
-    refresh: {
-        title: 'REFRESHING...',
-        callback: function() {
-            setTimeout(function(){
-                pull.hide();
-            }, 1000);
-        }
+var pull = new Lungo.Element.Pull('section#pull article', {
+    onPull: "Pull down to refresh",
+    onRelease: "Release to get new data",
+    onRefresh: "Refreshing...",
+    callback: function() {
+        alert("Pull & Refresh completed!");
+        pull.hide();
     }
-};
-
-var pull = new Lungo.Element.Pull('section#pull article', config);
+});

+ 16 - 0
kitchen-sink/app/sections/pull.html

@@ -13,6 +13,22 @@
                 </strong>
                 <small>This element has an associated event</small>
             </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>

+ 13 - 10
src/element/Lungo.Element.Pull.js

@@ -20,10 +20,11 @@ Lungo.Element.Pull = function(element_selector, config_data) {
     var CONTAINER = ELEMENT.siblings('div[data-control="pull"]');
     var CONFIG;
 
-    var CONFIG_BASE = {
-        pull: { title: 'Pull to refresh' },
-        release: { title: 'Release to...' },
-        refresh: { title: 'Refreshing', callback: undefined }
+    var CONFIG_BASE ={
+        onPull: "Pull down to refresh",
+        onRelease: "Release to...",
+        onRefresh: "Loading...",
+        callback: undefined
     };
 
     CONFIG = Lungo.Core.mix(CONFIG_BASE, config_data);
@@ -51,10 +52,13 @@ Lungo.Element.Pull = function(element_selector, config_data) {
     var _refreshStart = function(event) {
         REFRESHING = true;
         document.addEventListener('touchmove', _blockGestures, false);
-        _setContainerTitle(CONFIG.refresh.title);
+        _setContainerTitle(CONFIG.onRefresh);
         _setContainerLoading(true);
         _moveElementTo(REFRESHING_HEIGHT, true);
-        CONFIG.refresh.callback.apply(this);
+
+        if (CONFIG.callback) {
+            CONFIG.callback.apply(this);
+        }
     };
 
     var _setContainerTitle = function(title) {
@@ -85,17 +89,16 @@ Lungo.Element.Pull = function(element_selector, config_data) {
         _moveElementTo(CURRENT_DISTANCE, false);
         _setContainerLoading(false);
         if (CURRENT_DISTANCE > REFRESHING_HEIGHT) {
-            _setContainerTitle(CONFIG.release.title);
+            _setContainerTitle(CONFIG.onRelease);
             _setContainerOnPulling(true);
         } else {
-            _setContainerTitle(CONFIG.pull.title);
+            _setContainerTitle(CONFIG.onPull);
             _setContainerOnPulling(false);
         }
     };
 
     var _handlePullEnd = function(event) {
-        if(CURRENT_DISTANCE > REFRESHING_HEIGHT) _refreshStart();
-        else hide();
+        if(CURRENT_DISTANCE > REFRESHING_HEIGHT) _refreshStart(); else hide();
     };
 
     (function() {

+ 1 - 2
src/stylesheets/Lungo.widgets.pull.less

@@ -27,8 +27,7 @@ section > [data-control="pull"] {
         position: relative;
         top: -16px;
         margin-left: 4px;
-        font-size: 1.1em;
-        text-transform: lowercase; }
+        font-size: 1.1em;}
 
     &.rotate {
         & > .icon {

+ 0 - 3
src/stylesheets/css/Lungo.widgets.pull.css

@@ -7,8 +7,6 @@ section > [data-control="pull"] {
   width: 100%;
   height: 80px;
   padding: 10px 0;
-  color: #666;
-  text-shadow: 0 1px 0 white;
   text-align: center;
 }
 section > [data-control="pull"] > .icon {
@@ -32,7 +30,6 @@ section > [data-control="pull"] > strong {
   top: -16px;
   margin-left: 4px;
   font-size: 1.1em;
-  text-transform: lowercase;
 }
 section > [data-control="pull"].rotate > .icon {
   -webkit-transform: rotate(180deg);