From 63530b26bce46ddb39a9a36d49a99e0ceddb84fa Mon Sep 17 00:00:00 2001 From: Nico Wenterodt Date: Sat, 14 Feb 2015 14:14:25 +0100 Subject: [PATCH 1/4] fixes querySelector finding multiple headers --- ionic.headerShrink.js | 41 ++++++++++++++++++----------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 90312ca..0c3dbce 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -3,34 +3,30 @@ 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 headerHeight = 0; + var headers = []; + + // look for multiple headers when using a ion-navbar or sidemenu + headers = $document[0].body.querySelectorAll('[nav-bar] > .bar-header'); + + // if there are not mulitple headers query for a single one + if (headers.length == 0) { + headers = $document[0].body.querySelectorAll('.bar-header'); + } + + headerHeight = headers[0].offsetHeight; - var header = $document[0].body.querySelector('.bar-header'); - var headerHeight = header.offsetHeight; - + function onScroll(e) { var scrollTop = e.detail.scrollTop; @@ -39,21 +35,20 @@ angular.module('ionic.ion.headerShrink', []) } else { y = 0; } - console.log(scrollTop); ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); - header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)'; - for(var i = 0, j = header.children.length; i < j; i++) { - header.children[i].style.opacity = fadeAmt; + 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); + $document.find('ion-content').bind('scroll', onScroll); } } }) - From 589a760720652d8057927c8db34b0a58f9e2c2cb Mon Sep 17 00:00:00 2001 From: Nico Wenterodt Date: Sat, 14 Feb 2015 14:19:15 +0100 Subject: [PATCH 2/4] added comment / fixes a typo --- ionic.headerShrink.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 0c3dbce..01439cc 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -16,7 +16,7 @@ angular.module('ionic.ion.headerShrink', []) var headerHeight = 0; var headers = []; - // look for multiple headers when using a ion-navbar or sidemenu + // look for multiple headers when using an ion-navbar or sidemenu headers = $document[0].body.querySelectorAll('[nav-bar] > .bar-header'); // if there are not mulitple headers query for a single one @@ -38,11 +38,11 @@ angular.module('ionic.ion.headerShrink', []) ionic.requestAnimationFrame(function() { fadeAmt = 1 - (y / headerHeight); + // iterate over all found headers and shrink them 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; @@ -51,4 +51,4 @@ angular.module('ionic.ion.headerShrink', []) $document.find('ion-content').bind('scroll', onScroll); } } -}) +}) \ No newline at end of file From 847da91dea954c8960e472435ffe2f12ae5e0929 Mon Sep 17 00:00:00 2001 From: Nico Wenterodt Date: Mon, 23 Feb 2015 22:30:37 +0100 Subject: [PATCH 3/4] reset header before leaving view --- ionic.headerShrink.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index 01439cc..bf93b44 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -1,6 +1,6 @@ angular.module('ionic.ion.headerShrink', []) -.directive('headerShrink', function($document) { +.directive('headerShrink', function($document, $ionicScrollDelegate) { var fadeAmt; return { @@ -19,16 +19,23 @@ angular.module('ionic.ion.headerShrink', []) // look for multiple headers when using an ion-navbar or sidemenu headers = $document[0].body.querySelectorAll('[nav-bar] > .bar-header'); - // if there are not mulitple headers query for a single one + // if there are no mulitple headers query for a single one if (headers.length == 0) { headers = $document[0].body.querySelectorAll('.bar-header'); } headerHeight = headers[0].offsetHeight; - + + // reset header-bar bevore leaving view + $scope.$on('$ionicView.beforeLeave', function() { + for(var k = 0, l = headers.length; k < l; k++) { + headers[k].style[ionic.CSS.TRANSFORM] = 'translate3d(0, 0, 0)'; + headers[k].style.opacity = 1; + } + }); function onScroll(e) { - var scrollTop = e.detail.scrollTop; + var scrollTop = $ionicScrollDelegate.getScrollPosition().top; if(scrollTop >= 0) { y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)); From 64f4376a4bae9489731d5b49f36d4de22c352ba7 Mon Sep 17 00:00:00 2001 From: Nico Wenterodt Date: Wed, 11 Mar 2015 22:25:03 +0100 Subject: [PATCH 4/4] reset header-position afterEnter view --- ionic.headerShrink.js | 55 +++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 28 deletions(-) diff --git a/ionic.headerShrink.js b/ionic.headerShrink.js index bf93b44..4cc154f 100644 --- a/ionic.headerShrink.js +++ b/ionic.headerShrink.js @@ -1,14 +1,13 @@ angular.module('ionic.ion.headerShrink', []) -.directive('headerShrink', function($document, $ionicScrollDelegate) { +.directive('headerShrink', function($document, $timeout, $ionicScrollDelegate) { var fadeAmt; return { restrict: 'A', link: function($scope, $element, $attr) { - var starty = $scope.$eval($attr.headerShrink) || 0; - var shrinkAmt; - var amt; + + var scrollContent = $element.find('ion-content'); var y = 0; var prevY = 0; var scrollDelay = 0.4; @@ -16,46 +15,46 @@ angular.module('ionic.ion.headerShrink', []) var headerHeight = 0; var headers = []; - // look for multiple headers when using an ion-navbar or sidemenu + + // look for multiple headers when using a ion-navbar or sidemenu headers = $document[0].body.querySelectorAll('[nav-bar] > .bar-header'); - // if there are no mulitple headers query for a single one + // if there are not mulitple headers query for a single one if (headers.length == 0) { headers = $document[0].body.querySelectorAll('.bar-header'); } headerHeight = headers[0].offsetHeight; - // reset header-bar bevore leaving view - $scope.$on('$ionicView.beforeLeave', function() { + $scope.$on('$ionicView.afterEnter', function() { for(var k = 0, l = headers.length; k < l; k++) { headers[k].style[ionic.CSS.TRANSFORM] = 'translate3d(0, 0, 0)'; headers[k].style.opacity = 1; } - }); - function onScroll(e) { - var scrollTop = $ionicScrollDelegate.getScrollPosition().top; + scrollContent.on("scroll", function(e) { + var scrollTop = e.detail.scrollTop; - if(scrollTop >= 0) { - y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)); - } else { - y = 0; - } - - ionic.requestAnimationFrame(function() { - fadeAmt = 1 - (y / headerHeight); - // iterate over all found headers and shrink them - 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; + // 20 px offset + if(scrollTop >= 25) { + y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY)); + } else { + y = 0; } - }); - prevY = 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; + }); + }); - $document.find('ion-content').bind('scroll', onScroll); } } -}) \ No newline at end of file +})