From 9742c40a5184bb8a78e52883dad41326b35d4937 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Wed, 24 Dec 2014 15:50:16 +0000 Subject: [PATCH 1/9] IOS clarification makes more explicit the naming convention used in the Ember component for the IOS theme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 982375c..c0547cb 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ ENV['ember-cli-toggle'] = { defaultOn: 'True' // defaults to 'On' }; ``` +> note: the IOS theme is referred to as just `ios` not `ios7` as was indicated in the originating CSS source To exclude or not include a theme, means that it's css styles will not be bundled with your application, thus not polluting your app. From a7213d615a6e827e8957dbe5f7e64d2921d66352 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Thu, 25 Dec 2014 11:14:39 +0000 Subject: [PATCH 2/9] added support for textmate editor --- .tm_properties | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .tm_properties diff --git a/.tm_properties b/.tm_properties new file mode 100644 index 0000000..7f9675e --- /dev/null +++ b/.tm_properties @@ -0,0 +1,3 @@ +include="{$include,.travis.yml,.jshintrc,.gitignore}" +excludeInFileChooser="{$exclude,node_modules,bower_components,dist,tmp}" +excludeInFolderSearch="{$exclude,node_modules,bower_components,dist,tmp}" From 09858e2eb7dfa96d41c59382386e2e45466fdea4 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Thu, 25 Dec 2014 11:15:32 +0000 Subject: [PATCH 3/9] base text support --- app/components/x-toggle.js | 2 ++ app/templates/components/x-toggle.hbs | 10 ++++++++++ tests/dummy/app/styles/app.css | 2 +- tests/dummy/app/templates/application.hbs | 10 ++++++++++ vendor/ember-cli-toggle/base.css | 24 +++++++++++++++++++++++ 5 files changed, 47 insertions(+), 1 deletion(-) diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js index 407645e..ed0afbc 100644 --- a/app/components/x-toggle.js +++ b/app/components/x-toggle.js @@ -8,9 +8,11 @@ var config = ENV['ember-cli-toggle']; export default Ember.Component.extend({ tagName: 'span', + classNames: ['x-toggle-container'], theme: config.defaultTheme || 'default', off: config.defaultOff || 'Off', on: config.defaultOn || 'On', + showText: config.defaultShowText || false, size: config.defaultSize || 'medium', toggled: false, diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs index 6827f10..8f86d30 100644 --- a/app/templates/components/x-toggle.hbs +++ b/app/templates/components/x-toggle.hbs @@ -1,6 +1,16 @@ +{{#if showText}} + + {{on}} + +{{/if}} {{input id=forId type='checkbox' checked=toggled class='x-toggle'}} +{{#if showText}} + + {{off}} + +{{/if}} \ No newline at end of file diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css index 9adb5ad..40a4d5c 100644 --- a/tests/dummy/app/styles/app.css +++ b/tests/dummy/app/styles/app.css @@ -1,3 +1,3 @@ html, body { margin: 20px; -} +} \ No newline at end of file diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index d78cf5c..faa5320 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -49,3 +49,13 @@ {{x-toggle size='medium' theme='skewed'}} {{x-toggle size='large' theme='skewed'}} + +

Text Labels

+
+\{{x-toggle showText="true" on="hey" off="ho"}}
+
+
+ {{x-toggle size='small' on='hey' off='ho' showText="true" theme='default'}}
+ {{x-toggle size='medium' on='hey' off='ho' showText="true" theme='default'}}
+ {{x-toggle size='large' on='hey' off='ho' showText="true" theme='default'}} +
\ No newline at end of file diff --git a/vendor/ember-cli-toggle/base.css b/vendor/ember-cli-toggle/base.css index becc517..d16bf72 100644 --- a/vendor/ember-cli-toggle/base.css +++ b/vendor/ember-cli-toggle/base.css @@ -66,3 +66,27 @@ .x-toggle:checked + .x-toggle-btn:after { left: 50%; } + +.x-toggle-container .toggle-text { + display: inline-flex; + vertical-align: middle; + height: 100%; +} + +.x-toggle-container .toggle-text .small { + padding-bottom: 1.0rem; +} +.x-toggle-container .toggle-text .medium { + padding-bottom: 1.5rem; +} +.x-toggle-container .toggle-text .large { + padding-bottom: 2.0rem; +} + +.x-toggle-container .toggle-text.toggle-prefix { + padding-right: 0.25rem; +} + +.x-toggle-container .toggle-text.toggle-postfix { + padding-left: 0.25rem; +} From e3c039d8de5a216ed81346fee4483e9e22ae2434 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Thu, 25 Dec 2014 11:41:25 +0000 Subject: [PATCH 4/9] removed CSS double-namespacing to provide greater flexibility --- app/components/x-toggle.js | 5 +---- app/templates/components/x-toggle.hbs | 4 ++-- vendor/ember-cli-toggle/base.css | 9 ++++++--- vendor/ember-cli-toggle/themes/default.css | 6 +++--- vendor/ember-cli-toggle/themes/flat.css | 6 +++--- vendor/ember-cli-toggle/themes/flip.css | 18 +++++++++--------- vendor/ember-cli-toggle/themes/ios.css | 6 +++--- vendor/ember-cli-toggle/themes/light.css | 6 +++--- vendor/ember-cli-toggle/themes/skewed.css | 18 +++++++++--------- 9 files changed, 39 insertions(+), 39 deletions(-) diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js index ed0afbc..9795048 100644 --- a/app/components/x-toggle.js +++ b/app/components/x-toggle.js @@ -23,10 +23,7 @@ export default Ember.Component.extend({ }), sizeClass: computed('size', 'themeClass', function () { - var size = this.get('size') || 'medium'; - var themeClass = this.get('themeClass'); - - return themeClass + '-' + size; + return this.get('size'); }), forId: computed(function () { diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs index 8f86d30..3cc5941 100644 --- a/app/templates/components/x-toggle.hbs +++ b/app/templates/components/x-toggle.hbs @@ -1,5 +1,5 @@ {{#if showText}} - + {{on}} {{/if}} @@ -10,7 +10,7 @@ data-tg-on=on}}> {{#if showText}} - + {{off}} {{/if}} \ No newline at end of file diff --git a/vendor/ember-cli-toggle/base.css b/vendor/ember-cli-toggle/base.css index d16bf72..70ba515 100644 --- a/vendor/ember-cli-toggle/base.css +++ b/vendor/ember-cli-toggle/base.css @@ -73,14 +73,17 @@ height: 100%; } -.x-toggle-container .toggle-text .small { +.x-toggle-container .toggle-text.small { padding-bottom: 1.0rem; + font-size: 0.9rem; } -.x-toggle-container .toggle-text .medium { +.x-toggle-container .toggle-text.medium { padding-bottom: 1.5rem; + font-size: 1.0rem; } -.x-toggle-container .toggle-text .large { +.x-toggle-container .toggle-text.large { padding-bottom: 2.0rem; + font-size: 1.2rem; } .x-toggle-container .toggle-text.toggle-prefix { diff --git a/vendor/ember-cli-toggle/themes/default.css b/vendor/ember-cli-toggle/themes/default.css index 7920c32..d03b4db 100644 --- a/vendor/ember-cli-toggle/themes/default.css +++ b/vendor/ember-cli-toggle/themes/default.css @@ -15,18 +15,18 @@ border-radius: 0.2em; } -.x-toggle-default-small { +.x-toggle-default.small { width: 3em; height: 1.6em; } -.x-toggle-default.x-toggle-default-medium { +.x-toggle-default.medium { width: 4em; height: 2.1em; padding: 3px; } -.x-toggle-default.x-toggle-default-large { +.x-toggle-default.large { width: 4.7em; height: 2.6em; padding: 4px; diff --git a/vendor/ember-cli-toggle/themes/flat.css b/vendor/ember-cli-toggle/themes/flat.css index 333a311..0f197d0 100644 --- a/vendor/ember-cli-toggle/themes/flat.css +++ b/vendor/ember-cli-toggle/themes/flat.css @@ -24,18 +24,18 @@ background: #7FC6A6; } -.x-toggle-flat-small { +.x-toggle-flat.small { width: 3em; height: 1.6em; } -.x-toggle-flat.x-toggle-flat-medium { +.x-toggle-flat.medium { width: 4em; height: 2.1em; padding: 3px; } -.x-toggle-flat.x-toggle-flat-large { +.x-toggle-flat.large { width: 4.7em; height: 2.6em; padding: 4px; diff --git a/vendor/ember-cli-toggle/themes/flip.css b/vendor/ember-cli-toggle/themes/flip.css index 64d427f..60ed995 100644 --- a/vendor/ember-cli-toggle/themes/flip.css +++ b/vendor/ember-cli-toggle/themes/flip.css @@ -60,36 +60,36 @@ transform: rotateY(20deg); } -.x-toggle-flip-small { +.x-toggle-flip.small { width: 3em; height: 1.6em; } -.x-toggle-flip.x-toggle-flip-small:before, -.x-toggle-flip.x-toggle-flip-small:after { +.x-toggle-flip.small:before, +.x-toggle-flip.small:after { line-height: 2.2em; font-size: 0.8em; } -.x-toggle-flip.x-toggle-flip-medium { +.x-toggle-flip.medium { width: 4em; height: 2.1em; padding: 3px; } -.x-toggle-flip.x-toggle-flip-medium:before, -.x-toggle-flip.x-toggle-flip-medium:after { +.x-toggle-flip.medium:before, +.x-toggle-flip.medium:after { line-height: 2.3em; } -.x-toggle-flip.x-toggle-flip-large { +.x-toggle-flip.large { width: 4.7em; height: 2.6em; padding: 4px; } -.x-toggle-flip.x-toggle-flip-large:before, -.x-toggle-flip.x-toggle-flip-large:after { +.x-toggle-flip.large:before, +.x-toggle-flip.large:after { line-height: 2.4em; font-size: 1.1em; } diff --git a/vendor/ember-cli-toggle/themes/ios.css b/vendor/ember-cli-toggle/themes/ios.css index 0eee759..bcac6b7 100644 --- a/vendor/ember-cli-toggle/themes/ios.css +++ b/vendor/ember-cli-toggle/themes/ios.css @@ -35,18 +35,18 @@ margin-left: -.8em; } -.x-toggle-ios-small { +.x-toggle-ios.small { width: 3em; height: 1.6em; } -.x-toggle-ios.x-toggle-ios-medium { +.x-toggle-ios.medium { width: 4em; height: 2.1em; padding: 3px; } -.x-toggle-ios.x-toggle-ios-large { +.x-toggle-ios.large { width: 4.7em; height: 2.6em; padding: 4px; diff --git a/vendor/ember-cli-toggle/themes/light.css b/vendor/ember-cli-toggle/themes/light.css index 33c7cca..5b447d5 100644 --- a/vendor/ember-cli-toggle/themes/light.css +++ b/vendor/ember-cli-toggle/themes/light.css @@ -17,18 +17,18 @@ background: #9FD6AE; } -.x-toggle-light-small { +.x-toggle-light.small { width: 3em; height: 1.6em; } -.x-toggle-light.x-toggle-light-medium { +.x-toggle-light.medium { width: 4em; height: 2.1em; padding: 3px; } -.x-toggle-light.x-toggle-light-large { +.x-toggle-light.large { width: 4.7em; height: 2.6em; padding: 4px; diff --git a/vendor/ember-cli-toggle/themes/skewed.css b/vendor/ember-cli-toggle/themes/skewed.css index 2d7dc5f..8eeaeef 100644 --- a/vendor/ember-cli-toggle/themes/skewed.css +++ b/vendor/ember-cli-toggle/themes/skewed.css @@ -62,36 +62,36 @@ left: 10%; } -.x-toggle-skewed-small { +.x-toggle-skewed.small { width: 3em; height: 1.6em; } -.x-toggle-skewed.x-toggle-skewed-small:before, -.x-toggle-skewed.x-toggle-skewed-small:after { +.x-toggle-skewed.small:before, +.x-toggle-skewed.small:after { line-height: 2.2em; font-size: 0.8em; } -.x-toggle-skewed.x-toggle-skewed-medium { +.x-toggle-skewed.medium { width: 4em; height: 2.1em; padding: 3px; } -.x-toggle-skewed.x-toggle-skewed-medium:before, -.x-toggle-skewed.x-toggle-skewed-medium:after { +.x-toggle-skewed.medium:before, +.x-toggle-skewed.medium:after { line-height: 1.9em; } -.x-toggle-skewed.x-toggle-skewed-large { +.x-toggle-skewed.large { width: 4.7em; height: 2.6em; padding: 4px; } -.x-toggle-skewed.x-toggle-skewed-large:before, -.x-toggle-skewed.x-toggle-skewed-large:after { +.x-toggle-skewed.large:before, +.x-toggle-skewed.large:after { line-height: 2em; font-size: 1.1em; } From 88f07bcae3d6cb9cb87682c019bf0c61c9c9a79f Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Thu, 25 Dec 2014 11:56:47 +0000 Subject: [PATCH 5/9] removed now redundant "sizeClass" --- app/components/x-toggle.js | 4 ---- app/templates/components/x-toggle.hbs | 6 +++--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js index 9795048..9cf15b3 100644 --- a/app/components/x-toggle.js +++ b/app/components/x-toggle.js @@ -22,10 +22,6 @@ export default Ember.Component.extend({ return 'x-toggle-' + theme; }), - sizeClass: computed('size', 'themeClass', function () { - return this.get('size'); - }), - forId: computed(function () { return this.get('elementId') + '-x-toggle'; }), diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs index 3cc5941..efcf82c 100644 --- a/app/templates/components/x-toggle.hbs +++ b/app/templates/components/x-toggle.hbs @@ -1,16 +1,16 @@ {{#if showText}} - + {{on}} {{/if}} {{input id=forId type='checkbox' checked=toggled class='x-toggle'}} - {{#if showText}} - + {{off}} {{/if}} \ No newline at end of file From 077a971ebb94b07b08bcfab268553737ac4eca68 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Thu, 25 Dec 2014 12:11:50 +0000 Subject: [PATCH 6/9] added final touches for "showLabels" option --- README.md | 12 ++++++++ app/components/x-toggle.js | 2 +- app/templates/components/x-toggle.hbs | 4 +-- tests/dummy/app/templates/application.hbs | 28 ++++++++++++++++-- .../example-images/show-labels.png | Bin 0 -> 1557 bytes 5 files changed, 40 insertions(+), 6 deletions(-) create mode 100644 vendor/ember-cli-toggle/example-images/show-labels.png diff --git a/README.md b/README.md index c0547cb..5713cf8 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,17 @@ in your template: {{x-toggle theme='skewed' size='large' toggle='enablePartyMode'}} ``` +You can also show text labels on either side of toggle switch with: +````hbs +{{x-togggle on='hey' off='ho' toggle='letsGo' showLabel='true'}} +```` +Which would look like (using "default" theme): + +![ ](vendor/ember-cli-toggle/example-images/show-labels.png) + +This option is available on all themes but is a less sensible choice for those themes which actually +include the label within the control (e.g., `skew` and `flip`). + ### Available Options * `theme` - One of 'light', 'ios', 'flat', 'flip', 'skewed', 'default'. @@ -27,6 +38,7 @@ in your template: Defaults to 'medium' if not specified. * `on` - Defaults to 'On'. * `off` - Defaults to 'Off'. +* `showLabels` - Defaults to 'false', if 'true' will display labels on left and ride side of toggle switch * `toggle` - The toggle action, which has one argument e.g. `isToggled`. * `toggled` - Defaults to `false`, meaning not enabled by default. diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js index 9cf15b3..06dc199 100644 --- a/app/components/x-toggle.js +++ b/app/components/x-toggle.js @@ -12,7 +12,7 @@ export default Ember.Component.extend({ theme: config.defaultTheme || 'default', off: config.defaultOff || 'Off', on: config.defaultOn || 'On', - showText: config.defaultShowText || false, + showLabels: config.defaultShowLabels || false, size: config.defaultSize || 'medium', toggled: false, diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs index efcf82c..2a0d635 100644 --- a/app/templates/components/x-toggle.hbs +++ b/app/templates/components/x-toggle.hbs @@ -1,4 +1,4 @@ -{{#if showText}} +{{#if showLabels}} {{on}} @@ -9,7 +9,7 @@ data-tg-off=off data-tg-on=on}}> -{{#if showText}} +{{#if showLabels}} {{off}} diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index faa5320..7a730fa 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -55,7 +55,29 @@ \{{x-toggle showText="true" on="hey" off="ho"}}
- {{x-toggle size='small' on='hey' off='ho' showText="true" theme='default'}}
- {{x-toggle size='medium' on='hey' off='ho' showText="true" theme='default'}}
- {{x-toggle size='large' on='hey' off='ho' showText="true" theme='default'}} + + + + + + +
+
+ {{x-toggle size='small' on='hey' off='ho' showLabels="true" theme='default'}}
+ {{x-toggle size='medium' on='hey' off='ho' showLabels="true" theme='default'}}
+ {{x-toggle size='large' on='hey' off='ho' showLabels="true" theme='default'}} +
+ 		+
+ {{x-toggle size='small' on='hey' off='ho' showLabels="true" theme='flat'}}
+ {{x-toggle size='medium' on='hey' off='ho' showLabels="true" theme='flat'}}
+ {{x-toggle size='large' on='hey' off='ho' showLabels="true" theme='flat'}} +
+ 		+
+ {{x-toggle size='small' on='hey' off='ho' showLabels="true" theme='light'}}
+ {{x-toggle size='medium' on='hey' off='ho' showLabels="true" theme='light'}}
+ {{x-toggle size='large' on='hey' off='ho' showLabels="true" theme='light'}} +
+
\ No newline at end of file diff --git a/vendor/ember-cli-toggle/example-images/show-labels.png b/vendor/ember-cli-toggle/example-images/show-labels.png new file mode 100644 index 0000000000000000000000000000000000000000..ba1b433edeb05d08a9fe5f87e97ba7409f8d1958 GIT binary patch literal 1557 zcmV+w2I~2VP)Px)&q+i4y(}64k`|+ z0jmhCv)ZGAj`{g{jE|3FdU{#~(I^*!!C-)wmzQ!5t$0%P%ArMJuspF}hSAYcE0ihM ztZH#+ZN=czu7j*X4U?M~J9Rh?G&$g!I=C5zJjl$@JXUrr+qIa7%cSW5d7ieatWoJJgL z4U`uBQ*mgKb%}GP;*bcG7Kcd_hslJI5tA12QU9D}UuA*|w-`hn6^ zgz|GEB90As`E(JY3Fwa*bee)*{gaiS8xe63i1gm@BQJe=^~0sP2xaC*TpWvt-}BE+ zTq!-k-8pn+4&sZOvlcE)qpiq|X1G2kEFBeXL!@sSR|?~?CpitN$;o*C(j9JmXL$~i zQ}*CcNfQ}Ciz5)Q#SLbU* z*0J4C_MWFBXi%RG+uU>^TfZ4c=JGMQ&<0cAH|Whx!X`tWB!Ng02P?Gu-|Ixn@h7n* z{2<=Q0@kjD_TJuV7%e^FVum-~YmN%pU zJN9D^moPvsqq^%mu#oT~yvZ1by!Ss+kNWz0d=z~j=Qk+n1h=8hI9bQNZ#q$i505^| z)#;OC5U|Qka}5}T!kf25`)u09IW-Zk#ERr!W$&2yKa)=pr+%Coz1ZFAH9tf}MG2<~ zT_oNu+=zzPPonm^E6#Kjqb6j%SX{K<4g{=mGc#Z|!r$BJd_$2=n%fD3Vny=G;jiZ( zZ*jBOondoJOX7+RDn_p%=AjFg4d?EpvsfVEytE@8!xj6uRmNg~R#uIGFgJRH$0cH( z><@qKGN*LT(Z~QkCY6<+5e`9I96GZo>VE0BSm)4 zjFE`@{Q2dTB;W~Dr;@Zo@?UXWki`zItP%m6+zi!9h!pudlDAu2hBZUn!q_Kep#AjT_hQZ;|%!v$%)@ zcrEh=icW9DkG;2-ByUKCKD?q$uZNL5_+_^HDr#F@5whVH zq6*US=PBvJ;M<|~)goYk(a5`Gk!a3w;t+7y-I$1!SBANs{GW#KfWR2qq+SGM6-Q9g z4KxS$W8NnOJ45KIpnA4<13j)p9t00000NkvXX Hu0mjf%vkO% literal 0 HcmV?d00001 From 361668a85b5b2d9ed4b085634530c6aa436a035d Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Thu, 25 Dec 2014 12:28:00 +0000 Subject: [PATCH 7/9] small syntactic fix to dummy application --- tests/dummy/app/styles/app.css | 14 +++++++++++++- tests/dummy/app/templates/application.hbs | 4 ++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css index 40a4d5c..47aab86 100644 --- a/tests/dummy/app/styles/app.css +++ b/tests/dummy/app/styles/app.css @@ -1,3 +1,15 @@ html, body { - margin: 20px; + font-family: Verdana, Geneva, sans-serif; + margin: 20px; +} + +.demo-table td { + padding-right: 1rem; +} + +pre { + font-family: "Courier New", Courier, monospace; + margin-left: 1rem; + margin-top: 1rem; + margin-bottom: 1rem; } \ No newline at end of file diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 7a730fa..033d9b1 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -52,10 +52,10 @@

Text Labels

-\{{x-toggle showText="true" on="hey" off="ho"}}
+\{{x-toggle showLabels="true" on="hey" off="ho"}}
- +
From 1e50bbe8a7a2bbf440ab3f3474dab4a7538365d7 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Fri, 26 Dec 2014 00:38:41 +0000 Subject: [PATCH 8/9] Added VALUE binding --- README.md | 30 ++++++++++-- app/components/x-toggle.js | 29 ++++++++++- app/templates/components/x-toggle.hbs | 8 +-- tests/dummy/app/templates/application.hbs | 60 ++++++++++++++++++----- 4 files changed, 107 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 5713cf8..9e001e8 100644 --- a/README.md +++ b/README.md @@ -19,9 +19,10 @@ in your template: {{x-toggle theme='skewed' size='large' toggle='enablePartyMode'}} ``` +#### Labels You can also show text labels on either side of toggle switch with: ````hbs -{{x-togggle on='hey' off='ho' toggle='letsGo' showLabel='true'}} +{{x-toggle showLabel='true' off='hey' on='ho' toggle='letsGo'}} ```` Which would look like (using "default" theme): @@ -30,14 +31,37 @@ Which would look like (using "default" theme): This option is available on all themes but is a less sensible choice for those themes which actually include the label within the control (e.g., `skew` and `flip`). +#### Binding #### + +It's perfectly normal to *not* need bindings for a toggle switch as the "toggle" property allows the container to catch thrown actions +which happen at each state transition. Sometimes, however, it's easier to just bind your toggle switch to a property on the container. This is possible with use of the `value` binding: + +````hbs +{{x-toggle value=controller.heyOrHo showLabel='true' off='hey' on='ho'}} +```` + +This will ensure that the bound property is always set to the *true* or *false* value and as it's a two way binding this will allow the toggle +control to automatically update its UI when the value is changed external to the component as well. + +Finally, it is sometimes the case that rather than a *true* or *false* value the toggle is meant to move between two discrete, but non-boolean states. +In order to support this functionality there is an overloaded form of setting the `on` and `off` properties which not only sets a "label" +for the state but also a "value". In our "hey" versus "ho" example you might do the following: + +````hbs +{{x-toggle value=controller.heyOrHo showLabel='true' off='Hey:hey' on='Ho:ho'}} +```` + +With this configuration the "value" for the **on** state will be `hey` and in the **off** state it will be `ho`. If the bound property +is set to anything other than the two accepted value states it will reset to its "off state". + ### Available Options * `theme` - One of 'light', 'ios', 'flat', 'flip', 'skewed', 'default'. Defaults to 'default' if not specified. * `size` - One of 'small', 'medium', 'large'. Defaults to 'medium' if not specified. -* `on` - Defaults to 'On'. -* `off` - Defaults to 'Off'. +* `on` - The label for the *on* state. Defaults to 'On'. +* `off` - The label for the *off* state. Defaults to 'Off'. * `showLabels` - Defaults to 'false', if 'true' will display labels on left and ride side of toggle switch * `toggle` - The toggle action, which has one argument e.g. `isToggled`. * `toggled` - Defaults to `false`, meaning not enabled by default. diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js index 06dc199..6b94aab 100644 --- a/app/components/x-toggle.js +++ b/app/components/x-toggle.js @@ -11,9 +11,16 @@ export default Ember.Component.extend({ classNames: ['x-toggle-container'], theme: config.defaultTheme || 'default', off: config.defaultOff || 'Off', + offLabel: computed('off', function() { + return this.get('off').indexOf(':') > -1 ? this.get('off').substr(0,this.get('off').indexOf(':')) : this.get('off'); + }), on: config.defaultOn || 'On', + onLabel: computed('on', function() { + return this.get('on').indexOf(':') > -1 ? this.get('on').substr(0,this.get('on').indexOf(':')) : this.get('on'); + }), showLabels: config.defaultShowLabels || false, size: config.defaultSize || 'medium', + value: false, toggled: false, themeClass: computed('theme', function () { @@ -28,7 +35,27 @@ export default Ember.Component.extend({ wasToggled: on('init', observer('toggled', function () { var toggled = this.get('toggled'); - + var offState = this.get('off').substr(this.get('off').indexOf(':')+1) || false; + var onState = this.get('on').substr(this.get('on').indexOf(':')+1) || true; this.sendAction('toggle', toggled); + if(toggled === false) { + this.set('value',offState); + } else { + this.set('value',onState); + } + })), + valueObserver: on('init', observer('value', function() { + Ember.run.debounce(this, function() { + var value = this.get('value'); + var offState = this.get('off').substr(this.get('off').indexOf(':')+1) || false; + var onState = this.get('on').substr(this.get('on').indexOf(':')+1) || true; + if(value === onState) { + this.set('toggled', true); + } else { + this.set('toggled', false); + this.set('value',offState); + } + }, 1000); })) + }); diff --git a/app/templates/components/x-toggle.hbs b/app/templates/components/x-toggle.hbs index 2a0d635..0867c40 100644 --- a/app/templates/components/x-toggle.hbs +++ b/app/templates/components/x-toggle.hbs @@ -1,16 +1,16 @@ {{#if showLabels}} - {{on}} + {{offLabel}} {{/if}} {{input id=forId type='checkbox' checked=toggled class='x-toggle'}} {{#if showLabels}} - {{off}} + {{onLabel}} {{/if}} \ No newline at end of file diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 033d9b1..fae2939 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1,4 +1,4 @@ -

ember-cli-toggle

+

ember-cli-toggle

{{outlet}} @@ -14,6 +14,7 @@ Is toggled: {{toggled}}

+

Sizes and Themes

{{x-toggle size='small'}} {{x-toggle size='medium'}} @@ -52,32 +53,67 @@

Text Labels

-\{{x-toggle showLabels="true" on="hey" off="ho"}}
+\{{x-toggle showLabels="true" off="hey" on="ho"}}
- {{x-toggle size='small' on='hey' off='ho' showLabels="true" theme='default'}}
- {{x-toggle size='medium' on='hey' off='ho' showLabels="true" theme='default'}}
- {{x-toggle size='large' on='hey' off='ho' showLabels="true" theme='default'}} + {{x-toggle size='small' off='hey' on='ho' showLabels="true" theme='default'}}
+ {{x-toggle size='medium' off='hey' on='ho' showLabels="true" theme='default'}}
+ {{x-toggle size='large' off='hey' on='ho' showLabels="true" theme='default'}}
- {{x-toggle size='small' on='hey' off='ho' showLabels="true" theme='flat'}}
- {{x-toggle size='medium' on='hey' off='ho' showLabels="true" theme='flat'}}
- {{x-toggle size='large' on='hey' off='ho' showLabels="true" theme='flat'}} + {{x-toggle size='small' off='hey' on='ho' showLabels="true" theme='flat'}}
+ {{x-toggle size='medium' off='hey' on='ho' showLabels="true" theme='flat'}}
+ {{x-toggle size='large' off='hey' on='ho' showLabels="true" theme='flat'}}
- {{x-toggle size='small' on='hey' off='ho' showLabels="true" theme='light'}}
- {{x-toggle size='medium' on='hey' off='ho' showLabels="true" theme='light'}}
- {{x-toggle size='large' on='hey' off='ho' showLabels="true" theme='light'}} + {{x-toggle size='small' off='hey' on='ho' showLabels="true" theme='light'}}
+ {{x-toggle size='medium' off='hey' on='ho' showLabels="true" theme='light'}}
+ {{x-toggle size='large' off='hey' on='ho' showLabels="true" theme='light'}}
-
\ No newline at end of file +
+ +

Bindings

+
+\{{x-toggle toggled=boundToggle value=boundValue off="hey" on="ho"}}
+
+
+ + + + + + + + + + + +
+
+ {{x-toggle off='Hey:hey' on='Ho:ho' toggled=boundToggle value=boundValue}} +
+ 		+ toggled: {{#if boundToggle}}true{{else}}false{{/if}} + + value: {{input value=boundValue}} +
+
+ {{x-toggle off='Hey:hey' on='Ho:ho' toggled=bT2 value=bV2}} +
+ 		+ toggled: {{#if bT2}}true{{else}}false{{/if}} + + value: {{bV2}} +
+
From cb1492d3fef413c803c601fada87b87695e25595 Mon Sep 17 00:00:00 2001 From: Ken Snyder Date: Fri, 26 Dec 2014 01:01:58 +0000 Subject: [PATCH 9/9] Small adjustments --- app/components/x-toggle.js | 2 +- tests/dummy/app/controllers/application.js | 12 +++++++----- tests/dummy/app/templates/application.hbs | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/components/x-toggle.js b/app/components/x-toggle.js index 6b94aab..83a890d 100644 --- a/app/components/x-toggle.js +++ b/app/components/x-toggle.js @@ -55,7 +55,7 @@ export default Ember.Component.extend({ this.set('toggled', false); this.set('value',offState); } - }, 1000); + }, 500); })) }); diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index dce007e..944bfb1 100644 --- a/tests/dummy/app/controllers/application.js +++ b/tests/dummy/app/controllers/application.js @@ -1,9 +1,11 @@ import Ember from 'ember'; export default Ember.Controller.extend({ - actions: { - checkboxToggled: function () { - this.toggleProperty('toggled'); - } - } + boundToggle: false, + bT2: false, + actions: { + checkboxToggled: function () { + this.toggleProperty('toggled'); + } + } }); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index fae2939..05df0b1 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -85,7 +85,7 @@

Bindings

-\{{x-toggle toggled=boundToggle value=boundValue off="hey" on="ho"}}
+\{{x-toggle toggled=boundTog value=boundVal off="Hey:hey" on="Ho:ho"}}