diff --git a/demos/datetime/main.html b/demos/datetime/main.html index 30d1ac17a74..8c23fca162c 100644 --- a/demos/datetime/main.html +++ b/demos/datetime/main.html @@ -52,7 +52,7 @@ Madison - + diff --git a/ionic/components/picker/picker.ts b/ionic/components/picker/picker.ts index bbf2c7e9743..6bbd5a95738 100644 --- a/ionic/components/picker/picker.ts +++ b/ionic/components/picker/picker.ts @@ -1,4 +1,5 @@ import {Component, ElementRef, Input, Output, EventEmitter, ViewChildren, QueryList, ViewChild, Renderer, HostListener, ViewEncapsulation} from '@angular/core'; +import {DomSanitizationService} from '@angular/platform-browser'; import {Animation} from '../../animations/animation'; import {Transition, TransitionOptions} from '../../transitions/transition'; @@ -88,7 +89,7 @@ export class Picker extends ViewController { template: '
{{col.prefix}}
' + '
' + - '' + '
' + @@ -123,7 +124,7 @@ class PickerColumnCmp { lastIndex: number; @Output() change: EventEmitter = new EventEmitter(); - constructor(config: Config) { + constructor(config: Config, private _sanitizer: DomSanitizationService) { this.rotateFactor = config.getNumber('pickerRotateFactor', 0); } @@ -342,15 +343,7 @@ class PickerColumnCmp { this.col.selectedIndex = Math.max(Math.abs(Math.round(y / this.optHeight)), 0); - let colElements = this.colEle.nativeElement.querySelectorAll('.picker-opt'); - if (colElements.length !== this.col.options.length) { - // TODO: temporary until [style.transform] is fixed within ng2 - console.warn('colElements.length!=this.col.options.length'); - return; - } - - for (var i = 0; i < colElements.length; i++) { - var ele: HTMLElement = colElements[i]; + for (var i = 0; i < this.col.options.length; i++) { var opt = this.col.options[i]; var optTop = (i * this.optHeight); var optOffset = (optTop + y); @@ -372,11 +365,8 @@ class PickerColumnCmp { translateY = optOffset; } - // TODO: setting by [style.transform]="o.transform" within the template is currently broke - ele.style[CSS.transform] = `rotateX(${rotateX}deg) translate3d(${translateX}px,${translateY}px,${translateZ}px)`; - ele.style[CSS.transitionDuration] = (duration > 0 ? duration + 'ms' : ''); - ele.classList[this.col.selectedIndex === i ? 'add' : 'remove']('picker-opt-selected'); - ele.classList[opt.disabled ? 'add' : 'remove']('picker-opt-disabled'); + opt._trans = this._sanitizer.bypassSecurityTrustStyle(`rotateX(${rotateX}deg) translate3d(${translateX}px,${translateY}px,${translateZ}px)`); + opt._dur = (duration > 0 ? duration + 'ms' : ''); } if (saveY) {