initial experiments

Former-commit-id: 811ab2e0e405a95529493afd49a43581576fc169

1 files changed, 73 insertions, 0 deletions

diff --git a/www/external/ionic.headerShrink.js b/www/external/ionic.headerShrink.js
new file mode 100644
index 00000000..e0f3f244
--- /dev/null
+++ b/www/external/ionic.headerShrink.js
@@ -0,0 +1,73 @@
+angular.module('ionic.ion.headerShrink', [])
+
+    .directive('headerShrink', function ($document) {
+    var fadeAmt;
+
+    var shrink = function (header, content, amt, max) {
+        amt = Math.min(max, amt);
+        fadeAmt = 1 - amt / max;
+        ionic.requestAnimationFrame(function () {
+            header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
+            for (var i = 0, j = header.children.length; i < j; i++) {
+                header.children[i].style.opacity = fadeAmt;
+            }
+        });
+    };
+
+    return {
+        restrict: 'A',
+        link: function ($scope, $element, $attr) {
+            var starty = $scope.$eval($attr.headerShrink) || 0;
+            var shrinkAmt;
+
+            var amt;
+
+            var y = 0;
+            var prevY = 0;
+            var scrollDelay = 0.4;
+
+            var fadeAmt;
+
+            var headers = $document[0].body.querySelectorAll('.bar-header');
+            var headerHeight = headers[0].offsetHeight;
+
+            function onScroll(e) {
+                var scrollTop = e.detail.scrollTop;
+
+                if (scrollTop >= 0) {
+                    y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY));
+                } else {
+                    y = 0;
+                }
+                console.log(scrollTop);
+
+                ionic.requestAnimationFrame(function () {
+                    fadeAmt = 1 - (y / headerHeight);
+                    for (var k = 0, l = headers.length; k < l; k++) {
+                        headers[k].style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';
+                        headers[k].style.opacity = fadeAmt;
+                    }
+                });
+
+                prevY = scrollTop;
+            }
+
+            $element.bind('scroll', onScroll);
+        }
+    }
+})
+
+angular.module('app', ['ionic', 'ionic.ion.headerShrink'])
+    .config(function ($stateProvider, $urlRouterProvider) {
+
+    // Define our views
+    $stateProvider.state('home', {
+        url: "/home",
+        templateUrl: 'views/home.html'
+        // If you wanted some AngularJS controller behaviour...
+        // controller: "HomeCtrl as ctrl"
+    });
+
+    // Default view to show
+    $urlRouterProvider.otherwise('/home');
+});