material 0.8.2 → 0.8.4

package/index.js

@@ -30,12 +30,12 @@ import Textfield from './src/textfield'
 import Toolbar from './src/toolbar'
 import Tooltip from './src/tooltip'
 import View from './src/view'
-import attach from './src/module/attach'
 import attributes from './src/module/attributes'
 import build from './src/module/build'
 import dataset from './src/module/dataset'
+import device from './src/module/device'
 import display from './src/mixin/display'
-import events from './src/module/attach'
+import events from './src/module/events'
 import emitter from './src/module/emitter'
 import jsonToHTML from './src/module/jsontohtml'
 import mediator from './src/module/mediator'
@@ -46,6 +46,6 @@ export {
   AppBar, Button, Card, Checkbox, Component, DateHour, Dialog, Drawer, Element,
   File, Form, Image, Layout, List, Loading, Menu, Navigation, Progress, Select,
   Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip,
-  View, attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator,
+  View, attributes, build, dataset, device, display, events, emitter, jsonToHTML, mediator,
   observer, smoothscroll
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
   "main": "index.js",
   "type": "module",

package/src/button.js

@@ -1,7 +1,7 @@
 import EventEmitter from './mixin/emitter'
 import build from './module/build'
 import display from './mixin/display'
-import bindEvents from './module/events'
+import events from './module/events'
 import dataset from './module/dataset'
 import ripple from './module/ripple'
 
@@ -35,12 +35,11 @@ class Button extends EventEmitter {
     this.init(options)
     this.build()
     this.setup()
-    this.bindEvents()
   }
 
   init (options) {
     this.options = { ...Button.defaults, ...options }
-    Object.assign(this, build, display, bindEvents)
+    Object.assign(this, build, display)
   }
 
   setup () {
@@ -50,6 +49,8 @@ class Button extends EventEmitter {
     if (this.options.text) {
       this.element.innerHTML = this.element.innerHTML + this.options.text
     }
+
+    events.attach(this.options.events, this)
   }
 
   setAttributes () {

package/src/calendar.js

@@ -1,7 +1,7 @@
 import create from './element/create'
 import insert from './element/insert'
 import * as css from './module/css'
-import attach from './module/attach'
+import events from './module/events'
 import emitter from './module/emitter'
 
 import Button from './button'
@@ -45,7 +45,7 @@ class Calendar {
 
     this.init()
     this.build()
-    this.attach()
+    events.attach(this.options.events, this)
 
     return this
   }

package/src/checkbox.js

@@ -1,7 +1,7 @@
 import EventEmitter from './mixin/events'
 // import control from './mixin/control'
 import build from './module/build'
-import attach from './module/attach'
+import events from './module/events'
 import * as css from './module/css'
 
 import icon from './skin/material/icon/checkbox.svg'
@@ -12,8 +12,8 @@ class Checkbox {
   static defaults = {
     class: 'checkbox',
     layout: [
-      [Element, 'input', { type: 'checkbox' } ],
-      [Element, 'control', { type: 'checkbox' } ],
+      [Element, 'input', { type: 'checkbox' }],
+      [Element, 'control', { type: 'checkbox' }],
       [Element, 'label', { tag: 'label' }]
     ],
     events: [
@@ -31,7 +31,6 @@ class Checkbox {
     this.init(options)
     this.build()
     this.setup()
-    this.attach()
   }
 
   init (options) {
@@ -72,6 +71,8 @@ class Checkbox {
     if (this.options.value) {
       this.set('value', this.value)
     }
+
+    events.attach(this.options.events, this)
   }
 
   set (prop, value) {
@@ -107,7 +108,6 @@ class Checkbox {
     return this
   }
 
-
   click (e) {
     this.toggle(e)
     this.ui.input.focus()

package/src/dialog.js

@@ -1,6 +1,6 @@
 // dialog related modules
 import emitter from './module/emitter'
-import attach from './module/attach'
+import events from './module/events'
 import display from './mixin/display'
 
 import Element from './element'
@@ -38,14 +38,14 @@ class Dialog {
     this.init(options)
     this.build()
     this.render()
-    this.attach()
+    this.setup()
 
     return this
   }
 
   init (options) {
     this.options = Object.assign({}, Dialog.defaults, options || {})
-    Object.assign(this, emitter, attach, display)
+    Object.assign(this, emitter, display)
   }
 
   build () {
@@ -100,6 +100,10 @@ class Dialog {
     }
   }
 
+  setup () {
+    events.attach(this.options.events, this)
+  }
+
   setPosition () {
     const coord = this.options.target.getBoundingClientRect()
     const surface_coord = this.surface.getBoundingClientRect()

package/src/drawer.js

@@ -25,7 +25,6 @@ class Drawer {
 
     this.build()
     this.attach()
-
     this.emit('ready')
   }
 

package/src/file.js

@@ -1,5 +1,5 @@
 import EventEmitter from './mixin/emitter'
-
+import events from './module/events'
 import build from './module/build'
 import dataset from './module/dataset'
 import attributes from './module/attributes'
@@ -7,14 +7,18 @@ import attributes from './module/attributes'
 class File {
   static defaults = {
     class: 'file',
-    attributes: ['name', 'accept', 'required', 'disabled', 'multiple']
+    attributes: ['name', 'accept', 'required', 'disabled', 'multiple'],
+    events: [
+      ['input.change', 'change']
+
+    ]
   }
 
   constructor (options) {
     this.init(options)
     this.build()
     this.buildInput()
-    this.attach()
+    events.attach(this.options.events, this)
   }
 
   init (options) {
@@ -40,10 +44,8 @@ class File {
     }
   }
 
-  attach () {
-    this.input.addEventListener('change', (e) => {
-      this.emit('change', e)
-    })
+  change (e) {
+    this.emit('change', e)
   }
 
   image (e) {

package/src/form.js

@@ -1,7 +1,7 @@
 import insert from './element/insert'
 import * as css from './module/css'
 import emitter from './module/emitter'
-import attach from './module/attach'
+import events from './module/events'
 import controller from './mixin/controller'
 
 // import component
@@ -31,7 +31,7 @@ class Form {
 
     this.init()
     this.build()
-    this.attach()
+    events.attach(this.options.events, this)
 
     return this
   }

package/src/list/init.js

@@ -1,6 +1,6 @@
 export default {
   init () {
     this.build()
-    this.attach()
+    events.attach(this.options.events, this)
   }
 }

package/src/loader.js

@@ -6,7 +6,7 @@ class Loader {
   constructor (options) {
     this.options = Object.assign({}, Loader.defaults, options || {})
 
-    // Object.assign(this, attach, mediator, build)
+    // Object.assign(this, mediator, build)
 
     this.build()
 

package/src/map.js

@@ -1,4 +1,3 @@
-
 import mediator from '../module/mediator'
 import emitter from 'material/src/module/emitter'
 import attach from 'material/src/module/attach'
@@ -50,7 +49,7 @@ class Map {
     this.options = Object.assign({}, defaults, options || {})
 
     Object.assign(
-      this, attach, emitter, init, build, viewport, mouse,
+      this, emitter, init, build, viewport, mouse,
       mode, countries,
       set, display, select, focus
     )

package/src/menu.js

@@ -1,7 +1,7 @@
 import EventEmitter from './mixin/emitter'
 // menu related modules
 import build from './module/build'
-import bindEvents from './module/events'
+import events from './module/events'
 import display from './mixin/display'
 
 import Element from './element'
@@ -27,14 +27,18 @@ class Menu extends EventEmitter {
 
     this.init(options)
     this.build(this.constructor)
-    this.bindEvents()
+    this.setup()
 
     this.render(this.options.items)
   }
 
   init (options) {
     this.options = Object.assign({}, Menu.defaults, options || {})
-    Object.assign(this, build, bindEvents, display)
+    Object.assign(this, build, display)
+  }
+
+  setup () {
+    events.attach(this.options.events, this)
   }
 
   render (items) {

package/src/module/attach.js

@@ -2,11 +2,13 @@ import extract from './extract'
 import last from './last'
 
 const attachModule = {
+  eventHandlers: [], // Utiliser un tableau pour stocker les événements et les gestionnaires
+
   attach (events) {
     events = events || this.options.events
     if (!events) return
 
-    events.map(([eventDef, funcDef, option]) => {
+    events.forEach(([eventDef, funcDef, option]) => {
       const e = extract.e(this, eventDef)
       const isFunction = typeof funcDef === 'function'
       let f = null
@@ -32,21 +34,35 @@ const attachModule = {
       }
 
       if (handler && e && e.element && e.element.addEventListener) {
-        if (option) {
-          e.element.addEventListener(e.name, handler, option)
-        } else {
-          e.element.addEventListener(e.name, handler)
-        }
+        e.element.addEventListener(e.name, handler, option)
+        this.eventHandlers.push({ eventDef, element: e.element, handler })
       } else if (e && e.element && e.element.on && handler) {
         e.element.on(e.name, handler)
+        this.eventHandlers.push({ eventDef, element: e.element, handler })
       } else {
         // console.error(`Can't attach ${eventDef}`)
       }
     })
 
     return this
-  }
+  },
 
+  detach (events) {
+    (events || []).forEach(([eventDef]) => {
+      this.eventHandlers.forEach((handlerObj, index) => {
+        if (handlerObj.eventDef === eventDef) {
+          const { element, handler } = handlerObj
+          if (element.removeEventListener) {
+            element.removeEventListener(eventDef, handler)
+          } else if (element.off) {
+            element.off(eventDef, handler)
+          }
+          delete this.eventHandlers[index]
+        }
+      })
+      this.eventHandlers = this.eventHandlers.filter(Boolean) // Nettoyer les entrées supprimées
+    })
+  }
 }
 
 export default attachModule

package/src/module/device.js

@@ -0,0 +1,403 @@
+// based on the work of
+// https://github.com/matthewhudson/current-device
+
+const previousDevice = window.device
+
+const device = {}
+const os = ['ios', 'iphone', 'ipad', 'ipod', 'android', 'blackberry', 'macos', 'windows', 'fxos', 'meego', 'television']
+const type = ['mobile', 'tablet', 'desktop']
+const changeOrientationList = []
+
+// Add device as a global object.
+window.device = device
+
+// The <html> element.
+const documentElement = window.document.documentElement
+
+// The client user agent string.
+// Lowercase, so we can use the more efficient indexOf(), instead of Regex
+let userAgent = window.navigator.userAgent.toLowerCase()
+
+// Detectable television devices.
+const television = [
+  'googletv',
+  'viera',
+  'smarttv',
+  'internet.tv',
+  'netcast',
+  'nettv',
+  'appletv',
+  'boxee',
+  'kylo',
+  'roku',
+  'dlnadoc',
+  'pov_tv',
+  'hbbtv',
+  'ce-html'
+]
+
+// Main functions
+// --------------
+
+device.macos = function () {
+  return find('mac')
+}
+
+device.ios = function () {
+  return device.iphone() || device.ipod() || device.ipad()
+}
+
+device.iphone = function () {
+  return !device.windows() && find('iphone')
+}
+
+device.ipod = function () {
+  return find('ipod')
+}
+
+device.ipad = function () {
+  const iPadOS13Up =
+    navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1
+  return find('ipad') || iPadOS13Up
+}
+
+device.android = function () {
+  return !device.windows() && find('android')
+}
+
+device.androidPhone = function () {
+  return device.android() && find('mobile')
+}
+
+device.androidTablet = function () {
+  return device.android() && !find('mobile')
+}
+
+device.blackberry = function () {
+  return find('blackberry') || find('bb10')
+}
+
+device.blackberryPhone = function () {
+  return device.blackberry() && !find('tablet')
+}
+
+device.blackberryTablet = function () {
+  return device.blackberry() && find('tablet')
+}
+
+device.windows = function () {
+  return find('windows')
+}
+
+device.windowsPhone = function () {
+  return device.windows() && find('phone')
+}
+
+device.windowsTablet = function () {
+  return device.windows() && (find('touch') && !device.windowsPhone())
+}
+
+device.fxos = function () {
+  return (find('(mobile') || find('(tablet')) && find(' rv:')
+}
+
+device.fxosPhone = function () {
+  return device.fxos() && find('mobile')
+}
+
+device.fxosTablet = function () {
+  return device.fxos() && find('tablet')
+}
+
+device.meego = function () {
+  return find('meego')
+}
+
+device.cordova = function () {
+  return window.cordova && location.protocol === 'file:'
+}
+
+device.nodeWebkit = function () {
+  return typeof window.process === 'object'
+}
+
+device.mobile = function () {
+  return (
+    device.androidPhone() ||
+    device.iphone() ||
+    device.ipod() ||
+    device.windowsPhone() ||
+    device.blackberryPhone() ||
+    device.fxosPhone() ||
+    device.meego()
+  )
+}
+
+device.tablet = function () {
+  return (
+    device.ipad() ||
+    device.androidTablet() ||
+    device.blackberryTablet() ||
+    device.windowsTablet() ||
+    device.fxosTablet()
+  )
+}
+
+device.desktop = function () {
+  return !device.tablet() && !device.mobile()
+}
+
+device.television = function () {
+  let i = 0
+  while (i < television.length) {
+    if (find(television[i])) {
+      return true
+    }
+    i++
+  }
+  return false
+}
+
+device.portrait = function () {
+  if (
+    screen.orientation &&
+    Object.prototype.hasOwnProperty.call(window, 'onorientationchange')
+  ) {
+    return includes(screen.orientation.type, 'portrait')
+  }
+  if (
+    device.ios() &&
+    Object.prototype.hasOwnProperty.call(window, 'orientation')
+  ) {
+    return Math.abs(window.orientation) !== 90
+  }
+  return window.innerHeight / window.innerWidth > 1
+}
+
+device.landscape = function () {
+  if (
+    screen.orientation &&
+    Object.prototype.hasOwnProperty.call(window, 'onorientationchange')
+  ) {
+    return includes(screen.orientation.type, 'landscape')
+  }
+  if (
+    device.ios() &&
+    Object.prototype.hasOwnProperty.call(window, 'orientation')
+  ) {
+    return Math.abs(window.orientation) === 90
+  }
+  return window.innerHeight / window.innerWidth < 1
+}
+
+// Public Utility Functions
+// ------------------------
+
+// Run device.js in noConflict mode,
+// returning the device variable to its previous owner.
+device.noConflict = function () {
+  window.device = previousDevice
+  return this
+}
+
+// Private Utility Functions
+// -------------------------
+
+// Check if element exists
+function includes (haystack, needle) {
+  return haystack.indexOf(needle) !== -1
+}
+
+// Simple UA string search
+function find (needle) {
+  return includes(userAgent, needle)
+}
+
+// Check if documentElement already has a given class.
+function hasClass (className) {
+  return documentElement.className.match(new RegExp(className, 'i'))
+}
+
+// Add one or more CSS classes to the <html> element.
+function addClass (className) {
+  let currentClassNames = null
+  if (!hasClass(className)) {
+    currentClassNames = documentElement.className.replace(/^\s+|\s+$/g, '')
+    documentElement.className = `${currentClassNames} ${className}`
+  }
+}
+
+// Remove single CSS class from the <html> element.
+function removeClass (className) {
+  if (hasClass(className)) {
+    documentElement.className = documentElement.className.replace(
+      ` ${className}`,
+      ''
+    )
+  }
+}
+
+function cleanClasses () {
+  const classes = [...os, ...type]
+  for (let i = 0; i < classes.length; i++) {
+    removeClass(classes[i])
+  }
+}
+
+// HTML Element Handling
+// ---------------------
+
+// Insert the appropriate CSS class based on the _user_agent.
+function applyClass () {
+  cleanClasses()
+
+  if (device.ios()) {
+    if (device.ipad()) {
+      addClass('ios ipad tablet')
+    } else if (device.iphone()) {
+      addClass('ios iphone mobile')
+    } else if (device.ipod()) {
+      addClass('ios ipod mobile')
+    }
+  } else if (device.macos()) {
+    addClass('macos desktop')
+  } else if (device.android()) {
+    if (device.androidTablet()) {
+      addClass('android tablet')
+    } else {
+      addClass('android mobile')
+    }
+  } else if (device.blackberry()) {
+    if (device.blackberryTablet()) {
+      addClass('blackberry tablet')
+    } else {
+      addClass('blackberry mobile')
+    }
+  } else if (device.windows()) {
+    if (device.windowsTablet()) {
+      addClass('windows tablet')
+    } else if (device.windowsPhone()) {
+      addClass('windows mobile')
+    } else {
+      addClass('windows desktop')
+    }
+  } else if (device.fxos()) {
+    if (device.fxosTablet()) {
+      addClass('fxos tablet')
+    } else {
+      addClass('fxos mobile')
+    }
+  } else if (device.meego()) {
+    addClass('meego mobile')
+  } else if (device.nodeWebkit()) {
+    addClass('node-webkit')
+  } else if (device.television()) {
+    addClass('television')
+  } else if (device.desktop()) {
+    addClass('desktop')
+  }
+
+  if (device.cordova()) {
+    addClass('cordova')
+  }
+}
+
+applyClass()
+
+// Orientation Handling
+// --------------------
+
+// Handle device orientation changes.
+function handleOrientation () {
+  if (device.landscape()) {
+    removeClass('portrait')
+    addClass('landscape')
+    walkOnChangeOrientationList('landscape')
+  } else {
+    removeClass('landscape')
+    addClass('portrait')
+    walkOnChangeOrientationList('portrait')
+  }
+  setOrientationCache()
+}
+
+function walkOnChangeOrientationList (newOrientation) {
+  for (let index = 0; index < changeOrientationList.length; index++) {
+    changeOrientationList[index](newOrientation)
+  }
+}
+
+device.onChangeOrientation = function (cb) {
+  if (typeof cb === 'function') {
+    changeOrientationList.push(cb)
+  }
+}
+
+// Detect whether device supports orientationchange event,
+// otherwise fall back to the resize event.
+let orientationEvent = 'resize'
+if (Object.prototype.hasOwnProperty.call(window, 'onorientationchange')) {
+  orientationEvent = 'orientationchange'
+}
+
+// Listen for changes in orientation.
+if (window.addEventListener) {
+  window.addEventListener(orientationEvent, handleOrientation, false)
+} else if (window.attachEvent) {
+  window.attachEvent(orientationEvent, handleOrientation)
+} else {
+  window[orientationEvent] = handleOrientation
+}
+
+handleOrientation()
+
+// Public functions to get the current value of type, os, or orientation
+// ---------------------------------------------------------------------
+
+function findMatch (arr) {
+  for (let i = 0; i < arr.length; i++) {
+    if (device[arr[i]]()) {
+      return arr[i]
+    }
+  }
+  return 'unknown'
+}
+
+device.type = findMatch(type)
+device.os = findMatch(os)
+
+function setOrientationCache () {
+  device.orientation = findMatch(['portrait', 'landscape'])
+}
+
+setOrientationCache()
+
+let previousDeviceType = null
+device.onDeviceChange = null
+
+function updateDeviceDetection () {
+  userAgent = window.navigator.userAgent.toLowerCase()
+  device.type = findMatch(type)
+  device.os = findMatch(os)
+  setOrientationCache()
+  applyClass()
+  checkAndHandleDeviceChange()
+}
+
+window.addEventListener('resize', updateDeviceDetection)
+
+function triggerOnDeviceChange () {
+  if (typeof device.onDeviceChange === 'function') {
+    device.onDeviceChange(device.type)
+  }
+}
+
+function checkAndHandleDeviceChange () {
+  const currentDeviceType = device.type
+  if (previousDeviceType !== currentDeviceType) {
+    triggerOnDeviceChange()
+    previousDeviceType = currentDeviceType
+  }
+}
+
+export default device

package/src/module/events.js

@@ -1,22 +1,30 @@
 import extract from './extract'
+import last from './last'
 
-const attachModule = {
-  bindEvents (events) {
-    events = events || this.options.events
-    if (!events) return
+const events = {
+  eventHandlers: [], // Utiliser un tableau pour stocker les événements et les gestionnaires
 
-    events.map(([eventDef, funcDef, option]) => {
-      const e = extract.e(this, eventDef)
+  attach (eventsArray, context) {
+    if (!eventsArray) return
+
+    eventsArray.forEach(([eventDef, funcDef, option]) => {
+      const e = extract.e(context, eventDef)
       const isFunction = typeof funcDef === 'function'
-      const f = isFunction ? null : extract.f(this, funcDef)
-      const keys = funcDef.split('.')
-      keys.pop()
-      const bound = this.last(keys.join('.'))
+      let f = null
+      let keys = []
+
+      if (!isFunction) {
+        f = extract.f(context, funcDef)
+        keys = funcDef.split('.')
+        keys.pop()
+      }
+
+      const bound = last(keys.join('.'), context)
 
       let handler = null
 
-      if (isFunction && funcDef) {
-        handler = funcDef.bind(this)
+      if (isFunction) {
+        handler = funcDef.bind(context)
       } else if (f && bound) {
         handler = f.bind(bound)
       } else {
@@ -25,13 +33,11 @@ const attachModule = {
       }
 
       if (handler && e && e.element && e.element.addEventListener) {
-        if (option) {
-          e.element.addEventListener(e.name, handler, option)
-        } else {
-          e.element.addEventListener(e.name, handler)
-        }
+        e.element.addEventListener(e.name, handler, option)
+        this.eventHandlers.push({ eventDef, element: e.element, handler })
       } else if (e && e.element && e.element.on && handler) {
         e.element.on(e.name, handler)
+        this.eventHandlers.push({ eventDef, element: e.element, handler })
       } else {
         // console.error(`Can't attach ${eventDef}`)
       }
@@ -40,12 +46,22 @@ const attachModule = {
     return this
   },
 
-  last (str) {
-    if (!str) return this
-    if (!str.includes('.')) return this[str]
-
-    return str.split('.').reduce((acc, key) => acc[key], this)
+  detach (eventsArray, context) {
+    (eventsArray || []).forEach(([eventDef]) => {
+      this.eventHandlers.forEach((handlerObj, index) => {
+        if (handlerObj.eventDef === eventDef) {
+          const { element, handler } = handlerObj
+          if (element.removeEventListener) {
+            element.removeEventListener(eventDef, handler)
+          } else if (element.off) {
+            element.off(eventDef, handler)
+          }
+          delete this.eventHandlers[index]
+        }
+      })
+      this.eventHandlers = this.eventHandlers.filter(Boolean) // Nettoyer les entrées supprimées
+    })
   }
 }
 
-export default attachModule
+export default events

package/src/navigation.js

@@ -2,7 +2,7 @@ import EventEmitter from './mixin/emitter'
 
 import * as css from './module/css'
 import build from './module/build'
-import attach from './module/attach'
+import events from './module/events'
 import display from './mixin/display'
 import Element from './element'
 import Button from './button'
@@ -25,13 +25,13 @@ class Navigation extends EventEmitter {
 
     this.init(options)
     this.build()
-    this.attach()
+    events.attach(this.options.events, this)
     this.setup()
   }
 
   init (options) {
     this.options = { ...Navigation.defaults, ...options }
-    Object.assign(this, build, attach, display)
+    Object.assign(this, build, display)
     this.items = []
   }
 

package/src/search.js

@@ -2,7 +2,7 @@ import EventEmitter from './mixin/emitter'
 
 import build from './module/build'
 import display from './mixin/display'
-import bindEvents from './module/events'
+import events from './module/events'
 
 import Element from './element'
 import Button from './button'
@@ -13,8 +13,8 @@ class Search extends EventEmitter {
     minChar: 4,
     timeout: 200,
     layout: [
-      [Element, 'input', { tag: 'input', class: 'input'} ],
-      [Button, 'clear', { class: 'clear'} ]
+      [Element, 'input', { tag: 'input', class: 'input' }],
+      [Button, 'clear', { class: 'clear' }]
     ],
     events: [
       ['ui.input.input', 'onInput'],
@@ -27,14 +27,17 @@ class Search extends EventEmitter {
 
     this.init(options)
     this.build()
-    this.bindEvents()
-
-    this.input = this.ui.input
+    this.setup()
   }
 
   init (options) {
     this.options = { ...Search.defaults, ...options }
-    Object.assign(this, build, display, bindEvents)
+    Object.assign(this, build, display)
+  }
+
+  setup () {
+    this.input = this.ui.input
+    events.attach(this.options.events, this)
   }
 
   set (value) {

package/src/select.js

@@ -1,7 +1,7 @@
 import EventEmitter from './mixin/emitter'
 // modules
 import build from './module/build'
-import attach from './module/attach'
+import events from './module/events'
 import attributes from './module/attributes'
 import dataset from './module/dataset'
 
@@ -20,12 +20,12 @@ class Select extends EventEmitter {
     this.build()
     this.buildLabel()
     this.buildInput()
-    this.attach()
+    events.attach(this.options.events, this)
   }
 
   init (options) {
     this.options = Object.assign({}, Select.defaults, options || {})
-    Object.assign(this, build, attach, dataset)
+    Object.assign(this, build, dataset)
   }
 
   buildLabel () {

package/src/selecter.js

@@ -1,6 +1,6 @@
 import EventEmitter from './mixin/emitter'
 // modules
-import attach from './module/attach'
+import events from './module/events'
 import dataset from './module/dataset'
 import attributes from './module/attributes'
 import * as css from './module/css'
@@ -39,12 +39,12 @@ class Selecter extends EventEmitter {
     this.init(options)
     this.build()
     this.setup()
-    this.attach()
+    events.attach(this.options.events, this)
   }
 
   init (options) {
     this.options = Object.assign({}, Selecter.defaults, options || {})
-    Object.assign(this, attach, dataset)
+    Object.assign(this, dataset)
   }
 
   setup () {

package/src/selector.js

@@ -1,5 +1,5 @@
 import emitter from './module/emitter'
-import attach from './module/attach'
+import events from './module/events'
 
 const defaults = {
   class: 'selector',
@@ -41,7 +41,7 @@ class Selector {
   init () {
     this.build()
     this.setup()
-    this.attach()
+    events.attach(this.options.events, this)
 
     if (this.options.container) {
       this.options.container.appendChild(this.element)

package/src/slider.js

@@ -7,7 +7,6 @@ import insert from './element/insert'
 import offset from './element/offset'
 import classify from './module/classify'
 // import control from './control';
-import attach from './module/attach'
 import * as css from './module/css'
 import emitter from './module/emitter'
 
@@ -23,7 +22,7 @@ const defaults = {
   value: false,
   range: [0, 100],
   step: 5,
-  modules: [events, control, emitter, attach],
+  modules: [control, emitter],
   mixins: [],
   build: ['$root.material-slider', {},
     ['label$label.slider-label', {}],
@@ -60,7 +59,7 @@ class Slider {
 
     this.init(this.options)
     this.build(this.options)
-    this.attach()
+    events.attach(this.options.events, this)
 
     return this
   }

package/src/snackbar.js

@@ -2,7 +2,7 @@
 import EventEmitter from './mixin/emitter'
 // related modules
 import build from './module/build'
-import bindEvents from './module/events'
+import events from './module/events'
 import display from './mixin/display'
 // ui element
 import Element from './element'
@@ -35,7 +35,7 @@ class Snackbar extends EventEmitter {
     this.init(options)
     this.build(this.constructor)
     this.render()
-    this.bindEvents()
+    events.attach(this.options.events, this)
     this.show()
 
     if (this.options.duration) {
@@ -47,7 +47,7 @@ class Snackbar extends EventEmitter {
 
   init (options) {
     this.options = Object.assign({}, Snackbar.defaults, options || {})
-    Object.assign(this, build, bindEvents, display)
+    Object.assign(this, build, display)
 
     this.buildSnackbarContainer(this.options.container)
   }

package/src/switch.js

@@ -3,7 +3,7 @@ import EventEmitter from './mixin/emitter'
 // module
 import build from './module/build'
 import dataset from './module/dataset'
-import attach from './module/attach'
+import events from './module/events'
 import attributes from './module/attributes'
 // ui
 import Element from './element'
@@ -37,12 +37,12 @@ class Switch extends EventEmitter {
     this.init(options)
     this.build()
     this.setup()
-    this.attach()
+    events.attach(this.options.events, this)
   }
 
   init (options) {
     this.options = Object.assign({}, Switch.defaults, options || {})
-    Object.assign(this, build, attach, dataset)
+    Object.assign(this, build, dataset)
 
     this.value = this.options.value
   }

package/src/switcher.js

@@ -1,4 +1,5 @@
 import EventEmitter from './mixin/emitter'
+import events from './module/events'
 
 class Switcher extends EventEmitter {
   static defaults = {
@@ -7,7 +8,10 @@ class Switcher extends EventEmitter {
     list: [],
     first: false,
     mode: 'unique',
-    allowEmpty: false
+    allowEmpty: false,
+    events: [
+      ['element.click', 'click']
+    ]
   }
 
   constructor (options) {
@@ -15,11 +19,7 @@ class Switcher extends EventEmitter {
 
     this.init(options)
     this.build()
-    this.attach()
-
-    if (this.options.default) {
-      this.selectByName(this.options.default, true)
-    }
+    this.setup()
   }
 
   init (options) {
@@ -65,11 +65,19 @@ class Switcher extends EventEmitter {
     this.element.appendChild(this.list)
   }
 
-  attach () {
-    this.element.addEventListener('click', (event) => {
-      if (!event.target.dataset.switcher) return
-      this.select(event.target)
-    })
+  setup () {
+    console.log('events.attach', this.options.events)
+    events.attach(this.options.events, this)
+
+    if (this.options.default) {
+      this.selectByName(this.options.default, true)
+    }
+  }
+
+  click (event) {
+    console.log('click', event)
+    if (!event.target.dataset.switcher) return
+    this.select(event.target)
   }
 
   select (option) {

package/src/tabview.js

@@ -1,5 +1,6 @@
 import EventEmitter from './mixin/emitter'
 import observer from './element/observer'
+import events from './module/events'
 import build from './module/build'
 import display from './view/display'
 
@@ -7,7 +8,10 @@ class TabView extends EventEmitter {
   static defaults = {
     base: 'view',
     class: 'tabview',
-    mode: 'style'
+    mode: 'style',
+    events: [
+      ['ui.tabs.click', 'onTabClick']
+    ]
   }
 
   constructor (options) {
@@ -22,7 +26,7 @@ class TabView extends EventEmitter {
       if (!ready) {
         ready = true
         this.setup()
-        this.attach()
+        events.attach(this.options.events, this)
 
         this.emit('ready')
       }
@@ -64,15 +68,13 @@ class TabView extends EventEmitter {
     this.click(this.ui.buttons[0])
   }
 
-  attach () {
-    this.ui.tabs.addEventListener('click', (e) => {
-      e.stopPropagation()
-      if (e.target === e.currentTarget) return
+  onTabClick (e) {
+    e.stopPropagation()
+    if (e.target === e.currentTarget) return
 
-      if (e.target.matches('BUTTON')) {
-        this.click(e.target)
-      }
-    })
+    if (e.target.matches('BUTTON')) {
+      this.click(e.target)
+    }
   }
 
   select (view) {

package/src/textfield.js

@@ -1,5 +1,5 @@
 import emitter from './module/emitter'
-import attach from './module/attach'
+import events from './module/events'
 import dataset from './module/dataset'
 import attributes from './module/attributes'
 
@@ -22,12 +22,12 @@ class Textfield {
   constructor (options) {
     this.init(options)
     this.build()
-    this.attach()
+    events.attach(this.options.events, this)
   }
 
   init (options) {
     this.options = Object.assign({}, Textfield.defaults, options || {})
-    Object.assign(this, emitter, attach, dataset)
+    Object.assign(this, emitter, dataset)
     // console.log('options', options)
   }
 

package/src/tooltip.js

@@ -32,7 +32,7 @@ class Tooltip {
     // console.log('element options', options)
 
     this.build()
-    this.attach()
+    this.attachEvent()
 
     return this
   }
@@ -55,7 +55,7 @@ class Tooltip {
     container.appendChild(this.element)
   }
 
-  attach () {
+  attachEvent () {
     // console.log('attach', this.options.targets)
     const targets = document.querySelectorAll(this.options.targets)
 

package/src/tree.js

@@ -1,6 +1,6 @@
 import emitter from './module/emitter'
 import * as css from './module/css'
-import attach from './module/attach'
+import events from './module/events'
 import insert from './mixin/insert'
 
 const defaults = {
@@ -19,7 +19,7 @@ class Tree {
 
     this.init()
     this.build()
-    this.attach()
+    events.attach(this.options.events, this)
 
     return this
   }