material 0.8.9 → 0.9.1

package/src/form.js

@@ -5,31 +5,18 @@ import events from './module/events'
 import controller from './mixin/controller'
 
 // import component
-import Layout from './layout'
+import { create } from './module/layout'
 
-const defaults = {
-  prefix: 'material',
-  class: 'form',
-  tag: 'div',
-  controls: ['textfield', 'checkbox', 'slider', 'switch']
-}
-
-/**
- * Form class
- *
- * @class
- * @return {Class} This class instance
- */
 class Form {
-  static uid = "material-form";
+  static defaults = {
+    prefix: 'material',
+    class: 'form',
+    tag: 'div',
+    controls: ['textfield', 'checkbox', 'slider', 'switch']
+  }
 
-  /**
-   * Constructor
-   * @param  {Object} options - Component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = Object.assign({}, Form.defaults, options || {})
 
     this.init()
     this.build()
@@ -78,7 +65,7 @@ class Form {
     // complete layout options
     this.options.root = this.element
 
-    this.layout = new Layout(this.options.layout, this.element)
+    this.layout = create(this.options.layout, this.element)
 
     this._initControls(this.layout.controls)
 

package/src/icon.js

@@ -1,27 +1,13 @@
 import insert from './mixin/insert'
 import * as css from './module/css'
 
-var defaults = {
-  prefix: 'material',
-  class: 'icon',
-  tag: 'div'
-}
-
-/**
- * The item class is used for example as item list
- *
- * @class
- * @extends {Component}
- * @return {Object} The class instance
- * @example new Item(object);
- */
 class Icon {
-  static uid = "material-icon";
+  static defaults = {
+    prefix: 'material',
+    class: 'icon',
+    tag: 'div'
+ }
 
-  /**
-   * init
-   * @return {Object} The class options
-   */
   constructor (options) {
     this.init(options)
     this.build()
@@ -29,20 +15,11 @@ class Icon {
     return this
   }
 
-  /**
-   * [init description]
-   * @param  {?} options [description]
-   * @return {?}         [description]
-   */
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = Object.assign({}, Icon.defaults, options || {})
     Object.assign(this, insert)
   }
 
-  /**
-   * Build function for item
-   * @return {Object} This class instance
-   */
   build (options) {
     options = options || this.options
 
@@ -66,11 +43,6 @@ class Icon {
     }
   }
 
-  /**
-   * Get or set text value of the element
-   * @param {string} value The text to set
-   * @returns {*}
-   */
   set (value) {
     if (value) {
       if (this.element.innerText) {

package/src/image.js

@@ -1,8 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class Image {
-  static uid = "material-image";
-
   static defaults = {
     class: 'image',
     tag: 'div',

package/src/item.js

@@ -1,8 +1,8 @@
-import build from './module/build'
+import build from './mixin/build'
 
-class Item {
-  static uid = "material-item";
+// Depracated
 
+class Item {
   static defaults = {
     prefix: 'material',
     class: 'item',

package/src/link.js

@@ -1,8 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class Link {
-  static uid = "material-link";
-
   static defaults = {
     class: 'link',
     tag: 'a'

package/src/list/build.js

@@ -1,7 +1,7 @@
 import scrollbar from '../module/scrollbar'
 import dataset from '../module/dataset'
 
-import Layout from '../layout'
+import { create } from '../module/layout'
 import Virtual from './virtual'
 import Loading from '../loading'
 
@@ -30,7 +30,7 @@ export default {
       dataset(this.element, this.options.data)
     }
 
-    this.layout = new Layout(this.options.layout.main, this.element)
+    this.layout = create(this.options.layout.main, this.element)
     this.ui = this.layout.component
 
     // prepare loading

package/src/list/render.js

@@ -1,5 +1,5 @@
 import Element from '../element'
-import Layout from '../layout'
+import { create } from '../module/layout'
 
 import dot from '../module/dot'
 
@@ -59,7 +59,7 @@ export default {
       }
     } else {
       const itemName = this.options.itemName || 'item'
-      layout = new Layout(this.options.layout[itemName], element)
+      layout = create(this.options.layout[itemName], element)
     }
 
     // console.log('translate', layout)

package/src/list/select.js

@@ -1,3 +1,5 @@
+import clone from '../module/clone'
+
 export default {
   select (item, silent) {
     // console.log('select', item.dataset.id)
@@ -42,11 +44,11 @@ export default {
   },
 
   getInfoById (id) {
-    return JSON.parse(JSON.stringify(this.dataStore[id]))
+    return clone(this.dataStore[id])
   },
 
   getSelectedInfo () {
-    return JSON.parse(JSON.stringify(this.dataStore[this.id]))
+    return clone(this.dataStore[this.id])
   },
 
   getItemById (id, silent) {

package/src/list/update.js

@@ -1,4 +1,4 @@
-import Layout from '../layout'
+import { create } from '../module/layout'
 
 export default {
   update (info) {
@@ -53,7 +53,7 @@ export default {
     const item = this.ui.body.querySelector('[data-id="' + info[this.dataId] + '"]')
     if (item) {
       item.innerHTML = ''
-      const layout = new Layout(this.options.layout.item, item)
+      const layout = create(this.options.layout.item, item)
 
       this.renderInfo(layout, info)
     }

package/src/list.js

@@ -1,20 +1,19 @@
 import * as css from './module/css'
 
-const defaults = {
-  className: 'text',
-  tag: 'span',
-  seprator: ' | '
-}
-
 class List {
-  static uid = "material-list";
+  static defaults = {
+    className: 'text',
+    tag: 'span',
+    seprator: ' | '
+  }
 
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
-
+    this.init(options)
     this.build()
+  }
 
-    return this
+  init (otions) {
+    this.options = { ...List.defaults, ...options }
   }
 
   build () {
@@ -37,9 +36,9 @@ class List {
   }
 
   set (list) {
-    var text = ''
+    let text = ''
 
-    for (var i = 0; i < list.length; i++) {
+    for (let i = 0; i < list.length; i++) {
       if (i < list.length - 1) {
         text = text + list[i] + this.options.seprator
       } else {
@@ -50,7 +49,7 @@ class List {
     // console.log('set', text)
     if (text === undefined) return
 
-    var label = this.options.label || ''
+    const label = this.options.label || ''
 
     this.element.innerHTML = label + text
 

package/src/loader.js

@@ -1,18 +1,15 @@
 class Loader {
-  static uid = "material-loader";
-
   static defaults = {
     class: 'loader'
   }
 
   constructor (options) {
-    this.options = Object.assign({}, Loader.defaults, options || {})
-
-    // Object.assign(this, mediator, build)
-
+    this.init(options)
     this.build()
+  }
 
-    return this
+  init (options) {
+    this.options = { ...Loader.defaults, ...options }
   }
 
   build () {

package/src/loading.js

@@ -1,12 +1,6 @@
-import build from './module/build'
+import build from './mixin/build'
 
 class Loading {
-  static uid = "material-loading";
-
-  static isComponent () {
-    return true
-  }
-
   static defaults = {
     class: 'loading',
     tag: 'div',
@@ -24,7 +18,7 @@ class Loading {
   }
 
   init (options) {
-    this.options = Object.assign({}, Loading.defaults, options || {})
+    this.options = { ...Loading.defaults, ...options }
     Object.assign(this, build)
   }
 

package/src/map.js

@@ -13,42 +13,37 @@ import mode from './map/mode'
 import select from './map/select'
 import focus from './map/focus'
 
-const events = [
-  ['root.mousedown', 'mouseDown'],
-  ['root.mouseup', 'mouseUp'],
-  ['root.mousemove', 'mouseMove'],
-  ['root.mouseleave', 'mouseLeave'],
-  ['root.mouseout', 'mouseOut'],
-  ['root.click', 'mouseClick'],
-  ['root.touchStart', 'mouseClick']
-]
-
-const defaults = {
-  class: 'worldmap',
-  tag: 'main',
-  zoom: 0.3,
-  isocodes: [],
-  mode: 'unique',
-  path: '/dist/map/',
-  pinchZoom: {
-    maxZoom: 128,
-    minZoom: 3,
-    setOffsetsOnce: true,
-    verticalPadding: 64,
-    horizontalPadding: 64,
-    tapZoomFactor: 0
-  }
-}
+// Depracted
 
 class Map {
-  static uid = "material-map";
+  static defaults = {
+    class: 'worldmap',
+    tag: 'main',
+    zoom: 0.3,
+    isocodes: [],
+    mode: 'unique',
+    path: '/dist/map/',
+    pinchZoom: {
+      maxZoom: 128,
+      minZoom: 3,
+      setOffsetsOnce: true,
+      verticalPadding: 64,
+      horizontalPadding: 64,
+      tapZoomFactor: 0
+    },
+    events: [
+      ['root.mousedown', 'mouseDown'],
+      ['root.mouseup', 'mouseUp'],
+      ['root.mousemove', 'mouseMove'],
+      ['root.mouseleave', 'mouseLeave'],
+      ['root.mouseout', 'mouseOut'],
+      ['root.click', 'mouseClick'],
+      ['root.touchStart', 'mouseClick']
+    ]
+  }
 
-  /**
-   * Constructor component options
-   * @return {Object} Class instance
-   */
   constructor (options) {
-    this.options = Object.assign({}, defaults, options || {})
+    this.options = { ...Map.defaults, ...options }
 
     Object.assign(
       this, emitter, init, build, viewport, mouse,

package/src/menu.js

@@ -1,12 +1,11 @@
 import EventEmitter from './mixin/emitter'
 // menu related modules
-import build from './module/build'
+import build from './mixin/build'
 import events from './module/events'
 import display from './mixin/display'
 import position from './mixin/position'
 
 import Element from './element'
-import Button from './button'
 
 class Menu extends EventEmitter {
   static defaults = {
@@ -23,10 +22,8 @@ class Menu extends EventEmitter {
     ],
     events: [
       ['element.click', 'onClick'],
-      ['element.show', 'close'],
-      ['element.mouseenter', 'onMouseEnter'],
-      ['element.mouseleave', 'close'],
-      ['options.target.mouseleave', 'close']
+      ['select', 'destroy'],
+      ['underlay.click', 'close']
     ]
   }
 
@@ -35,6 +32,7 @@ class Menu extends EventEmitter {
 
     this.init(options)
     this.build(this.constructor)
+    this.buildUnderlay()
     this.setup()
 
     this.render(this.options.items)
@@ -43,13 +41,27 @@ class Menu extends EventEmitter {
   }
 
   init (options) {
-    this.options = Object.assign({}, Menu.defaults, 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.closeTimeout = null
+
+    document.addEventListener('click', this.handleDocumentClick)
   }
 
   render (items) {
@@ -64,34 +76,81 @@ class Menu extends EventEmitter {
 
   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
-      item = new Element(obj).classList.add('item')
+      obj.tag = 'li'
+      obj.class = obj.class ? obj.class + ' item' : 'item'
+      item = new Element(obj)
+
+      item.addEventListener('mouseenter', () => {
+        if (this.menu) {
+          this.menu.destroy()
+        }
+      })
+
+      if (obj.items && Array.isArray(obj.items)) {
+        item.classList.add('sub')
+
+        item.addEventListener('mouseenter', () => {
+          this.menu = new Menu({
+            class: 'floating',
+            target: item,
+            container: this.options.container,
+            parentName: obj.name,
+            items: obj.items
+          }).position(item, {
+            align: 'left',
+            vAlign: 'inline',
+            offsetX: 8,
+            offsetY: 8
+          }).show()
+
+          this.menu.on('select', (name) => {
+            this.emit('select', `${obj.name}:${name}`)
+          }).on('destroy', () => {
+            this.menu = null
+          })
+
+          this.menus.push(this.menu)
+        })
+      }
     }
-
+    this.ui.list.appendChild(item)
     return this
   }
 
-  onMouseEnter () {
-    clearTimeout(this.closeTimeout)
-  }
-
   onClick (ev) {
-    // console.log('onClick', ev.target, ev.target.getAttribute('name'))
+    if (ev.target.classList.contains('sub')) return
     const name = ev.target.getAttribute('name')
     if (name) {
       this.emit('select', name)
     }
-    this.destroy()
+  }
+
+  destroyMenu (menu) {
+  // Trouver l'index de menuToDestroy dans this.menus
+    const index = this.menus.indexOf(menu)
+
+    // Si trouvé, supprimer le menu du tableau
+    if (index > -1) {
+      this.menus.splice(index, 1)
+    }
+
+    // Appeler la méthode destroy sur le menuToDestroy
+    menu.destroy()
   }
 
   close () {
-    this.closeTimeout = setTimeout(() => {
-      this.destroy()
-    }, 200)
+    // console.log('')
+    this.menus.forEach(menu => {
+      menu.destroy()
+    })
+    this.menus = []
+    this.destroy()
   }
 }
 

package/src/mixin/build.js

@@ -0,0 +1,68 @@
+import * as css from '../module/css'
+import dataset from '../module/dataset'
+
+import { create } from '../module/layout'
+
+export default {
+  build () {
+    this.element = document.createElement(this.options.tag || 'div')
+
+    const defaults = this.constructor.defaults || {}
+
+    if (defaults.base) css.add(this.element, defaults.base)
+    if (defaults.class) css.add(this.element, defaults.class)
+
+    if (this.options.class !== defaults.class) {
+      css.add(this.element, this.options.class)
+    }
+
+    if (this.options.data) {
+      dataset(this.element, this.options.data)
+    }
+
+    if (this.options.base === 'view' || this.options.base === 'app') {
+      this.container = this.options.container || document.body
+    } else {
+      this.container = this.options.container
+    }
+
+    if (this.container) this.appendTo(this.container)
+
+    if (this.options.layout) {
+      this.layout = create(this.options.layout, this.element)
+      this.ui = this.layout.component
+    }
+
+    this.ui = this.ui || {}
+
+    if (this.options.icon) this.buildIcon()
+    if (this.options.label) this.buildLabel()
+
+    if (this.options.show === true && this.show) this.show()
+  },
+
+  buildLabel () {
+    if (!this.options.label) return
+
+    this.ui.label = document.createElement('label')
+    this.ui.label.classList.add('label')
+    this.ui.label.innerHTML = this.options.label
+
+    this.element.appendChild(this.ui.label)
+  },
+
+  buildIcon () {
+    if (!this.options.icon) return
+
+    this.ui.icon = document.createElement('i')
+    this.ui.icon.classList.add('icon')
+    this.ui.icon.innerHTML = this.options.icon
+
+    this.element.appendChild(this.ui.icon)
+  },
+
+  appendTo (container) {
+    // console.log('appendTo', container)
+    container.appendChild(this.element)
+  }
+}

package/src/mixin/emitter.js

@@ -1,6 +1,4 @@
 class EventEmitter {
-  static uid = "material-mixin-eventemitter";
-
   constructor () {
     this.events = {}
   }

package/src/mixin/position.js

@@ -8,8 +8,10 @@ export default {
 
     if (!target) return
 
+    // console.log('container', this.options.container)
+
     const caller = target.getBoundingClientRect()
-    const screen = this.element.parentNode.getBoundingClientRect()
+    const screen = this.options.container.getBoundingClientRect()
     const element = this.element.getBoundingClientRect()
 
     let left, top
@@ -21,7 +23,6 @@ export default {
       case 'right':
         left = caller.left
         if (left + element.width + offsetX > screen.width) {
-          console.log('out boundaries')
           left = caller.left - element.width + caller.width
         }
         break
@@ -34,10 +35,16 @@ export default {
 
     // ensure that the element remains within the limits of its container
 
+    // if (left < 0) left = offsetX
+
+    // if (left + element.width + offsetX > screen.width) {
+    //   left = screen.width - element.width - offsetX
+    // }
+
     if (left < 0) left = offsetX
 
-    if (left + element.width + offsetX > screen.width) {
-      left = screen.width - element.width - offsetX
+    if (left + element.width > screen.width) {
+      left = caller.left - element.width
     }
 
     // console.log('left', left)
@@ -46,15 +53,13 @@ export default {
 
     const scrollY = window.scrollY
 
-    // console.log('class', name)
-    // console.log('scrollY', scrollY)
-    // console.log('vAlign', vAlign)
-    // console.log('target top', caller.top)
-
     switch (vAlign) {
       case 'top':
         top = caller.top + scrollY - element.height
         break
+      case 'inline':
+        top = caller.top + scrollY
+        break
       case 'bottom':
         top = caller.top + caller.height + scrollY
         break
@@ -71,6 +76,12 @@ export default {
         top = caller.top + scrollY + (caller.height / 2) - (element.height / 2)
     }
 
+    // console.log('screen height', screen.height, element.height, offsetX)
+
+    if (top + element.height + offsetY > screen.height) {
+      top = screen.height - element.height - offsetX
+    }
+
     this.element.style.left = `${left}px`
     this.element.style.top = `${top}px`