From a0a1dac6a85aa0c46564bf8db4b113b48e044f2e Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 12:15:15 +0100 Subject: [PATCH 01/20] add parameter pull-to-refresh-config to set custom config variables --- src/angular-pull-to-refresh.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 148209c..a6e3fbd 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -20,7 +20,9 @@ angular.module('mgcrea.pullToRefresh', []) .directive('pullToRefresh', function($compile, $timeout, $q, pullToRefreshConfig) { return { - scope: true, + scope: { + pullToRefreshConfig: '=' + }, restrict: 'A', transclude: true, templateUrl: 'angular-pull-to-refresh.tpl.html', @@ -28,7 +30,7 @@ angular.module('mgcrea.pullToRefresh', []) return function postLink(scope, iElement, iAttrs) { - var config = angular.extend({}, pullToRefreshConfig, iAttrs); + var config = angular.extend({}, pullToRefreshConfig, scope.pullToRefreshConfig, iAttrs); var scrollElement = iElement.parent(); var ptrElement = window.ptr = iElement.children()[0]; From d5d04f891741d00578ce3150f51c4ad952f1911f Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 12:35:56 +0100 Subject: [PATCH 02/20] build js --- dist/angular-pull-to-refresh.js | 9 ++++++--- dist/angular-pull-to-refresh.min.js | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/dist/angular-pull-to-refresh.js b/dist/angular-pull-to-refresh.js index c4ce9b0..1732042 100644 --- a/dist/angular-pull-to-refresh.js +++ b/dist/angular-pull-to-refresh.js @@ -1,12 +1,13 @@ /** * angular-pull-to-refresh - * @version v0.3.0 - 2013-11-14 + * @version v0.3.0 - 2015-11-26 * @link https://github.com/mgcrea/angular-pull-to-refresh * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ (function (window, document, undefined) { 'use strict'; + // Source: src/angular-pull-to-refresh.js angular.module('mgcrea.pullToRefresh', []).constant('pullToRefreshConfig', { treshold: 60, debounce: 400, @@ -27,15 +28,16 @@ 'pullToRefreshConfig', function ($compile, $timeout, $q, pullToRefreshConfig) { return { - scope: true, + scope: { pullToRefreshConfig: '=' }, restrict: 'A', transclude: true, templateUrl: 'angular-pull-to-refresh.tpl.html', compile: function compile(tElement, tAttrs, transclude) { return function postLink(scope, iElement, iAttrs) { - var config = angular.extend({}, pullToRefreshConfig, iAttrs); + var config = angular.extend({}, pullToRefreshConfig, scope.pullToRefreshConfig, iAttrs); var scrollElement = iElement.parent(); var ptrElement = window.ptr = iElement.children()[0]; + // Initialize isolated scope vars scope.text = config.text; scope.icon = config.icon; scope.status = 'pull'; @@ -79,6 +81,7 @@ }; } ]); + // Source: src/angular-pull-to-refresh.tpl.js angular.module('mgcrea.pullToRefresh').run([ '$templateCache', function ($templateCache) { diff --git a/dist/angular-pull-to-refresh.min.js b/dist/angular-pull-to-refresh.min.js index 4e49541..1c18139 100644 --- a/dist/angular-pull-to-refresh.min.js +++ b/dist/angular-pull-to-refresh.min.js @@ -1,8 +1,8 @@ /** * angular-pull-to-refresh - * @version v0.3.0 - 2013-11-14 + * @version v0.3.0 - 2015-11-26 * @link https://github.com/mgcrea/angular-pull-to-refresh * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ -!function(a){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:!0,restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(){return function(b,f,g){var h=angular.extend({},e,g),i=f.parent(),j=a.ptr=f.children()[0];b.text=h.text,b.icon=h.icon,b.status="pull";var k=function(a){l="release"===a,b.$apply(function(){b.status=a})},l=!1;f.bind("touchmove",function(){var a=i[0].scrollTop;a<-h.treshold&&!l?k("release"):a>-h.treshold&&l&&k("pull")}),f.bind("touchend",function(){if(l){j.style.webkitTransitionDuration=0,j.style.margin="0 auto",k("loading");var a=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var d=+new Date-a;c(function(){j.style.margin="",j.style.webkitTransitionDuration="",b.status="pull"},d\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:{pullToRefreshConfig:"="},restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,f,g){return function(b,f,g){var h=angular.extend({},e,b.pullToRefreshConfig,g),i=f.parent(),j=a.ptr=f.children()[0];b.text=h.text,b.icon=h.icon,b.status="pull";var k=function(a){l="release"===a,b.$apply(function(){b.status=a})},l=!1;f.bind("touchmove",function(a){var b=i[0].scrollTop;b<-h.treshold&&!l?k("release"):b>-h.treshold&&l&&k("pull")}),f.bind("touchend",function(a){if(l){j.style.webkitTransitionDuration=0,j.style.margin="0 auto",k("loading");var e=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){j.style.margin="",j.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file From 061d6e29152f76842b477c6d409db65812a52f04 Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 12:36:19 +0100 Subject: [PATCH 03/20] add demo files --- demo/index.html | 50 +++++++++++++++++++++++++++++++++++++++++++++++++ demo/script.js | 20 ++++++++++++++++++++ demo/style.css | 33 ++++++++++++++++++++++++++++++++ 3 files changed, 103 insertions(+) create mode 100644 demo/index.html create mode 100644 demo/script.js create mode 100644 demo/style.css diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..1d48b78 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,50 @@ + + + + + GitHub ยท angular-pull-to-refresh + + + + + + + + + + + + + + + + + + + + + + + +
+
    +
  • +
+
+ + + + + + + + diff --git a/demo/script.js b/demo/script.js new file mode 100644 index 0000000..aa31fa3 --- /dev/null +++ b/demo/script.js @@ -0,0 +1,20 @@ +'use strict'; + +angular.module('myApp', ['mgcrea.pullToRefresh']); + +angular.module('myApp') + + .controller('AppCtrl', function($scope, $q) { + + $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; + + $scope.onReload = function() { + console.warn('reload'); + var deferred = $q.defer(); + setTimeout(function() { + deferred.resolve(true); + }, 1000); + return deferred.promise; + }; + + }); diff --git a/demo/style.css b/demo/style.css new file mode 100644 index 0000000..ff99dc9 --- /dev/null +++ b/demo/style.css @@ -0,0 +1,33 @@ + +.content { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + background-color: #fff; + -webkit-backface-visibility: none; + -webkit-overflow-scrolling: touch; +} + +.navbar-fixed-top ~ .content { + top: 50px; +} + +.list-group-table { + margin-bottom: 0px; +} +.list-group-table .list-group-item { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-right-width: 0; + border-left-width: 0; + border-radius: 0px; + background: none; + height: 45px; +} +.list-group-table .list-group-item:first-child { + border-top-width: 0; +} \ No newline at end of file From f3085f2a96949b55a55efc0e80e94c2f23bb1e9d Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 12:40:37 +0100 Subject: [PATCH 04/20] pull to refresh not based on touchmove position instead of element position --- src/angular-pull-to-refresh.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index a6e3fbd..027fc70 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -47,8 +47,31 @@ angular.module('mgcrea.pullToRefresh', []) }; var shouldReload = false; + function getTransformStyle(translate) { + var translateFn = 'translateY(' + translate + 'px)'; + return { + '-webkit-transform': translateFn, + 'transform': translateFn + }; + } + function getTouch(evt) { + var event = evt; + if (event.originalEvent) { + event = event.originalEvent; + } + return event.touches[0]; + } + var startY; + iElement.bind('touchstart', function (ev) { + startY = getTouch(ev).pageY; + }); iElement.bind('touchmove', function(ev) { var top = scrollElement[0].scrollTop; + var currentY = getTouch(ev).pageY; + iElement.css(getTransformStyle(currentY - startY)); + if (top === 0) { + top = startY - currentY; + } if(top < -config.treshold && !shouldReload) { setStatus('release'); } else if(top > -config.treshold && shouldReload) { @@ -58,6 +81,7 @@ angular.module('mgcrea.pullToRefresh', []) iElement.bind('touchend', function(ev) { if(!shouldReload) return; + iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; setStatus('loading'); From 11f8d401d7587a4973b07484c4bff5636c1f7cd9 Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 12:41:01 +0100 Subject: [PATCH 05/20] build js --- dist/angular-pull-to-refresh.js | 24 ++++++++++++++++++++++++ dist/angular-pull-to-refresh.min.js | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/dist/angular-pull-to-refresh.js b/dist/angular-pull-to-refresh.js index 1732042..373d8ee 100644 --- a/dist/angular-pull-to-refresh.js +++ b/dist/angular-pull-to-refresh.js @@ -48,8 +48,31 @@ }); }; var shouldReload = false; + function getTransformStyle(translate) { + var translateFn = 'translateY(' + translate + 'px)'; + return { + '-webkit-transform': translateFn, + 'transform': translateFn + }; + } + function getTouch(evt) { + var event = evt; + if (event.originalEvent) { + event = event.originalEvent; + } + return event.touches[0]; + } + var startY; + iElement.bind('touchstart', function (ev) { + startY = getTouch(ev).pageY; + }); iElement.bind('touchmove', function (ev) { var top = scrollElement[0].scrollTop; + var currentY = getTouch(ev).pageY; + iElement.css(getTransformStyle(currentY - startY)); + if (top === 0) { + top = startY - currentY; + } if (top < -config.treshold && !shouldReload) { setStatus('release'); } else if (top > -config.treshold && shouldReload) { @@ -59,6 +82,7 @@ iElement.bind('touchend', function (ev) { if (!shouldReload) return; + iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; setStatus('loading'); diff --git a/dist/angular-pull-to-refresh.min.js b/dist/angular-pull-to-refresh.min.js index 1c18139..7d0eafe 100644 --- a/dist/angular-pull-to-refresh.min.js +++ b/dist/angular-pull-to-refresh.min.js @@ -5,4 +5,4 @@ * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ -!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:{pullToRefreshConfig:"="},restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,f,g){return function(b,f,g){var h=angular.extend({},e,b.pullToRefreshConfig,g),i=f.parent(),j=a.ptr=f.children()[0];b.text=h.text,b.icon=h.icon,b.status="pull";var k=function(a){l="release"===a,b.$apply(function(){b.status=a})},l=!1;f.bind("touchmove",function(a){var b=i[0].scrollTop;b<-h.treshold&&!l?k("release"):b>-h.treshold&&l&&k("pull")}),f.bind("touchend",function(a){if(l){j.style.webkitTransitionDuration=0,j.style.margin="0 auto",k("loading");var e=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){j.style.margin="",j.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:{pullToRefreshConfig:"="},restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,f,g){return function(b,f,g){function h(a){var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function i(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var j=angular.extend({},e,b.pullToRefreshConfig,g),k=f.parent(),l=a.ptr=f.children()[0];b.text=j.text,b.icon=j.icon,b.status="pull";var m,n=function(a){o="release"===a,b.$apply(function(){b.status=a})},o=!1;f.bind("touchstart",function(a){m=i(a).pageY}),f.bind("touchmove",function(a){var b=k[0].scrollTop,c=i(a).pageY;f.css(h(c-m)),0===b&&(b=m-c),b<-j.treshold&&!o?n("release"):b>-j.treshold&&o&&n("pull")}),f.bind("touchend",function(a){if(o){f.css(h(0)),l.style.webkitTransitionDuration=0,l.style.margin="0 auto",n("loading");var e=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){l.style.margin="",l.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file From 94ab429488e9ab756e7e320b97e5647f90bdee1c Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 14:18:34 +0100 Subject: [PATCH 06/20] fix javascript event but keep compatibility to native style momentum with overflow-scroll --- dist/angular-pull-to-refresh.js | 7 ++++++- dist/angular-pull-to-refresh.min.js | 2 +- src/angular-pull-to-refresh.js | 7 ++++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/dist/angular-pull-to-refresh.js b/dist/angular-pull-to-refresh.js index 373d8ee..14f3174 100644 --- a/dist/angular-pull-to-refresh.js +++ b/dist/angular-pull-to-refresh.js @@ -49,6 +49,9 @@ }; var shouldReload = false; function getTransformStyle(translate) { + if (isUsingOverflowScroll) { + return {}; + } var translateFn = 'translateY(' + translate + 'px)'; return { '-webkit-transform': translateFn, @@ -62,6 +65,7 @@ } return event.touches[0]; } + var isUsingOverflowScroll = true; var startY; iElement.bind('touchstart', function (ev) { startY = getTouch(ev).pageY; @@ -69,10 +73,11 @@ iElement.bind('touchmove', function (ev) { var top = scrollElement[0].scrollTop; var currentY = getTouch(ev).pageY; - iElement.css(getTransformStyle(currentY - startY)); if (top === 0) { + isUsingOverflowScroll = false; top = startY - currentY; } + iElement.css(getTransformStyle(currentY - startY)); if (top < -config.treshold && !shouldReload) { setStatus('release'); } else if (top > -config.treshold && shouldReload) { diff --git a/dist/angular-pull-to-refresh.min.js b/dist/angular-pull-to-refresh.min.js index 7d0eafe..2a8a963 100644 --- a/dist/angular-pull-to-refresh.min.js +++ b/dist/angular-pull-to-refresh.min.js @@ -5,4 +5,4 @@ * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ -!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:{pullToRefreshConfig:"="},restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,f,g){return function(b,f,g){function h(a){var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function i(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var j=angular.extend({},e,b.pullToRefreshConfig,g),k=f.parent(),l=a.ptr=f.children()[0];b.text=j.text,b.icon=j.icon,b.status="pull";var m,n=function(a){o="release"===a,b.$apply(function(){b.status=a})},o=!1;f.bind("touchstart",function(a){m=i(a).pageY}),f.bind("touchmove",function(a){var b=k[0].scrollTop,c=i(a).pageY;f.css(h(c-m)),0===b&&(b=m-c),b<-j.treshold&&!o?n("release"):b>-j.treshold&&o&&n("pull")}),f.bind("touchend",function(a){if(o){f.css(h(0)),l.style.webkitTransitionDuration=0,l.style.margin="0 auto",n("loading");var e=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){l.style.margin="",l.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:{pullToRefreshConfig:"="},restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,f,g){return function(b,f,g){function h(a){if(p)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function i(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var j=angular.extend({},e,b.pullToRefreshConfig,g),k=f.parent(),l=a.ptr=f.children()[0];b.text=j.text,b.icon=j.icon,b.status="pull";var m,n=function(a){o="release"===a,b.$apply(function(){b.status=a})},o=!1,p=!0;f.bind("touchstart",function(a){m=i(a).pageY}),f.bind("touchmove",function(a){var b=k[0].scrollTop,c=i(a).pageY;0===b&&(p=!1,b=m-c),f.css(h(c-m)),b<-j.treshold&&!o?n("release"):b>-j.treshold&&o&&n("pull")}),f.bind("touchend",function(a){if(o){f.css(h(0)),l.style.webkitTransitionDuration=0,l.style.margin="0 auto",n("loading");var e=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){l.style.margin="",l.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 027fc70..af846b4 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -48,6 +48,9 @@ angular.module('mgcrea.pullToRefresh', []) var shouldReload = false; function getTransformStyle(translate) { + if (isUsingOverflowScroll) { + return {}; + } var translateFn = 'translateY(' + translate + 'px)'; return { '-webkit-transform': translateFn, @@ -61,6 +64,7 @@ angular.module('mgcrea.pullToRefresh', []) } return event.touches[0]; } + var isUsingOverflowScroll = true; var startY; iElement.bind('touchstart', function (ev) { startY = getTouch(ev).pageY; @@ -68,10 +72,11 @@ angular.module('mgcrea.pullToRefresh', []) iElement.bind('touchmove', function(ev) { var top = scrollElement[0].scrollTop; var currentY = getTouch(ev).pageY; - iElement.css(getTransformStyle(currentY - startY)); if (top === 0) { + isUsingOverflowScroll = false; top = startY - currentY; } + iElement.css(getTransformStyle(currentY - startY)); if(top < -config.treshold && !shouldReload) { setStatus('release'); } else if(top > -config.treshold && shouldReload) { From 311da53f554a9c4012c49516faf8e5371f17ce4f Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 14:49:56 +0100 Subject: [PATCH 07/20] update readme.md with new attribute pull-to-refresh-config, new demo page and tested devices --- readme.md | 39 +++++++++++++++++++++++++++++++++------ 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 445089b..b20eada 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # [ngPullToRefresh](http://mgcrea.github.com/angular-pull-to-refresh) [![Build Status](https://secure.travis-ci.org/mgcrea/angular-pull-to-refresh.png?branch=master)](http://travis-ci.org/#!/mgcrea/angular-pull-to-refresh) -`mgcrea.pullToRefresh` is a module providing a simple css-only pull-to-refresh component leveraging native style momentum scrolling `-webkit-overflow-scroll: touch`. +`mgcrea.pullToRefresh` is a module providing a simple css-only pull-to-refresh component, it can use native style momentum scrolling `-webkit-overflow-scroll: touch`, or use javascript event data to create touch movement animation. The directive has a configurable built-in debounce system (400ms treshold by default) and can leverage angular `$q` promises. @@ -32,15 +32,17 @@ angular.module('myApp', ['mgcrea.pullToRefresh']); ## Examples -[![Demo](http://mgcrea.github.io/angular-pull-to-refresh/demo.gif)](http://mgcrea.github.com/angular-pull-to-refresh) +[![Demo](http://mgcrea.github.io/angular-pull-to-refresh/demo.gif)](https://rawgit.com/freefri/angular-pull-to-refresh/master/demo/index.html) -You can check out a working demo there (only works on touch devices): +You can check out a working demo there (only works on touch devices, with Firefox, you can switch to "Responsive Design View" and enable "Simulate Touch Events"): -+ **http://plnkr.co/edit/C4dV0cvWxvrfR6y0uCxI?p=preview** ++ **https://rawgit.com/freefri/angular-pull-to-refresh/master/demo/index.html** + +You can include an optional attribute with some configurarion details pull-to-refresh-config: ``` html
-
    +
@@ -51,6 +53,20 @@ angular.module('myApp') .controller('AppCtrl', function($scope, $q) { + $scope.pullConfig = { + treshold: 60, + debounce: 400, + text: { + pull: 'pull to refresh', + release: 'release to refresh', + loading: 'refreshing...' + }, + icon: { + pull: 'fa fa-arrow-down', + release: 'fa fa-arrow-up', + loading: 'fa fa-refresh fa-spin' + } + } $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']; $scope.onReload = function() { @@ -69,17 +85,28 @@ angular.module('myApp') ## Contributing -Please submit all pull requests the against master branch. If your unit test contains JavaScript patches or features, you should include relevant unit tests. Thanks! +Please submit all pull requests the against master branch. It would be nice if we include relevant unit tests. Thanks! ## Authors +**Freefri** + ++ http://github.com/freefri + **Olivier Louvignes** + http://olouv.com + http://github.com/mgcrea +## Tested devices + ++ Firefox desktop 42.0 (under "Responsive Design View" and enabling "Simulate Touch Events") ++ Firefox 37.0 on Android ++ Android stock browser Android 5.1.1 on Samsung Galaxy S7 ++ Chrome 46 on Android 5.1.1 ++ Safari on iPhone 5 (iOS 8.1) ## Copyright and license From 512b20710d520844b418cbc877ad7193c0f6ba6e Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 15:50:24 +0100 Subject: [PATCH 08/20] fix call function on reload --- src/angular-pull-to-refresh.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index af846b4..52e59cb 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -20,9 +20,7 @@ angular.module('mgcrea.pullToRefresh', []) .directive('pullToRefresh', function($compile, $timeout, $q, pullToRefreshConfig) { return { - scope: { - pullToRefreshConfig: '=' - }, + scope: true, restrict: 'A', transclude: true, templateUrl: 'angular-pull-to-refresh.tpl.html', @@ -30,7 +28,8 @@ angular.module('mgcrea.pullToRefresh', []) return function postLink(scope, iElement, iAttrs) { - var config = angular.extend({}, pullToRefreshConfig, scope.pullToRefreshConfig, iAttrs); + var customConfig = scope.$eval(iAttrs.pullToRefreshConfig); + var config = angular.extend({}, pullToRefreshConfig, customConfig, iAttrs); var scrollElement = iElement.parent(); var ptrElement = window.ptr = iElement.children()[0]; From 574ee947bd432e96f155e58a845ee9e710fc44d5 Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 15:58:18 +0100 Subject: [PATCH 09/20] add optional dependency $translate (tested with pascalprecht.translate should also work with angular-translate) --- src/angular-pull-to-refresh.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 52e59cb..04e1f42 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -17,7 +17,7 @@ angular.module('mgcrea.pullToRefresh', []) } }) - .directive('pullToRefresh', function($compile, $timeout, $q, pullToRefreshConfig) { + .directive('pullToRefresh', function($compile, $timeout, $q, pullToRefreshConfig, $injector) { return { scope: true, @@ -38,6 +38,35 @@ angular.module('mgcrea.pullToRefresh', []) scope.icon = config.icon; scope.status = 'pull'; + var translateStates = function ($translate) { + var translateKey = 'PULL2REF.'; + var states = { + pull: $translate(translateKey + 'PULL'), + release: $translate(translateKey + 'RELEASE'), + loading: $translate(translateKey + 'LOADING') + }; + if (typeof states.pull === 'string') { + scope.text = states; + } + var deferTraslate = function (name) { + if (states[name].then) { + states[name].then(function (translated) { + scope.text[name] = translated; + }); + } + }; + deferTraslate('pull'); + deferTraslate('release'); + deferTraslate('loading'); + if (typeof states.pull === 'string') { + scope.text = states; + } + }; + try { + // add optional dependency $translate + translateStates($injector.get('$translate')); + } catch (e) {} + var setStatus = function(status) { shouldReload = status === 'release'; scope.$apply(function() { From 8fd3caa87fa7e3f7681a9213157b1427c95ee47e Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 15:58:51 +0100 Subject: [PATCH 10/20] build js --- dist/angular-pull-to-refresh.js | 37 ++++++++++++++++++++++++++--- dist/angular-pull-to-refresh.min.js | 2 +- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/dist/angular-pull-to-refresh.js b/dist/angular-pull-to-refresh.js index 14f3174..7db063d 100644 --- a/dist/angular-pull-to-refresh.js +++ b/dist/angular-pull-to-refresh.js @@ -26,21 +26,52 @@ '$timeout', '$q', 'pullToRefreshConfig', - function ($compile, $timeout, $q, pullToRefreshConfig) { + '$injector', + function ($compile, $timeout, $q, pullToRefreshConfig, $injector) { return { - scope: { pullToRefreshConfig: '=' }, + scope: true, restrict: 'A', transclude: true, templateUrl: 'angular-pull-to-refresh.tpl.html', compile: function compile(tElement, tAttrs, transclude) { return function postLink(scope, iElement, iAttrs) { - var config = angular.extend({}, pullToRefreshConfig, scope.pullToRefreshConfig, iAttrs); + var customConfig = scope.$eval(iAttrs.pullToRefreshConfig); + var config = angular.extend({}, pullToRefreshConfig, customConfig, iAttrs); var scrollElement = iElement.parent(); var ptrElement = window.ptr = iElement.children()[0]; // Initialize isolated scope vars scope.text = config.text; scope.icon = config.icon; scope.status = 'pull'; + var translateStates = function ($translate) { + var translateKey = 'PULL2REF.'; + var states = { + pull: $translate(translateKey + 'PULL'), + release: $translate(translateKey + 'RELEASE'), + loading: $translate(translateKey + 'LOADING') + }; + if (typeof states.pull === 'string') { + scope.text = states; + } + var deferTraslate = function (name) { + if (states[name].then) { + states[name].then(function (translated) { + scope.text[name] = translated; + }); + } + }; + deferTraslate('pull'); + deferTraslate('release'); + deferTraslate('loading'); + if (typeof states.pull === 'string') { + scope.text = states; + } + }; + try { + // add optional dependency $translate + translateStates($injector.get('$translate')); + } catch (e) { + } var setStatus = function (status) { shouldReload = status === 'release'; scope.$apply(function () { diff --git a/dist/angular-pull-to-refresh.min.js b/dist/angular-pull-to-refresh.min.js index 2a8a963..6bdc382 100644 --- a/dist/angular-pull-to-refresh.min.js +++ b/dist/angular-pull-to-refresh.min.js @@ -5,4 +5,4 @@ * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ -!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig",function(b,c,d,e){return{scope:{pullToRefreshConfig:"="},restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,f,g){return function(b,f,g){function h(a){if(p)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function i(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var j=angular.extend({},e,b.pullToRefreshConfig,g),k=f.parent(),l=a.ptr=f.children()[0];b.text=j.text,b.icon=j.icon,b.status="pull";var m,n=function(a){o="release"===a,b.$apply(function(){b.status=a})},o=!1,p=!0;f.bind("touchstart",function(a){m=i(a).pageY}),f.bind("touchmove",function(a){var b=k[0].scrollTop,c=i(a).pageY;0===b&&(p=!1,b=m-c),f.css(h(c-m)),b<-j.treshold&&!o?n("release"):b>-j.treshold&&o&&n("pull")}),f.bind("touchend",function(a){if(o){f.css(h(0)),l.style.webkitTransitionDuration=0,l.style.margin="0 auto",n("loading");var e=+new Date;d.when(b.$eval(g.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){l.style.margin="",l.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig","$injector",function(b,c,d,e,f){return{scope:!0,restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,g,h){return function(b,g,h){function i(a){if(t)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function j(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var k=b.$eval(h.pullToRefreshConfig),l=angular.extend({},e,k,h),m=g.parent(),n=a.ptr=g.children()[0];b.text=l.text,b.icon=l.icon,b.status="pull";var o=function(a){var c="PULL2REF.",d={pull:a(c+"PULL"),release:a(c+"RELEASE"),loading:a(c+"LOADING")};"string"==typeof d.pull&&(b.text=d);var e=function(a){d[a].then&&d[a].then(function(c){b.text[a]=c})};e("pull"),e("release"),e("loading"),"string"==typeof d.pull&&(b.text=d)};try{o(f.get("$translate"))}catch(p){}var q,r=function(a){s="release"===a,b.$apply(function(){b.status=a})},s=!1,t=!0;g.bind("touchstart",function(a){q=j(a).pageY}),g.bind("touchmove",function(a){var b=m[0].scrollTop,c=j(a).pageY;0===b&&(t=!1,b=q-c),g.css(i(c-q)),b<-l.treshold&&!s?r("release"):b>-l.treshold&&s&&r("pull")}),g.bind("touchend",function(a){if(s){g.css(i(0)),n.style.webkitTransitionDuration=0,n.style.margin="0 auto",r("loading");var e=+new Date;d.when(b.$eval(h.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){n.style.margin="",n.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file From 1c89d5134882b135ece14844de94a7d9787ed1bc Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 17:15:31 +0100 Subject: [PATCH 11/20] add test for "add parameter pull-to-refresh-config to set custom config variables" git#a0a1dac6a85aa0c46564bf8db4b113b48e044f2e --- test/spec/angular-pull-to-refresh.js | 34 ++++++++++++++++++++-------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/test/spec/angular-pull-to-refresh.js b/test/spec/angular-pull-to-refresh.js index d62664f..053b526 100644 --- a/test/spec/angular-pull-to-refresh.js +++ b/test/spec/angular-pull-to-refresh.js @@ -20,19 +20,22 @@ describe('mgcrea.pullToRefresh', function() { scope.$destroy(); }); - var templates = { - basic: { - scope: {states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']}, - element: '
' + - '
    ' + - '
  • ' + - '
' + - '
' - } + var optionalAttrs = ''; + var templates = function () { + return { + basic: { + scope: {states: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']}, + element: '
' + + '
    ' + + '
  • ' + + '
' + + '
' + } + }; }; function compileDirective(template, locals) { - template = templates[template]; + template = templates()[template]; angular.extend(scope, template.scope, locals); var element = $(template.element).appendTo(sandbox); element = $compile(element)(scope); @@ -46,6 +49,17 @@ describe('mgcrea.pullToRefresh', function() { expect(ptrElement.length).toBe(1); var config = $injector.get('pullToRefreshConfig'); expect(ptrElement.children('span').html()).toBe(config.text.pull); + expect(ptrElement.children('i').hasClass('fa fa-arrow-down')).toBeTruthy(); + }); + + it('should correctly initialize and attach to DOM adding custom icons', function () { + optionalAttrs = 'pull-to-refresh-config="{icon:{pull: \'glyphicon glyphicon-arrow-down\',release: \'glyphicon glyphicon-arrow-up\',loading: \'glyphicon glyphicon-refresh fa-spin\'}}"'; + var elm = compileDirective('basic'); + var ptrElement = elm.find('.pull-to-refresh'); + expect(ptrElement.length).toBe(1); + var config = $injector.get('pullToRefreshConfig'); + expect(ptrElement.children('span').html()).toBe(config.text.pull); + expect(ptrElement.children('i').hasClass('glyphicon glyphicon-arrow-down')).toBeTruthy(); }); }); From 129badbfa8f4c48a32f77bb1dd1f023e6604577e Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 17:52:53 +0100 Subject: [PATCH 12/20] update some dev modules (hopefuly now Travis will work) --- package.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index a01697f..fbcb466 100644 --- a/package.json +++ b/package.json @@ -34,17 +34,18 @@ "grunt-contrib-less": "~0.8.2", "grunt-contrib-uglify": "~0.2.7", "grunt-contrib-watch": "~0.5.3", - "grunt-karma": "~0.6.2", + "grunt-karma": "~0.9.0", "grunt-ngmin": "0.0.3", "grunt-open": "~0.2.2", - "karma": "~0.10.4", + "karma": "~0.12.0", "karma-chrome-launcher": "~0.1.0", "karma-coffee-preprocessor": "~0.1.0", "karma-firefox-launcher": "~0.1.0", "karma-html2js-preprocessor": "~0.1.0", - "karma-jasmine": "~0.1.3", + "karma-jasmine": "~0.2.0", "karma-phantomjs-launcher": "~0.1.0", - "karma-requirejs": "~0.1.0", + "requirejs": "~2.1.0", + "karma-requirejs": "~0.2.0", "karma-script-launcher": "~0.1.0", "load-grunt-tasks": "~0.2.0", "time-grunt": "~0.2.1" From 196da69c7c2f250ed5e3657e1e154454f98f4ab0 Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 26 Nov 2015 17:58:42 +0100 Subject: [PATCH 13/20] delete unused helpers.js (was generating an error during tests) there are nice libraries to add better matchers if they are needed --- test/helpers.js | 18 ------------------ test/karma.conf.js | 1 - 2 files changed, 19 deletions(-) delete mode 100644 test/helpers.js diff --git a/test/helpers.js b/test/helpers.js deleted file mode 100644 index 914e3f6..0000000 --- a/test/helpers.js +++ /dev/null @@ -1,18 +0,0 @@ -'use strict'; - -beforeEach(function() { - this.addMatchers({ - toEquals: function(expected) { - this.message = function() { - return 'Expected "' + angular.mock.dump(this.actual) + '" to equal "' + angular.mock.dump(expected) + '".'; - }; - return angular.equals(this.actual, expected); - }, - toHaveClass: function(cls) { - this.message = function() { - return 'Expected "' + angular.mock.dump(this.actual) + '" to have class "' + cls + '".'; - }; - return this.actual.hasClass(cls); - } - }); -}); diff --git a/test/karma.conf.js b/test/karma.conf.js index d1081a4..ee20091 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -18,7 +18,6 @@ module.exports = function(config) { 'bower_components/angular-mocks/angular-mocks.js', 'src/*.js', 'bower_components/jquery/jquery.js', - 'test/helpers.js', 'test/spec/*.js' ], From 7883d0cec425135a276986e97159607c1b1e4972 Mon Sep 17 00:00:00 2001 From: freefri Date: Fri, 27 Nov 2015 10:04:53 +0100 Subject: [PATCH 14/20] Release v0.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fbcb466..d6456fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-pull-to-refresh", - "version": "0.3.0", + "version": "0.3.1", "description": "angular-pull-to-refresh", "keywords": [ "angular" From e46345c1f8f7a0636b8390b349a977fda7e26dd4 Mon Sep 17 00:00:00 2001 From: freefri Date: Fri, 27 Nov 2015 10:09:30 +0100 Subject: [PATCH 15/20] add 'use strict' to tpl --- src/angular-pull-to-refresh.tpl.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/angular-pull-to-refresh.tpl.js b/src/angular-pull-to-refresh.tpl.js index a619e4c..614efe5 100644 --- a/src/angular-pull-to-refresh.tpl.js +++ b/src/angular-pull-to-refresh.tpl.js @@ -1,4 +1,5 @@ angular.module('mgcrea.pullToRefresh').run(['$templateCache', function($templateCache) { + 'use strict'; $templateCache.put('angular-pull-to-refresh.tpl.html', "
\n" + From 8d19db48a3ef1f98bef74c7900d557e878b7a71e Mon Sep 17 00:00:00 2001 From: freefri Date: Fri, 27 Nov 2015 10:26:29 +0100 Subject: [PATCH 16/20] fix scroll back top when we pull message is visible --- dist/angular-pull-to-refresh.js | 9 +++++++-- dist/angular-pull-to-refresh.min.js | 4 ++-- src/angular-pull-to-refresh.js | 8 +++++++- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/dist/angular-pull-to-refresh.js b/dist/angular-pull-to-refresh.js index 7db063d..311ca38 100644 --- a/dist/angular-pull-to-refresh.js +++ b/dist/angular-pull-to-refresh.js @@ -1,6 +1,6 @@ /** * angular-pull-to-refresh - * @version v0.3.0 - 2015-11-26 + * @version v0.3.1 - 2015-11-27 * @link https://github.com/mgcrea/angular-pull-to-refresh * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT @@ -115,10 +115,15 @@ setStatus('pull'); } }); + var isOverTheFold = function (e) { + return startY < getTouch(e).pageY; + }; iElement.bind('touchend', function (ev) { + if (isOverTheFold(ev) || shouldReload) { + iElement.css(getTransformStyle(0)); + } if (!shouldReload) return; - iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; setStatus('loading'); diff --git a/dist/angular-pull-to-refresh.min.js b/dist/angular-pull-to-refresh.min.js index 6bdc382..9bb1d03 100644 --- a/dist/angular-pull-to-refresh.min.js +++ b/dist/angular-pull-to-refresh.min.js @@ -1,8 +1,8 @@ /** * angular-pull-to-refresh - * @version v0.3.0 - 2015-11-26 + * @version v0.3.1 - 2015-11-27 * @link https://github.com/mgcrea/angular-pull-to-refresh * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ -!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig","$injector",function(b,c,d,e,f){return{scope:!0,restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,g,h){return function(b,g,h){function i(a){if(t)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function j(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var k=b.$eval(h.pullToRefreshConfig),l=angular.extend({},e,k,h),m=g.parent(),n=a.ptr=g.children()[0];b.text=l.text,b.icon=l.icon,b.status="pull";var o=function(a){var c="PULL2REF.",d={pull:a(c+"PULL"),release:a(c+"RELEASE"),loading:a(c+"LOADING")};"string"==typeof d.pull&&(b.text=d);var e=function(a){d[a].then&&d[a].then(function(c){b.text[a]=c})};e("pull"),e("release"),e("loading"),"string"==typeof d.pull&&(b.text=d)};try{o(f.get("$translate"))}catch(p){}var q,r=function(a){s="release"===a,b.$apply(function(){b.status=a})},s=!1,t=!0;g.bind("touchstart",function(a){q=j(a).pageY}),g.bind("touchmove",function(a){var b=m[0].scrollTop,c=j(a).pageY;0===b&&(t=!1,b=q-c),g.css(i(c-q)),b<-l.treshold&&!s?r("release"):b>-l.treshold&&s&&r("pull")}),g.bind("touchend",function(a){if(s){g.css(i(0)),n.style.webkitTransitionDuration=0,n.style.margin="0 auto",r("loading");var e=+new Date;d.when(b.$eval(h.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){n.style.margin="",n.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n
\n
\n')}])}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig","$injector",function(b,c,d,e,f){return{scope:!0,restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,g,h){return function(b,g,h){function i(a){if(t)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function j(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var k=b.$eval(h.pullToRefreshConfig),l=angular.extend({},e,k,h),m=g.parent(),n=a.ptr=g.children()[0];b.text=l.text,b.icon=l.icon,b.status="pull";var o=function(a){var c="PULL2REF.",d={pull:a(c+"PULL"),release:a(c+"RELEASE"),loading:a(c+"LOADING")};"string"==typeof d.pull&&(b.text=d);var e=function(a){d[a].then&&d[a].then(function(c){b.text[a]=c})};e("pull"),e("release"),e("loading"),"string"==typeof d.pull&&(b.text=d)};try{o(f.get("$translate"))}catch(p){}var q,r=function(a){s="release"===a,b.$apply(function(){b.status=a})},s=!1,t=!0;g.bind("touchstart",function(a){q=j(a).pageY}),g.bind("touchmove",function(a){var b=m[0].scrollTop,c=j(a).pageY;0===b&&(t=!1,b=q-c),g.css(i(c-q)),b<-l.treshold&&!s?r("release"):b>-l.treshold&&s&&r("pull")});var u=function(a){return q\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 04e1f42..669880c 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -112,9 +112,15 @@ angular.module('mgcrea.pullToRefresh', []) } }); + var isPullVisible = function (e) { + return startY < getTouch(e).pageY; + }; + iElement.bind('touchend', function(ev) { + if (isPullVisible(ev) || shouldReload) { + iElement.css(getTransformStyle(0)); + } if(!shouldReload) return; - iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; setStatus('loading'); From e345710d8ac6a832dea764c4c7e4fdbe35329d2f Mon Sep 17 00:00:00 2001 From: freefri Date: Fri, 27 Nov 2015 10:30:07 +0100 Subject: [PATCH 17/20] Revert "add 'use strict' to tpl" This reverts commit e46345c1f8f7a0636b8390b349a977fda7e26dd4. --- src/angular-pull-to-refresh.tpl.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/angular-pull-to-refresh.tpl.js b/src/angular-pull-to-refresh.tpl.js index 614efe5..a619e4c 100644 --- a/src/angular-pull-to-refresh.tpl.js +++ b/src/angular-pull-to-refresh.tpl.js @@ -1,5 +1,4 @@ angular.module('mgcrea.pullToRefresh').run(['$templateCache', function($templateCache) { - 'use strict'; $templateCache.put('angular-pull-to-refresh.tpl.html', "
\n" + From 69a7e0ab6c355e998123d7e4cdff845db7e52aae Mon Sep 17 00:00:00 2001 From: freefri Date: Fri, 27 Nov 2015 10:35:12 +0100 Subject: [PATCH 18/20] Revert "fix scroll back top when we pull message is visible" This reverts commit 8d19db48a3ef1f98bef74c7900d557e878b7a71e. --- dist/angular-pull-to-refresh.js | 9 ++------- dist/angular-pull-to-refresh.min.js | 4 ++-- src/angular-pull-to-refresh.js | 8 +------- 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/dist/angular-pull-to-refresh.js b/dist/angular-pull-to-refresh.js index 311ca38..7db063d 100644 --- a/dist/angular-pull-to-refresh.js +++ b/dist/angular-pull-to-refresh.js @@ -1,6 +1,6 @@ /** * angular-pull-to-refresh - * @version v0.3.1 - 2015-11-27 + * @version v0.3.0 - 2015-11-26 * @link https://github.com/mgcrea/angular-pull-to-refresh * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT @@ -115,15 +115,10 @@ setStatus('pull'); } }); - var isOverTheFold = function (e) { - return startY < getTouch(e).pageY; - }; iElement.bind('touchend', function (ev) { - if (isOverTheFold(ev) || shouldReload) { - iElement.css(getTransformStyle(0)); - } if (!shouldReload) return; + iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; setStatus('loading'); diff --git a/dist/angular-pull-to-refresh.min.js b/dist/angular-pull-to-refresh.min.js index 9bb1d03..6bdc382 100644 --- a/dist/angular-pull-to-refresh.min.js +++ b/dist/angular-pull-to-refresh.min.js @@ -1,8 +1,8 @@ /** * angular-pull-to-refresh - * @version v0.3.1 - 2015-11-27 + * @version v0.3.0 - 2015-11-26 * @link https://github.com/mgcrea/angular-pull-to-refresh * @author Olivier Louvignes * @license MIT License, http://www.opensource.org/licenses/MIT */ -!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig","$injector",function(b,c,d,e,f){return{scope:!0,restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,g,h){return function(b,g,h){function i(a){if(t)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function j(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var k=b.$eval(h.pullToRefreshConfig),l=angular.extend({},e,k,h),m=g.parent(),n=a.ptr=g.children()[0];b.text=l.text,b.icon=l.icon,b.status="pull";var o=function(a){var c="PULL2REF.",d={pull:a(c+"PULL"),release:a(c+"RELEASE"),loading:a(c+"LOADING")};"string"==typeof d.pull&&(b.text=d);var e=function(a){d[a].then&&d[a].then(function(c){b.text[a]=c})};e("pull"),e("release"),e("loading"),"string"==typeof d.pull&&(b.text=d)};try{o(f.get("$translate"))}catch(p){}var q,r=function(a){s="release"===a,b.$apply(function(){b.status=a})},s=!1,t=!0;g.bind("touchstart",function(a){q=j(a).pageY}),g.bind("touchmove",function(a){var b=m[0].scrollTop,c=j(a).pageY;0===b&&(t=!1,b=q-c),g.css(i(c-q)),b<-l.treshold&&!s?r("release"):b>-l.treshold&&s&&r("pull")});var u=function(a){return q\n  \n \n
\n
\n')}])}(window,document); \ No newline at end of file +!function(a,b,c){"use strict";angular.module("mgcrea.pullToRefresh",[]).constant("pullToRefreshConfig",{treshold:60,debounce:400,text:{pull:"pull to refresh",release:"release to refresh",loading:"refreshing..."},icon:{pull:"fa fa-arrow-down",release:"fa fa-arrow-up",loading:"fa fa-refresh fa-spin"}}).directive("pullToRefresh",["$compile","$timeout","$q","pullToRefreshConfig","$injector",function(b,c,d,e,f){return{scope:!0,restrict:"A",transclude:!0,templateUrl:"angular-pull-to-refresh.tpl.html",compile:function(b,g,h){return function(b,g,h){function i(a){if(t)return{};var b="translateY("+a+"px)";return{"-webkit-transform":b,transform:b}}function j(a){var b=a;return b.originalEvent&&(b=b.originalEvent),b.touches[0]}var k=b.$eval(h.pullToRefreshConfig),l=angular.extend({},e,k,h),m=g.parent(),n=a.ptr=g.children()[0];b.text=l.text,b.icon=l.icon,b.status="pull";var o=function(a){var c="PULL2REF.",d={pull:a(c+"PULL"),release:a(c+"RELEASE"),loading:a(c+"LOADING")};"string"==typeof d.pull&&(b.text=d);var e=function(a){d[a].then&&d[a].then(function(c){b.text[a]=c})};e("pull"),e("release"),e("loading"),"string"==typeof d.pull&&(b.text=d)};try{o(f.get("$translate"))}catch(p){}var q,r=function(a){s="release"===a,b.$apply(function(){b.status=a})},s=!1,t=!0;g.bind("touchstart",function(a){q=j(a).pageY}),g.bind("touchmove",function(a){var b=m[0].scrollTop,c=j(a).pageY;0===b&&(t=!1,b=q-c),g.css(i(c-q)),b<-l.treshold&&!s?r("release"):b>-l.treshold&&s&&r("pull")}),g.bind("touchend",function(a){if(s){g.css(i(0)),n.style.webkitTransitionDuration=0,n.style.margin="0 auto",r("loading");var e=+new Date;d.when(b.$eval(h.pullToRefresh)).then(function(){var a=+new Date-e;c(function(){n.style.margin="",n.style.webkitTransitionDuration="",b.status="pull"},a\n  \n \n\n
\n')}])}(window,document); \ No newline at end of file diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 669880c..04e1f42 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -112,15 +112,9 @@ angular.module('mgcrea.pullToRefresh', []) } }); - var isPullVisible = function (e) { - return startY < getTouch(e).pageY; - }; - iElement.bind('touchend', function(ev) { - if (isPullVisible(ev) || shouldReload) { - iElement.css(getTransformStyle(0)); - } if(!shouldReload) return; + iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; setStatus('loading'); From d50be1fa13501ccd0241610f08511f16c3357ef7 Mon Sep 17 00:00:00 2001 From: fluminis Date: Thu, 28 Apr 2016 13:46:30 +0200 Subject: [PATCH 19/20] Add mouse event support Add mouse event support by listening mousedown, mousemouse and mouseup events. --- src/angular-pull-to-refresh.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 04e1f42..1edcb41 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -90,14 +90,20 @@ angular.module('mgcrea.pullToRefresh', []) if (event.originalEvent) { event = event.originalEvent; } - return event.touches[0]; + return (event.touches && event.touches.length > 0) ? event.touches[0] : event; } var isUsingOverflowScroll = true; var startY; - iElement.bind('touchstart', function (ev) { + var isTrackingMouse = false; + iElement.bind('touchstart mousedown', function (ev) { startY = getTouch(ev).pageY; + isTrackingMouse = true + ev.preventDefault() }); - iElement.bind('touchmove', function(ev) { + iElement.bind('touchmove mousemove', function (ev) { + if (!isTrackingMouse) + return; + ev.preventDefault() var top = scrollElement[0].scrollTop; var currentY = getTouch(ev).pageY; if (top === 0) { @@ -111,9 +117,10 @@ angular.module('mgcrea.pullToRefresh', []) setStatus('pull'); } }); - - iElement.bind('touchend', function(ev) { - if(!shouldReload) return; + iElement.bind('touchend mouseup', function (ev) { + isTrackingMouse = false + if (!shouldReload) + return; iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto'; @@ -132,6 +139,7 @@ angular.module('mgcrea.pullToRefresh', []) }); scope.$on('$destroy', function() { + iElement.unbind('touchstart'); iElement.unbind('touchmove'); iElement.unbind('touchend'); }); From a1ee1d85c1a331351f5cd414de75e5da12328124 Mon Sep 17 00:00:00 2001 From: freefri Date: Thu, 28 Apr 2016 16:23:26 +0200 Subject: [PATCH 20/20] Code style --- src/angular-pull-to-refresh.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/angular-pull-to-refresh.js b/src/angular-pull-to-refresh.js index 1edcb41..e652ac9 100644 --- a/src/angular-pull-to-refresh.js +++ b/src/angular-pull-to-refresh.js @@ -85,7 +85,7 @@ angular.module('mgcrea.pullToRefresh', []) 'transform': translateFn }; } - function getTouch(evt) { + function getDrag(evt) { var event = evt; if (event.originalEvent) { event = event.originalEvent; @@ -94,33 +94,35 @@ angular.module('mgcrea.pullToRefresh', []) } var isUsingOverflowScroll = true; var startY; - var isTrackingMouse = false; + var isTracking = false; iElement.bind('touchstart mousedown', function (ev) { - startY = getTouch(ev).pageY; - isTrackingMouse = true + startY = getDrag(ev).pageY; + isTracking = true; ev.preventDefault() }); iElement.bind('touchmove mousemove', function (ev) { - if (!isTrackingMouse) + if (!isTracking) { return; + } ev.preventDefault() var top = scrollElement[0].scrollTop; - var currentY = getTouch(ev).pageY; + var currentY = getDrag(ev).pageY; if (top === 0) { isUsingOverflowScroll = false; top = startY - currentY; } iElement.css(getTransformStyle(currentY - startY)); - if(top < -config.treshold && !shouldReload) { + if (top < -config.treshold && !shouldReload) { setStatus('release'); } else if(top > -config.treshold && shouldReload) { setStatus('pull'); } }); iElement.bind('touchend mouseup', function (ev) { - isTrackingMouse = false - if (!shouldReload) - return; + isTracking = false; + if (!shouldReload) { + return; + } iElement.css(getTransformStyle(0)); ptrElement.style.webkitTransitionDuration = 0; ptrElement.style.margin = '0 auto';