javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into alpha38

Browse Source 
Conflicts:
	ionic/components/search-bar/search-bar.ts
	ionic/config/decorators.ts
This commit is contained in:
Adam Bradley
2015-10-07 10:59:15 -05:00
parent 0be37b201f 19aa828846
commit bdaed1b2ca
9 changed files with 163 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
demos/blur/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 517 KiB

21
demos/blur/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="../../css/ionic.css" rel="stylesheet">
</head>
<body>
<ion-app>
<ion-loading-icon></ion-loading-icon>
</ion-app>
<script src="../../js/ionic.bundle.js"></script>
<script>System.import("index");</script>
</body>
</html>

10
demos/blur/index.ts Normal file
View File

@ -0,0 +1,10 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
blur() {
}
}

13
demos/blur/main.html Normal file
View File

@ -0,0 +1,13 @@
<ion-toolbar>
<ion-title>Blur</ion-title>
</ion-toolbar>
<ion-content padding style="text-align:center; background: url('bg.jpg') no-repeat transparent; background-size: cover">
<button (click)="showBlur=true" primary>Blur</button>
<div ion-blur (click)="showBlur=false" *ng-if="showBlur" style="display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8);">"
<h2>Blurred!</h2>
</div>
</ion-content>

1
ionic/components.ts
View File

@ -2,6 +2,7 @@
export * from 'ionic/components/app/app' export * from 'ionic/components/app/app'
export * from 'ionic/components/app/id' export * from 'ionic/components/app/id'
export * from 'ionic/components/action-sheet/action-sheet' export * from 'ionic/components/action-sheet/action-sheet'
export * from 'ionic/components/blur/blur'
export * from 'ionic/components/button/button' export * from 'ionic/components/button/button'
export * from 'ionic/components/card/card' export * from 'ionic/components/card/card'
export * from 'ionic/components/checkbox/checkbox' export * from 'ionic/components/checkbox/checkbox'

10
ionic/components/blur/blur.ts Normal file
View File

@ -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)');
}
}

31
ionic/config/config.ts
View File

@ -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 {IonicPlatform} from '../platform/platform';
import {isObject, isDefined, isFunction, extend} from '../util/util'; import {isObject, isDefined, isFunction, extend} from '../util/util';
@ -17,6 +25,29 @@ export class IonicConfig {
/** /**
* For setting and getting multiple config values * 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: `<ion-nav [root]="root"></ion-nav>`
* config: {
* backButtonText: 'Go Back',
* iconMode: 'ios',
* modalEnter: 'modal-slide-in',
* modalLeave: 'modal-slide-out',
* tabBarPlacement: 'bottom',
* viewTransition: 'ios',
* }
* })
* ```
*/ */
settings() { settings() {
const args = arguments; const args = arguments;

2
ionic/config/directives.ts
View File

@ -5,6 +5,7 @@ import {Menu} from '../components/menu/menu';
import {MenuToggle} from '../components/menu/menu-toggle'; import {MenuToggle} from '../components/menu/menu-toggle';
import {MenuClose} from '../components/menu/menu-close'; import {MenuClose} from '../components/menu/menu-close';
import {Button} from '../components/button/button'; import {Button} from '../components/button/button';
import {Blur} from '../components/blur/blur';
import {Content} from '../components/content/content'; import {Content} from '../components/content/content';
import {Scroll} from '../components/scroll/scroll'; import {Scroll} from '../components/scroll/scroll';
import {Refresher} from '../components/scroll/pull-to-refresh'; import {Refresher} from '../components/scroll/pull-to-refresh';
@ -48,6 +49,7 @@ export const IONIC_DIRECTIVES = [
MenuClose, MenuClose,
Button, Button,
Blur,
Content, Content,
Scroll, Scroll,
Refresher, Refresher,

83
ionic/platform/platform.ts
View File

@ -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 util from '../util/util';
import * as dom from '../util/dom'; import * as dom from '../util/dom';
@ -20,17 +29,44 @@ export class IonicPlatform {
// ********************************************** // **********************************************
/** /**
* TODO * @param {string} platformName
* @param {TODO} platformName TODO * @returns {bool}
* @returns {TODO} TODO *
* ```
* 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) { is(platformName) {
return (this._platforms.indexOf(platformName) > -1); return (this._platforms.indexOf(platformName) > -1);
} }
/** /**
* TODO * @returns {array} the array of platforms
* @returns {TODO} TODO * @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() { platforms() {
// get the array of active platforms, which also knows the hierarchy, // get the array of active platforms, which also knows the hierarchy,
@ -40,8 +76,24 @@ export class IonicPlatform {
/** /**
* TODO * TODO
* @param {TODO} platformName TODO * @param {string} platformName
* @returns {TODO} TODO * @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) { versions(platformName) {
if (arguments.length) { if (arguments.length) {
@ -55,7 +107,22 @@ export class IonicPlatform {
/** /**
* TODO * 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() { ready() {
return this._readyPromise; return this._readyPromise;