diff --git a/demos/blur/bg.jpg b/demos/blur/bg.jpg new file mode 100644 index 0000000000..c3298fcb99 Binary files /dev/null and b/demos/blur/bg.jpg differ diff --git a/demos/blur/index.html b/demos/blur/index.html new file mode 100644 index 0000000000..a6cb807e57 --- /dev/null +++ b/demos/blur/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/demos/blur/index.ts b/demos/blur/index.ts new file mode 100644 index 0000000000..00bd916c6b --- /dev/null +++ b/demos/blur/index.ts @@ -0,0 +1,10 @@ +import {App} from 'ionic/ionic'; + +@App({ + templateUrl: 'main.html' +}) + +class DemoApp { + blur() { + } +} diff --git a/demos/blur/main.html b/demos/blur/main.html new file mode 100644 index 0000000000..420478fa8c --- /dev/null +++ b/demos/blur/main.html @@ -0,0 +1,13 @@ + + + Blur + + + + + + +
" +

Blurred!

+
+ diff --git a/ionic/components.ts b/ionic/components.ts index 31d369a9dd..895be1f630 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -2,6 +2,7 @@ export * from 'ionic/components/app/app' export * from 'ionic/components/app/id' export * from 'ionic/components/action-sheet/action-sheet' +export * from 'ionic/components/blur/blur' export * from 'ionic/components/button/button' export * from 'ionic/components/card/card' export * from 'ionic/components/checkbox/checkbox' diff --git a/ionic/components/blur/blur.ts b/ionic/components/blur/blur.ts new file mode 100644 index 0000000000..798731b47d --- /dev/null +++ b/ionic/components/blur/blur.ts @@ -0,0 +1,10 @@ +import {Directive, Renderer, ElementRef} from 'angular2/angular2'; + +@Directive({ + selector: '[ion-blur]' +}) +export class Blur { + constructor(private elementRef: ElementRef, private renderer: Renderer) { + renderer.setElementStyle(elementRef, '-webkit-backdrop-filter', 'blur(10px)'); + } +} diff --git a/ionic/config/config.ts b/ionic/config/config.ts index a83e335079..db590a37c0 100644 --- a/ionic/config/config.ts +++ b/ionic/config/config.ts @@ -1,3 +1,11 @@ +/** +* @ngdoc service +* @name Config +* @module ionic +* @description +* IonicConfig allows you to set the modes of your components +*/ + import {IonicPlatform} from '../platform/platform'; import {isObject, isDefined, isFunction, extend} from '../util/util'; @@ -18,6 +26,29 @@ export class IonicConfig { /** * For setting and getting multiple config values */ + + /** + * @name settings() + * @description + * IonicConfig lets you change multiple or a single value in an apps mode configuration. Things such as tab placement, icon changes, and view animations can be set here. + * + * + * @usage + * ```ts + * import {IonicConfig} from 'ionic/ionic'; + * @App({ + * template: `` + * config: { + * backButtonText: 'Go Back', + * iconMode: 'ios', + * modalEnter: 'modal-slide-in', + * modalLeave: 'modal-slide-out', + * tabBarPlacement: 'bottom', + * viewTransition: 'ios', + * } + * }) + * ``` + */ settings() { const args = arguments; diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index 0f1c6f918d..3b55552fd8 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -5,6 +5,7 @@ import {Menu} from '../components/menu/menu'; import {MenuToggle} from '../components/menu/menu-toggle'; import {MenuClose} from '../components/menu/menu-close'; import {Button} from '../components/button/button'; +import {Blur} from '../components/blur/blur'; import {Content} from '../components/content/content'; import {Scroll} from '../components/scroll/scroll'; import {Refresher} from '../components/scroll/pull-to-refresh'; @@ -48,6 +49,7 @@ export const IONIC_DIRECTIVES = [ MenuClose, Button, + Blur, Content, Scroll, Refresher, diff --git a/ionic/platform/platform.ts b/ionic/platform/platform.ts index 4311fa49da..a3335126f1 100644 --- a/ionic/platform/platform.ts +++ b/ionic/platform/platform.ts @@ -1,3 +1,12 @@ +/** ++* @ngdoc service ++* @name platform ++* @module ionic ++* @description ++* IonicPlatform returns the availble information about your current platform ++*/ + + import * as util from '../util/util'; import * as dom from '../util/dom'; @@ -20,17 +29,44 @@ export class IonicPlatform { // ********************************************** /** - * TODO - * @param {TODO} platformName TODO - * @returns {TODO} TODO + * @param {string} platformName + * @returns {bool} + * + * ``` + * import {IonicPlatform} 'ionic/ionic'; + * export MyClass { + * constructor(platform: IonicPlatform){ + * this.platform = platform; + * if(this.platform.is('ios'){ + * // what ever you need to do for + * // if the platfomr is ios + * } + * } + * } + * ``` */ is(platformName) { return (this._platforms.indexOf(platformName) > -1); } /** - * TODO - * @returns {TODO} TODO + * @returns {array} the array of platforms + * @description + * Depending on what device you are on, `platforms` can return multiple values. + * Each possible value is a hierarchy of platforms. For example, on an iPhone, + * it would return mobile, ios, and iphone. + * + * ``` + * import {IonicPlatform} 'ionic/ionic'; + * export MyClass { + * constructor(platform: IonicPlatform){ + * this.platform = platform; + * console.log(this.platform.platforms()); + * // This will return an array of all the availble platforms + * // From if your on mobile, to mobile os, and device name + * } + * } + * ``` */ platforms() { // get the array of active platforms, which also knows the hierarchy, @@ -40,8 +76,24 @@ export class IonicPlatform { /** * TODO - * @param {TODO} platformName TODO - * @returns {TODO} TODO + * @param {string} platformName + * @returns {object} + * @description + * Returns an object containing the os version + * + * ``` + * import {IonicPlatform} 'ionic/ionic'; + * export MyClass { + * constructor(platform: IonicPlatform){ + * this.platform = platform; + * console.log(this.platform.versions('android')); + * // Returns an object with the os version as a string, + * // The Major version as a string + * // The Minor version as a string + * } + * } + * ``` + * */ versions(platformName) { if (arguments.length) { @@ -55,7 +107,22 @@ export class IonicPlatform { /** * TODO - * @returns {TODO} TODO + * @returns {promise} + * @description + * Returns a promise when the platform is ready and native functionality can be called + * + * ``` + * import {IonicPlatform} 'ionic/ionic'; + * export MyClass { + * constructor(platform: IonicPlatform){ + * this.platform = platform; + * this.platform.ready().then(() => { + * console.log('Platform ready'); + * // The platform is now ready, execute any native code you want + * }); + * } + * } + * ``` */ ready() { return this._readyPromise;