├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── demo
    └── index.html
├── ionic.contrib.frost.css
└── ionic.contrib.frost.js


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | *.swp
3 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Ionic Contrib: Frosted Glass
 2 | ===================
 3 | 
 4 | A reusable frosted-glass effect for adding this cool iOS effect to your Ionic apps. (this is an updated and more generic version of our old [Ionic Frosted Glass Header](https://github.com/driftyco/ionic-contrib-frosted-glass) contrib). It looks like this:
 5 | 
 6 | 
 7 | <p data-height="266" data-theme-id="3572" data-slug-hash="pmBch" data-default-tab="result" data-user="ionic" class='codepen'>See the Pen <a href='http://codepen.io/ionic/pen/pmBch/'>Ionic Contrib: Frost</a> by Ionic (<a href='http://codepen.io/ionic'>@ionic</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
 8 | <script async src="//codepen.io/assets/embed/ei.js"></script>
 9 | 
10 | <img src="http://ionicframework.com.s3.amazonaws.com/contrib/frost2.png" style="width: 319px; background-size: 100%">
11 | 
12 | ### Use
13 | 
14 | To use, add the attribute `frost` to the element you want to blur. Then, you'll want to add an overlay to give a nice faded effect for content on top. The demo has a dark overlay you can use:
15 | 
16 | ```html
17 | <ion-pane frost>
18 | </ion-pane>
19 | <ion-pane class="my-overlay">
20 | </ion-pane>
21 | <style>
22 | // Example dark overlay:
23 | .my-overlay {
24 |   background-color: #222;
25 |   opacity: 0.8;
26 | }
27 | </style>
28 | ```
29 | 
30 | See `demo/index.html` for an example.
31 | 
32 | ### Updating the Frost
33 | 
34 | When the content changes underneath, you need to update the frosted effect. To do that in a controller (for example), inject the `$ionicFrostedDelegate` and call `update()` on it:
35 | 
36 | ```javascript
37 | controller('MyCtrl', function($scope, $ionicFrostedDelegate) {
38 |   $scope.contentChanged = function() {
39 |     $ionicFrostedDelegate.update();
40 |   };
41 | });
42 | ```
43 | 
44 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-ion-frost",
 3 |   "version": "0.0.1",
 4 |   "homepage": "https://github.com/driftyco/ionic-ion-frost",
 5 |   "authors": [
 6 |     "Max Lynch <max@drifty.com>"
 7 |   ],
 8 |   "description": "Reusable iOS frosted glass effect",
 9 |   "main": "ionic.contrib.frost.js",
10 |   "keywords": [
11 |     "ionic",
12 |     "html5",
13 |     "android",
14 |     "drawer"
15 |   ],
16 |   "license": "MIT",
17 |   "ignore": [
18 |     "**/.*",
19 |     "node_modules",
20 |     "bower_components",
21 |     "test",
22 |     "tests"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/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 |     <!-- ionic css -->
 9 |     <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css" rel="stylesheet">
10 | 
11 |     <link href="../ionic.contrib.frost.css" rel="stylesheet">
12 | 
13 |     <!-- angularjs scripts -->
14 |     <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
15 | 
16 |     <script src="../ionic.contrib.frost.js"></script>
17 | 
18 |     <style>
19 |       .dark-overlay {
20 |         background-color: #222;
21 |         opacity: 0.8;
22 |       }
23 |       .dark-item {
24 |         background-color: transparent;
25 |         color: #fff;
26 |         border-color: #444;
27 |       }
28 |       .close-icon:before {
29 |         font-size: 40px !important;
30 |       }
31 |       .bar-clear {
32 |         background: none;
33 |       }
34 |       .overlay-spacer {
35 |         height: 100px;
36 |       }
37 |     </style>
38 |   </head>
39 | 
40 |   <!-- 
41 |     'starter' is the name of this angular module (js/app.js)
42 |   -->
43 |   <body ng-app="starter">
44 | 
45 |     <ion-pane frost ng-controller="UnderCtrl">
46 |       <ion-header-bar class="bar-dark">
47 |         <h1 class="title">Under content</h1>
48 |       </ion-header-bar>
49 |       <ion-content class="has-header">
50 |         <button class="button button-block button-balanced">A Bright Button</button>
51 |         <ion-list>
52 |           <ion-item ng-repeat="item in items">
53 |             {{item.text}}
54 |           </ion-item>
55 |         </ion-list>
56 |       </ion-content>
57 |     </ion-pane>
58 |     <ion-pane ng-controller="OverlayCtrl" class="dark-overlay">
59 |       <ion-header-bar class="bar-clear">
60 |         <button class="button button-icon ion-ios7-close-empty close-icon pull-right"></button>
61 |       </ion-header-bar>
62 |       <ion-content class="has-header">
63 |         <div class="overlay-spacer"></div>
64 |         <ion-list>
65 |           <ion-item ng-repeat="item in items" class="dark-item">
66 |             {{item.text}}
67 |           </ion-item>
68 |         </ion-list>
69 |       </ion-content>
70 |     </ion-pane>
71 |     <script>
72 |       angular.module('starter', ['ionic', 'ionic.contrib.frost'])
73 |       .controller('UnderCtrl', function($scope) {
74 |         $scope.items = [];
75 |         for(var i = 0; i < 30; i++) {
76 |           $scope.items.push({text: 'Item ' + (i+1) });
77 |         }
78 |       })
79 |       .controller('OverlayCtrl', function($scope) {
80 |         $scope.items = [];
81 |         for(var i = 0; i < 5; i++) {
82 |           $scope.items.push({text: 'Option' + (i+1) });
83 |         }
84 |       });
85 |     </script>
86 |   </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/ionic.contrib.frost.css:
--------------------------------------------------------------------------------
 1 | .ionic-contrib-frost {
 2 |   overflow: hidden;
 3 | 	position:absolute;
 4 |   width: 100%;
 5 | 	top:0;
 6 | 	left:0;
 7 | 	right:0;
 8 | 	-webkit-filter:blur(10px);
 9 | 	opacity:1;
10 |   z-index: 10;
11 | }
12 | 


--------------------------------------------------------------------------------
/ionic.contrib.frost.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 | 
 3 | 'use strict';
 4 | 
 5 | /**
 6 |  * The ionic-contrib-frosted-glass is a fun frosted-glass effect
 7 |  * that can be used in iOS apps to give an iOS 7 frosted-glass effect
 8 |  * to any element.
 9 |  */
10 | angular.module('ionic.contrib.frost', ['ionic'])
11 | 
12 | .factory('$ionicFrostedDelegate', ['$rootScope', function($rootScope) {
13 |   return {
14 |     update: function() {
15 |       $rootScope.$emit('ionicFrosted.update');
16 |     }
17 |   }
18 | }])
19 | 
20 | .directive('frost', ['$timeout', '$rootScope', function($timeout, $rootScope) {
21 |   var clone = function($element) {
22 |     var content = $element[0];
23 |     var el = $element[0];
24 | 
25 |     /*
26 |     var scrollStart = content.style[ionic.CSS.TRANSFORM];
27 |     var startY = parseFloat(scrollStart.replace('translate3d(', '').split(',')[1]) || 0;
28 | 
29 |     // Get the top offset position for headers, etc. on this content area
30 |     var contentOffset = content.parentNode.offsetTop;
31 | 
32 |     // Get the height of the header to know how much to offset the content blur
33 |     */
34 |     var elHeight = el.offsetHeight;
35 | 
36 |     // Clone the content
37 |     var contentCloned = content.cloneNode(true);
38 | 
39 |     // Append the cloned content into the blur box
40 |     var blurContent = document.createElement('div');
41 |     blurContent.className = 'ionic-contrib-frost';
42 |     blurContent.style.overflow = 'hidden';
43 |     blurContent.style.height = elHeight + 'px';
44 |     blurContent.appendChild(contentCloned);
45 | 
46 |     /*
47 |     content.parentNode.addEventListener('scroll', function(e) {
48 |       // Move the clone up as we scroll
49 |       contentCloned.style[ionic.CSS.TRANSFORM] = 'translate3d(0,' + (-e.detail.scrollTop + contentOffset) + 'px, 0)';
50 |     });
51 |     contentCloned.style[ionic.CSS.TRANSFORM] = 'translate3d(0,' + (startY + contentOffset) + 'px, 0)';
52 |     */
53 | 
54 |     // Append the blur box into this element
55 |     $element.append(blurContent);
56 |     return blurContent;
57 |   };
58 |   return {
59 |     restrict: 'A',
60 |     link: function($scope, $element, $attr) {
61 |       var blurContent = null;
62 | 
63 |       $rootScope.$on('ionicFrosted.update', function() {
64 |         window.rAF(function() {
65 |           if(blurContent) {
66 |             blurContent.remove();
67 |             blurContent = clone($element);
68 |           }
69 |         });
70 |       });
71 | 
72 |       // timeout so we allow child directives to
73 |       // render children
74 |       $timeout(function() {
75 |         ionic.requestAnimationFrame(function() {
76 |           blurContent = clone($element);
77 |         });
78 |       });
79 |     }
80 |   }
81 | }])
82 | 
83 | 
84 | })();
85 | 


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