mgcrea · freefri · Nov 26, 2015 · Nov 26, 2015 · Nov 26, 2015 · Nov 26, 2015
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,50 @@
+<html lang="en" ng-app="myApp">
+
+<head>
+
+    <title>GitHub · angular-pull-to-refresh</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="//github.com/apple-touch-icon-144.png">
+    <link rel="shortcut icon" href="//github.com/favicon.ico">
+
+    <!-- Bootstrap core CSS -->
+    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet">
+    <link href="../dist/angular-pull-to-refresh.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+    <![endif]-->
+
+</head>
+
+<body ontouchstart="" ng-controller="AppCtrl">
+
+<header class="navbar navbar-default navbar-fixed-top" role="banner">
+    <div class="navbar-header">
+        <a href="#" class="navbar-brand">
+            <i class="fa fa-github"></i>&nbsp;angular-pull-to-refresh
+        </a>
+    </div>
+</header>
+
+<div class="content">
+    <ul class="list-group list-group-table" pull-to-refresh="onReload()">
+        <li class="list-group-item" ng-repeat="state in states" ng-bind="state"></li>
+    </ul>
+</div>
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
+<script src="../dist/angular-pull-to-refresh.js"></script>
+<script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/demo/script.js 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
@@ -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;
+}
diff --git 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 <olivier@mg-crea.com>
  * @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,
@@ -25,29 +26,89 @@
     '$timeout',
     '$q',
     'pullToRefreshConfig',
-    function ($compile, $timeout, $q, pullToRefreshConfig) {
+    '$injector',
+    function ($compile, $timeout, $q, pullToRefreshConfig, $injector) {
       return {
         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, 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 () {
                 scope.status = status;
               });
             };
             var shouldReload = false;
+            function getTransformStyle(translate) {
+              if (isUsingOverflowScroll) {
+                return {};
+              }
+              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 isUsingOverflowScroll = true;
+            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;
+              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) {
@@ -57,6 +118,7 @@
             iElement.bind('touchend', function (ev) {
               if (!shouldReload)
                 return;
+              iElement.css(getTransformStyle(0));
               ptrElement.style.webkitTransitionDuration = 0;
               ptrElement.style.margin = '0 auto';
               setStatus('loading');
@@ -79,6 +141,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
diff --git 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"
@@ -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"

diff --git 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
 <div class="content">
-  <ul class="list-group list-group-table" pull-to-refresh="onReload()">
+  <ul class="list-group list-group-table" pull-to-refresh="onReload()" pull-to-refresh-config="pullConfig">
     <li class="list-group-item" ng-repeat="state in states" ng-bind="state"></li>
   </ul>
 </div>
@@ -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