material-toggle - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/material-toggle.js

@@ -42,3 +42,3 @@ /**
         position: relative;
-        --material-checkbox-highlight-color: var(--accent-color, rgba(54,79,199,0.5));
+        --material-checkbox-highlight-color: var(--accent-color, rgba(54,79,199,1));
     }
@@ -52,2 +52,4 @@ :host ::slotted(input){
         display: block;
+        min-width: 0px;
+        min-height: 18px;
         position: relative;
@@ -54,0 +56,0 @@ background: transparent;

docs/material-toggle.js

@@ -1,16 +0,12 @@
-(function () {
-'use strict';
-
-// import _toggleAttribute from "./toggle-attribute";
 /**
  * transfer attributes to input
  */
-const _transferAttributes = function(ce, element, allowed){
-    allowed.forEach(function(attrName){
-        if(ce.hasAttribute(attrName)){
-            element.setAttribute(attrName, ce.getAttribute(attrName) || "");
-            ce.removeAttribute(attrName);
-        }
-    });
-};
+const _transferAttributes = function (ce, element, allowed) {
+  allowed.forEach(function (attrName) {
+    if (ce.hasAttribute(attrName)) {
+      element.setAttribute(attrName, ce.getAttribute(attrName) || '')
+      ce.removeAttribute(attrName)
+    }
+  })
+}
 
@@ -20,23 +16,23 @@ /**
  */
-const _getParentForm = function(current){
-    current = current.parentElement;
+const _getParentForm = function (current) {
+  current = current.parentElement
     // return form
-    if( current.constructor === HTMLFormElement ) return current;
+  if (current.constructor === HTMLFormElement) return current // eslint-disable-line no-undef
     // return false on body
-    if(current.constructor === HTMLBodyElement) return false;
+  if (current.constructor === HTMLBodyElement) return false // eslint-disable-line no-undef
     // dig one level deeper
-    return _getParentForm(current);
-};
+  return _getParentForm(current)
+}
 
 const makeTemplate = function (strings, ...substs) {
-    var html = '';
-    for (let i = 0; i < substs.length; i++) {
-        html += strings[i];
-        html += substs[i];
-    }
-    html += strings[strings.length - 1];
-    var template = document.createElement('template');
-    template.innerHTML = html;
-    return template;
-};
+  var html = ''
+  for (let i = 0; i < substs.length; i++) {
+    html += strings[i]
+    html += substs[i]
+  }
+  html += strings[strings.length - 1]
+  var template = document.createElement('template')
+  template.innerHTML = html
+  return template
+}
 
@@ -47,3 +43,3 @@ var template = makeTemplate`<style>
         position: relative;
-        --material-checkbox-highlight-color: var(--accent-color, rgba(54,79,199,0.5));
+        --material-checkbox-highlight-color: var(--accent-color, rgba(54,79,199,1));
     }
@@ -57,2 +53,4 @@ :host ::slotted(input){
         display: block;
+        min-width: 0px;
+        min-height: 18px;
         position: relative;
@@ -120,155 +118,153 @@ background: transparent;
     </div>
-`;
+`
 
-ShadyCSS.prepareTemplate(template, 'material-toggle');
+ShadyCSS.prepareTemplate(template, 'material-toggle') // eslint-disable-line no-undef
 /**
  * A simple (boolean) material toggle based on a checkbox, which works in a normal html form
  */
-class MaterialToggle extends HTMLElement {
+class MaterialToggle extends HTMLElement { // eslint-disable-line no-undef
 
-    constructor() {
-        super();
+  constructor () {
+    super()
         // Attach a shadow root to the element.
-        let shadowRoot = this.attachShadow({mode: 'open'});
-        ShadyCSS.applyStyle(this);
-        shadowRoot.appendChild(document.importNode(template.content, true));
-    }
+    let shadowRoot = this.attachShadow({mode: 'open'})
+    ShadyCSS.applyStyle(this) // eslint-disable-line no-undef
+    shadowRoot.appendChild(document.importNode(template.content, true))
+  }
 
-    connectedCallback() {
+  connectedCallback () {
         // get elements
-        this.$knob = this.shadowRoot.querySelector('.material-toggle__knob');
-        this.$label = document.createElement('label');
-        this.$label.innerHTML = `
+    this.$knob = this.shadowRoot.querySelector('.material-toggle__knob')
+    this.$label = document.createElement('label')
+    this.$label.innerHTML = `
             <input type="checkbox" tabindex="-1" style="position: absolute; opacity: 0; pointer-events: none;"/>
             <div class="material-toggle__label">${this.innerHTML}</div>
-        `;
+        `
         // remove potential label from slot as it is added above
-        this.innerHTML = '';
-        this.appendChild(this.$label);
-        this.$checkbox = this.querySelector('input');
+    this.innerHTML = ''
+    this.appendChild(this.$label)
+    this.$checkbox = this.querySelector('input')
 
-        _transferAttributes(this, this.$checkbox, [
-            'name',
-            'required',
-            'autofocus'
-        ]);
+    _transferAttributes(this, this.$checkbox, [
+      'name',
+      'required',
+      'autofocus'
+    ])
         // reset values
-        this.disabled = this.disabled;
-        this.checked = this.checked;
+    this.disabled = this.disabled
+    this.checked = this.checked
         // add events
-        this._addEvents();
-    }
+    this._addEvents()
+  }
 
-    _addEvents(){
+  _addEvents () {
         // add event
-        this.$checkbox.addEventListener('change',function(e){
-            this.checked = e.target.checked;
-        }.bind(this));
+    this.$checkbox.addEventListener('change', function (e) {
+      this.checked = e.target.checked
+    }.bind(this))
         // move focus to main element if checkbox is focused
-        this.$checkbox.addEventListener('focus', function(){
-            this.focus();
-        }.bind(this));
+    this.$checkbox.addEventListener('focus', function () {
+      this.focus()
+    }.bind(this))
         // toggle checkbox in space
-        this.addEventListener('keydown',function(e){
+    this.addEventListener('keydown', function (e) {
             // space
-            if(e.keyCode === 32){
-                this.checked = !this.$checkbox.checked;
-            }
-        }.bind(this));
+      if (e.keyCode === 32) {
+        this.checked = !this.$checkbox.checked
+      }
+    }.bind(this))
         // submit form on return
-        this.addEventListener('keydown',function(e){
-            var $form = _getParentForm(e.target);
+    this.addEventListener('keydown', function (e) {
+      var $form = _getParentForm(e.target)
             // return
-            if(e.keyCode === 13){
-                if($form.checkValidity()){
-                    $form.submit();
-                }else if($form.querySelector('[type="submit"]') !== null){
+      if (e.keyCode === 13) {
+        if ($form.checkValidity()) {
+          $form.submit()
+        } else if ($form.querySelector('[type="submit"]') !== null) {
                     // needed to trigger validation
-                    $form.querySelector('[type="submit"]').click();
-                }
-                return;
-            }
-        }.bind(this));
+          $form.querySelector('[type="submit"]').click()
+        }
+        return
+      }
+    })
         // remove focus on click
-        this.$label.addEventListener('mousedown', function(){
-            this.$knob.classList.add('unfocused');
-        }.bind(this));
+    this.$label.addEventListener('mousedown', function () {
+      this.$knob.classList.add('unfocused')
+    }.bind(this))
         // add focus on mouse event
-        this.$label.addEventListener('keydown', function(){
-            this.$knob.classList.remove('unfocused');
-        }.bind(this));
-    }
+    this.$label.addEventListener('keydown', function () {
+      this.$knob.classList.remove('unfocused')
+    }.bind(this))
+  }
 
-    static get observedAttributes() {
-        return [
+  static get observedAttributes () {
+    return [
             /** @type {boolean} When given the element is totally inactive */
-            'disabled',
+      'disabled',
             /** @type {boolean} When given the element is set to active */
-            'checked',
-            /** @type {true|false} When given, sets the validity state*/
-            'validity'
-        ];
-    }
+      'checked',
+            /** @type {true|false} When given, sets the validity state */
+      'validity'
+    ]
+  }
 
-    attributeChangedCallback(attrName, oldVal, newVal){
-        if (this.disabled) {
-            this.setAttribute('tabindex', '-1');
-            this.setAttribute('aria-disabled', 'true');
-        } else {
-            this.setAttribute('tabindex', '0');
-            this.setAttribute('aria-disabled', 'false');
-        }
+  attributeChangedCallback (attrName, oldVal, newVal) {
+    if (this.disabled) {
+      this.setAttribute('tabindex', '-1')
+      this.setAttribute('aria-disabled', 'true')
+    } else {
+      this.setAttribute('tabindex', '0')
+      this.setAttribute('aria-disabled', 'false')
     }
+  }
 
-    get disabled() {
-        return this.hasAttribute('disabled');
-    }
+  get disabled () {
+    return this.hasAttribute('disabled')
+  }
 
-    set disabled(val) {
+  set disabled (val) {
         // Reflect the value of `disabled` as an attribute.
-        if (val) {
-            this.setAttribute('disabled', '');
-            this.$checkbox.setAttribute('disabled','');
-        } else {
-            this.removeAttribute('disabled');
-            this.$checkbox.removeAttribute('disabled');
-        }
+    if (val) {
+      this.setAttribute('disabled', '')
+      this.$checkbox.setAttribute('disabled', '')
+    } else {
+      this.removeAttribute('disabled')
+      this.$checkbox.removeAttribute('disabled')
     }
+  }
 
-    get checked() {
-        return this.hasAttribute('checked');
-    }
+  get checked () {
+    return this.hasAttribute('checked')
+  }
 
-    set checked(val) {
-        if (val) {
-            this.setAttribute('checked', '');
-            if(this.$checkbox !== undefined){
-                this.$checkbox.setAttribute('checked','');
-            }
-        } else {
-            this.removeAttribute('checked');
-            if(this.$checkbox !== undefined){
-                this.$checkbox.removeAttribute('checked');
-            }
-        }
+  set checked (val) {
+    if (val) {
+      this.setAttribute('checked', '')
+      if (this.$checkbox !== undefined) {
+        this.$checkbox.setAttribute('checked', '')
+      }
+    } else {
+      this.removeAttribute('checked')
+      if (this.$checkbox !== undefined) {
+        this.$checkbox.removeAttribute('checked')
+      }
     }
+  }
 
-    set validity(val) {
+  set validity (val) {
         // Reflect the value of `validity` as an attribute.
-        if (val === true || val === false) {
-            this.setAttribute('validity', val);
-        } else {
-            this.removeAttribute('validity');
-        }
+    if (val === true || val === false) {
+      this.setAttribute('validity', val)
+    } else {
+      this.removeAttribute('validity')
     }
+  }
 
-    get validity() {
-        return this.getAttribute('validity');
-    }
+  get validity () {
+    return this.getAttribute('validity')
+  }
 }
 
-customElements.define('material-toggle', MaterialToggle);
+customElements.define('material-toggle', MaterialToggle) // eslint-disable-line no-undef
 
-}());
-
 //# sourceMappingURL=material-toggle.js.map

package.json

 {
   "name": "material-toggle",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Material Design toggle web component. No framework, vanilla js",
@@ -5,0 +5,0 @@ "main": "dist/material-toggle.js",

README.md

@@ -15,6 +15,19 @@ # Material-toggle
   <template>
-    <script src="docs/webcomponentsjs/webcomponents.js"></script>
-    <script src="src/material-toggle.js"></script>
-    <label><material-toggle name="subscribe" id="subscribe"></material-toggle>Subscribe</label>
-    <label><material-toggle name="remind" id="remind" disabled></material-toggle>Remind</label>
+    <script src="docs/custom-elements.min.js"></script>
+    <script src="docs/shadydom.min.js"></script>
+    <script src="docs/shadycss.min.js"></script>
+    <script src="docs/material-toggle.js"></script>
+    <style>
+      .test-elements{
+        margin: 30px;
+        font-family: sans-serif;
+      }
+      material-toggle{
+        padding-right: 10px;
+      }
+    </style>
+    <div class="test-elements">
+      <material-toggle name="subscribe" id="subscribe">Subscribe</material-toggle>
+      <label><material-toggle name="remind" id="remind" disabled=""></material-toggle>Remind</label>
+    </div>
   </template>
@@ -21,0 +34,0 @@ </custom-element-demo>

src/material-toggle.js

@@ -42,3 +42,3 @@ /**
         position: relative;
-        --material-checkbox-highlight-color: var(--accent-color, rgba(54,79,199,0.5));
+        --material-checkbox-highlight-color: var(--accent-color, rgba(54,79,199,1));
     }
@@ -52,2 +52,4 @@ :host ::slotted(input){
         display: block;
+        min-width: 0px;
+        min-height: 18px;
         position: relative;
@@ -54,0 +56,0 @@ background: transparent;

No alert changes

Improved metrics

Lines of code

1083

increased by0.19%

Number of lines in readme file

57

increased by29.55%

Worsened metrics

Total package byte prevSize

115407

decreased by-0.05%

Number of package files

18

decreased by-5.26%

No dependency changes