diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss index 77c371ba02..00bc71b453 100644 --- a/ionic/components/checkbox/checkbox.scss +++ b/ionic/components/checkbox/checkbox.scss @@ -4,19 +4,10 @@ .checkbox { - position: relative; cursor: pointer; @include user-select-none(); } -.checkbox input { - display: none; -} - -.checkbox .input-label { - max-width: 100%; -} - .checkbox[aria-disabled=true] { pointer-events: none; opacity: 0.5; diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts index cd8174623b..d666104663 100644 --- a/ionic/components/checkbox/test/basic/e2e.ts +++ b/ionic/components/checkbox/test/basic/e2e.ts @@ -4,7 +4,8 @@ it('should check apple via checkbox element click', function() { }); -it('should enable/check grape via buttons', function() { +it('should enable/check grape via buttons and submit form', function() { element(by.css('#e2eGrapeDisabled')).click(); element(by.css('#e2eGrapeChecked')).click(); + element(by.css('#e2eSubmit')).click(); }); diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html index eb7cfc0e0b..b0721e47e8 100644 --- a/ionic/components/checkbox/test/basic/main.html +++ b/ionic/components/checkbox/test/basic/main.html @@ -31,7 +31,7 @@
' + - '
' + + '
' + + '
' + '
' + '
' + - '
' + '
', + directives: [MediaSwitch] }) export class Switch extends IonInputItem { constructor( - @Optional() cd: NgControl, - renderer: Renderer, elementRef: ElementRef, - config: IonicConfig + config: IonicConfig, + @Optional() private cd: NgControl ) { super(elementRef, config); + this.tabIndex = 0; + this.onChange = (_) => {}; this.onTouched = (_) => {}; - this.renderer = renderer; - this.elementRef = elementRef; - this.cd = cd; - if(cd) cd.valueAccessor = this; + if (cd) cd.valueAccessor = this; } onInit() { super.onInit(); - console.log("switch onInit") + this.labelId = 'label-' + this.id; } - onAllChangesDone() { - return - console.log("switch onAllChangesDone") - if (this._checked !== void 0 && this.input.checked != this._checked) { - if (this.input.checked !== void 0) { - console.warn("switch checked is set in view template and Control declaration.\n" + - "Value: " + !!this._checked + " from Control takes precedence"); - } - this.input.checked = !!this._checked; - } - if (this._value !== void 0 && this.input.value != this._value) { - if (this.input.value !== void 0) { - console.warn("switch value is set in view template and Control declaration.\n" + - "Value: " + this._value + " from Control takes precedence"); - } - this.input.value = this._value; - } - if (this.input.value === void 0) { - this.input.value = "on"; - } - if (this.input.checked === void 0) { - this.input.checked = false; - } - //TODO check validity - this.cd.control._value = {"checked": !!this.input.checked, "value": this.input.value}; - - //TODO only want to call this once, we want to set input.checked directly on subsequent - // writeValue's - this.onAllChangesDone = () => {}; - // this.onChange({"checked": this.input.checked, "value": this.input.value}); + check(value) { + this.checked = !!value; + this.onChange(this.checked); } - //from clicking the label or selecting with keyboard - //view -> model (Control) toggle() { - this.input.checked = this._checked = !this.input.checked; - this.onChange({"checked": this.input.checked, "value": this.input.value}); + this.check(!this.checked); } - // Called by the model (Control) to update the view - writeValue(modelValue) { - let type = typeof modelValue; - switch (type) { - case "boolean": - // don't set input.value here, do it in onAllChangesDone - // because they might have set it in the view - this._checked = modelValue; break; - case "object": - if (modelValue.checked !== void 0) this._checked = !!modelValue.checked; - if (modelValue.value !== void 0) this._value = modelValue.value.toString(); - break; - default: - // don't set input.checked here, do it in onAllChangesDone - // because they might have set it in the view - this._value = modelValue.toString(); - } + click(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.toggle(); + } - //TODO we want to set input.checked directly after the first time - console.log("writeValue, " + this.input.id + " checked: " + this._checked); - console.log("writeValue " + this.input.id + " value: " + this._value); - - // this.cd.control._value = {"checked": this.input.checked, "value": this.input.value}; + writeValue(value) { + this.checked = value; } // Used by the view to update the model (Control) @@ -124,3 +143,11 @@ export class Switch extends IonInputItem { registerOnTouched(fn) { this.onTouched = fn; } } + +const ACTIVATED = 'activated'; +const MOUSEDOWN = 'mousedown'; +const MOUSEMOVE = 'mousemove'; +const MOUSEUP = 'mouseup'; +const TOUCHSTART = 'touchstart'; +const TOUCHMOVE = 'touchmove'; +const TOUCHEND = 'touchend'; diff --git a/ionic/components/switch/test/basic/e2e.ts b/ionic/components/switch/test/basic/e2e.ts index e69de29bb2..d666104663 100644 --- a/ionic/components/switch/test/basic/e2e.ts +++ b/ionic/components/switch/test/basic/e2e.ts @@ -0,0 +1,11 @@ + +it('should check apple via checkbox element click', function() { + element(by.css('#e2eAppleCheckbox')).click(); +}); + + +it('should enable/check grape via buttons and submit form', function() { + element(by.css('#e2eGrapeDisabled')).click(); + element(by.css('#e2eGrapeChecked')).click(); + element(by.css('#e2eSubmit')).click(); +}); diff --git a/ionic/components/switch/test/basic/index.ts b/ionic/components/switch/test/basic/index.ts index e906bafacf..40e35c35b2 100644 --- a/ionic/components/switch/test/basic/index.ts +++ b/ionic/components/switch/test/basic/index.ts @@ -18,15 +18,27 @@ import { class IonicApp { constructor() { this.fruitsForm = new ControlGroup({ - "appleCtrl": new Control({"checked": false, "value": "apple"}), + "appleCtrl": new Control(), "bananaCtrl": new Control(true), - "cherryCtrl": new Control({"checked": false, "value": 12}), - "grapeCtrl": new Control("grape") + "cherryCtrl": new Control(false), + "grapeCtrl": new Control(true) }); + + this.grapeDisabled = true; + this.grapeChecked = true; + } + + toggleGrapeChecked() { + this.grapeChecked = !this.grapeChecked; + } + + toggleGrapeDisabled() { + this.grapeDisabled = !this.grapeDisabled; } doSubmit(ev) { console.log('Submitting form', this.fruitsForm.value); - event.preventDefault(); + this.formResults = JSON.stringify(this.fruitsForm.value); + ev.preventDefault(); } } diff --git a/ionic/components/switch/test/basic/main.html b/ionic/components/switch/test/basic/main.html index 494af7bb30..2f9fbaa6fa 100644 --- a/ionic/components/switch/test/basic/main.html +++ b/ionic/components/switch/test/basic/main.html @@ -4,32 +4,95 @@ -
+ - - - +
+
+ Unchecked +
+
+
+
+
+
+
+
+ +
+
+ Unchecked activated +
+
+
+
+
+
+
+
+ +
+
+ Checked +
+
+
+
+
+
+
+
+ +
+
+ Checked activated +
+
+
+
+
+
+
+
+ + + Apple, value=apple, init checked - - - + + Banana, init no checked/value attributes - - - + + Cherry, value=cherry, init disabled - - - + + Grape, value=grape, init checked, disabled - + + + + + + +
diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index 0b43d39b6a..fa7bf733e1 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -63,7 +63,8 @@ Platform.register({ mdRipple: true, tabBarPlacement: 'top', navTitleAlign: 'left', - viewTransition: 'md' + viewTransition: 'md', + touchEnabled: true }, isMatch(p) { // "silk" is kindle fire @@ -94,6 +95,7 @@ Platform.register({ // and not just an a spoofed user-agent string return /iphone|ipad|ipod/i.test(Platform.navigatorPlatform()); }, + touchEnabled: true, keyboardScrollAssist: true, viewTransition: 'ios', navTitleAlign: 'center',