material 0.7.0 → 0.7.2

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]
       }

package/src/view.js

@@ -1,88 +1,23 @@
-'use strict'
+import EventEmitter from './mixin/emitter'
 
-import create from './element/create'
-import css from './module/css'
-import insert from './element/insert'
-import emitter from './module/emitter'
+import build from './module/build'
 
-const defaults = {
-  prefix: 'material',
-  class: 'view',
-  type: null,
-  element: {
-    tag: 'span',
+class View extends EventEmitter {
+  static defaults = {
+    class: 'view',
     type: null
   }
-}
 
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
-class View {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    // init and build
+    super()
+
     this.init(options)
     this.build()
-
-    return this
   }
 
-  /**
-   * Init class
-   * @params {Object} options The instance options
-   * @return {Object} This class instance
-   */
   init (options) {
-    this.options.name = this.options.name
-
-    // implement modules
-    Object.assign(this, emitter)
-
-    // this.controller = controller;
-
-    return this
-  }
-
-  /**
-   * [build description]
-   * @return {Object} This class  instance
-   */
-  build (props) {
-    var tag = this.options.tag || 'div'
-
-    this.element = create(tag, this.options.prefix + '-' + this.options.class)
-
-    if (this.options.name) {
-      css.add(this.element, this.options.class + '-' + this.options.name)
-    }
-
-    if (this.options.css) {
-      css.add(this.element, this.options.css)
-    }
-
-    if (this.options.container) {
-      // console.log(this.options.name, opts.container);
-      insert(this.element, this.options.container)
-    }
-
-    return this
-  }
-
-  insert (container, context) {
-    insert(this.element, container, context)
-    return this
+    this.options = Object.assign({}, defaults, options || {})
+    Object.assign(this, build)
   }
 }
 

package/rollup.config.js

@@ -1,34 +0,0 @@
-// Roolup plugins
-import babel from 'rollup-plugin-babel'
-import json from 'rollup-plugin-json'
-import resolve from 'rollup-plugin-node-resolve'
-import commonjs from 'rollup-plugin-commonjs'
-import replace from 'rollup-plugin-replace'
-import uglify from 'rollup-plugin-uglify-es'
-import rawsvg from 'rollup-plugin-rawsvg'
-
-export default {
-  input: 'dist/demo.js',
-  output: {
-    file: 'dist/demo-bundle.js',
-    format: 'iife'
-  },
-  sourcemap: true,
-  plugins: [
-    resolve({
-      jsnext: true,
-      main: true,
-      browser: true
-    }),
-    commonjs(),
-    babel({
-      include: 'node_modules/**'
-    }),
-    json(),
-    replace({
-      ENV: JSON.stringify(process.env.NODE_ENV || 'development')
-    }),
-    rawsvg(),
-    uglify()
-  ]
-}

package/src/banner.js

@@ -1,231 +0,0 @@
-'use strict'
-
-import create from './mixin/create'
-import insert from './element/insert'
-import event from './element/event'
-import offset from './element/offset'
-import emitter from './module/emitter'
-
-const defaults = {
-  prefix: 'material',
-  class: 'banner',
-  tag: 'div'
-}
-
-/**
- * Class representing a UI Container. Can add components.
- *
- * @extends Component
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
-class Banner {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
-  constructor (options) {
-    // init and build
-    this.init(options)
-    this.build()
-    this.attach()
-
-    return this
-  }
-
-  /**
-   * Init class
-   * @params {Object} options The instance options
-   * @return {Object} This class instance
-   */
-  init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, emitter)
-
-    return this
-  }
-
-  /**
-   * [build description]
-   * @return {Object} This class  instance
-   */
-  build () {
-    this.element = create(this.options)
-
-    if (this.options.container) {
-      insert(this.element, this.options.container)
-    }
-
-    return this
-  }
-
-  attach () {
-    event.add(this.element, 'click', (ev) => {
-      // console.log('click', ev.target)
-
-      if (ev.target && ev.target.classList.contains('material-button')) {
-        var name = ev.target.getAttribute('data-name')
-        // console.log('name', name)
-        this.emit('select', name)
-        this.dismiss(ev.target)
-      }
-
-      ev.stopPropagation()
-    })
-
-    this.element.addEventListener('DOMNodeInserted', (e) => {
-      // console.log('DOMNodeInserted', e.target)
-      var textNode = e.target
-
-      if (textNode == this.element) {
-        // console.log('banner root inserted', e.target)
-        if (!this.wrapper) { this.wrap() }
-        this.scroll(this.view)
-      }
-      this.updatePaddingView()
-
-      // if (textNode !== this.element) return
-    })
-  }
-
-  dismiss () {
-    this.wrapper.classList.add('is-closed')
-    this.wrapper.style.height = '0'
-    this.updatePaddingView()
-  }
-
-  show () {
-    console.log('this.height', this.height)
-    this.wrapper.classList.remove('is-closed')
-    this.wrapper.style.height = this.height + 'px'
-    this.updatePaddingView()
-    this.updatePosition()
-  }
-
-  wrap () {
-    this.view = this.element.parentNode
-
-    // console.log('wrap', this.element, this.view)
-    this.wrapper = document.createElement('div')
-
-    this.wrapper.classList.add('banner-wrapper')
-
-    this.view.insertBefore(this.wrapper, this.element)
-
-    this.wrapper.appendChild(this.element)
-
-    // insert(this.wrapper, this.element, 'before')
-
-    // insert(this.element, this.wrapper)
-  }
-
-  updatePaddingView () {
-    // console.log('updatePaddingView', this.view)
-
-    this.height = offset(this.element, 'height')
-    if (!this.paddingview) {
-      this.paddingview = window.getComputedStyle(this.view)['padding-top']
-    }
-
-      // this.element.style.top = 'top: ' + this.paddingview
-
-        // console.log('paddingTop', padding)
-        // if (!padding) padding = window.getComputedStyle(this.element.parentNode, 'padding')
-        // console.log('padding', padding)
-
-    var padding = parseInt(this.paddingview, 10)
-    var size = parseInt(this.height, 10)
-
-    this.padding = padding
-
-      // console.log(' banner inserted in', size, 'padding', padding)
-      //
-      //
-
-    var ptop = this.ptop = padding
-
-    if (this.wrapper.classList.contains('is-fixed') && !this.wrapper.classList.contains('is-closed')) {
-      var ptop = this.ptop = size + padding
-    }
-
-    this.view.setAttribute('style', 'padding-top: ' + ptop + 'px')
-  }
-
-  scroll (view) {
-    // console.log('initScroll', offset(this.element, 'top'), offset(view, 'top'))
-
-    var isBody = false
-
-    var element = view
-
-    this.scrolling = view
-
-    if (view === document.body) {
-      isBody = true
-      element = document
-      this.scrolling = document.body
-    }
-
-    // view.classList.add()
-
-    element.addEventListener('scroll', (e) => {
-      // console.log('scroll', this.view)
-      this.updatePosition()
-    })
-  }
-
-  updatePosition () {
-    var view = this.view
-    var scrollTop
-    if (view === document.body) {
-      scrollTop = (document.documentElement ||
-       document.body.parentNode ||
-       document.body).scrollTop
-    } else {
-      scrollTop = view.scrollTop
-    }
-
-      // var o = offset(this.element, 'top') - offset(view, 'top')
-      // console.log('o', this.element.offsetTop)
-
-    var padding = this.paddingview
-    padding = parseInt(padding, 10)
-
-    // console.log('scroll', scrollTop, padding)
-
-    if (scrollTop > padding) {
-      var y = scrollTop - padding
-      // console.log('fixed', y)
-      this.wrapper.classList.add('is-fixed')
-      this.wrapper.style.transform = 'translateY(' + y + 'px)'
-
-      // this.update(scrollTop, padding)
-      // this.wrapper.setAttribute('style', 'top: ' + this.paddingview)
-      this.wrapper.style.top = this.paddingview
-    } else {
-      // console.log('relative')
-      this.wrapper.classList.remove('is-fixed')
-      this.wrapper.style.transform = 'translateY(' + 0 + 'px)'
-      this.wrapper.style.top = '0'
-      // this.wrapper.setAttribute('style', 'top: ' + this.paddingview)
-      // this.wrapper.setAttribute('style', 'top: 0')
-    }
-
-    this.updatePaddingView()
-  }
-
-  update (scrollTop, padding) {
-
-  }
-
-  insert (container, context) {
-    insert(this.element, container, context)
-
-    return this
-  }
-}
-
-export default Banner