fix: label wrapping and internal div label (#69)

* Create example for broken label * fix: remove click from switch * Wrap div in label and fix styles
knownasilya · Apr 10, 2017 · 2bcc44a · 2bcc44a
1 parent 395824d
commit 2bcc44a
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 59 deletions.
diff --git a/addon/components/x-toggle-switch/component.js b/addon/components/x-toggle-switch/component.js
@@ -13,11 +13,10 @@ export default Component.extend({
   }),
 
   click(e) {
-    const value = this.get('value');
+    const clickedElement = this.$(e.target);
 
-    e.stopPropagation();
-    e.preventDefault();
-
-    this.sendToggle(!value);
+    if (clickedElement.is('input')) {
+      this.sendToggle(!this.get('value'));
+    }
   }
 });
diff --git a/addon/components/x-toggle-switch/template.hbs b/addon/components/x-toggle-switch/template.hbs
@@ -7,11 +7,13 @@
   onchange={{action sendToggle value='target.checked'}}
   type='checkbox'>
 
-<div id="x-toggle-visual-{{forId}}"
-  class="x-toggle-btn {{themeClass}} {{size}}{{if disabled ' x-toggle-disabled'}}"
-  data-tg-on={{onLabel}}
-  data-tg-off={{offLabel}}
-  for={{forId}}
-  aria-role="checkbox"
-  aria-owns={{forId}}>
-</div>
+<label for="{{forId}}">
+  <div
+    aria-owns="{{forId}}"
+    aria-role="checkbox"
+    class="x-toggle-btn {{themeClass}} {{size}}{{if disabled ' x-toggle-disabled'}}"
+    data-tg-on="{{onLabel}}"
+    data-tg-off="{{offLabel}}"
+    id="x-toggle-visual-{{forId}}">
+  </div>
+</label>
diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
@@ -4,6 +4,7 @@ const { Logger: { log } } = Ember;
 export default Ember.Controller.extend({
   boundToggle: false,
   bV2: 'ho',
+  toggleLabelValue: false,
 
   actions: {
     checkboxToggled(toggled, toggledBy) {
@@ -24,6 +25,9 @@ export default Ember.Controller.extend({
 
     rejected() {
       return false;
+    },
+    toggleLabelTest(value) {
+      this.set('toggleLabelValue', value);
     }
   }
 });
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -123,41 +123,41 @@
         onLabel="ho"
         value=lv1 onToggle=(action (mut lv1))
       }}
-  </td>
+    </td>
     <td><pre><code>\{{x-toggle
   showLabels=true
   offLabel="hey"
   onLabel="ho"
-}}</code></pre></td>
+}}</code></pre>
+    </td>
   </tr>
 </table>
 
 <h4>Action</h4>
 
 <div class="default-style text-labels">
-	<table class="demo-table">
-		<tr>
-			<td>
-				<div class="default-theme">
-					{{x-toggle
+  <table class="demo-table">
+    <tr>
+      <td>
+        <div class="default-theme">
+          {{x-toggle
             offLabel='Hey'
             onLabel='Ho'
             showLabels=true
             value=actionBound
             onToggle=(action (mut actionBound))
           }}
-				</div>
-			</td>
-
-			<td>
-				value: {{input value=actionBound}}
-			</td>
-		</tr>
-	</table>
+        </div>
+      </td>
+
+      <td>
+        value: {{input value=actionBound}}
+      </td>
+    </tr>
+  </table>
 </div>
 
 
-
 <h2>Disabled</h2>
 <pre>
 \{{x-toggle value=disabledTest disabled=true showLabels=true}}
@@ -180,7 +180,7 @@
   \{{#toggle.onLabel as |label|}}
     &lt;b&gt;\{{label}}&lt;/b&gt;
   \{{/toggle.onLabel}}
-\{{/x-toggle}}
+  \{{/x-toggle}}
 </pre>
 <span class='flexy'>
   {{#x-toggle value=value showLabels=true onToggle=(action (mut value)) as |toggle|}}
@@ -195,3 +195,12 @@
     {{/toggle.onLabel}}
   {{/x-toggle}}
 </span>
+
+<span class='flexy'>
+  <label>
+  {{x-toggle
+    onToggle=(action 'toggleLabelTest')
+    value=(readonly toggleLabelValue)}}
+    Wrapped in Label Test
+  </label>
+</span>
diff --git a/vendor/ember-toggle/base.css b/vendor/ember-toggle/base.css
@@ -8,7 +8,7 @@
 .x-toggle *,
 .x-toggle *:after,
 .x-toggle *:before,
-.x-toggle + .x-toggle-btn {
+.x-toggle + label > .x-toggle-btn {
   -moz-box-sizing: border-box;
        box-sizing: border-box;
 }
@@ -19,7 +19,7 @@
 .x-toggle *::-moz-selection,
 .x-toggle *:after::-moz-selection,
 .x-toggle *:before::-moz-selection,
-.x-toggle + .x-toggle-btn::-moz-selection {
+.x-toggle + label > .x-toggle-btn::-moz-selection {
   background: none;
 }
 
@@ -29,15 +29,15 @@
 .x-toggle *::selection,
 .x-toggle *:after::selection,
 .x-toggle *:before::selection,
-.x-toggle + .x-toggle-btn::selection {
+.x-toggle + label > .x-toggle-btn::selection {
   background: none;
 }
 
-.x-toggle-btn.x-toggle-disabled {
+label > .x-toggle-btn.x-toggle-disabled {
   cursor: not-allowed;
 }
 
-.x-toggle-btn {
+label > .x-toggle-btn {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -50,24 +50,24 @@
   cursor: pointer;
 }
 
-.x-toggle-btn:after,
-.x-toggle-btn:before {
+label > .x-toggle-btn:after,
+label > .x-toggle-btn:before {
   position: relative;
   display: block;
   content: "";
   width: 50%;
   height: 100%;
 }
 
-.x-toggle-btn:after {
+label > .x-toggle-btn:after {
   left: 0;
 }
 
-.x-toggle-btn:before {
+label > .x-toggle-btn:before {
   display: none;
 }
 
-.x-toggle:checked + .x-toggle-btn:after {
+.x-toggle:checked + label > .x-toggle-btn:after {
   left: 50%;
 }
 

diff --git a/vendor/ember-toggle/themes/default.css b/vendor/ember-toggle/themes/default.css
@@ -1,32 +1,32 @@
-.x-toggle-default.x-toggle-btn {
+label > .x-toggle-default.x-toggle-btn {
   padding: 0.16em 0.1em;
   background-color: #E7E7E7;
   border-radius: 0.2em;
   transition: background-color 0.2s;
 }
 
-.x-toggle:checked + .x-toggle-default.x-toggle-btn {
+.x-toggle:checked + label > .x-toggle-default.x-toggle-btn {
   background-color: #797979;
 }
 
-.x-toggle-default.x-toggle-btn:after {
+label > .x-toggle-default.x-toggle-btn:after {
   background-color: #FFFFFF;
   transition: left 0.2s;
   border-radius: 0.2em;
 }
 
-.x-toggle-default.small {
+label > .x-toggle-default.small {
   width: 3em;
   height: 1.6em;
 }
 
-.x-toggle-default.medium {
+label > .x-toggle-default.medium {
   width: 4em;
   height: 2.1em;
   padding: 3px;
 }
 
-.x-toggle-default.large {
+label > .x-toggle-default.large {
   width: 4.7em;
   height: 2.1em;
   padding: 4px;

diff --git a/vendor/ember-toggle/themes/flat.css b/vendor/ember-toggle/themes/flat.css
@@ -15,11 +15,11 @@
   border-radius: 1em;
 }
 
-.x-toggle:checked + .x-toggle-flat.x-toggle-btn {
+.x-toggle:checked + .label x-toggle-flat.x-toggle-btn {
   border: 4px solid #7FC6A6;
 }
 
-.x-toggle:checked + .x-toggle-flat.x-toggle-btn:after {
+.x-toggle:checked + label .x-toggle-flat.x-toggle-btn:after {
   left: 50%;
   background: #7FC6A6;
 }

diff --git a/vendor/ember-toggle/themes/flip.css b/vendor/ember-toggle/themes/flip.css
@@ -43,19 +43,19 @@
           transform: rotateY(-20deg);
 }
 
-.x-toggle:checked + .x-toggle-flip.x-toggle-btn:before {
+.x-toggle:checked + label > .x-toggle-flip.x-toggle-btn:before {
   -webkit-transform: rotateY(180deg);
           transform: rotateY(180deg);
 }
 
-.x-toggle:checked + .x-toggle-flip.x-toggle-btn:after {
+.x-toggle:checked + label > .x-toggle-flip.x-toggle-btn:after {
   -webkit-transform: rotateY(0);
           transform: rotateY(0);
   left: 0;
   background: #7FC6A6;
 }
 
-.x-toggle:checked + .x-toggle-flip.x-toggle-btn:active:after {
+.x-toggle:checked + label > .x-toggle-flip.x-toggle-btn:active:after {
   -webkit-transform: rotateY(20deg);
           transform: rotateY(20deg);
 }

diff --git a/vendor/ember-toggle/themes/ios.css b/vendor/ember-toggle/themes/ios.css
@@ -23,15 +23,15 @@
   padding-right: .8em;
 }
 
-.x-toggle:checked + .x-toggle-ios.x-toggle-btn {
+.x-toggle:checked + label > .x-toggle-ios.x-toggle-btn {
   background: #86d993;
 }
 
-.x-toggle:checked + .x-toggle-ios.x-toggle-btn:active {
+.x-toggle:checked + label > .x-toggle-ios.x-toggle-btn:active {
   box-shadow: none;
 }
 
-.x-toggle:checked + .x-toggle-ios.x-toggle-btn:active:after {
+.x-toggle:checked + label > .x-toggle-ios.x-toggle-btn:active:after {
   margin-left: -.8em;
 }
 

diff --git a/vendor/ember-toggle/themes/light.css b/vendor/ember-toggle/themes/light.css
@@ -13,7 +13,7 @@
           transition: all .2s ease;
 }
 
-.x-toggle:checked + .x-toggle-light.x-toggle-btn {
+.x-toggle:checked + label > .x-toggle-light.x-toggle-btn {
   background: #9FD6AE;
 }
 

diff --git a/vendor/ember-toggle/themes/skewed.css b/vendor/ember-toggle/themes/skewed.css
@@ -46,19 +46,19 @@
   left: -10%;
 }
 
-.x-toggle:checked + .x-toggle-skewed.x-toggle-btn {
+.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn {
   background: #86d993;
 }
 
-.x-toggle:checked + .x-toggle-skewed.x-toggle-btn:before {
+.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn:before {
   left: -100%;
 }
 
-.x-toggle:checked + .x-toggle-skewed.x-toggle-btn:after {
+.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn:after {
   left: 0;
 }
 
-.x-toggle:checked + .x-toggle-skewed.x-toggle-btn:active:after {
+.x-toggle:checked + label > .x-toggle-skewed.x-toggle-btn:active:after {
   left: 10%;
 }