Skip to content
This repository was archived by the owner on Nov 25, 2022. It is now read-only.

Fix/manage multiple headers #8

Open
nicowenterodt wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Fix/manage multiple headers #8

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
63530b2
fixes querySelector finding multiple headers
nicowenterodt Feb 14, 2015
589a760
added comment / fixes a typo
nicowenterodt Feb 14, 2015
847da91
reset header before leaving view
nicowenterodt Feb 23, 2015
64f4376
reset header-position afterEnter view
nicowenterodt Mar 11, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 40 additions & 39 deletions ionic.headerShrink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,60 @@
angular.module('ionic.ion.headerShrink', [])

.directive('headerShrink', function($document) {
.directive('headerShrink', function($document, $timeout, $ionicScrollDelegate) {
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 scrollContent = $element.find('ion-content');
var y = 0;
var prevY = 0;
var scrollDelay = 0.4;

var fadeAmt;

var header = $document[0].body.querySelector('.bar-header');
var headerHeight = header.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;
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;

$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;
}
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;
scrollContent.on("scroll", function(e) {
var scrollTop = e.detail.scrollTop;

// 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;
});
});

$element.bind('scroll', onScroll);
}
}
})