├── .cordova
    └── config.json
├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── config.xml
├── demo
    └── index.html
└── ionic.headerShrink.js


/.cordova/config.json:
--------------------------------------------------------------------------------
1 | {
2 |     "id": "com.ionicframework.starter",
3 |     "name": "StarterApp"
4 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.keystore
2 | *.sw*
3 | platforms/^.*
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Drifty
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Ionic Ion Header Shrink
 2 | ===========================
 3 | 
 4 | An Ion for making a header that shrinks based on the user scrolling (like Facebook's iOS app).
 5 | 
 6 | To use this, add a `<ion-header-bar>` and a `<ion-content>`. Add the `header-shrink` attribute to the `<ion-content>` element:
 7 | 
 8 | ```html
 9 | <ion-header-bar class="bar-positive">
10 |   <div class="buttons">
11 |     <button class="button button-icon ion-navicon"></button>
12 |   </div>
13 |   <h1 class="title">Things</h1>
14 | </ion-header-bar>
15 | <ion-content header-shrink>
16 | </ion-content>
17 | ```
18 | 
19 | It's also useful to add an empty spacer element inside the content to make sure it doesn't go up under the bar:
20 | 
21 | ```html
22 | <ion-content>
23 |   <div style="height: 50px"></div>
24 | </ion-content>
25 | ```
26 | 
27 | Also make sure to include the `ionic.ion.headerShrink` angular module in your app.
28 | 
29 | Note, this should also work with an `<ion-nav-bar>`.
30 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-ion-header-shrink",
 3 |   "version": "1.0.0",
 4 |   "homepage": "https://github.com/driftyco/ionic-ion-header-shrink",
 5 |   "authors": [
 6 |     "Max Lynch <max@drifty.com>"
 7 |   ],
 8 |   "description": "A collapsing header effect as seen in the Facebook news feed",
 9 |   "main": [
10 |     "ionic.headerShrink.js"
11 |   ],
12 |   "keywords": [
13 |     "mobile",
14 |     "html5",
15 |     "ionic"
16 |   ],
17 |   "license": "MIT",
18 |   "private": false
19 | }
20 | 


--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8'?>
 2 | <widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 3 |     <name>StarterApp</name>
 4 |     <description>
 5 |         A sample Ionic Framework app using Cordova and AngularJS
 6 |     </description>
 7 |     <author email="support@drifty.com" href="http://ionicframework.com/">
 8 |         Ionic Framework Team
 9 |     </author>
10 |     <content src="index.html" />
11 |     <access origin="*" />
12 |     <preference name="fullscreen" value="true" />
13 |     <preference name="webviewbounce" value="false" />
14 |     <preference name="UIWebViewBounce" value="false" />
15 |     <preference name="DisallowOverscroll" value="true" />
16 | </widget>
17 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  6 |     <title>Ionic Seed App</title>
  7 | 
  8 |     <!-- your app's css -->
  9 |     <link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css">
 10 | 
 11 |     <!-- ionic/angularjs scripts -->
 12 |     <script src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
 13 | 
 14 |     <!-- your app's script -->
 15 |     <script src="../ionic.headerShrink.js"></script>
 16 | 
 17 |     <style>
 18 |       ion-content {
 19 |         top: 0 !important;
 20 |       }
 21 |     </style>
 22 | 
 23 |     <script>
 24 |       angular.module('starter', ['ionic', 'ionic.ion.headerShrink']);
 25 |     </script>
 26 |   </head>
 27 | 
 28 |   <!-- 
 29 |     'starter' is the name of this angular module (js/app.js)
 30 |   -->
 31 |   <body ng-app="starter">
 32 | 
 33 |     <ion-pane>
 34 |       <ion-header-bar class="bar-positive">
 35 |         <div class="buttons">
 36 |           <button class="button button-icon ion-navicon"></button>
 37 |         </div>
 38 |         <h1 class="title">Things</h1>
 39 |       </ion-header-bar>
 40 |       <ion-content header-shrink scroll-event-interval="5">
 41 |         <div style="height: 50px;"></div>
 42 |         <div class="list card">
 43 | 
 44 |           <div class="item item-avatar">
 45 |             <img src="http://ionicframework.com/img/docs/mcfly.jpg">
 46 |             <h2>Marty McFly</h2>
 47 |             <p>November 05, 1955</p>
 48 |           </div>
 49 | 
 50 |           <div class="item item-body">
 51 |             <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
 52 |             <p>
 53 |               This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
 54 |               the content is from a card-body consisting of an image and paragraph text. The footer
 55 |               consists of tabs, icons aligned left, within the card-footer.
 56 |             </p>
 57 |             <p>
 58 |               <a href="#" class="subdued">1 Like</a>
 59 |               <a href="#" class="subdued">5 Comments</a>
 60 |             </p>
 61 |           </div>
 62 | 
 63 |           <div class="item tabs tabs-secondary tabs-icon-left">
 64 |             <a class="tab-item" href="#">
 65 |               <i class="icon ion-thumbsup"></i>
 66 |               Like
 67 |             </a>
 68 |             <a class="tab-item" href="#">
 69 |               <i class="icon ion-chatbox"></i>
 70 |               Comment
 71 |             </a>
 72 |             <a class="tab-item" href="#">
 73 |               <i class="icon ion-share"></i>
 74 |               Share
 75 |             </a>
 76 |           </div>
 77 | 
 78 |         </div>
 79 |         <div class="list card">
 80 | 
 81 |           <div class="item item-avatar">
 82 |             <img src="http://ionicframework.com/img/docs/mcfly.jpg">
 83 |             <h2>Marty McFly</h2>
 84 |             <p>November 05, 1955</p>
 85 |           </div>
 86 | 
 87 |           <div class="item item-body">
 88 |             <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
 89 |             <p>
 90 |               This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
 91 |               the content is from a card-body consisting of an image and paragraph text. The footer
 92 |               consists of tabs, icons aligned left, within the card-footer.
 93 |             </p>
 94 |             <p>
 95 |               <a href="#" class="subdued">1 Like</a>
 96 |               <a href="#" class="subdued">5 Comments</a>
 97 |             </p>
 98 |           </div>
 99 | 
100 |           <div class="item tabs tabs-secondary tabs-icon-left">
101 |             <a class="tab-item" href="#">
102 |               <i class="icon ion-thumbsup"></i>
103 |               Like
104 |             </a>
105 |             <a class="tab-item" href="#">
106 |               <i class="icon ion-chatbox"></i>
107 |               Comment
108 |             </a>
109 |             <a class="tab-item" href="#">
110 |               <i class="icon ion-share"></i>
111 |               Share
112 |             </a>
113 |           </div>
114 | 
115 |         </div>
116 |         <div class="list card">
117 | 
118 |           <div class="item item-avatar">
119 |             <img src="http://ionicframework.com/img/docs/mcfly.jpg">
120 |             <h2>Marty McFly</h2>
121 |             <p>November 05, 1955</p>
122 |           </div>
123 | 
124 |           <div class="item item-body">
125 |             <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg">
126 |             <p>
127 |               This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
128 |               the content is from a card-body consisting of an image and paragraph text. The footer
129 |               consists of tabs, icons aligned left, within the card-footer.
130 |             </p>
131 |             <p>
132 |               <a href="#" class="subdued">1 Like</a>
133 |               <a href="#" class="subdued">5 Comments</a>
134 |             </p>
135 |           </div>
136 | 
137 |           <div class="item tabs tabs-secondary tabs-icon-left">
138 |             <a class="tab-item" href="#">
139 |               <i class="icon ion-thumbsup"></i>
140 |               Like
141 |             </a>
142 |             <a class="tab-item" href="#">
143 |               <i class="icon ion-chatbox"></i>
144 |               Comment
145 |             </a>
146 |             <a class="tab-item" href="#">
147 |               <i class="icon ion-share"></i>
148 |               Share
149 |             </a>
150 |           </div>
151 | 
152 |         </div>
153 |       </ion-content>
154 |     </ion-pane>
155 |   </body>
156 | </html>
157 | 


--------------------------------------------------------------------------------
/ionic.headerShrink.js:
--------------------------------------------------------------------------------
 1 | angular.module('ionic.ion.headerShrink', [])
 2 | 
 3 | .directive('headerShrink', function($document) {
 4 |   var fadeAmt;
 5 | 
 6 |   var shrink = function(header, content, amt, max) {
 7 |     amt = Math.min(max, amt);
 8 |     fadeAmt = 1 - amt / max;
 9 |     ionic.requestAnimationFrame(function() {
10 |       header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)';
11 |       for(var i = 0, j = header.children.length; i < j; i++) {
12 |         header.children[i].style.opacity = fadeAmt;
13 |       }
14 |     });
15 |   };
16 | 
17 |   return {
18 |     restrict: 'A',
19 |     link: function($scope, $element, $attr) {
20 |       var starty = $scope.$eval($attr.headerShrink) || 0;
21 |       var shrinkAmt;
22 | 
23 |       var amt;
24 | 
25 |       var y = 0;
26 |       var prevY = 0;
27 |       var scrollDelay = 0.4;
28 | 
29 |       var fadeAmt;
30 |       
31 |       var header = $document[0].body.querySelector('.bar-header');
32 |       var headerHeight = header.offsetHeight;
33 |       
34 |       function onScroll(e) {
35 |         var scrollTop = e.detail.scrollTop;
36 | 
37 |         if(scrollTop >= 0) {
38 |           y = Math.min(headerHeight / scrollDelay, Math.max(0, y + scrollTop - prevY));
39 |         } else {
40 |           y = 0;
41 |         }
42 |         console.log(scrollTop);
43 | 
44 |         ionic.requestAnimationFrame(function() {
45 |           fadeAmt = 1 - (y / headerHeight);
46 |           header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, ' + -y + 'px, 0)';
47 |           for(var i = 0, j = header.children.length; i < j; i++) {
48 |             header.children[i].style.opacity = fadeAmt;
49 |           }
50 |         });
51 | 
52 |         prevY = scrollTop;
53 |       }
54 | 
55 |       $element.bind('scroll', onScroll);
56 |     }
57 |   }
58 | })
59 | 
60 | 


--------------------------------------------------------------------------------