material 0.7.1 → 0.7.4

package/src/styles/M3/modules/ripple.sass

@@ -0,0 +1,9 @@
+.ripple
+  opacity: 1
+  pointer-events: none
+  z-index: 1
+  position: absolute
+  background-color: rgba(255, 255, 255, 0.1)
+  height: 5px
+  width: 5px
+  border-radius: 50%

package/src/styles/M3/themes/classic.sass

@@ -0,0 +1,2 @@
+$primary: #6750A4
+$onPrimary: rgba(255,255,255,.87)

package/src/switch.js

@@ -55,7 +55,7 @@ class Switch extends EventEmitter {
     this.buildLabel()
 
     if (this.options.data) {
-      dataset(this.root, this.options.data)
+      dataset(this.element, this.options.data)
     }
 
     // console.log('attribute', this.ui.input, this.options)

package/src/switcher.js

@@ -1,6 +1,6 @@
 import EventEmitter from './mixin/emitter'
 
-class Switcher extends EventEmitter{
+class Switcher extends EventEmitter {
   static defaults = {
     class: 'switcher',
     tag: 'div',
@@ -9,7 +9,7 @@ class Switcher extends EventEmitter{
     mode: 'unique',
     allowEmpty: false
   }
-  
+
   constructor (options) {
     super()
 
@@ -22,7 +22,7 @@ class Switcher extends EventEmitter{
     }
   }
 
-  init(options) {
+  init (options) {
     this.options = Object.assign({}, Switcher.defaults, options || {})
   }
 
@@ -85,8 +85,8 @@ class Switcher extends EventEmitter{
     if (item) {
       item.classList.add('preselected')
     } else {
-      var items = this.list.childNodes
-      for (var i = 0; i < items.length; i++) {
+      const items = this.list.childNodes
+      for (let i = 0; i < items.length; i++) {
         items[i].classList.remove('preselected')
       }
     }
@@ -94,7 +94,7 @@ class Switcher extends EventEmitter{
 
   selectByName (name) {
     // console.log('selectByName', name)
-    var item = this.element.querySelector('[data-switcher="' + name + '"]')
+    const item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     if (item) {
       this.select(item)
@@ -103,7 +103,7 @@ class Switcher extends EventEmitter{
 
   preSelectByName (name) {
     // console.log('selectByName', name)
-    var item = this.element.querySelector('[data-switcher="' + name + '"]')
+    const item = this.element.querySelector('[data-switcher="' + name + '"]')
     // console.log('item', item)
     this.preselect(item)
   }
@@ -111,9 +111,9 @@ class Switcher extends EventEmitter{
   unique (option) {
     // console.log('option', option)
     if (!option.classList.contains('selected')) {
-      var options = this.list.childNodes
+      const options = this.list.childNodes
 
-      for (var i = 0; i < options.length; i++) {
+      for (let i = 0; i < options.length; i++) {
         options[i].classList.remove('selected')
       }
 
@@ -132,7 +132,7 @@ class Switcher extends EventEmitter{
   multiple (option) {
     if (option.classList.contains('selected')) {
       if (this.selected.length === 1) return
-      var i = this.selected.indexOf(option.dataset.switcher)
+      const i = this.selected.indexOf(option.dataset.switcher)
       this.selected.splice(i, 1)
       option.classList.remove('selected')
     } else {
@@ -163,7 +163,7 @@ class Switcher extends EventEmitter{
 
   setValue (value) {
     // console.log('value', value, this.options.list, this.element)
-    var list = this.options.list
+    const list = this.options.list
     if (this.options.mode === 'unique') {
       for (var i = 0; i < list.length; i++) {
         this.element.querySelector('[data-switcher="' + list[i] + '"]').classList.remove('selected')
@@ -190,7 +190,7 @@ class Switcher extends EventEmitter{
 
     if (!list) return
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.addOption(list[i])
     }
   }
@@ -202,19 +202,19 @@ class Switcher extends EventEmitter{
 
     if (this.options.list.length < 1) this.options.list = list
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.addOption(list[i])
     }
   }
 
   addOption (value) {
     // console.log('addOption', value)
-    var item = document.createElement('li')
+    const item = document.createElement('li')
     item.classList.add('item')
     item.dataset.switcher = value
     item.innerHTML = value
     this.list.appendChild(item)
-      // this.options.list.push(list[i])
+    // this.options.list.push(list[i])
   }
 
   setLabel (value) {

package/src/tabs.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import create from './mixin/create'
 import insert from './mixin/insert'
 import emitter from './module/emitter'
@@ -48,15 +46,15 @@ class Tabs {
     this.tab = { }
     if (this.options.list) {
       this.list = new List({
-        // root: this.element,
         tag: 'div',
+        container: this.element,
         list: this.options.list,
         target: '.material-button',
         height: 600,
         label: 'Flat',
 
         render: (info) => {
-          var item
+          let item
           if (info.type === 'divider') {
             item = new Divider()
           } else {
@@ -75,7 +73,7 @@ class Tabs {
           this.selected = item
           this.click(item)
         }
-      }).insert(this.element)
+      })
     }
 
     this.indicator = create(this.options.indicator)
@@ -91,13 +89,13 @@ class Tabs {
   select (tab) {
     // console.log('select', tab, this.tab)
     this.selected = this.tab[tab]
-    this.click(this.selected.root, true)
+    this.click(this.selected.element, true)
   }
 
   click (item, silent) {
     // console.log('clickitem', item, this.element);
-    var or = offset(this.element)
-    var o = offset(item)
+    const or = offset(this.element)
+    const o = offset(item)
     this.indicator.setAttribute('style', 'width: ' + o.width + 'px; left: ' + (o.left - or.left) + 'px;')
 
     if (!silent) { this.emit('select', item.dataset.name) }

package/src/tabview.js

@@ -1,38 +1,24 @@
-import emitter from './module/emitter'
-import observer from './module/observer'
+import EventEmitter from './mixin/emitter'
+import observer from './element/observer'
+import build from './module/build'
 import display from './view/display'
 
-/**
- * Class Tab
- * @class
- * @since 0.0.1
- * @example
- * var tab = new TabView()
- */
-
-var defaults = {
-  class: 'tabview',
-  mode: 'style' // css
-}
+class TabView extends EventEmitter {
+  static defaults = {
+    base: 'view',
+    class: 'tabview',
+    mode: 'style'
+  }
 
-class TabView {
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
   constructor (options) {
-    // console.log('TabView')
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter, display)
+    super()
 
+    this.init(options)
     this.build()
 
-    var ready = false
+    let ready = false
 
     observer.insert(this.element, () => {
-      // console.log('!!! inserted')
       if (!ready) {
         ready = true
         this.setup()
@@ -45,15 +31,9 @@ class TabView {
     return this
   }
 
-  build () {
-    this.element = document.createElement(this.options.tag || 'div')
-    this.element.classList.add('tabview')
-
-    this.element.classList.add('view')
-
-    if (this.options.class !== 'tabview') {
-      this.element.classList.add(this.options.class)
-    }
+  init (options) {
+    this.options = { ...TabView.defaults, ...options }
+    Object.assign(this, build, display)
 
     this.ui = {}
   }
@@ -72,7 +52,7 @@ class TabView {
 
     // console.log('views', this.ui.views)
 
-    for (var i = 0; i < this.ui.views.length; i++) {
+    for (let i = 0; i < this.ui.views.length; i++) {
       if (this.ui.views[i].dataset) {
         this.views.push(this.ui.views[i].dataset.view)
         this.view[this.ui.views[i].dataset.view] = this.ui.views[i]
@@ -98,7 +78,7 @@ class TabView {
   select (view) {
     // console.log('select', view, this.ui.tabs)
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         this.click(button)
@@ -111,7 +91,7 @@ class TabView {
   disable (view) {
     // console.log('select', view)
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         button.disabled = 'disabled'
@@ -125,7 +105,7 @@ class TabView {
     // console.log('select', view)
 
     if (this.ui && this.ui.tabs) {
-      var button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
+      const button = this.ui.tabs.querySelector('[data-view="' + view + '"]')
       // console.log('tab', button)
       if (button) {
         button.disabled = false
@@ -137,7 +117,7 @@ class TabView {
 
   hideView () {
     // console.log('hideView')
-    for (var i = 0; i < this.ui.views.length; i++) {
+    for (let i = 0; i < this.ui.views.length; i++) {
       // console.log('hide', this.ui.views[i])
       this.ui.views[i].classList.add('hide')
     }
@@ -145,7 +125,7 @@ class TabView {
 
   click (button) {
     // console.log('click', button.dataset.view, true)
-    var view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
+    const view = this.ui.view.querySelector('[data-view="' + button.dataset.view + '"]')
     this.hideView()
 
     if (this.button) {
@@ -172,14 +152,14 @@ class TabView {
   indicator (button) {
     if (!this.ui.indicator) return
 
-    var t = this.ui.tabs.getBoundingClientRect()
-    var b = button.getBoundingClientRect()
+    const tabs = this.ui.tabs.getBoundingClientRect()
+    var button = button.getBoundingClientRect()
 
     // console.log('tab rect', b.height, b.height)
 
-    this.ui.indicator.style.top = t.height - 2 + 'px'
-    this.ui.indicator.style.left = (b.left - t.left) + 'px'
-    this.ui.indicator.style.width = b.width + 'px'
+    this.ui.indicator.style.top = tabs.height - 2 + 'px'
+    this.ui.indicator.style.left = (button.left - tabs.left) + 'px'
+    this.ui.indicator.style.width = button.width + 'px'
   }
 }
 

package/src/text.js

@@ -27,7 +27,7 @@ class Text {
     // console.log('set', text)
     if (text === undefined) return
 
-    var label = this.options.label || ''
+    const label = this.options.label || ''
 
     if (this.options.textFirst) {
       this.element.innerHTML = text + label

package/src/textfield.js

@@ -32,7 +32,7 @@ class Textfield {
   }
 
   build () {
-    var tag = this.options.tag || 'div'
+    const tag = this.options.tag || 'div'
 
     this.element = document.createElement(tag)
     this.element.classList.add('textfield')

package/src/toolbar.js

@@ -63,16 +63,16 @@ class Toolbar {
 
   attach () {
     this.element.addEventListener('DOMNodeInserted', (e) => {
-      var textNode = e.target
+      const textNode = e.target
       if (textNode !== this.element) return
 
-      var size = this.size = offset(this.element, 'height')
+      const size = this.size = offset(this.element, 'height')
 
-      var view = this.view = this.element.parentNode
+      const view = this.view = this.element.parentNode
 
       // console.log('view', view)
 
-      var padding = window.getComputedStyle(view)['padding-top']
+      let padding = window.getComputedStyle(view)['padding-top']
       // console.log('paddingTop', padding)
       // if (!padding) padding = window.getComputedStyle(this.element.parentNode, 'padding')
       // console.log('padding', padding)
@@ -83,7 +83,7 @@ class Toolbar {
       this.padding = padding
 
       // console.log(' toolbar inserted in', size, 'padding', padding)
-      var ptop = this.ptop = size + padding
+      const ptop = this.ptop = size + padding
 
       // console.log('ptop', ptop)
 
@@ -125,9 +125,9 @@ class Toolbar {
   scroll (view) {
     // console.log('initScroll')
 
-    var isBody = false
+    let isBody = false
 
-    var element = view
+    let element = view
 
     this.scrolling = view
 
@@ -140,7 +140,7 @@ class Toolbar {
     view.classList.add()
 
     element.addEventListener('scroll', (e) => {
-      var scrollTop
+      let scrollTop
       if (isBody) {
         scrollTop = (document.documentElement ||
        document.body.parentNode ||
@@ -167,11 +167,11 @@ class Toolbar {
   }
 
   flexible (e, scrollTop) {
-    var size = offset(this.element, 'height')
+    const size = offset(this.element, 'height')
     // console.log('flexible', size, this.element.offsetHeight, scrollTop)
     // if (scrollTop < this.size) {
     //
-    var height = '64'
+    let height = '64'
     if (size < height) {
       this.element.style.height = height + 'px'
     } else {
@@ -188,8 +188,8 @@ class Toolbar {
     //   this.element.style.top = scrollTop + 'px'
     // }
     // }
-      // this.element.style.top = scrollTop + 'px'
-      // this.element.style.height = this.size - scrollTop
+    // this.element.style.top = scrollTop + 'px'
+    // this.element.style.height = this.size - scrollTop
     // } else {
     //   console.log('size scroll', this.size, scrollTop)
 

package/src/tooltip.js

@@ -38,7 +38,7 @@ class Tooltip {
   }
 
   build () {
-    var container = this.options.container || document.body
+    const container = this.options.container || document.body
 
     this.element = document.createElement('span')
     this.element.classList.add('tooltip')
@@ -57,9 +57,9 @@ class Tooltip {
 
   attach () {
     // console.log('attach', this.options.targets)
-    var targets = document.querySelectorAll(this.options.targets)
+    const targets = document.querySelectorAll(this.options.targets)
 
-    for (var i = 0; i < targets.length; i++) {
+    for (let i = 0; i < targets.length; i++) {
       targets[i].addEventListener('mouseover', (e) => {
         // console.log('tooltip', touch(), this.disabled)
         if (touch()) return
@@ -75,7 +75,7 @@ class Tooltip {
         }
 
         this.label.innerHTML = e.currentTarget.dataset.tooltip
-        var coord = this.offset(e.currentTarget)
+        const coord = this.offset(e.currentTarget)
 
         this.show()
         this.element.style.top = (coord.top + this.options.offset.top) + 'px'
@@ -96,9 +96,9 @@ class Tooltip {
   }
 
   offset (target) {
-    var rect = target.getBoundingClientRect()
-    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
-    var scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    const rect = target.getBoundingClientRect()
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
     return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
   }
 

package/src/tree.js

@@ -1,10 +1,7 @@
-'use strict'
-
-import insert from './mixin/insert'
-import css from './module/css'
-import attach from './module/attach'
-
 import emitter from './module/emitter'
+import * as css from './module/css'
+import attach from './module/attach'
+import insert from './mixin/insert'
 
 const defaults = {
   prefix: 'material',
@@ -16,21 +13,7 @@ const defaults = {
   ]
 }
 
-/**
- * Tree component
- * @class
- * @param {Object} options Default options for view
- * @extends {View}
- * @since 0.0.4
- * @author Jerome Vial
- *
- * @type {prime}
- */
 class Tree {
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.options = Object.assign({}, defaults, options || {})
 
@@ -41,10 +24,6 @@ class Tree {
     return this
   }
 
-  /**
-   * [_initView description]
-   * @return  Class instance
-   */
   init () {
     // init this
 
@@ -62,28 +41,18 @@ class Tree {
     return this
   }
 
-  /**
-   * [_initFunction description]
-   * @param  {?} functions [description]
-   * @return {}           [description]
-   */
   _initFunction (functions) {
-    for (var i = 0; i < functions.length; i++) {
-      var name = functions[i]
+    for (let i = 0; i < functions.length; i++) {
+      const name = functions[i]
       if (this.options[name]) {
         this[name] = this.options[name]
       }
     }
   }
 
-  /**
-   * [_initList description]
-   * @param  {Object} options this class options
-   * @return {Object} The class instance
-   */
   build () {
     // define main tag
-    var tag = this.options.tag || 'div'
+    const tag = this.options.tag || 'div'
 
     this.element = document.createElement(tag)
     css.add(this.element, this.options.prefix + '-' + this.options.class)
@@ -109,7 +78,7 @@ class Tree {
 
     // console.log('buildTree', data);
 
-    var tree = ''
+    let tree = ''
 
     function checkChildren (parentObj, level) {
       if (level) {
@@ -135,8 +104,8 @@ class Tree {
 
       if (parentObj.children && parentObj.children.length > 0) {
         tree += '<ul>'
-        for (var i = 0; i < parentObj.children.length; i++) {
-          var children = parentObj.children[i]
+        for (let i = 0; i < parentObj.children.length; i++) {
+          const children = parentObj.children[i]
 
           checkChildren(children, level)
         }
@@ -161,11 +130,6 @@ class Tree {
     // console.log(this.options)
   }
 
-  /**
-   * This method handles onSelect
-   * @param  {event} e [description]
-   * @return {?}   [description]
-   */
   onSelect (e) {
     // console.log('click', e.target, this.options.target)
     if (e.target && e.target.matches(this.options.target)) {
@@ -184,12 +148,6 @@ class Tree {
     return this
   }
 
-  /**
-   * select
-   * @param  {Element} item  [description]
-   * @param  {event} event The caller event
-   * @return        [description]
-   */
   select (item, event) {
     // console.log('select', item, event)
     this.item = item
@@ -197,11 +155,6 @@ class Tree {
     this.emit('selected', item[0])
   }
 
-  /**
-   * Setter
-   * @param {string} prop
-   * @param {string} value
-   */
   set (prop, value, options) {
     switch (prop) {
       case 'tree':
@@ -214,26 +167,17 @@ class Tree {
     return this
   }
 
-  /**
-   * Set list
-   * @param {Array} list List of info object
-   * @return {Object} The class instance
-   */
   setTree (data) {
     this.buildTree(data)
     return this
   }
 
-  /**
-   * [add description]
-   * @param {Object} item [description]
-   */
   addItem (item /*, index */) {
     if (!item) {
       return
     }
 
-    var where = 'bottom'
+    const where = 'bottom'
     this.insertElement(item.root, this.element, where)
     // item.insert(this.element, where);
     this.items.push(item)

package/src/view/build.js

@@ -25,9 +25,9 @@ export default {
   },
 
   addClass (c) {
-    var list = c.split(' ')
+    const list = c.split(' ')
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       this.element.classList.add(list[i])
     }
   }

package/src/view/dataset.js

@@ -1,7 +1,7 @@
 
 function dataset (element, data) {
   if (data) {
-    for (var property in data) {
+    for (const property in data) {
       if (data.hasOwnProperty(property)) {
         element.dataset[property] = data[property]
       }