diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/external/ionic.headerShrink.js | 73 | ||||
| -rw-r--r-- | www/index.html | 2 | ||||
| -rw-r--r-- | www/js/app.js | 3 | ||||
| -rw-r--r-- | www/templates/events.html | 9 |
4 files changed, 81 insertions, 6 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'); +}); diff --git a/www/index.html b/www/index.html index 66f2c178..a86dbc2d 100644 --- a/www/index.html +++ b/www/index.html @@ -144,7 +144,7 @@ <script src="external/ionic.content.banner.js"></script> <script src="external/FileSaver.min.js"></script> <script src="external/canvas-toBlob.js"></script> - + <script src="external/ionic.headerShrink.js"></script> <script src="external/imagesloaded.pkgd.js"></script> <script src="external/packery.pkgd.js"></script> <script src="external/draggabilly.pkgd.js"></script> diff --git a/www/js/app.js b/www/js/app.js index 034a89c6..4543a3ea 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -28,7 +28,8 @@ angular.module('zmApp', [ 'com.2fdevs.videogular.plugins.overlayplay', 'ionic-native-transitions', 'mgo-angular-wizard', - 'pascalprecht.translate' + 'pascalprecht.translate', + 'ionic.ion.headerShrink' diff --git a/www/templates/events.html b/www/templates/events.html index 485cdc0d..254f1bf7 100644 --- a/www/templates/events.html +++ b/www/templates/events.html @@ -1,5 +1,6 @@ <ion-view cache-view="false"> + <ion-nav-title>{{scrollPosition();}}</ion-nav-title> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"> @@ -16,7 +17,7 @@ <a style="" class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a> </ion-nav-buttons> - <div ng-if="showSearch"> + <!--<div ng-if="showSearch"> <ion-header-bar class="bar bar-subheader item-input-inset"> <label class="item-input-wrapper"> @@ -24,11 +25,11 @@ <input type="search" placeholder="{{'kSearch'|translate}}" ng-model="search.text" autocorrect="off" autocomplete="off"> </label> </ion-header-bar> - </div> - + </div>--> - <ion-content ng-cloak on-tap="tapped();" delegate-handle="mainScroll" has-subheader="true" overflow-scroll="false" mouse-wheel-scroll> + + <ion-content header-shrink ng-cloak on-tap="tapped();" delegate-handle="mainScroll" overflow-scroll="false" mouse-wheel-scroll> <!-- lets make sure the events list is not empty as collection repeat needs height --> |