material - npm Package Compare versions

Comparing version 0.7.5 to 0.7.6

package.json

 {
   "name": "material",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
@@ -5,0 +5,0 @@ "main": "index.js",

src/button.js

@@ -49,3 +49,2 @@ import EventEmitter from './mixin/emitter'
     this.styleAttributes()
-    this.buildElements()
 
@@ -57,7 +56,2 @@ if (this.options.text) {
 
-  buildElements () {
-    this.buildIcon()
-    this.buildLabel()
-  }
-
   setAttributes () {
@@ -85,22 +79,2 @@ const { type, name, value, title, text, label, tooltip, data, case: caseOption } = this.options
 
-  buildLabel () {
-    if (!this.options.label) return
-
-    this.label = document.createElement('label')
-    this.label.classList.add('label')
-    this.label.innerHTML = this.options.label
-
-    this.element.appendChild(this.label)
-  }
-
-  buildIcon () {
-    if (!this.options.icon) return
-
-    this.icon = document.createElement('i')
-    this.icon.classList.add('icon')
-    this.icon.innerHTML = this.options.icon
-
-    this.element.appendChild(this.icon)
-  }
-
   set (prop, value) {
@@ -113,4 +87,4 @@ // console.log('set', this.element, prop, value)
       case 'label':
-        if (!this.label) this.buildLabel()
-        this.label.innerHTML = value
+        if (!this.ui.label) this.buildLabel()
+        this.ui.label.innerHTML = value
         break
@@ -121,4 +95,4 @@ case 'text':
       case 'icon':
-        if (this.icon) {
-          this.icon.innerHTML = value
+        if (this.ui.icon) {
+          this.ui.icon.innerHTML = value
         }
@@ -141,4 +115,4 @@ break
   setLabel (value) {
-    if (this.label) {
-      this.label.innerHTML = value
+    if (this.ui.label) {
+      this.ui.label.innerHTML = value
     }
@@ -148,3 +122,3 @@ }
   setText (value) {
-    if (this.label) {
+    if (this.ui.label) {
       this.setLabel(value)
@@ -151,0 +125,0 @@ } else {

src/file.js

@@ -16,3 +16,2 @@ import EventEmitter from './mixin/emitter'
     this.build()
-    this.buildLabel()
     this.buildInput()
@@ -27,11 +26,2 @@ this.attach()
 
-  buildLabel () {
-    if (this.options.label) {
-      this.label = document.createElement('label')
-      this.label.classList.add('label')
-      this.label.innerHTML = this.options.label
-      this.element.appendChild(this.label)
-    }
-  }
-
   buildInput () {
@@ -38,0 +28,0 @@ this.field = document.createElement('div')

src/item.js

@@ -1,91 +0,43 @@
-import Layout from './layout'
+import build from './module/build'
 
-import create from './mixin/create'
-import insert from './mixin/insert'
-
-const defaults = {
-  prefix: 'material',
-  class: 'item',
-  type: 'default',
-  tag: 'li',
-  types: {
-    default: 'span',
-    display4: 'h1',
-    display3: 'h1',
-    display2: 'h1',
-    display1: 'h1',
-    headline: 'h1',
-    title: 'h2',
-    subheading2: 'h3',
-    subheading1: 'h4',
-    body: 'p',
-    body2: 'aside',
-    caption: 'span'
+class Item {
+  static defaults = {
+    prefix: 'material',
+    class: 'item',
+    type: 'default',
+    tag: 'span',
+    types: {
+      default: 'span',
+      display4: 'h1',
+      display3: 'h1',
+      display2: 'h1',
+      display1: 'h1',
+      headline: 'h1',
+      title: 'h2',
+      subheading2: 'h3',
+      subheading1: 'h4',
+      body: 'p',
+      body2: 'aside',
+      caption: 'span'
+    }
   }
-}
 
-/**
- * The class represents an item ie for list
- *
- * @class
- * @return {Object} The class instance
- * @example new Item(object);
- */
-class Item {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
+    this.setup()
+  }
 
-    return this
+  setup () {
+    if (this.options.text) this.set(this.options.text)
+    if (this.options.name) this.element.setAttribute('name', this.options.name)
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    // merge options
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = Object.assign({}, Item.defaults, options || {})
+    Object.assign(this, build)
 
-    // define class
-
-    // assign modules
-    Object.assign(this, insert)
-  }
-
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
-  build () {
-    // define main tag
     this.options.tag = this.options.tag || this.options.types[this.options.type]
-
-    this.options.tag = this.options.tag
-
-    this.element = create(this.options)
-
-    if (this.options.text) {
-      this.set(this.options.text)
-    }
-
-    if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.element)
-    } else {
-      if (this.options.container) {
-        this.insert(this.options.container)
-      }
-    }
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
   set (value) {
@@ -98,4 +50,2 @@ if (value) {
       }
-
-      return this
     }
@@ -102,0 +52,0 @@

src/mixin/control.js

@@ -11,6 +11,2 @@ import create from '../element/create'
 const control = {
-  /**
-   * [toggle description]
-   * @return {Object} The class instance
-   */
   toggle () {
@@ -30,6 +26,2 @@ if (this.disabled) return
 
-  /**
-   * Set checkbox value
-   * @param {boolean} value [description]
-   */
   check (checked) {
@@ -50,6 +42,2 @@ if (checked === true) {
 
-  /**
-   * [initLabel description]
-   * @return {?} [description]
-   */
   label (label, container) {
@@ -71,7 +59,2 @@ if (!label) return
 
-  /**
-   * [_initIcon description]
-   * @param  {string} type
-   * @return {string}
-   */
   icon (icon, container, position) {
@@ -95,6 +78,2 @@ if (!icon) return
 
-  /**
-   * [initLabel description]
-   * @return {?} [description]
-   */
   error (error) {
@@ -145,8 +124,2 @@ error = error || this.options.error
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   get (prop) {
@@ -174,6 +147,2 @@ switch (prop) {
 
-  /**
-   * [_onInputFocus description]
-   * @return {?} [description]
-   */
   focus () {
@@ -187,6 +156,2 @@ if (this.disabled === true) return this
 
-  /**
-   * [_onInputBlur description]
-   * @return {?} [description]
-   */
   blur () {
@@ -193,0 +158,0 @@ css.remove(this.element, 'is-focused')

src/mixin/display.js

@@ -13,7 +13,4 @@ import dom from '../module/dom'
     // console.log('show', this.visible)
+    if (!this.element) return
 
-    // if (this.options.transition) {
-    //   this.element.style.display = 'initial'
-    // }
-
     this.element.getBoundingClientRect()
@@ -33,7 +30,2 @@
   hide () {
-    // console.log('hide')
-    // if (this.element.style.display === 'none') return
-    // clearTimeout(this.displayTimeout)
-    // this._display = getComputedStyle(this.element).display
-
     if (!this.element) return
@@ -48,9 +40,2 @@
 
-    // if (this.options.transition) {
-    //   this.displayTimeout = setTimeout(() => {
-    //     console.log('display: none', this._display)
-    //     this.element.style.display = 'none'
-    //   }, this.options.transition)
-    // }
-
     this.emit?.('hide')
@@ -57,0 +42,0 @@ return this

src/mixin/label.js

@@ -6,6 +6,2 @@ import create from '../element/create'
 
-/**
- * [initLabel description]
- * @return {?} [description]
- */
 function label (root, text, options) {
@@ -12,0 +8,0 @@ text = text || null

src/module/build.js

@@ -36,5 +36,30 @@ import * as css from './css'
 
+    this.ui = this.ui || {}
+
+    if (this.options.label) this.buildLabel()
+    if (this.options.icon) this.buildIcon()
+
     if (this.options.show === true && this.show) this.show()
   },
 
+  buildLabel () {
+    if (!this.options.label) return
+
+    this.ui.label = document.createElement('label')
+    this.ui.label.classList.add('label')
+    this.ui.label.innerHTML = this.options.label
+
+    this.element.appendChild(this.ui.label)
+  },
+
+  buildIcon () {
+    if (!this.options.icon) return
+
+    this.ui.icon = document.createElement('i')
+    this.ui.icon.classList.add('icon')
+    this.ui.icon.innerHTML = this.options.icon
+
+    this.element.appendChild(this.ui.icon)
+  },
+
   appendTo (container) {
@@ -41,0 +66,0 @@ container.appendChild(this.element)

src/module/numabbr.js

 const numabbr = (number, decimals = 2) => {
+  if (typeof number !== 'number' || isNaN(number)) {
+    return null
+  }
+
   const factor = Math.pow(10, decimals)
@@ -14,3 +18,3 @@ const abbrev = ['k', 'm', 'b', 't']
         num = 1
-        i++
+        return `${num}${abbrev[i + 1]}`
       }
@@ -17,0 +21,0 @@

src/module/observer.js

@@ -28,5 +28,5 @@ const observer = (() => {
   const notify = function (event, ...args) {
-    if (!observer.events[event]) return this
+    if (!this.events[event]) return this
 
-    for (const { context, callback } of observer.events[event]) {
+    for (const { context, callback } of this.events[event]) {
       callback.apply(context, args)
@@ -33,0 +33,0 @@ }

src/navigation.js

@@ -9,2 +9,3 @@ import EventEmitter from './mixin/emitter'
 import Button from './button'
+import Item from './item'
 
@@ -15,2 +16,5 @@ class Navigation extends EventEmitter {
     tag: 'nav',
+    layout: [
+      [Element, 'body', { class: 'body' }]
+    ],
     events: [
@@ -33,2 +37,3 @@ ['element.click', 'toggle']
     Object.assign(this, build, attach, display)
+    this.items = []
   }
@@ -44,2 +49,3 @@
   render (items) {
+    console.log('render', items)
     if (items && Array.isArray(items)) {
@@ -55,13 +61,14 @@ for (let i = 0; i < items.length; i++) {
     let item
-    if (obj.type === 'divider') {
-      item = new Element({ tag: 'li', class: 'divider' })
+    if (obj.type === 'header') {
+      item = new Element({ tag: 'span', class: 'header' })
     } else if (obj.type === 'divider') {
-      item = new Element({ tag: 'li', class: 'divider' })
+      item = new Element({ tag: 'span', class: 'divider' })
     } else {
-      obj.container = this.ui.list
+      obj.container = this.ui.body
       obj.class = 'item'
-      item = new Button(obj).on('click', (ev) => {
-        // console.log('select', ev.target.name)
-        this.emit('select', ev.target.name)
-      })
+      obj.stopPropagation = true
+      obj.class = 'item'
+      item = new Item(obj)
+      console.log('item', item, this.items)
+      this.items.push(item)
     }
@@ -68,0 +75,0 @@

src/switch.js

@@ -0,3 +1,3 @@
+// base
 import EventEmitter from './mixin/emitter'
-
 // module
@@ -8,5 +8,3 @@ import build from './module/build'
 import attributes from './module/attributes'
-
 // ui
-import Layout from './layout'
 import Element from './element'
@@ -37,2 +35,3 @@
   constructor (options) {
+    // console.log('switch')
     super()
@@ -56,5 +55,2 @@
 
-    this.buildIcon()
-    this.buildLabel()
-
     if (this.options.data) {
@@ -86,27 +82,2 @@ dataset(this.element, this.options.data)
 
-  buildLabel () {
-    // console.log('buildLabel', this.options.label)
-    if (!this.options.label) return
-
-    this.ui.label = document.createElement('label')
-    this.ui.label.classList.add('label')
-    this.ui.label.innerHTML = this.options.label
-
-    if (this.options.name) {
-      this.ui.label.setAttribute('for', this.options.name)
-    }
-
-    this.element.insertBefore(this.ui.label, this.ui.input)
-  }
-
-  buildIcon () {
-    if (!this.options.icon) return
-
-    this.ui.icon = document.createElement('i')
-    this.ui.icon.classList.add('icon')
-    this.ui.icon.innerHTML = this.options.icon
-
-    this.element.insertBefore(this.ui.icon, this.ui.input)
-  }
-
   styleAttributes () {
@@ -130,8 +101,2 @@ if (this.options.style) {
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   * @return {Object} The class instance
-   */
   set (prop, value, silent) {
@@ -138,0 +103,0 @@ switch (prop) {

src/text.js

@@ -46,4 +46,12 @@ import build from './module/build'
   }
+
+  get () {
+    if (this.element.innerHTML) {
+      return this.element.innerHTML
+    } else {
+      return ''
+    }
+  }
 }
 
 export default Text

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

451988

decreased by-0.68%

Lines of code

10541

decreased by-1.05%

No dependency changes