Merge branch 'master' of github.com:knownasilya/ember-cli-toggle

.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}"

README.md

@@ -19,14 +19,50 @@ 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-toggle showLabel='true' off='hey' on='ho' toggle='letsGo'}}
+````
+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`).
+
+#### 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.
 
@@ -45,6 +81,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.

app/components/x-toggle.js

@@ -8,10 +8,19 @@ 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',
+  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 () {
@@ -20,20 +29,33 @@ export default Ember.Component.extend({
     return 'x-toggle-' + theme;
   }),
 
-  sizeClass: computed('size', 'themeClass', function () {
-    var size = this.get('size') || 'medium';
-    var themeClass = this.get('themeClass');
-
-    return themeClass + '-' + size;
-  }),
-
   forId: computed(function () {
     return this.get('elementId') + '-x-toggle';
   }),
 
   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);
+	  	  }
+	  }, 500);
   }))
+
 });

app/templates/components/x-toggle.hbs

@@ -1,6 +1,16 @@
+{{#if showLabels}}
+	<span  {{bind-attr class=":toggle-text :toggle-prefix size"}}>
+		{{offLabel}}
+	</span>
+{{/if}}
 {{input id=forId type='checkbox' checked=toggled class='x-toggle'}}
-<label {{bind-attr class=':x-toggle-btn themeClass sizeClass'
+<label {{bind-attr class=':x-toggle-btn themeClass size'
   for=forId
-  data-tg-off=off
-  data-tg-on=on}}>
+  data-tg-off=offLabel
+  data-tg-on=onLabel}}>
 </label>
+{{#if showLabels}}
+	<span {{bind-attr class=":toggle-text :toggle-postfix size"}}>
+		{{onLabel}}
+	</span>
+{{/if}}

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

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;
+}

tests/dummy/app/templates/application.hbs

@@ -1,4 +1,4 @@
-<h2 id='title'>ember-cli-toggle</h2>
+<h1 id='title'>ember-cli-toggle</h1>
 
 {{outlet}}
 
@@ -14,6 +14,7 @@
   Is toggled: {{toggled}}
 </p>
 
+<h2>Sizes and Themes</h2> 
 <div class="default-sizes sizes">
   {{x-toggle size='small'}}
   {{x-toggle size='medium'}}
@@ -49,3 +50,70 @@
   {{x-toggle size='medium' theme='skewed'}}
   {{x-toggle size='large' theme='skewed'}}
 </div>
+
+<h2>Text Labels</h2> 
+<pre>
+\{{x-toggle showLabels="true" off="hey" on="ho"}}
+</pre>
+<div class="default-style text-labels">
+	<table class="demo-table">
+		<tr>
+			<td>
+				<div class="default-theme">
+					{{x-toggle size='small' off='hey' on='ho' showLabels="true" theme='default'}}<br/>
+					{{x-toggle size='medium' off='hey' on='ho' showLabels="true" theme='default'}}<br/>
+					{{x-toggle size='large' off='hey' on='ho' showLabels="true" theme='default'}}
+				</div>
+			</td>
+			<td>
+				<div class="flat-theme">
+					{{x-toggle size='small' off='hey' on='ho' showLabels="true" theme='flat'}}<br/>
+					{{x-toggle size='medium' off='hey' on='ho' showLabels="true" theme='flat'}}<br/>
+					{{x-toggle size='large' off='hey' on='ho' showLabels="true" theme='flat'}}
+				</div>
+			</td>
+			<td>
+				<div class="light-theme">
+					{{x-toggle size='small' off='hey' on='ho' showLabels="true" theme='light'}}<br/>
+					{{x-toggle size='medium' off='hey' on='ho' showLabels="true" theme='light'}}<br/>
+					{{x-toggle size='large' off='hey' on='ho' showLabels="true" theme='light'}}
+				</div>
+			</td>
+		</tr>
+	</table>
+</div>
+
+<h2>Bindings</h2> 
+<pre>
+\{{x-toggle toggled=boundTog value=boundVal off="Hey:hey" on="Ho:ho"}}
+</pre>
+<div class="default-style text-labels">
+	<table class="demo-table">
+		<tr>
+			<td>
+				<div class="default-theme">
+					{{x-toggle off='Hey:hey' on='Ho:ho' toggled=boundToggle value=boundValue}}
+				</div>
+			</td>
+			<td>
+				toggled: <i>{{#if boundToggle}}true{{else}}false{{/if}}</i>
+			</td>
+			<td>
+				value: {{input value=boundValue}}
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<div class="default-theme">
+					{{x-toggle off='Hey:hey' on='Ho:ho' toggled=bT2 value=bV2}}
+				</div>
+			</td>
+			<td>
+				toggled: <i>{{#if bT2}}true{{else}}false{{/if}}</i>
+			</td>
+			<td>
+				value: {{bV2}}
+			</td>
+		</tr>
+	</table>
+</div>

vendor/ember-cli-toggle/base.css

@@ -66,3 +66,30 @@
 .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;
+	font-size: 0.9rem;
+}
+.x-toggle-container .toggle-text.medium {
+	padding-bottom: 1.5rem;
+	font-size: 1.0rem;
+}
+.x-toggle-container .toggle-text.large {
+	padding-bottom: 2.0rem;
+	font-size: 1.2rem;
+}
+
+.x-toggle-container .toggle-text.toggle-prefix {
+	padding-right: 0.25rem;
+}
+
+.x-toggle-container .toggle-text.toggle-postfix {
+	padding-left: 0.25rem;
+}

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;

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;

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;
 }