initial experiments

Former-commit-id: 811ab2e0e405a95529493afd49a43581576fc169

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 -->