material 0.7.0 → 0.7.2

package/src/menu.js

@@ -1,140 +1,84 @@
-'use strict'
-
-import classify from './module/classify'
-import css from './module/css'
-import events from './mixin/events'
-import insert from './element/insert'
-import offset from './element/offset'
-
-import create from './element/create'
-
-import attach from './module/attach'
-import emitter from './module/emitter'
-
-import List from './list'
-import Item from './item'
-import Divider from './divider'
-
-const defaults = {
-  prefix: 'material',
-  class: 'menu',
-  tag: 'div',
-  events: [
-    ['root.click', 'hide'],
-    ['mask.click', 'hide']
-  ]
-}
+import EventEmitter from './mixin/emitter'
+// menu related modules
+import build from './module/build'
+import bindEvents from './module/events'
+import display from './mixin/display'
+
+import Element from './element'
+import Button from './button'
+
+class Menu extends EventEmitter {
+  static defaults = {
+    class: 'menu',
+    transition: 200,
+    modal: false,
+    layout: [
+      [Element, 'surface', { class: 'surface' },
+        [Element, 'list', { tag: 'ul', class: 'items' }]
+      ]
+    ],
+    events: [
+      ['element.click', 'close']
+    ]
+  }
 
-/**
- * This Class represents a menu.
- *
- * @return {parent} The class instance
- * @example new Container({
- *   container: document.body
- * });
- */
-class Menu {
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.init(options)
-    this.build()
-    this.setup()
+    super()
 
-    this.attach()
-
-    this.emit('ready')
+    this.init(options)
+    this.build(this.constructor)
+    this.bindEvents()
 
-    return this
+    this.render(this.options.items)
   }
 
-  /**
-   * [init description]
-   * @return {[type]} [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
-    Object.assign(this, emitter, events, attach, insert)
+    this.options = Object.assign({}, Menu.defaults, options || {})
+    Object.assign(this, build, bindEvents, display)
   }
 
-  /**
-   * Build Method
-   * @return {Object} This class instance
-   */
-  build () {
-    this.element = create(this.options.tag, this.options.css)
-    this.mask = create(this.options.tag, this.options.class + '-mask')
-
-    if (this.options.position) {
-      this.element.style.position = this.options.position
-    }
-
-    classify(this.element, this.options)
-
-    if (this.options.list) {
-      this.list = new List({
-        // root: this.element,
-        list: this.options.list,
-        target: '.material-item',
-        height: 600,
-        label: 'Flat',
-        select: (item) => {
-          this.selected = item
-          this.hide()
-        }
-      }).insert(this.element)
+  render (items) {
+    if (items && Array.isArray(items)) {
+      for (let i = 0; i < items.length; i++) {
+        this.add(items[i])
+      }
     }
 
-    this.emit('built', this.element)
-
     return this
   }
 
-  insert () {
-    insert(this.mask, document.body)
-    insert(this.element, document.body)
-  }
-
-  setup () {
-    // this.subscribe('click', () => {
-    //   console.log('click');
-    //   this.close();
-    // });
-    //
-    window.addEventListener('resize', () => this.position())
-  }
-
-  show (e) {
-    css.add(this.mask, 'mask-show')
-
-    if (e) this.caller = e.target
+  add (obj) {
+    if (typeof obj !== 'object') return this
+    let item
+    if (obj.type === 'divider') {
+      item = new Element({ tag: 'li', class: 'divider' })
+    } else {
+      obj.container = this.ui.list
+      obj.class = 'item'
+      item = new Button(obj).on('click', (ev) => {
+        // console.log('select', ev.target.name)
+        this.emit('select', ev.target.name)
+      })
+    }
 
-    css.add(this.element, this.options.class + '-show')
-    this.position(this.caller)
+    return this
   }
 
-  position () {
-    if (!this.caller) return
-    var offs = offset(this.caller)
+  position (target) {
+    if (!target) return
+    const offs = target.getBoundingClientRect()
 
-    var offsw = this.offset = offset(this.element)
+    const offsw = this.offset = this.ui.surface.getBoundingClientRect()
 
-    // console.log('offset')
-    // console.log('caller', this.caller, offs, screen.width)
+    this.ui.surface.style.top = (offs.top - 4) + 'px'
+    this.ui.surface.style.left = offs.left - offsw.width + offs.width + 'px'
 
-    this.element.style.top = offs.top + 'px'
-    this.element.style.left = offs.left - offsw.width + offs.width + 'px'
-    // this.element.style.right = offs.right + offs.width + offsw.width  + 'px'
+    return this
   }
 
-  hide () {
-    // console.log('hide')
-    css.remove(this.element, this.options.class + '-show')
-    css.remove(this.mask, 'mask-show')
+  close () {
+    // console.log('close')
+    this.destroy()
   }
 }
 

package/src/mixin/control.js

@@ -1,5 +1,5 @@
 import create from '../element/create'
-import css from '../module/css'
+import * as css from '../module/css'
 import insert from '../element/insert'
 
 const KEYCODE = {
@@ -7,7 +7,7 @@ const KEYCODE = {
   SPACE: 32
 }
 
-var control = {
+const control = {
   /**
    * [toggle description]
    * @return {Object} The class instance
@@ -96,7 +96,7 @@ var control = {
     error = error || this.options.error
     if (this.options.error === null) return
 
-    let text = this.options.error || this.options.text
+    const text = this.options.error || this.options.text
 
     if (!this.element.error) { this.element.error = create('error', this.options.class + '-error') }
 

package/src/mixin/controller.js

@@ -110,7 +110,7 @@ class Controller {
       return false
     }
 
-    for (var i = 0, len = this._topics[topic].length; i < len; i++) {
+    for (let i = 0, len = this._topics[topic].length; i < len; i++) {
       if (this._topics[topic][i] === callback) {
         this._topics[topic].splice(i, 1)
         return true
@@ -127,20 +127,20 @@ class Controller {
   publish () {
     this._topics = this._topics || {}
 
-    var args = Array.prototype.slice.call(arguments)
-    var topic = args.shift()
+    const args = Array.prototype.slice.call(arguments)
+    const topic = args.shift()
     // _log.debug('publish', topic);
     if (!this._topics.hasOwnProperty(topic)) {
       return false
     }
 
-    for (var i = 0, len = this._topics[topic].length; i < len; i++) {
+    for (let i = 0, len = this._topics[topic].length; i < len; i++) {
       this._topics[topic][i].apply(undefined, args)
     }
     return true
   }
 }
 
-var controller = new Controller()
+const controller = new Controller()
 
 export default controller

package/src/mixin/create.js

@@ -1,7 +1,7 @@
 import classify from '../module/classify'
 
 function create (options) {
-  var element = document.createElement(options.tag || 'div')
+  const element = document.createElement(options.tag || 'div')
 
   classify(element, options)
 

package/src/mixin/display.js

@@ -70,7 +70,6 @@ export default {
       dom.destroy(this.element)
     }
 
-
-   this.emit?.('destroy')
+    this.emit?.('destroy')
   }
 }

package/src/mixin/events.js

@@ -1,16 +1,10 @@
 export default {
-
-  /**
-   * cross browser addEvent
-   * @param {string}   event The event to add
-   * @param {Function} fn    [description]
-   */
   addEvent (event, fn) {
-    var element = this.element
+    const element = this.element
     // avoid memory overhead of new anonymous functions for every event handler that's installed
     // by using local functions
     function listenHandler (e) {
-      var ret = fn.apply(this, arguments)
+      const ret = fn.apply(this, arguments)
       if (ret === false) {
         e.stopPropagation()
         e.preventDefault()
@@ -21,7 +15,7 @@ export default {
     function attachHandler () {
       // set the this pointer same as addEventListener when fn is called
       // and make sure the event is passed to the fn also so that works the same too
-      var ret = fn.call(element, window.event)
+      const ret = fn.call(element, window.event)
       if (ret === false) {
         window.event.returnValue = false
         window.event.cancelBubble = true
@@ -38,14 +32,8 @@ export default {
     return this
   },
 
-  /**
-   * cross browser removeEvent
-   * @param  {string}   event The event to remove
-   * @param  {Function} fn    [description]
-   * @return {Object}         [description]
-   */
   removeEvent (event, fn) {
-    var element = this.element
+    const element = this.element
 
     if (element.removeEventListener) {
       element.removeEventListener(event, fn, false)

package/src/mixin/focus.js

@@ -1,4 +1,4 @@
-import css from '../module/css'
+import * as css from '../module/css'
 
 export default {
   /**

package/src/mixin/icon.js

@@ -11,12 +11,12 @@ function icon (root, svg, options) {
     return
   }
 
-  var position = 'top'
+  let position = 'top'
   if (options && options.type === 'text-icon') {
     position = 'bottom'
   }
 
-  var element = create('i', options.class + '-icon')
+  const element = create('i', options.class + '-icon')
   insert(element, root, position)
 
   element.innerHTML = svg

package/src/mixin/init.js

@@ -10,9 +10,9 @@ function init (instance) {
 }
 
 function modules (instance) {
-  var modules = instance.options.modules
+  const modules = instance.options.modules
 
-  for (var i = 0; i < modules.length; i++) {
+  for (let i = 0; i < modules.length; i++) {
     if (typeof modules[i] === 'function') {
       modules[i](instance)
     } else {

package/src/mixin/insert.js

@@ -2,41 +2,19 @@
 
 import dom from '../module/dom'
 
-/**
- * Inject method insert element to the domtree using Dom methods
- * @param {HTMLElement} container [description]
- * @param  {string} context - Injection context
- * @return {Object} This class intance
- */
 export default {
 
-  /**
-   * [insert description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @param  {?} debug     [description]
-   * @return {?}           [description]
-   */
   insert (container, context) {
-    var element = this.element
+    const element = this.element
 
     this.insertElement(element, container, context)
 
     return this
   },
 
-  /**
-   * [insertElement description]
-
-   * @param  {?} element   [description]
-   * @param  {?} container [description]
-   * @param  {?} context   [description]
-   * @param  {?} debug     [description]
-   * @return {?}           [description]
-   */
   insertElement (element, container, context) {
-    if (container && container.root) {
-      container = container.root
+    if (container && container.element) {
+      container = container.element
     }
 
     this.container = container
@@ -49,15 +27,15 @@ export default {
 
     context = context || 'bottom'
 
-    var contexts = ['top', 'bottom', 'after', 'before']
-    var methods = ['prepend', 'append', 'after', 'before']
+    const contexts = ['top', 'bottom', 'after', 'before']
+    const methods = ['prepend', 'append', 'after', 'before']
 
-    var index = contexts.indexOf(context)
+    const index = contexts.indexOf(context)
     if (index === -1) {
       return
     }
 
-    var method = methods[index]
+    const method = methods[index]
 
     // this.emit('insert');
 

package/src/mixin/label.js

@@ -10,9 +10,9 @@ const prefix = 'material'
 function label (root, text, options) {
   text = text || null
 
-  var prefix = options.class || options.prefix
+  const prefix = options.class || options.prefix
 
-  var label = create('label', prefix + '-label')
+  const label = create('label', prefix + '-label')
   label.textContent = text
   label.setAttribute('for', options.name)
   insert(label, root)

package/src/mixin/settings.js

@@ -2,9 +2,9 @@ import cookies from '../module/cookies'
 import merge from '../module/merge'
 
 function set (key, value) {
-  var text = cookies.get(key)
+  const text = cookies.get(key)
 
-  var current = {}
+  let current = {}
 
   if (text) {
     current = JSON.parse(text)
@@ -12,7 +12,7 @@ function set (key, value) {
 
   console.log('settings value', current, value)
   // settings = [settings, value].reduce(Object.assign, {});
-  var settings = merge(current, value)
+  const settings = merge(current, value)
 
   console.log('settings ' + key, settings)
 
@@ -20,12 +20,12 @@ function set (key, value) {
 }
 
 function get (key) {
-  var json = cookies.get(key)
+  const json = cookies.get(key)
 
   if (!json) {
     return null
   }
-  var value = JSON.parse(json)
+  const value = JSON.parse(json)
 
   console.log('settings' + key, value)
 

package/src/module/attach.js

@@ -1,72 +1,58 @@
+// Assuming extract is imported or defined elsewhere
 import extract from './extract'
 
-/**
- * attach function to events
- * @module module/attach
- * @category module
- */
-
-/**
- * [attach description]
- * @param  {object} component [description]
- * @param  {[type]} events    [description]
- * @return {[type]}           [description]
- */
-export default {
-  attach: function (events) {
-    // console.log('attach', events)
+const attachModule = {
+  attach (events) {
     events = events || this.options.events
     if (!events) return
 
-    // console.log('attach', events, this)
-    var instance = this
-    events.map((def) => {
-      var e = extract.e(instance, def[0])
-      var f = extract.f(instance, def[1])
-      var option = def[2]
+    events.map(([eventDef, funcDef, option]) => {
+      const e = extract.e(this, eventDef)
+      const isFunction = typeof funcDef === 'function'
+      let f = null
+      let keys = []
+
+      if (!isFunction) {
+        f = extract.f(this, funcDef)
+        keys = funcDef.split('.')
+        keys.pop()
+      }
 
-      var keys = def[1].split('.')
+      const bound = this.last(keys.join('.'))
 
-      keys.pop()
-      var bound = this.last(keys.join('.'))
+      let handler = null
 
-      if (f && bound && e && e.element && e.element.addEventListener) {
-        if (!f) { console.log('error') }
+      if (isFunction) {
+        handler = funcDef.bind(this)
+      } else if (f && bound) {
+        handler = f.bind(bound)
+      } else {
+        // console.error(`Can't bind function for ${eventDef}`)
+        return
+      }
 
+      if (handler && e && e.element && e.element.addEventListener) {
         if (option) {
-          e.element.addEventListener(e.name, f.bind(bound), option)
+          e.element.addEventListener(e.name, handler, option)
         } else {
-          e.element.addEventListener(e.name, f.bind(bound))
+          e.element.addEventListener(e.name, handler)
         }
-      } else if (e && e.element && e.element.on && f && bound) {
-        e.element.on(e.name, f.bind(bound))
+      } else if (e && e.element && e.element.on && handler) {
+        e.element.on(e.name, handler)
       } else {
-        // console.log('can\'t attach', def[0])
+        // console.error(`Can't attach ${eventDef}`)
       }
     })
 
     return this
   },
 
-  /**
-   * Return the last reference from an object
-   * @param  {string} str Object path for example key1.key2.key3
-   * @return {value} The value of the last reference
-   */
-  last: function (str) {
-    // console.log('_path', str)
+  last (str) {
     if (!str) return this
-    else if (!str.match(/\./)) return this[str]
-    var last
-
-    var keys = str.split('.')
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
+    if (!str.includes('.')) return this[str]
 
-      last = last || this
-      last = last[key]
-    }
-
-    return last
+    return str.split('.').reduce((acc, key) => acc[key], this)
   }
 }
+
+export default attachModule

package/src/{control/module → module}/attributes.js

@@ -1,12 +1,12 @@
 const special = ['required', 'disabled', 'multiple', 'checked']
 
-function setAttributes (element, o) {
+function attributes (element, o) {
   // console.log('attributes', o.attributes, element)
 
   if (!element) return
 
-  for (var i = 0; i < o.attributes.length; i++) {
-    var attribute = o.attributes[i]
+  for (let i = 0; i < o.attributes.length; i++) {
+    const attribute = o.attributes[i]
 
     if (o[attribute] && o[attribute] !== 'undefined') {
       if (special.indexOf(attribute) > -1) {
@@ -18,4 +18,4 @@ function setAttributes (element, o) {
   }
 }
 
-export default setAttributes
+export default attributes

package/src/module/build.js

@@ -1,25 +1,32 @@
+import * as css from './css'
 import dataset from './dataset'
+
 import Layout from '../layout'
 
 export default {
   build () {
     this.element = document.createElement(this.options.tag || 'div')
-    // for backward compatibility
-    this.element = this.element
 
     const defaults = this.constructor.defaults || {}
 
-    this.element.classList.add(defaults.class)
+    if (defaults.base) css.add(this.element, defaults.base)
+    if (defaults.class) css.add(this.element, defaults.class)
 
     if (this.options.class !== defaults.class) {
-      this.addClass(this.options.class)
+      css.add(this.element, this.options.class)
     }
 
+    if (defaults.class === 'account') console.log('data')
+
     if (this.options.data) {
       dataset(this.element, this.options.data)
     }
 
-    this.container = this.options.container
+    if (this.options.base === 'view') {
+      this.container = this.options.container || document.body
+    } else {
+      this.container = this.options.container
+    }
 
     if (this.container) this.appendTo(this.container)
 
@@ -33,12 +40,5 @@ export default {
 
   appendTo (container) {
     container.appendChild(this.element)
-  },
-
-  addClass (clss) {
-    const c = clss.replace(/\s+/g, ' ').trim()
-    const list = c.split(' ')
-    list.forEach(item => this.element.classList.add(item))
   }
-
 }