Working on custom refresher

dist/css/ionic.css

@@ -2327,6 +2327,22 @@ body, .ionic-body {
   text-align: center;
   position: relative; }
 
+.ionic-refresher-content {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  position: relative; }
+
+.ionic-refresher {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #4a87ee;
+  position: absolute;
+  left: 50%;
+  margin-left: -5px;
+  bottom: 15px; }
+
 .scroll-refreshing {
   -webkit-transition: height 0.1s ease-in-out; }
 

dist/js/ionic-angular.js

@@ -548,11 +548,29 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    transclude: true,
+    require: ['^?content', '^?list'],
-    template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
+    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
+    scope: true,
+    link: function($scope, $element, $attr, scrollCtrl) {
+      $scope.$on('onRefresh', function() {
+      });
+      $scope.$on('onRefreshOpening', function(amt) {
+        console.log('On refresh opening', amt);
+      });
+    }
   }
 })
 
+.directive('scroll-refresher', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div class="scroll-refresher"><div class="scroll-refresher-content"></div></div>'
+  }
+});
+
+
 })();
 ;
 (function() {
@@ -667,9 +685,11 @@ angular.module('ionic.ui.list', ['ngAnimate'])
           hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
           onRefresh: function() {
             $scope.onRefresh();
+            $scope.$broadcast('onRefresh');
           },
           onRefreshOpening: function(amt) {
             $scope.onRefreshOpening({amount: amt});
+            $scope.$broadcast('onRefreshOpening', amt);
           }
         });
 

js/ext/angular/src/directive/ionicContent.js

@@ -76,9 +76,27 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    transclude: true,
+    require: ['^?content', '^?list'],
-    template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
+    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><div class="ionic-refresher"></div></div></div>',
+    scope: true,
+    link: function($scope, $element, $attr, scrollCtrl) {
+      $scope.$on('onRefresh', function() {
+      });
+      $scope.$on('onRefreshOpening', function(amt) {
+        console.log('On refresh opening', amt);
+      });
+    }
   }
 })
 
+.directive('scroll-refresher', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div class="scroll-refresher"><div class="scroll-refresher-content"></div></div>'
+  }
+});
+
+
 })();

js/ext/angular/src/directive/ionicList.js

@@ -110,9 +110,11 @@ angular.module('ionic.ui.list', ['ngAnimate'])
           hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'),
           onRefresh: function() {
             $scope.onRefresh();
+            $scope.$broadcast('onRefresh');
           },
           onRefreshOpening: function(amt) {
             $scope.onRefreshOpening({amount: amt});
+            $scope.$broadcast('onRefreshOpening', amt);
           }
         });
 

scss/_scaffolding.scss

@@ -122,6 +122,23 @@ body, .ionic-body {
   //@include display-flex();
   //@include align-items(center);
 }
+.ionic-refresher-content {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  position: relative;
+}
+.ionic-refresher {
+  // A custom refresher
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: $brand-primary;
+  position: absolute;
+  left: 50%;
+  margin-left: -5px;
+  bottom: 15px;
+}
 .scroll-refreshing {
   -webkit-transition: height 0.1s ease-in-out;
 }