material 0.8.8 → 0.9.0

package/index.js

@@ -35,6 +35,7 @@ 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 request from './src/module/request'
 import events from './src/module/events'
 import emitter from './src/module/emitter'
 import jsonToHTML from './src/module/jsontohtml'
@@ -47,5 +48,5 @@ export {
   File, Form, Image, Layout, List, Loading, Menu, Navigation, Progress, Select,
   Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip,
   View, attributes, build, dataset, device, display, events, emitter, jsonToHTML, mediator,
-  observer, smoothscroll
+  observer, request, smoothscroll
 }

package/package.json

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

package/src/button.js

@@ -82,8 +82,7 @@ class Button extends EventEmitter {
         this.element.value = value
         break
       case 'label':
-        if (!this.ui.label) this.buildLabel()
-        this.ui.label.innerHTML = value
+        this.setLabel(value)
         break
       case 'text':
         this.element.innerHTML = value
@@ -126,12 +125,22 @@ class Button extends EventEmitter {
       case 'value':
         return this.element.value
       case 'label':
-        return this.label?.innerHTML ?? this.element.value
+        return this.getText()
+      case 'text':
+        return this.getText()
       default:
         return this.element.value
     }
   }
 
+  getText () {
+    if (this.ui.label) {
+      return this.ui.label.innerHTML
+    } else {
+      return this.element.innerHTML
+    }
+  }
+
   disable () {
     this.element.disabled = true
   }

package/src/menu.js

@@ -6,7 +6,6 @@ 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)
@@ -45,11 +43,25 @@ class Menu extends EventEmitter {
   init (options) {
     this.options = Object.assign({}, 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/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`