diff options
Diffstat (limited to 'www/external/ionic.headerShrink.js')
| -rw-r--r-- | www/external/ionic.headerShrink.js | 73 |
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..70f9a1d2 --- /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'); +}); |
