From d7db59edf1c5b97ac754317bf0926d35a11e1e28 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Mon, 18 Jan 2016 15:01:27 +0100 Subject: [PATCH 1/9] fix(Storage): getJson() implementation --- ionic/platform/storage/storage.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/ionic/platform/storage/storage.ts b/ionic/platform/storage/storage.ts index b1530c2339..2299b3a9bd 100644 --- a/ionic/platform/storage/storage.ts +++ b/ionic/platform/storage/storage.ts @@ -20,12 +20,14 @@ export class Storage { return this._strategy.get(key); } getJson(key) { - try { - return JSON.parse(this._strategy.get(key)); - } catch(e) { - console.warn('Storage getJson(): unable to parse value for key', key,' as JSON') - return null; - } + return this.get(key).then(value => { + try { + return JSON.parse(value); + } catch (e) { + console.warn('Storage getJson(): unable to parse value for key', key, ' as JSON'); + throw e; // rethrowing exception so it can be handled with .catch() + } + }); } set(key, value) { return this._strategy.set(key, value); From 3f4948b99d489742a228e5e5b2b52886dea0ade8 Mon Sep 17 00:00:00 2001 From: Tim Lancina Date: Tue, 19 Jan 2016 16:37:51 -0600 Subject: [PATCH 2/9] fix(animation): fix type error Closes https://github.com/driftyco/ionic/issues/5042. --- ionic/animations/animation.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ionic/animations/animation.ts b/ionic/animations/animation.ts index e01b85d32b..ff4b752211 100644 --- a/ionic/animations/animation.ts +++ b/ionic/animations/animation.ts @@ -209,15 +209,15 @@ export class Animation { get before() { return { - addClass: (className) => { + addClass: (className): Animation => { this._bfAdd.push(className); return this; }, - removeClass: (className) => { + removeClass: (className): Animation => { this._bfRmv.push(className); return this; }, - setStyles: (styles) => { + setStyles: (styles): Animation => { this._bfSty = styles; return this; } @@ -226,11 +226,11 @@ export class Animation { get after() { return { - addClass: (className) => { + addClass: (className: string): Animation => { this._afAdd.push(className); return this; }, - removeClass: (className) => { + removeClass: (className: string): Animation => { this._afRmv.push(className); return this; } From 2885ceb1b64c242477d4ede18d5629888c30be7f Mon Sep 17 00:00:00 2001 From: Eddie Lau 3dd13 Date: Wed, 20 Jan 2016 12:15:46 +0800 Subject: [PATCH 3/9] mark parameters optional --- ionic/platform/storage/storage.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ionic/platform/storage/storage.ts b/ionic/platform/storage/storage.ts index dfd447f14c..ac6e0c3963 100644 --- a/ionic/platform/storage/storage.ts +++ b/ionic/platform/storage/storage.ts @@ -13,7 +13,7 @@ export class Storage { private _strategy: any; - constructor(strategyCls: IStorageEngine, options: any) { + constructor(strategyCls: IStorageEngine, options?: any) { this._strategy = new strategyCls(options); } get(key: string): any { @@ -33,7 +33,7 @@ export class Storage { remove(key: string) { return this._strategy.remove(key); } - query(query: string, params: any) { + query(query: string, params?: any) { return this._strategy.query(query, params); } } From 6da776213996e3ebf58b176ae5b28fedad13e336 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 20 Jan 2016 14:35:22 +0100 Subject: [PATCH 4/9] v2: feat(Storage): adds setJson() method --- ionic/platform/storage/storage.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ionic/platform/storage/storage.ts b/ionic/platform/storage/storage.ts index 90ee2aab95..6ef19eaca5 100644 --- a/ionic/platform/storage/storage.ts +++ b/ionic/platform/storage/storage.ts @@ -29,6 +29,13 @@ export class Storage { } }); } + setJson(key: string, value: any): Promise { + try { + return this.set(key, JSON.stringify(value)); + } catch (e) { + return Promise.reject(e); + } + } set(key: string, value: any) { return this._strategy.set(key, value); } From da9d8922aab88c6a4f2b83538c972afce93aaad3 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 20 Jan 2016 09:00:32 -0600 Subject: [PATCH 5/9] docs: add code of conduct --- CODE_OF_CONDUCT.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 CODE_OF_CONDUCT.md diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000000..5cdfe9ed03 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,11 @@ +# Contributor Code of Conduct + +As contributors and maintainers of the Ionic project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities. + +Communication through any of Ionic's channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. + +We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the Ionic project to do the same. + +If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate. + +If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at [hi@ionicframework.com](mailto:hi@ionicframework.com). From 94ef1f4ce1646f7357b20ee86c3d1679750abdbb Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 20 Jan 2016 09:09:19 -0600 Subject: [PATCH 6/9] chore(package): add npm keywords property --- package.json | 2 +- scripts/npm/package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2b52558b00..9cca29f9f9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "link": "npm install && gulp src && npm link" }, "dependencies": { - "angular2": "2.0.0-beta.0", + "angular2": "2.0.0-beta.1", "colors": "^1.1.2", "es6-promise": "^3.0.2", "es6-shim": "0.33.6", diff --git a/scripts/npm/package.json b/scripts/npm/package.json index 1ef75bd1b3..84c520c740 100644 --- a/scripts/npm/package.json +++ b/scripts/npm/package.json @@ -2,6 +2,7 @@ "name": "ionic-framework", "version": "2.0.0-alpha.<%= ionicVersion %>", "license": "Apache-2.0", + "keywords": ["ionic", "framework", "mobile", "app", "hybrid", "webapp"], "repository": { "type": "git", "url": "https://github.com/driftyco/ionic2.git" From ee106377fccfd72b01333db9decff3a54d92e072 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 20 Jan 2016 11:15:01 -0600 Subject: [PATCH 7/9] chore(angular): upgrade to angular 2.0.0-beta.1 Biggest change was that renderer takes and not just . --- gulpfile.js | 2 + ionic/components/action-sheet/action-sheet.ts | 2 +- ionic/components/alert/alert.ts | 9 +-- ionic/components/app/id.ts | 4 +- ionic/components/button/button.ts | 34 ++++++--- ionic/components/checkbox/checkbox.ts | 17 ++--- ionic/components/icon/icon.ts | 10 +-- ionic/components/input/input.ts | 4 +- ionic/components/label/label.ts | 2 +- ionic/components/list/list.ts | 2 +- ionic/components/menu/menu.ts | 4 +- ionic/components/nav/nav-controller.ts | 8 +-- ionic/components/nav/nav.ts | 2 +- ionic/components/nav/view-controller.ts | 6 +- ionic/components/radio/radio.ts | 30 ++++---- ionic/components/segment/segment.ts | 12 +++- ionic/components/select/select.ts | 4 +- ionic/components/tabs/tab.ts | 2 +- ionic/components/tabs/tabs.ts | 19 ++--- ionic/components/text-input/text-input.ts | 69 +++++++++++++------ ionic/components/toggle/toggle.ts | 28 ++++---- 21 files changed, 163 insertions(+), 107 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index feb562790e..89ad502a4a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -159,6 +159,8 @@ gulp.task('transpile.no-typecheck', function(){ .pipe(gulp.dest('dist')); }); +gulp.task('typecheck', ['transpile.typecheck']); + gulp.task('transpile.typecheck', function(){ var merge = require('merge2'); var stripDebug = require('gulp-strip-debug'); diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 07cac4059d..8812877a91 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -175,7 +175,7 @@ class ActionSheetCmp { this.d = params.data; if (this.d.cssClass) { - renderer.setElementClass(elementRef, this.d.cssClass, true); + renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true); } } diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index 1ebf9bae36..3b570eb713 100644 --- a/ionic/components/alert/alert.ts +++ b/ionic/components/alert/alert.ts @@ -279,14 +279,12 @@ export class Alert extends ViewController { host: { 'role': 'dialog', '[attr.aria-labelledby]': 'hdrId', - '[attr.aria-describedby]': 'descId', - '[class]': 'cssClass' + '[attr.aria-describedby]': 'descId' }, directives: [NgClass, NgSwitch, NgIf, NgFor] }) class AlertCmp { activeId: string; - cssClass: string; descId: string; d: any; hdrId: string; @@ -304,7 +302,10 @@ class AlertCmp { renderer: Renderer ) { this.d = params.data; - this.cssClass = this.d.cssClass || ''; + + if (this.d.cssClass) { + renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true); + } this.id = (++alertIds); this.descId = ''; diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts index 9f732c7f23..54121f3218 100644 --- a/ionic/components/app/id.ts +++ b/ionic/components/app/id.ts @@ -41,7 +41,7 @@ import {IonicApp} from './app'; }) export class IdRef { private _component: any; - + @Input() id: string; constructor(private _app: IonicApp, elementRef: ElementRef, appViewManager: AppViewManager) { @@ -88,6 +88,6 @@ export class Attr { * @private */ ngOnInit() { - this._renderer.setElementAttribute(this._elementRef, this.attr, ''); + this._renderer.setElementAttribute(this._elementRef.nativeElement, this.attr, ''); } } diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index a239bf34e3..c80f9e3cd5 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -57,7 +57,7 @@ export class Button { let element = _elementRef.nativeElement; if (config.get('hoverCSS') === false) { - _renderer.setElementClass(_elementRef, 'disable-hover', true); + _renderer.setElementClass(_elementRef.nativeElement, 'disable-hover', true); } if (element.hasAttribute('ion-item')) { @@ -100,18 +100,21 @@ export class Button { /** * @private */ - addClass(className) { - this._renderer.setElementClass(this._elementRef, className, true); + addClass(className: string) { + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } /** * @private */ - setRole(val) { + setRole(val: string) { this._role = val; } - _readIcon(element) { + /** + * @private + */ + private _readIcon(element: HTMLElement) { // figure out if and where the icon lives in the button let childNodes = element.childNodes; let childNode; @@ -149,7 +152,10 @@ export class Button { } } - _readAttrs(element) { + /** + * @private + */ + private _readAttrs(element: HTMLElement) { let elementAttrs = element.attributes; let attrName; for (let i = 0, l = elementAttrs.length; i < l; i++) { @@ -175,10 +181,13 @@ export class Button { } } - _assignCss(assignCssClass) { + /** + * @private + */ + private _assignCss(assignCssClass: boolean) { let role = this._role; if (role) { - this._renderer.setElementClass(this._elementRef, role, assignCssClass); // button + this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button this._setClass(this._style, assignCssClass); // button-clear this._setClass(this._shape, assignCssClass); // button-round @@ -193,16 +202,19 @@ export class Button { } } - _setClass(type, assignCssClass) { + /** + * @private + */ + private _setClass(type: string, assignCssClass: boolean) { if (type) { - this._renderer.setElementClass(this._elementRef, this._role + '-' + type, assignCssClass); + this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type, assignCssClass); } } /** * @private */ - static setRoles(contentButtonChildren, role) { + static setRoles(contentButtonChildren, role: string) { let buttons = contentButtonChildren.toArray(); buttons.forEach(button => { button.setRole(role); diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index a80f54cde9..71c0cb1ac1 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -35,14 +35,15 @@ import {Form} from '../../util/form'; '
' + '
' + '
' + - '' + + '' + '' + '' + '' }) export class Checkbox { private _checked: boolean; - private labelId: string; + private _labelId: string; + @Input() value: string = ''; @Input() disabled: boolean = false; @Input() id: string; @@ -66,11 +67,11 @@ export class Checkbox { ngOnInit() { if (!this.id) { this.id = 'chk-' + this._form.nextId(); - this._renderer.setElementAttribute(this._elementRef, 'id', this.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id); } - this.labelId = 'lbl-' + this.id; - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); + this._labelId = 'lbl-' + this.id; + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this._labelId); } /** @@ -81,14 +82,14 @@ export class Checkbox { this.checked = !this.checked; } - @Input() - get checked() { + @Input() + get checked(): boolean { return !!this._checked; } set checked(val) { this._checked = !!val; - this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString()); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString()); this.onChange(this._checked); } diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 758b81f0d0..d2d65e837a 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -75,7 +75,7 @@ export class Icon { */ ngOnDestroy() { if (this._css) { - this._renderer.setElementClass(this._elementRef, this._css, false); + this._renderer.setElementClass(this._elementRef.nativeElement, this._css, false); } } @@ -146,12 +146,12 @@ export class Icon { if (this._css !== css) { if (this._css) { - this._renderer.setElementClass(this._elementRef, this._css, false); + this._renderer.setElementClass(this._elementRef.nativeElement, this._css, false); } this._css = css; - this._renderer.setElementClass(this._elementRef, css, true); + this._renderer.setElementClass(this._elementRef.nativeElement, css, true); - this._renderer.setElementAttribute(this._elementRef, 'aria-label', + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-label', css.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', ' ')); } } @@ -161,7 +161,7 @@ export class Icon { * @param {string} add class name */ addClass(className: string) { - this._renderer.setElementClass(this._elementRef, className, true); + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } } diff --git a/ionic/components/input/input.ts b/ionic/components/input/input.ts index 3a81f795e2..43020401f6 100644 --- a/ionic/components/input/input.ts +++ b/ionic/components/input/input.ts @@ -357,7 +357,7 @@ export class ItemInput { * @private */ focusChange(inputHasFocus) { - this._renderer.setElementClass(this._elementRef, 'input-focused', inputHasFocus); + this._renderer.setElementClass(this._elementRef.nativeElement, 'input-focused', inputHasFocus); if (!inputHasFocus) { this.deregMove(); } @@ -375,7 +375,7 @@ export class ItemInput { */ hasValue(inputValue) { let inputHasValue = !!(inputValue && inputValue !== ''); - this._renderer.setElementClass(this._elementRef, 'input-has-value', inputHasValue); + this._renderer.setElementClass(this._elementRef.nativeElement, 'input-has-value', inputHasValue); } /** diff --git a/ionic/components/label/label.ts b/ionic/components/label/label.ts index 26a0acbc45..894e735e21 100644 --- a/ionic/components/label/label.ts +++ b/ionic/components/label/label.ts @@ -54,7 +54,7 @@ export class Label { * @param {string} add class name */ addClass(className: string) { - this._renderer.setElementClass(this._elementRef, className, true); + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } } diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index cc8ace33d5..49fc718339 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -153,7 +153,7 @@ export class ListHeader { public set id(val: string) { this._id = val; - this._renderer.setElementAttribute(this._elementRef, 'id', val); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val); } } diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index cb5f57615f..aed3e65fc0 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -151,7 +151,7 @@ export class Menu extends Ion { if (self.side !== 'left' && self.side !== 'right') { self.side = 'left'; } - self._renderer.setElementAttribute(self._elementRef, 'side', self.side); + self._renderer.setElementAttribute(self._elementRef.nativeElement, 'side', self.side); if (self.swipeEnabled === 'false') { self.isSwipeEnabled = false; @@ -209,7 +209,7 @@ export class Menu extends Ion { type = this._config.get('menuType'); } this.type = type; - this._renderer.setElementAttribute(this._elementRef, 'menuType', type); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'menuType', type); } /** diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index a63cdbfd9f..2ca22392ab 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1102,7 +1102,7 @@ export class NavController extends Ion { // class to the nav when it's finished its first transition if (!this._init) { this._init = true; - this._renderer.setElementClass(this.elementRef, 'has-views', true); + this._renderer.setElementClass(this.elementRef.nativeElement, 'has-views', true); } // allow clicks and enable the app again @@ -1178,12 +1178,12 @@ export class NavController extends Ion { // auto-add page css className created from component JS class name let cssClassName = pascalCaseToDashCase(view.componentType['name']); - this._renderer.setElementClass(pageElementRef, cssClassName, true); + this._renderer.setElementClass(pageElementRef.nativeElement, cssClassName, true); view.addDestroy(() => { // ensure the element is cleaned up for when the view pool reuses this element - this._renderer.setElementAttribute(pageElementRef, 'class', null); - this._renderer.setElementAttribute(pageElementRef, 'style', null); + this._renderer.setElementAttribute(pageElementRef.nativeElement, 'class', null); + this._renderer.setElementAttribute(pageElementRef.nativeElement, 'style', null); // remove the page from its container let index = viewContainer.indexOf(hostViewRef); diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 2ee0c999c6..23e59fecae 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -101,7 +101,7 @@ import {ViewController} from './view-controller'; */ @Component({ selector: 'ion-nav', - template: '' + template: '
' }) export class Nav extends NavController { @Input() root: Type; diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 8956c3db7a..34062723d3 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -165,11 +165,11 @@ export class ViewController { this._hdAttr = (shouldShow ? null : ''); - renderer.setElementAttribute(this._pgRef, 'hidden', this._hdAttr); + renderer.setElementAttribute(this._pgRef.nativeElement, 'hidden', this._hdAttr); let navbarRef = this.navbarRef(); if (navbarRef) { - renderer.setElementAttribute(navbarRef, 'hidden', this._hdAttr); + renderer.setElementAttribute(navbarRef.nativeElement, 'hidden', this._hdAttr); } } } @@ -177,7 +177,7 @@ export class ViewController { setZIndex(zIndex: number, renderer: Renderer) { if (this._pgRef && zIndex !== this.zIndex) { this.zIndex = zIndex; - renderer.setElementStyle(this._pgRef, 'z-index', zIndex.toString()); + renderer.setElementStyle(this._pgRef.nativeElement, 'z-index', zIndex.toString()); } } diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 402cfbe7f6..24023bf53c 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -44,12 +44,12 @@ import {isDefined} from '../../util/util'; }) export class RadioButton { labelId: any; - + @Input() checked: any = false; @Input() disabled: boolean = false; @Input() id: string; @Input() value: string = ''; - + @Output() select: EventEmitter = new EventEmitter(); constructor( @@ -66,17 +66,17 @@ export class RadioButton { ngOnInit() { if (!this.id) { this.id = 'rb-' + this._form.nextId(); - this._renderer.setElementAttribute(this._elementRef, 'id', this.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id); } this.labelId = 'lbl-' + this.id; - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId); let checked = this.checked; if (typeof checked === 'string') { this.checked = (checked === '' || checked === 'true'); } this.isChecked = this.checked; - this._renderer.setElementAttribute(this._elementRef, 'checked', null); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'checked', null); } /** @@ -89,7 +89,7 @@ export class RadioButton { } public set isChecked(isChecked) { - this._renderer.setElementAttribute(this._elementRef, 'aria-checked', isChecked); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', isChecked); } /** @@ -155,13 +155,13 @@ export class RadioButton { } }) export class RadioGroup { + id; + value; + @Output() change: EventEmitter = new EventEmitter(); @ContentChildren(RadioButton) private _buttons; @ContentChild(ListHeader) private _header; - id: any; - value: any; - constructor( @Optional() ngControl: NgControl, private _renderer: Renderer, @@ -180,7 +180,7 @@ export class RadioGroup { * the checked value. * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L34 */ - public writeValue(value) { + writeValue(value) { this.value = isDefined(value) ? value : ''; if (this._buttons) { let buttons = this._buttons.toArray(); @@ -188,7 +188,7 @@ export class RadioGroup { let isChecked = (button.value === this.value); button.isChecked = isChecked; if (isChecked) { - this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id); } } } @@ -215,7 +215,7 @@ export class RadioGroup { * https://github.com/angular/angular/blob/master/modules/angular2/src/forms/directives/shared.ts#L27 * @param {Function} fn the onChange event handler. */ - public registerOnChange(fn) { this.onChange = fn; } + registerOnChange(fn) { this.onChange = fn; } /** * @private @@ -223,7 +223,7 @@ export class RadioGroup { * the onTouched event handler that marks the model (Control) as touched. * @param {Function} fn onTouched event handler. */ - public registerOnTouched(fn) { this.onTouched = fn; } + registerOnTouched(fn) { this.onTouched = fn; } /** * @private @@ -234,7 +234,7 @@ export class RadioGroup { if (!header.id) { header.id = 'rg-hdr-' + this.id; } - this._renderer.setElementAttribute(this._elementRef, 'aria-describedby', header.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', header.id); } this._buttons.toArray().forEach(button => { @@ -250,7 +250,7 @@ export class RadioGroup { if (isChecked) { this.writeValue(button.value); //this.onChange(button.value); - this._renderer.setElementAttribute(this._elementRef, 'aria-activedescendant', button.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-activedescendant', button.id); } } }); diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index 20128632a8..e683d245c9 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -69,15 +69,21 @@ export class SegmentButton { this.select.emit(this); } + /** + * @private + */ ngOnInit() { if (!isDefined(this.value)) { console.warn(' requires a "value" attribute'); } } - public set isActive(isActive) { - this._renderer.setElementClass(this._elementRef, 'segment-activated', isActive); - this._renderer.setElementAttribute(this._elementRef, 'aria-pressed', isActive); + /** + * @private + */ + set isActive(isActive) { + this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive); } } diff --git a/ionic/components/select/select.ts b/ionic/components/select/select.ts index 73ee70f51a..e43fba9005 100644 --- a/ionic/components/select/select.ts +++ b/ionic/components/select/select.ts @@ -147,11 +147,11 @@ export class Select { ngOnInit() { if (!this.id) { this.id = 'sel-' + this.form.nextId(); - this.renderer.setElementAttribute(this.elementRef, 'id', this.id); + this.renderer.setElementAttribute(this.elementRef.nativeElement, 'id', this.id); } this.labelId = 'lbl-' + this.id; - this.renderer.setElementAttribute(this.elementRef, 'aria-labelledby', this.labelId); + this.renderer.setElementAttribute(this.elementRef.nativeElement, 'aria-labelledby', this.labelId); } /** diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index f6a08d5ea6..8dd0f131ea 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -90,7 +90,7 @@ import {TabButton} from './tab-button'; '[attr.aria-labelledby]': '_btnId', 'role': 'tabpanel' }, - template: '' + template: '
' }) export class Tab extends NavController { public isSelected: boolean; diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 9e53c668b1..5e03a74a8d 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -69,16 +69,16 @@ export class Tabs extends Ion { private _tabs: Array = []; private _onReady = null; private _useHighlight: boolean; - + id: number; navbarContainerRef: ViewContainerRef; subPages: boolean; - + @Input() preloadTabs: any; @Input() tabbarIcons: string; @Input() tabbarPlacement: string; @Output() change: EventEmitter = new EventEmitter(); - + @ViewChild(TabHighlight) private _highlight: TabHighlight; @ViewChildren(TabButton) private _btns; @@ -92,7 +92,7 @@ export class Tabs extends Ion { private _renderer: Renderer ) { super(_elementRef); - + this.id = ++tabIds; this.subPages = _config.getBoolean('tabSubPages'); this._useHighlight = _config.getBoolean('tabbarHighlight'); @@ -125,7 +125,7 @@ export class Tabs extends Ion { this._highlight.select(this.getSelected()); }); } - + this._btns.toArray().forEach((tabButton: TabButton) => { tabButton.select.subscribe((tab: Tab) => { this.select(tab); @@ -133,12 +133,15 @@ export class Tabs extends Ion { }); } - _setConfig(attrKey, fallback) { + /** + * @private + */ + private _setConfig(attrKey, fallback) { var val = this[attrKey]; if (isUndefined(val)) { val = this._config.get(attrKey); } - this._renderer.setElementAttribute(this._elementRef, attrKey, val); + this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val); } /** @@ -248,7 +251,7 @@ export class Tabs extends Ion { * "Touch" the active tab, going back to the root view of the tab * or optionally letting the tab handle the event */ - _touchActive(tab) { + private _touchActive(tab) { let active = tab.getActive(); if (!active) { diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index b014269053..899eafe5c2 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -13,13 +13,15 @@ import {CSS, hasFocus} from '../../util/dom'; } }) export class TextInput { - @Input() value: string; - @Input() ngModel: any; - @Output() valueChange: EventEmitter = new EventEmitter(); - @Output() focusChange: EventEmitter = new EventEmitter(); - public type: string; private _relocated: boolean; + type: string; + + @Input() ngModel; + @Input() value: string; + @Output() focusChange: EventEmitter = new EventEmitter(); + @Output() valueChange: EventEmitter = new EventEmitter(); + constructor( @Attribute('type') type: string, private _elementRef: ElementRef, @@ -28,6 +30,9 @@ export class TextInput { this.type = type || 'text'; } + /** + * @private + */ ngOnInit() { if (this.ngModel) { this.value = this.ngModel; @@ -36,30 +41,45 @@ export class TextInput { } } + /** + * @private + */ @HostListener('keyup', ['$event']) - _keyup(ev) { + private _keyup(ev) { this.valueChange.emit(ev.target.value); } + /** + * @private + */ @HostListener('focus') - _focus() { + private _focus() { this.focusChange.emit(true); } + /** + * @private + */ @HostListener('blur') - _blur() { + private _blur() { this.focusChange.emit(false); this.hideFocus(false); } - labelledBy(val) { - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', val); + labelledBy(val: string) { + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', val); } + /** + * @private + */ setFocus() { this.element().focus(); } + /** + * @private + */ relocate(shouldRelocate: boolean, inputRelativeY?) { if (this._relocated !== shouldRelocate) { @@ -76,7 +96,7 @@ export class TextInput { } else { focusedInputEle.classList.remove('hide-focused-input'); focusedInputEle.style[CSS.transform] = ''; - let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-input'); + let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-input'); if (clonedInputEle) { clonedInputEle.parentNode.removeChild(clonedInputEle); } @@ -86,7 +106,10 @@ export class TextInput { } } - hideFocus(shouldHideFocus) { + /** + * @private + */ + hideFocus(shouldHideFocus: boolean) { let focusedInputEle = this.element(); if (shouldHideFocus) { @@ -99,32 +122,38 @@ export class TextInput { } else { focusedInputEle.classList.remove('hide-focused-input'); focusedInputEle.style[CSS.transform] = ''; - let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden'); + let clonedInputEle = focusedInputEle.parentElement.querySelector('.cloned-hidden'); if (clonedInputEle) { clonedInputEle.parentNode.removeChild(clonedInputEle); } } } - hasFocus() { + hasFocus(): boolean { return hasFocus(this.element()); } - addClass(className) { - this._renderer.setElementClass(this._elementRef, className, true); + /** + * @private + */ + addClass(className: string) { + this._renderer.setElementClass(this._elementRef.nativeElement, className, true); } - hasClass(className) { - this._elementRef.nativeElement.classList.contains(className); + hasClass(className): boolean { + return this._elementRef.nativeElement.classList.contains(className); } - element() { + /** + * @private + */ + element(): HTMLElement { return this._elementRef.nativeElement; } } -function cloneInput(srcInput, addCssClass) { +function cloneInput(srcInput, addCssClass: string) { let clonedInputEle = srcInput.cloneNode(true); clonedInputEle.classList.add(addCssClass); clonedInputEle.classList.remove('hide-focused-input'); diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts index 43c2ef21d3..22346a282b 100644 --- a/ionic/components/toggle/toggle.ts +++ b/ionic/components/toggle/toggle.ts @@ -69,17 +69,19 @@ import {pointerCoord} from '../../util/dom'; `` }) export class Toggle { + private _checked: boolean; + private _mode: string; + private _startX; + private _touched: number = 0; + private addMoveListener; + private removeMoveListener; + + public isActivated: boolean; + public labelId: string; + @Input() value: string = ''; @Input() disabled: boolean = false; @Input() id: string; - private _checked: boolean; - private _touched: number = 0; - private _mode: string; - private _startX: any; - private addMoveListener: any; - private removeMoveListener: any; - public labelId: string; - public isActivated: boolean; constructor( private _form: Form, @@ -143,11 +145,11 @@ export class Toggle { ngOnInit() { if (!this.id) { this.id = 'tgl-' + this._form.nextId(); - this._renderer.setElementAttribute(this._elementRef, 'id', this.id); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', this.id); } this.labelId = 'lbl-' + this.id; - this._renderer.setElementAttribute(this._elementRef, 'aria-labelledby', this.labelId); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-labelledby', this.labelId); } /** @@ -164,14 +166,14 @@ export class Toggle { set checked(val: boolean) { this._checked = !!val; - this._renderer.setElementAttribute(this._elementRef, 'aria-checked', this._checked.toString()); + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-checked', this._checked.toString()); this.onChange(this._checked); } /** * @private */ - pointerDown(ev) { + private pointerDown(ev) { if (/touch/.test(ev.type)) { this._touched = Date.now(); } @@ -189,7 +191,7 @@ export class Toggle { /** * @private */ - pointerUp(ev) { + private pointerUp(ev) { if (this.isDisabled(ev)) return; let endX = pointerCoord(ev).x; From eeb0417d02e6628db9d3e73e298203f2146ce68d Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 20 Jan 2016 11:59:36 -0600 Subject: [PATCH 8/9] test(alert): add alert checkbox and fast close tests --- ionic/components/alert/test/basic/index.ts | 69 +++++++++++++++++++++ ionic/components/alert/test/basic/main.html | 4 ++ 2 files changed, 73 insertions(+) diff --git a/ionic/components/alert/test/basic/index.ts b/ionic/components/alert/test/basic/index.ts index b292e89041..738a7ea64c 100644 --- a/ionic/components/alert/test/basic/index.ts +++ b/ionic/components/alert/test/basic/index.ts @@ -148,6 +148,75 @@ class E2EPage { }); } + doCheckbox() { + let alert = Alert.create(); + alert.setTitle('Checkbox!'); + + alert.addInput({ + type: 'checkbox', + label: 'Checkbox 1', + value: 'value1', + checked: true + }); + + alert.addInput({ + type: 'checkbox', + label: 'Checkbox 2', + value: 'value2' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Checkbox 3', + value: 'value3' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Checkbox 4', + value: 'value4' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Checkbox 5', + value: 'value5' + }); + + alert.addInput({ + type: 'checkbox', + label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', + value: 'value6' + }); + + alert.addButton('Cancel'); + alert.addButton({ + text: 'Ok', + handler: data => { + console.log('Checkbox data:', data); + this.testCheckboxOpen = false; + this.testCheckboxResult = data; + } + }); + + this.nav.present(alert).then(() => { + this.testCheckboxOpen = true; + }); + } + + doFastClose() { + let alert = Alert.create({ + title: 'Alert!', + buttons: ['OK'] + }); + + this.nav.present(alert); + + setTimeout(() => { + alert.dismiss(); + }, 100); + } + } diff --git a/ionic/components/alert/test/basic/main.html b/ionic/components/alert/test/basic/main.html index d96c13930b..f359df4e55 100644 --- a/ionic/components/alert/test/basic/main.html +++ b/ionic/components/alert/test/basic/main.html @@ -9,6 +9,8 @@ + +
     Confirm Opened: {{testConfirmOpen}}
@@ -17,6 +19,8 @@
     Prompt Result: {{testPromptResult | json}}
     Radio Opened: {{testRadioOpen}}
     Radio Result: {{testRadioResult}}
+    Checkbox Opened: {{testCheckboxOpen}}
+    Checkbox Result: {{testCheckboxResult}}
   
From 72af685620515d5a1366b95b6fb5497e506f74bb Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 20 Jan 2016 12:24:54 -0600 Subject: [PATCH 9/9] fix(alert): fix css add class --- ionic/components/alert/alert.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ionic/components/alert/alert.ts b/ionic/components/alert/alert.ts index 3b570eb713..ef99b8cf0a 100644 --- a/ionic/components/alert/alert.ts +++ b/ionic/components/alert/alert.ts @@ -304,7 +304,9 @@ class AlertCmp { this.d = params.data; if (this.d.cssClass) { - renderer.setElementClass(elementRef.nativeElement, this.d.cssClass, true); + this.d.cssClass.split(' ').forEach(cssClass => { + renderer.setElementClass(_elementRef.nativeElement, cssClass, true); + }); } this.id = (++alertIds);