material 0.9.6 → 0.9.8

package/index.js

@@ -37,6 +37,7 @@ import attributes from './src/module/attributes'
 import EventEmitter from './src/mixin/emitter'
 import display from './src/mixin/display'
 import build from './src/mixin/build'
+import position from './src/mixin/position'
 // modules
 import clone from './src/module/clone'
 import dataset from './src/module/dataset'
@@ -51,6 +52,7 @@ import observer from './src/module/observer'
 import request from './src/module/request'
 import ripple from './src/module/ripple'
 import smoothscroll from './src/module/smoothscroll'
+import touch from './src/module/touch'
 
 export {
   // classes
@@ -62,5 +64,5 @@ export {
   // mixins and  modules
   EventEmitter,
   attributes, build, clone, create, dataset, device, display, events, emitter, jsonToHTML, mediator, merge,
-  observer, request, ripple, smoothscroll
+  observer, position, request, ripple, smoothscroll, touch
 }

package/package.json

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

package/src/card.js

@@ -1,28 +1,21 @@
-import build from './mixin/build'
-import display from './mixin/display'
+import {
+  Component,
+  display
+} from '../'
+
 import position from './mixin/position'
 
-class Card {
+class Card extends Component {
   static defaults = {
     class: 'card',
+    mixins: [display, position],
     position: {
       align: 'center',
       vAlign: 'dynamic',
       offsetX: 10,
       offsetY: 10
     },
-    close: true,
-    layout: []
-  }
-
-  constructor (options) {
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...Card.defaults, ...options }
-    Object.assign(this, build, display, position)
+    close: true
   }
 }
 

package/src/checkbox.js

@@ -1,13 +1,9 @@
-import EventEmitter from './mixin/events'
-// import control from './mixin/control'
-import build from './mixin/build'
-import events from './module/events'
-import * as css from './module/css'
+import Control from './class/control'
 
 import icon from './skin/material/icon/checkbox.svg'
 import Element from './element'
 
-class Checkbox {
+class Checkbox extends Control {
   static defaults = {
     class: 'checkbox',
     layout: [
@@ -17,7 +13,7 @@ class Checkbox {
     ],
     events: [
       ['ui.control.click', 'click'],
-      ['ui.label.click', 'toggle'],
+      ['ui.label.click', 'check'],
       // for accessibility purpose
       // ['element.input.click', 'toggle'],
       ['ui.input.focus', 'focus'],
@@ -27,20 +23,11 @@ class Checkbox {
   }
 
   constructor (options) {
-    this.init(options)
-    this.build()
+    super(options)
     this.setup()
   }
 
-  init (options) {
-    this.options = { ...Checkbox.defaults, ...options }
-    Object.assign(this, build, attach)
-  }
-
   setup () {
-    this.element = build(this.options.build)
-    this.element = this.element.root
-
     this.ui.control.innerHTML = icon
 
     const text = this.options.text || this.options.label
@@ -58,7 +45,7 @@ class Checkbox {
     if (this.options.disabled) {
       this.disabled = this.options.disabled
       this.ui.input.setAttribute('disabled', 'disabled')
-      css.add(this.element, 'is-disabled')
+      this.element.classList.add('is-disabled')
     }
 
     if (this.options.checked) {
@@ -68,8 +55,6 @@ class Checkbox {
     if (this.options.value) {
       this.set('value', this.value)
     }
-
-    events.attach(this.options.events, this)
   }
 
   set (prop, value) {
@@ -90,24 +75,32 @@ class Checkbox {
     return this
   }
 
-  check (checked) {
-    if (checked === true) {
-      css.add(this.element, 'is-checked')
+  get () {
+    return this.value
+  }
+
+  check (value) {
+    if (value === true) {
+      this.element.classList.add('is-checked')
       this.ui.input.checked = true
-      this.checked = true
-      this.emit('change', this.checked)
+      this.value = true
+      this.emit('change', this.value)
     } else {
-      css.remove(this.element, 'is-checked')
+      this.element.classList.remove('is-checked')
       this.ui.input.checked = false
-      this.checked = false
-      this.emit('change', this.checked)
+      this.value = false
+      this.emit('change', this.value)
     }
     return this
   }
 
-  click (e) {
-    this.toggle(e)
+  onClick (e) {
     this.ui.input.focus()
+    if (this.element.classList.add('is-checked')) {
+      this.check(false)
+    } else {
+      this.check(true)
+    }
 
     return this
   }

package/src/datehour.js

@@ -1,21 +1,11 @@
-import build from './mixin/build'
+import Component from './class/component'
 
-class DateHour {
+class DateHour extends Component {
   static defaults = {
     class: 'date',
     tag: 'span'
   }
 
-  constructor (options) {
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...DateHour.defaults, ...options }
-    Object.assign(this, build)
-  }
-
   set (date) {
     // console.log('set', src)
     const d = new Date(date)

package/src/menu.js

@@ -1,15 +1,14 @@
-import EventEmitter from './mixin/emitter'
-// menu related modules
-import build from './mixin/build'
-import events from './module/events'
-import display from './mixin/display'
-import position from './mixin/position'
+import {
+  Control, Element, display
+} from '../index'
 
-import Element from './element'
+import position from './mixin/position'
 
-class Menu extends EventEmitter {
+class Menu extends Control {
   static defaults = {
     class: 'menu',
+    mixins: [display, position],
+    underlay: true,
     modal: false,
     position: {
       align: 'right',
@@ -28,37 +27,15 @@ class Menu extends EventEmitter {
   }
 
   constructor (options) {
-    super()
+    super(options)
 
-    this.init(options)
-    this.build(this.constructor)
-    this.buildUnderlay()
     this.setup()
 
     this.render(this.options.items)
-
-    return this
-  }
-
-  init (options) {
-    this.options = { ...Menu.defaults, ...options }
-    Object.assign(this, build, display, position)
-
-    this.menus = []
-  }
-
-  buildUnderlay () {
-    if (!this.options.parentName) {
-      this.underlay = new Element({
-        class: 'menu-underlay'
-      })
-
-      this.options.container.appendChild(this.underlay)
-    }
   }
 
   setup () {
-    events.attach(this.options.events, this)
+    this.menus = []
     this.closeTimeout = null
 
     document.addEventListener('click', this.handleDocumentClick)
@@ -100,6 +77,7 @@ class Menu extends EventEmitter {
             class: 'floating',
             target: item,
             container: this.options.container,
+            underlay: false,
             parentName: obj.name,
             items: obj.items
           }).position(item, {
@@ -132,7 +110,6 @@ class Menu extends EventEmitter {
   }
 
   destroyMenu (menu) {
-  // Trouver l'index de menuToDestroy dans this.menus
     const index = this.menus.indexOf(menu)
 
     // Si trouvé, supprimer le menu du tableau
@@ -140,7 +117,6 @@ class Menu extends EventEmitter {
       this.menus.splice(index, 1)
     }
 
-    // Appeler la méthode destroy sur le menuToDestroy
     menu.destroy()
   }
 

package/src/mixin/position.js

@@ -1,14 +1,15 @@
 export default {
   position (target, position) {
+    // console.log('position', target)
     target = target || this.options.target
     position = position || this.options.position
     const { offsetX = 0, offsetY = 0, align = 'center', vAlign = 'middle' } = position
 
-    const name = this.constructor.name
+    if (!target) return this
 
-    if (!target) return
+    // console.log('--- target', target)
 
-    // console.log('container', this.options.container)
+    this.options.container = this.options.container || this.element.parentNode
 
     const caller = target.getBoundingClientRect()
     const screen = this.options.container.getBoundingClientRect()

package/src/module/build.js

@@ -8,13 +8,9 @@ import { create } from '../module/layout'
  */
 const build = (instance) => {
   // console.log('name', instance.constructor.defaults)
-  const { tag = 'div', class: customClass, data, base, container, layout, icon, label, show } = instance.options
+  const { tag = 'div', class: customClass, data, base, container, underlay, layout, icon, label, show } = instance.options
   const { defaults = {} } = instance.constructor
 
-  if (instance.constructor?.defaults.class === 'length') {
-    console.log('---', instance.constructor.defaults)
-  }
-
   instance.element = document.createElement(tag)
 
   if (defaults.base) css.add(instance.element, defaults.base)
@@ -36,8 +32,9 @@ const build = (instance) => {
 
   instance.ui = instance.ui || {}
 
-  if (icon) buildIcon(instance)
-  if (label) buildLabel(instance)
+  if (instance.options.underlay) buildUnderlay(instance, defaults.class)
+  if (icon && !instance.ui.icon) buildIcon(instance)
+  if (label && !instance.ui.label) buildLabel(instance)
 
   if (show === true && instance.show) instance.show()
 }
@@ -50,9 +47,13 @@ const setupContainer = (instance, base, container) => {
 const setupLayout = (instance, layout) => {
   instance.layout = create(layout, instance.element)
   instance.ui = instance.layout.component
+}
 
-  if (instance.constructor.name === 'Length') {
-    console.log(instance.ui)
+function buildUnderlay (instance, name) {
+  if (instance.options.underlay) {
+    instance.underlay = document.createElement('div')
+    instance.underlay.classList.add(name + '-underlay')
+    instance.options.container.appendChild(instance.underlay)
   }
 }
 

package/src/module/extract.js

@@ -19,13 +19,17 @@ function e (instance, ev) {
 
   const keys = ev.split('.')
 
-  for (let i = 0, l = keys.length; i <= l; i++) {
-    const key = keys[i]
-    iteration = iteration || instance
-    iteration = iteration[key]
+  if (keys[0] === 'window') {
+    element = window
+  } else {
+    for (let i = 0, l = keys.length; i <= l; i++) {
+      const key = keys[i]
+      iteration = iteration || instance
+      iteration = iteration[key]
 
-    if (i === keys.length - 2) {
-      element = iteration
+      if (i === keys.length - 2) {
+        element = iteration
+      }
     }
   }
 

package/src/skin/material/icon/back.svg

@@ -1,5 +1,4 @@
-export default `
 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 0h24v24H0z" fill="none" />
   <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-</svg>`;
+</svg>

package/src/skin/material/icon/checkbox.svg

@@ -1,4 +1,3 @@
-export default `
 <svg width="18px" height="18px" class="checkbox-icon" viewBox="0 0 18 18">
   <polygon class="checkbox-check" points="7 14.42 2 9.42 3.41 8.01 7 11.59 14.59 4 16 5.42"></polygon>
-</svg>`;
+</svg>

package/src/skin/material/icon/forward.svg

@@ -1,5 +1,4 @@
-export default `
 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 0h24v24H0z" fill="none" />
   <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" />
-</svg>`;
+</svg>

package/src/skin/material/icon/pin.svg

@@ -1,4 +1,3 @@
-export default `
 <svg width="24px" class="slider-pin" height="32px" viewBox="0 0 24 32">
   <path d="M12.4799395,31.9994146 C12.4799395,31.9994146 24,18.0312233 24,11.6159251 C24,5.2006268 18.627417,0 12,0 C5.372583,0 0,5.2006268 0,11.6159251 C0,18.0312233 12.4799395,31.9994146 12.4799395,31.9994146 Z"></path>
-</svg>`;
+</svg>

package/src/text.js

@@ -1,22 +1,16 @@
-import build from './mixin/build'
+import Component from './class/component'
 
-class Text {
+class Text extends Component {
   static defaults = {
     class: 'text',
     tag: 'span'
   }
 
   constructor (options) {
-    this.init(options)
-    this.build()
+    super(options)
     this.setup()
   }
 
-  init (options) {
-    this.options = { ...Text.defaults, ...options }
-    Object.assign(this, build)
-  }
-
   setup () {
     if (this.options.text) {
       this.set(this.options.text)

package/src/tooltip.js

@@ -1,59 +1,33 @@
+import Component from './class/component'
+import Element from './element'
+import position from './mixin/position'
 import touch from './module/touch'
 
-class Tooltip {
+class Tooltip extends Component {
   static defaults = {
+    base: 'component',
+    class: 'tooltip',
+    tag: 'span',
+    mixins: [position],
     targets: '[data-tooltip]',
     offset: {
       top: 60
     },
-    disabled: false
-  }
-
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
-  constructor (options) {
-    // console.log('constructor')
-
-    this.init(options)
-    this.build()
-    this.bindEvents()
-
-    return this
-  }
-
-  init (options) {
-    this.options = { ...Tooltip.defaults, ...options }
-  }
-
-  build () {
-    const container = this.options.container || document.body
-
-    this.element = document.createElement('span')
-    this.element.classList.add('tooltip')
-    this.element.classList.add('control')
-
-    this.pointer = document.createElement('span')
-    this.pointer.classList.add('pointer')
-    this.element.appendChild(this.pointer)
-
-    this.label = document.createElement('span')
-    this.label.classList.add('label')
-    this.element.appendChild(this.label)
-
-    container.appendChild(this.element)
+    position: {
+      align: 'center',
+      vAlign: 'bottom'
+    },
+    disabled: false,
+    layout: [
+      [Element, { tag: 'span', class: 'pointer' }],
+      [Element, 'label', { tag: 'span', class: 'label' }]
+    ]
   }
 
-  bindEvents () {
-    // console.log('attach', this.options.targets)
+  bindTargets () {
     const targets = document.querySelectorAll(this.options.targets)
-
     for (let i = 0; i < targets.length; i++) {
       targets[i].addEventListener('mouseover', (e) => {
-        // console.log('tooltip', touch(), this.disabled)
         if (touch()) return
 
         if (this.disabled === true) {
@@ -66,16 +40,18 @@ class Tooltip {
           return
         }
 
-        this.label.innerHTML = e.currentTarget.dataset.tooltip
+        this.ui.label.innerHTML = e.currentTarget.dataset.tooltip
         const coord = this.offset(e.currentTarget)
 
         this.show()
-        this.element.style.top = (coord.top + this.options.offset.top) + 'px'
-        this.element.style.left = coord.left - (this.element.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
+        // this.element.style.top = (coord.top + this.options.offset.top) + 'px'
+        // this.element.style.left = coord.left - (this.element.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
+
+        this.position(e.currentTarget)
       })
 
       targets[i].addEventListener('mouseleave', (e) => {
-        this.label.innerHTML = ''
+        this.ui.label.innerHTML = ''
         this.hide()
       })
     }

package/src/view.js

@@ -1,22 +1,8 @@
-import EventEmitter from './mixin/emitter'
-import build from './mixin/build'
+import Control from './class/control'
 
-class View extends EventEmitter {
+class View extends Control {
   static defaults = {
-    class: 'view',
-    type: null
-  }
-
-  constructor (options) {
-    super()
-
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...View.defaults, ...options }
-    Object.assign(this, build)
+    class: 'view'
   }
 }
 

package/src/component.js

@@ -1,38 +0,0 @@
-import create from './mixin/create'
-import events from './mixin/events'
-import insert from './mixin/insert'
-
-import emitter from './module/emitter'
-
-// Depracted
-
-class Component {
-  static defaults = {
-    prefix: 'material',
-    class: 'component',
-    tag: 'span'
-  }
-
-  constructor (options) {
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...Component.defaults, ...options }
-
-    Object.assign(this, emitter, events, insert)
-  }
-
-  build () {
-    this.element = create(this.options)
-
-    if (this.options.container) {
-      this.insert(this.options.container)
-    }
-
-    return this
-  }
-}
-
-export default Component