material 0.7.1 → 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/element/ripple.js

@@ -1,90 +0,0 @@
-import create from '../element/create'
-import insert from '../element/insert'
-import offset from '../element/offset'
-
-const defaults = {
-  transition: '.5s cubic-bezier(0.4, 0.0, 0.2, 1)',
-  opacity: ['1', '.3']
-}
-
-/**
- * show method
- * @param  {event} e The event related to the the touch
- * @param  {Object} coord
- * @return {void}
- */
-function ripple (e, params) {
-  var options = Object.assign({},
-    defaults, params || {})
-
-  // console.log('show', e);
-  var container = e.target
-  var offs = offset(container)
-
-  let ripple = create('div', 'material-ripple')
-  let end = coordinate(offs)
-  let initial = {
-    left: (e.offsetX || offs.width / 2) + 'px',
-    top: (e.offsetY || offs.height / 2) + 'px'
-  }
-
-  ripple.style.left = initial.left
-  ripple.style.top = initial.top
-  ripple.style.opacity = options.opacity[1]
-  ripple.style.transition = options.transition
-
-  insert(ripple, container, 'top')
-
-  setTimeout(() => {
-    // console.log('style coord', end);
-    ripple.style.left = end.left
-    ripple.style.top = end.top
-    ripple.style.width = end.size
-    ripple.style.height = end.size
-    ripple.style.opacity = options.opacity[1]
-  }, 1)
-
-  document.body.onmouseup = () => {
-    destroy(ripple)
-  }
-}
-
-/**
- * this method hides the given ripple
- * @return {Object} Size and position
- */
-function destroy (ripple) {
-  if (ripple.parentNode) { ripple.style.opacity = '0' }
-
-  document.body.onmouseup = null
-
-  setTimeout(() => {
-    if (ripple.parentNode) { ripple.parentNode.removeChild(ripple) }
-  }, 1000)
-}
-
-/**
- * Get ripple final coordinates
- * @param  {Object} offset
- * @return {Object} Size and position
- */
-function coordinate (offset) {
-  var size = offset.width
-  var top = -offset.height / 2
-
-  if (offset.width > offset.height) {
-    size = offset.width
-    top = -(offset.width - offset.height / 2)
-  } else if (offset.width < offset.height) {
-    size = offset.height
-    top = (offset.width - offset.height) / 2
-  }
-
-  return {
-    size: (size * 2) + 'px',
-    top: top + 'px',
-    left: (size / -2) + 'px'
-  }
-}
-
-export default ripple

package/src/module/addclass.js

@@ -1,16 +0,0 @@
-
-function setClass (element, className) {
-  // console.log('attributes', o.attributes, element)
-
-  if (!element || !className) return
-
-  let classNames = className.split(' ')
-
-  for (var i = 0; i < classNames.length; i++) {
-    var name = classNames[i]
-    element.classList.add(name)
-  }
-  return element
-}
-
-export default setClass