revert toggleButton change

Author: Gregor Adams

.versions

@@ -9,7 +9,7 @@ caching-compiler@1.0.0
 caching-html-compiler@1.0.2
 callback-hook@1.0.4
 check@1.1.0
-codefights:blaze-material-ui@0.1.7_1
+codefights:blaze-material-ui@0.1.8
 coffeescript@1.0.11
 ddp@1.2.2
 ddp-client@1.2.1
@@ -26,7 +26,7 @@ html-tools@1.0.5
 htmljs@1.0.5
 id-map@1.0.4
 jquery@1.11.4
-local-test:codefights:blaze-material-ui@0.1.7_1
+local-test:codefights:blaze-material-ui@0.1.8
 logging@1.0.8
 meteor@1.1.10
 minifiers@1.1.7

examples/.meteor/packages

@@ -8,6 +8,7 @@ autopublish
 insecure
 codefights:blaze-material-ui
 templating
+reactive-var
 standard-minifiers
 meteor-base
 mobile-experience

examples/.meteor/versions

@@ -12,7 +12,7 @@ caching-compiler@1.0.0
 caching-html-compiler@1.0.2
 callback-hook@1.0.4
 check@1.0.6
-codefights:blaze-material-ui@0.1.8
+codefights:blaze-material-ui@0.1.9
 coffeescript@1.0.10
 ddp@1.2.2
 ddp-client@1.2.1

examples/routing/paper-toggle-button/paper-toggle-button.html

@@ -5,7 +5,7 @@
             <h4>Enable</h4>
             <div class="horizontal-section">
                 <div class="line">
-                    {{>PaperToggleButton className="paper-toggle-button-0"}}
+                    {{>PaperToggleButton className=getClasses checked=checkedState}}
                     <span>Oxygen</span>
                 </div>
                 <div class="line">

examples/routing/paper-toggle-button/paper-toggle-button.js

@@ -0,0 +1,35 @@
+if (Meteor.isClient) {
+
+
+  Template.paperToggleButton.onCreated(function(){
+    this.checked = new ReactiveVar(true);
+    this.classes = new ReactiveVar('testToggle paper-toggle-button-1');
+
+
+
+    setTimeout(function(){
+      var checked = $('.testToggle')[0].getAttribute('checked');
+      console.log(checked);
+      this.checked.set(!checked);
+    }.bind(this),10000);
+
+     setInterval(function(){
+       var classes = this.classes.get();
+       classes = classes === 'testToggle paper-toggle-button-1' ? 'testToggle paper-toggle-button-2' : 'testToggle paper-toggle-button-1'
+       this.classes.set(classes);
+       console.log(this.checked.get())
+
+    }.bind(this),5000);
+  });
+
+  Template.paperToggleButton.helpers({
+    checkedState: function(){
+      var instance = Template.instance();
+      return instance.checked.get();
+    },
+    getClasses: function(){
+      var instance = Template.instance();
+      return instance.classes.get();
+    }
+  });
+}

lib/paper-elements/PaperToggleButton/PaperToggleButton.js

@@ -6,23 +6,17 @@ class PaperToggleButton extends BlazeComponent {
   onCreated () {
     this.focused = new ReactiveVar(false);
     this.pressed = new ReactiveVar(false);
-    this.checked = new ReactiveVar(false);
+    this.checked = new ReactiveVar(this.data() && this.data().checked ? 'checked' : false);
+
 
-    this.autorun(() => {
-      this.checked.set(this.data().checked);
-    });
   }
 
   /**
    * Handle the click of the toggle button
    */
   handleClick(){
     let checked = this.checked.get()
-    if (checked) {
-        this.checked.set(false);
-    } else {
-        this.checked.set('checked');
-    }
+    this.checked.set(!checked ? 'checked' : false);
   }
 
   /**
@@ -34,13 +28,6 @@ class PaperToggleButton extends BlazeComponent {
     this.ripple = this.childrenComponentsWith('rippleElements')[0];
   }
 
-  /**
-   * get the focused state of the button
-   * @return {Boolean}  Returns the focused state
-   */
-  getFocused () {
-    return this.focused.get();
-  }
 
   /**
    * handle the focus event
@@ -97,4 +84,4 @@ class PaperToggleButton extends BlazeComponent {
   }
 }
 
-PaperToggleButton.register('PaperToggleButton');
+PaperToggleButton.register('PaperToggleButton');

lib/paper-elements/PaperToggleButton/PaperToggleButton.tpl.jade

@@ -1,12 +1,12 @@
 paper-toggle-button(class=className
-                    role="button"
-                    aria-pressed="false"
+                    role="checkbox"
+                    aria-pressed=pressed.get
                     tabindex="0"
+                    aria-disabled=disabled.get
                     toggles=""
-                    aria-disabled="false"
-                    focused=getFocused
-                    pressed=getPressed
-                    disabled=disabled
+                    focused=focused.get
+                    pressed=pressed.get
+                    disabled=disabled.get
                     checked=checked.get)
   div(data-id="toggleContainer" class="paper-toggle-button")
     div(data-id="toggleBar" class="toggle-bar paper-toggle-button")

package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'codefights:blaze-material-ui',
-  version: '0.1.8',
+  version: '0.1.9',
   // Brief, one-line summary of the package.
   summary: 'Material design components for blaze',
   // URL to the Git repository containing the source code for this package.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blaze-material-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "blaze components for material design",
   "main": "Gulpfile.js",
   "directories": {