Skip to content
Sign up
This repository

public / scrollability Octocat-spinner-32

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
New issue

Pull-to-refresh feature and scroll event #17

Open
wants to merge 3 commits into from
 +78 −34

Labels

Milestone

No milestone

Assignee

No one assigned

Notifications

2 participants

Joshua Gross Joe Hewitt
Joshua Gross
endtwist commented

I needed a pull-to-refresh at the bottom of the list for pagination, so I built it in. I haven't had the need/time to add a top-of-list pull-to-refresh but it would definitely be useful. You just drop an element with the class name "pull-to-refresh" in your scroll list, and it fires events (pullingUp, pulledUp, and pullCancel) automatically.

As well, I've made scrollability emit a scroll event during scrolling. I throttled it to once per every 20ms so that it wouldn't fire too frequently, but often enough that you can do something such as "sticky headers." It doesn't bubble, so it won't interfere with the scrollToTop feature.

I'm not sure if these are "clean enough" solutions. Definitely open to suggestions on how to improve these additions.

* Simple bottom of list pull-to-refresh … 
* onScroll event emitted
 0f98e7d
Joe Hewitt
joehewitt commented Owner

Cool, this looks good. I may not have a chance to thoroughly test and merge it for a while, but I'll get to it.

added some commits
Merge remote-tracking branch 'joehewitt/master' … 
Conflicts:
	scrollability-min.js
	scrollability.js
 5ef64ef
Build scrollability.js back into a single file; tweak scrollbar opaci… … 
…ty timing
 f5a9395
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 3 unique commits by 1 author.

Jun 19, 2011
* Simple bottom of list pull-to-refresh … 
* onScroll event emitted
 0f98e7d
Oct 13, 2011
Merge remote-tracking branch 'joehewitt/master' … 
Conflicts:
	scrollability-min.js
	scrollability.js
 5ef64ef
Oct 14, 2011
Build scrollability.js back into a single file; tweak scrollbar opaci… … 
…ty timing
 f5a9395
This page is out of date. Refresh to see the latest.

Showing 2 changed files with 78 additions and 34 deletions. Show Diff Stats Hide Diff Stats

  1. 110  scrollability.js
  2. 2  static/examples/tableview.html
110  scrollability.js
Edit View
... ... 
@@ -1,6 +1,31 @@
  1 
+// Global variable for exported functions
  2 
+var scrollability = {};
  3 
+
  4 
+(function(require, exports) {
  5 
+
1 6 
 /* See LICENSE for terms of usage */
2 7
3   
-"style scrollability/scrollbar.css"
  8 
+// Add the scrollbar styles to a new style tag
  9 
+var style = document.createElement('style');
  10 
+style.innerHTML =
  11 
+    '.scrollable { -webkit-transform: translate3d(0,0,0); }'
  12 
+  + '.scrollability-scrollbar {'
  13 
+      + 'position: absolute;'
  14 
+      + 'top: 0;'
  15 
+      + 'right: 2px;'
  16 
+      + 'width: 7px;'
  17 
+      + 'height: 1px;'
  18 
+      + 'z-index: 2147483647;'
  19 
+      + 'opacity: 0;'
  20 
+      + '-webkit-transform-origin: top left;'
  21 
+      + '-webkit-transform: translate3d(0,0,0);'
  22 
+      + '-webkit-box-sizing: border-box;'
  23 
+      + '-webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUhJREFUeNp0Ur1OwzAQtt1CaZQQgUjDhuicrEwoqjJlzpBAXoIHywtkcwfECyQPwIgKQkoyFJWq5k6cJcsUS5/sO993/1wpxazjAU4BJyR/A3aA0TSaGu85kbSO0y0AM/pH8lYr8ZwBLpBUluVtGIaPjuM8IYIgeEAdObwkB4xTqgv8iOP4vuu6lZEFRkUDHkWRbNv2mVJ/x4g+1pPn+RJICRlzk4Q3/lVVdUP1nwtqgpJSYqQJGbMj96RpmhXJM01kwzBcWU2x36zv+wXppro5TAihvat/HCjxa6R0V7FY5rruhx3BTtfzvDeS95rI0zSVcB+MpijL0SHLsjW9d3ocIRZvjINbKSsYx5rGsQdsNHFOC8CKolhCh+/GcbxG2ff9TZIkL3Vdv5KjT8AXN3b12MqZi4yRBiTZu7olmEvOacH/LPmPAAMA2bZzzeYUC40AAAAASUVORK5CYII=") 6 2 6 2 / 3px 1px 3px 1px round round;'
  24 
+      /*
  25 
+      + 'background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAABCAYAAADuHp8EAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC5JREFUeNpi/P//vyQDAwMjKytr2Z8/f9gYIICRAQH+Q/n/WVhYfgNBJ4gNEGAAhVUOGMTI0TwAAAAASUVORK5CYII=") no-repeat;'
  26 
+      */
  27 
+  + '}';
  28 
+document.head.appendChild(style);
4 29
5 30 
 // var logs = [];
6 31 
 
@@ -77,10 +102,11 @@ var directions = {
77 102 
 exports.directions = directions;
78 103
79 104 
 exports.flashIndicators = function() {
  105 
+    // This needs to be implemented without scrolling to 0, 0 for each indicator
80 106 
     // var scrollables = document.querySelectorAll('.scrollable.vertical');
81 107 
     // for (var i = 0; i < scrollables.length; ++i) {
82 108 
     //     exports.scrollTo(scrollables[i], 0, 0, 20, true);
83   
-    // }
  109 
+    // }
84 110 
 }
85 111
86 112 
 function onLoad() {
 
@@ -88,7 +114,7 @@ function onLoad() {
88 114 
     document.head.appendChild(ss);
89 115 
     globalStyleSheet = document.styleSheets[document.styleSheets.length-1];
90 116
91   
-    // exports.flashIndicators();
  117 
+    exports.flashIndicators();
92 118 
 }
93 119
94 120 
 require.ready(function() {
 
@@ -119,7 +145,7 @@ function onTouchStart(event) {
119 145 
     document.addEventListener(isTouch ? 'touchend' : 'mouseup', onTouchEnd, false);
120 146
121 147 
     // if (D) event.preventDefault();
122   
-
  148 
+
123 149 
     function onTouchMove(event) {
124 150 
         event.preventDefault();
125 151 
         touchMoved = true;
 
@@ -162,15 +188,15 @@ function onTouchStart(event) {
162 188 
     function onTouchEnd(event) {
163 189 
         // Simulate a click event when releasing the finger
164 190 
         if (touched) {
165   
-            var evt = document.createEvent('MouseEvents');
  191 
+            var evt = document.createEvent('MouseEvents');
166 192 
             evt.initMouseEvent('click', true, true, window, 1);
167   
-            touched[0].dispatchEvent(evt);
  193 
+            touched[0].dispatchEvent(evt);
168 194 
             releaseTouched(touched);
169 195 
         }
170 196
171 197 
         document.removeEventListener(isTouch ? 'touchmove' : 'mousemove', onTouchMove, false);
172 198 
         document.removeEventListener(isTouch ? 'touchend' : 'mouseup', onTouchEnd, false);
173   
-
  199 
+
174 200 
         touchAnimators.forEach(function(animator) {
175 201 
             animator.takeoff();
176 202 
         });
 
@@ -228,7 +254,7 @@ function wrapAnimator(animator, startX, startY, startTime) {
228 254 
     if (scrollbar) {
229 255 
         addTracker(scrollbar, trackScrollbar);
230 256 
         if (!scrollbar.parentNode) {
231   
-            node.parentNode.appendChild(scrollbar);
  257 
+            node.parentNode.appendChild(scrollbar);
232 258 
         }
233 259 
     }
234 260 
 
@@ -242,13 +268,13 @@ function wrapAnimator(animator, startX, startY, startTime) {
242 268
243 269 
         update(position);
244 270 
     }
245   
-
  271 
+
246 272 
     animator.reposition = update;
247 273 
     animator.track = track;
248 274 
     animator.takeoff = takeoff;
249 275 
     animator.terminate = terminate;
250 276 
     return animator;
251   
-
  277 
+
252 278 
     function addTracker(node, callback) {
253 279 
         tracked.push({node: node, callback: callback, keyframes: []});
254 280 
     }
 
@@ -274,7 +300,7 @@ function wrapAnimator(animator, startX, startY, startTime) {
274 300
275 301 
         velocity = touch - lastTouch;
276 302 
         lastTouch = touch;
277   
-
  303 
+
278 304 
         if (Math.abs(velocity) >= kStoppedThreshold) {
279 305 
             if (stopped) {
280 306 
                 --stopped;
 
@@ -324,8 +350,10 @@ function wrapAnimator(animator, startX, startY, startTime) {
324 350 
             }
325 351 
             scrollPosition += kScrollbarMargin;
326 352
327   
-            return 'translate3d(0, ' + Math.round(scrollPosition) + 'px,  0) '
328   
-                   + 'scaleY(' + Math.round(height) + ')';
  353 
+            return {webkitTransform: 'translate3d(0, ' + Math.round(scrollPosition) + 'px,  0) ',
  354 
+                    height: Math.round(height) + 'px'
  355 
+                   };
  356 
+                       /*+ 'scale3d(1, ' + Math.round(height) + ', 1)';*/
329 357 
         }
330 358 
     }
331 359 
 
@@ -360,7 +388,7 @@ function wrapAnimator(animator, startX, startY, startTime) {
360 388
361 389 
         if (node.cleanup) {
362 390 
             node.cleanup();
363   
-        }
  391 
+        }
364 392
365 393 
         globalStyleSheet.insertRule(timeline.css, 0);
366 394 
 
@@ -387,7 +415,7 @@ function wrapAnimator(animator, startX, startY, startTime) {
387 415 
         }
388 416
389 417 
         node.addEventListener("webkitAnimationEnd", node.normalEnd, false);
390   
-
  418 
+
391 419 
         play(node, timeline.name, timeline.time);
392 420
393 421 
         tracked.forEach(function(item) {
 
@@ -485,7 +513,7 @@ function wrapAnimator(animator, startX, startY, startTime) {
485 513 
                 position += velocity;
486 514 
             }
487 515
488   
-            saveKeyframe(!continues);
  516 
+            saveKeyframe(!continues);
489 517 
             time += kAnimationStep;
490 518 
         }
491 519 
 
@@ -544,7 +572,14 @@ function wrapAnimator(animator, startX, startY, startTime) {
544 572 
         node.scrollableOffset = offset;
545 573
546 574 
         tracked.forEach(function(item) {
547   
-            item.node.style.webkitTransform = item.callback(pos);
  575 
+            var cb = item.callback(pos);
  576 
+            if(typeof cb == 'string') {
  577 
+                item.node.style.webkitTransform = item.callback(pos);
  578 
+            } else {
  579 
+                for(var prop in cb) {
  580 
+                    item.node.style[prop] = cb[prop];
  581 
+                }
  582 
+            }
548 583 
         });
549 584 
     }
550 585 
 
@@ -553,20 +588,22 @@ function wrapAnimator(animator, startX, startY, startTime) {
553 588 
             if (showScrollbar) {
554 589 
                 fadeIn(scrollbar);
555 590 
             } else {
556   
-                scrollbar.style.opacity = '0';
557   
-                scrollbar.style.webkitTransition = 'opacity 0.33s linear';
  591 
+                setTimeout(function() {
  592 
+                    scrollbar.style.opacity = '0';
  593 
+                    scrollbar.style.webkitTransition = 'opacity 0.225s linear';
  594 
+                }, 50);
558 595 
             }
559 596 
         }
560 597
561   
-        node.removeEventListener("webkitAnimationEnd", node.normalEnd, false);
  598 
+        node.removeEventListener("webkitAnimationEnd", node.normalEnd, false);
562 599
563 600 
         delete node.earlyEnd;
564 601 
         delete node.normalEnd;
565   
-
  602 
+
566 603 
         if (!animator.mute) {
567 604 
             dispatch("scrollability-end", node);
568 605 
         }
569   
-
  606 
+
570 607 
     }
571 608
572 609 
     function terminate() {
 
@@ -578,7 +615,7 @@ function wrapAnimator(animator, startX, startY, startTime) {
578 615
579 616 
 function getTouchAnimators(node, touchX, touchY, startTime) {
580 617 
     var animators = [];
581   
-
  618 
+
582 619 
     // Get universally scrollable elements
583 620 
     var candidates = document.querySelectorAll('.scrollable.universal');
584 621 
     for (var j = 0; j < candidates.length; ++j) {
 
@@ -609,7 +646,7 @@ function findAnimators(element, animators, touchX, touchY, startTime) {
609 646 
                 if (!exists) {
610 647 
                     animator = wrapAnimator(animator, touchX, touchY, startTime);
611 648 
                     if (animator) {
612   
-                        animators.push(animator);
  649 
+                        animators.push(animator);
613 650 
                     }
614 651 
                 }
615 652 
             }
 
@@ -622,7 +659,7 @@ function createAnimatorForElement(element, touchX, touchY, startTime) {
622 659 
     var classes = element.className.split(' ');
623 660 
     if (classes.indexOf("scrollable") == -1)
624 661 
         return;
625   
-
  662 
+
626 663 
     for (var i = 0; i < classes.length; ++i) {
627 664 
         var name = classes[i];
628 665 
         if (directions[name]) {
 
@@ -640,7 +677,8 @@ function generateCSSKeyframes(animator, keyframes, name, time, offset) {
640 677 
     keyframes.forEach(function(keyframe) {
641 678 
         var percent = (keyframe.time / time) * 100;
642 679 
         var frame = Math.floor(percent) + '% {'
643   
-            + '-webkit-transform: ' + (keyframe.css || animator.update(keyframe.position+offset)) + ';'
  680 
+            + '-webkit-transform: ' + (keyframe.css ? keyframe.css['webkitTransform'] : animator.update(keyframe.position+offset)) + ';'
  681 
+            + (keyframe.css && 'height' in keyframe.css ? 'height: ' + keyframe.css['height']  + ';' : '')
644 682 
             + '}';
645 683 
         // D&&D(frame);
646 684 
         lines.push(frame);
 
@@ -648,7 +686,7 @@ function generateCSSKeyframes(animator, keyframes, name, time, offset) {
648 686
649 687 
     lines.push('}');
650 688
651   
-    return lines.join('\n');
  689 
+    return lines.join('\n');
652 690 
 }
653 691
654 692 
 function setTouched(target) {
 
@@ -702,9 +740,9 @@ function createXDirection(node) {
702 740 
         viewport: parent.offsetWidth,
703 741 
         bounce: parent.offsetWidth * kBounceLimit,
704 742 
         constrained: true,
705   
-
  743 
+
706 744 
         filter: function(x, y) {
707   
-            return x;
  745 
+            return x;
708 746 
         },
709 747
710 748 
         disable: function (x, y, startX, startY) {
 
@@ -743,11 +781,11 @@ function createYDirection(node) {
743 781 
         viewport: parent.offsetHeight,
744 782 
         bounce: parent.offsetHeight * kBounceLimit,
745 783 
         constrained: true,
746   
-
  784 
+
747 785 
         filter: function(x, y) {
748 786 
             return y;
749 787 
         },
750   
-
  788 
+
751 789 
         disable: function(x, y, startX, startY) {
752 790 
             var dx = Math.abs(x - startX);
753 791 
             var dy = Math.abs(y - startY);
 
@@ -755,11 +793,11 @@ function createYDirection(node) {
755 793 
                 return true;
756 794 
             }
757 795 
         },
758   
-
  796 
+
759 797 
         update: function(position) {
760 798 
             return 'translate3d(0, ' + Math.round(position) + 'px, 0)';
761 799 
         }
762   
-    };
  800 
+    };
763 801 
 }
764 802
765 803 
 function play(node, name, time) {
 
@@ -774,6 +812,7 @@ function fadeIn(node) {
774 812 
     node.style.opacity = '1';
775 813 
 }
776 814
  815 
+// "scrollability-" event dispatcher
777 816 
 function dispatch(name, target, props) {
778 817 
     var e = document.createEvent("Events");
779 818 
     e.initEvent(name, false, true);
 
@@ -786,3 +825,8 @@ function dispatch(name, target, props) {
786 825
787 826 
     return target.dispatchEvent(e);
788 827 
 }
  828 
+
  829 
+})(
  830 
+    /* require */ {ready: function(fn) { fn(); }},
  831 
+    /* exports */ scrollability
  832 
+);
2  static/examples/tableview.html
Edit View 
@@ -79,7 +79,7 @@
79 79
80 80 
 </style>
81 81
82   
-<script type="text/javascript" src="/scrollability.min.js"></script>
  82 
+<script type="text/javascript" src="../../scrollability.js"></script>
83 83
84 84 
 <script language="javascript">
85 85
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.