javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fun test

Browse Source
This commit is contained in:
Max Lynch
2014-03-18 17:52:51 -05:00
parent 532d473e35
commit a21c84a8a9
1 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
js/ext/angular/test/content.html
View File

@@ -11,7 +11,7 @@
</head>
<body ng-controller="ThisCtrl">
<ion-pane>
<ion-header-bar id="header" class="bar-primary">
<ion-header-bar id="header" class="bar-positive">
<h1 class="title">Title</h1>
</ion-header-bar>
@@ -24,6 +24,7 @@
padding="true"
has-tabs="true"
has-header="true"
header-shrink="60"
>
<ion-refresher></ion-refresher>
<div id="search-box" class="bar bar-header item-input-inset">
@@ -70,6 +71,45 @@
<script>
angular.module('navTest', ['ionic'])
.directive('headerShrink', function($document) {
var fadeAmt;
var shrink = function(header, amt, max) {
console.log('Translating up', amt);
amt = Math.min(max - 20, amt);
fadeAmt = 1 - amt / (max - 20);
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 header = $document[0].body.querySelector('.bar-header');
var headerHeight = header.offsetHeight;
$element.bind('scroll', function(e) {
if(e.detail.scrollTop > starty) {
// Start shrinking
shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - e.detail.scrollTop);
shrink(header, shrinkAmt, headerHeight);
} else {
shrink(header, 0, headerHeight);
}
});
}
}
})
.directive('hidesHeader', function() {
return {
link: function($scope, $element, $attr) {
@@ -105,6 +145,7 @@
}, 1000);
};
$scope.onScroll = function(event, scrollTop, scrollLeft) {
console.log('Scroll', scrollTop, scrollLeft);
/*
if(scrollTop > startTop) {
var diff = scrollTop - startTop;
@@ -112,7 +153,6 @@
header.style[ionic.CSS.TRANSFORM] = 'translate3d(0px, -' + diff + 'px, 0)';
content.style.marginTop = -diff + 'px';
}
console.log('Scroll', scrollTop, scrollLeft);
*/
};
})