Permalink
Browse files

Updated to jquery 1.7.2 and new, sexier PTR code in safari

  • Loading branch information...
1 parent b761571 commit 8c258bc0dc01c5cf276768cf13058657c9ee440e @stuartgibson stuartgibson committed May 28, 2012
@@ -25,6 +25,7 @@
<key>Start</key>
<array>
<string>jquery-1.6.4.min.js</string>
+ <string>jquery-1.7.2.min.js</string>
<string>pull_to_refresh.js</string>
</array>
</dict>

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -1,107 +1,140 @@
-(function(){
-
- var special = jQuery.event.special,
- uid1 = 'D' + (+new Date()),
- uid2 = 'D' + (+new Date() + 1);
-
- special.scrollstop = {
- latency: 300,
- setup: function() {
-
- var timer,
- handler = function(evt) {
-
- var _self = this,
- _args = arguments;
-
- if (timer) {
- clearTimeout(timer);
- }
-
- timer = setTimeout( function(){
-
- timer = null;
- evt.type = 'scrollstop';
- jQuery.event.handle.apply(_self, _args);
-
- }, special.scrollstop.latency);
-
- };
-
- jQuery(this).bind('scroll', handler).data(uid2, handler);
-
- },
- teardown: function() {
- jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
- }
- };
-
-})();
-
-
-var pully = {
-
- position: null,
- refreshPossible: false,
-
- init: function() {
- var current_url = document.URL;
- if( current_url.search( 'twitter.com' ) == -1 )
+// Setup the namespace
+
+var pullToReload = {
+
+ // Instance vars
+ eventCapable: true,
+ refreshCapable: false,
+ timeStarted: null,
+ scrollUpTime: null,
+
+ init: function () {
+
+ // Inject the html onto the page
+ $('body').prepend('<div id="pullToRefreshReloading"><span class="icon"></span><span class="text">Reloading...</span></div><div id="pullToRefresh"><div class="wrap"><span class="icon">&nbsp;</span><div id="pullyText">Pull to refresh</div></div></div>');
+
+ // Bind scroll listener
+ $(window).bind('scroll', pullToReload.monitorScroll);
+ },
+
+ monitorScroll: function () {
+
+ // If user is down the page, pull to refresh is not allowed
+ if (window.scrollY > 0) {
+ // reset the time
+ pullToReload.scrollUpTime = null;
+ pullToReload.eventCapable = false;
+ }
+
+ if (window.scrollY === 0) {
+ // Start a timer if it isn't set
+ if (pullToReload.scrollUpTime === null) {
+ pullToReload.scrollUpTime = new Date();
+ }
+ }
+
+ // User is real close, let's check that timer and see if it's long enough to reload the page
+ if (pullToReload.scrollUpTime !== null)
+ {
+ var nowTime = new Date(),
+ diff = nowTime.getTime() - pullToReload.scrollUpTime.getTime();
+
+ if (diff > 500) {
+ pullToReload.runScrollCommands();
+ }
+ }
+ else
{
- // Inject the div
- $('body').prepend('<div id="pullToRefresh"><div class="wrap"><span class="icon">&nbsp;</span><div id="pulltorefreshheader"></div></div></div>');
- // listener for scrolling
- $(window).bind('scroll', pully.scrollStart);
- $(window).bind('scrollstop', pully.scrollStop);
+ pullToReload.runScrollCommands();
}
+
},
-
- scrollStart: function() {
- pully.position = $(window).scrollTop();
-
- if (pully.position <= -30)
+
+ runScrollCommands: function () {
+
+ // Scrolling up has occured, but not enough to reload yet
+ if (window.scrollY < 0 && window.scrollY > -40)
{
- $('#pullToRefresh #pulltorefreshheader').text('Release to refresh');
- $('#pullToRefresh .icon').addClass('release');
- pully.refreshPossible = true;
+ // Set the text to pull to refresh
+ $("#pullToRefresh #pullyText").html("Pull to refresh");
+
+ if ($("#pullToRefresh .icon").hasClass("flippedArrow")) {
+ $("#pullToRefresh .icon").removeClass("flippedArrow");
+ }
+
+ // Set the position of the pull down bar
+ $("#pullToRefresh").css({ top: Math.abs(window.scrollY) - 40 });
+
+ // Only set the time if we pull up and if the time is null
+ if (pullToReload.refreshCapable === true && pullToReload.timeStarted === null) {
+ // Set a date for scrolling back down the way
+ pullToReload.timeStarted = new Date();
+ }
}
- else if (pully.position <= -5 && pully.refreshPossible === false)
+
+ // Reload threshold has passed
+ if (window.scrollY <= -40)
{
- pully.slideDownMenu();
+ // Set the text and icon to release
+ $("#pullToRefresh #pullyText").html("Release to refresh");
+
+ if ( ! $("#pullToRefresh .icon").hasClass("flippedArrow")) {
+ $("#pullToRefresh .icon").addClass("flippedArrow");
+
+ }
+
+ // Set the position incase we scrolled too fast
+ $("#pullToRefresh").css({ top: 0 });
+
+ // Set refresh capable
+ pullToReload.refreshCapable = true;
+
+ // Wipe out the time
+ pullToReload.timeStarted = null;
}
- else if (pully.refreshPossible === false)
+
+ // We're back down below the page, let's see if we can reload
+ if (window.scrollY >= 0 && pullToReload.refreshCapable === true)
{
- pully.slideUpMenu();
+ if (pullToReload.timeStarted !== null) {
+ // Check the time
+ var nowTime = new Date(),
+ diff = nowTime.getTime() - pullToReload.timeStarted.getTime();
+
+ // If we have taken less than a half second for the release, reload the page
+ if (diff < 500) {
+ pullToReload.reloadTheWeePageMate();
+ }
+ }
+ else
+ {
+ // We haven't even got to set the time it was that fast, let's reload.
+ pullToReload.reloadTheWeePageMate();
+ }
+
+ // Set the time back to null and set release capable back to false
+ pullToReload.timeStarted = null;
+ pullToReload.refreshCapable = false;
}
-
- },
-
- scrollStop: function() {
- pully.position = $(window).scrollTop();
-
- if (pully.position >= 0 && pully.refreshPossible === true)
+
+ if (window.scrollY >= 0)
{
- $('#pullToRefresh').addClass('fixed');
- $('#pullToRefresh #pulltorefreshheader').text('Reloading…');
- $(window).scrollTop(0);
-
- setTimeout(function(){
- window.location.reload();
- }, 1000);
+ // Set the position to completely hidden again
+ $("#pullToRefresh").css({ top: -40 });
}
-
- },
-
- slideDownMenu: function() {
- $('#pullToRefresh').slideDown(200);
- $('#pullToRefresh #pulltorefreshheader').text('Pull to refresh');
- $('#pullToRefresh .icon').removeClass('release');
+
},
-
- slideUpMenu: function() {
- $('#pullToRefresh').slideUp(200);
+
+ reloadTheWeePageMate: function () {
+ $("#pullToRefreshReloading").fadeIn(300);
+
+ // Hold for a wee second to see the animation
+ setTimeout(function(){
+ // Do the page reload
+ window.location.reload();
+ }, 750);
}
-
+
};
-$(document).ready(pully.init);
+$(document).ready(pullToReload.init);
@@ -1,51 +1,55 @@
#pullToRefresh{
- display: none;
- position: fixed !important;
- top: 0px !important;
- left: 0px !important;
- height: 40px !important;
- width: 40% !important;
- margin: 0 30% !important;
- border-bottom-left-radius: 10px !important;
- border-bottom-right-radius: 10px !important;
- background: -webkit-linear-gradient(bottom, rgba(20,20,20,0.9) 5%, rgba(64,64,64,0.9) 53%) !important;
- z-index: 10000 !important;
- box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
+ display: block;
+ position: fixed;
+ top: -40px;
+ left: 0px;
+ height: 40px;
+ width: 40%;
+ margin: 0 30%;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ background: -webkit-linear-gradient(bottom, rgba(20,20,20,0.9) 5%, rgba(64,64,64,0.9) 53%);
+ z-index: 10000;
+ /*box-shadow: 0 0 10px rgba(0,0,0,0.2);*/
}
-#pullToRefresh.fixed{ display: block !important; }
+/*#pullToRefresh.fixed{ display: block !important; }*/
#pullToRefresh .wrap{
- width: 180px !important;
- margin: 0 auto !important;
- padding: 10px 0 !important;
+ width: 180px;
+ margin: 0 auto;
+ padding: 10px 0;
}
-#pullToRefresh #pulltorefreshheader{
- width: 160px !important;
- display: block !important;
- color: #fff !important;
- line-height: 20px !important;
- font-size: 16px !important;
- font-family: 'Helvetica Neue', Helvetica, sans-serif !important;
- text-shadow: 1px 1px 0px rgba(0,0,0,0.8) !important;
+#pullToRefresh #pullyText{
+ width: 160px;
+ display: block;
+ color: #fff;
+ line-height: 20px;
+ font-size: 16px;
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
+ text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}
#pullToRefresh .icon{
background: url('whiteArrow.png') !important;
- float: right !important;
- display: block !important;
- width: 20px !important;
- height: 20px !important;
- color: #fff !important;
- font-size: 20px !important;
- line-height: 20px !important;
- text-align: center !important;
- border-radius: 20px !important;
- margin-left: 20px !important;
+ float: right;
+ display: block;
+ width: 20px;
+ height: 20px;
+ color: #fff;
+ font-size: 20px;
+ line-height: 20px;
+ text-align: center;
+ border-radius: 20px;
+ margin-left: 20px;
-webkit-transition: all .3s ease-in-out;
}
+#pullToRefresh .icon.flippedArrow{
+ background: url('whiteArrow-flipped.png');
+}
+
#pullToRefresh.fixed .icon{
-webkit-transition: none;
}
@@ -58,17 +62,51 @@
from {
-webkit-transform: rotate(0deg);
}
- to {
+ to {
-webkit-transform: rotate(360deg);
}
}
-#pullToRefresh.fixed .icon{
- background: url('spinner.png') !important;
- text-indent: -10000px !important;
- -webkit-animation-name: rotate;
- -webkit-animation-duration: 0.5s;
+#pullToRefreshReloading .icon{
+ background: url('spinner.png');
+ float: right;
+ display: block;
+ width: 20px;
+ height: 20px;
+ color: #fff;
+ font-size: 20px;
+ line-height: 20px;
+ text-align: center;
+ text-indent: -10000px;
+ margin: 10px;
+ -webkit-animation-name: rotate;
+ -webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
-webkit-transform: rotate(0deg);
+}
+
+/* Reloading box */
+#pullToRefreshReloading{
+ display: none;
+ position: fixed;
+ top: 200px;
+ left: 50%;
+ width: 160px;
+ margin-left: -100px;
+ background: rgba(0,0,0,0.8);
+ border-radius: 5px;
+ padding: 20px;
+ min-height: 40px;
+ z-index: 100010;
+}
+
+#pullToRefreshReloading .text{
+ width: 120px;
+ display: block;
+ color: #fff;
+ line-height: 40px;
+ font-size: 16px;
+ font-family: 'Helvetica Neue', Helvetica, sans-serif;
+ text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 8c258bc

Please sign in to comment.