material - npm Package Compare versions

Comparing version 0.8.9 to 0.9.0

index.js

@@ -38,2 +38,3 @@ import AppBar from './src/appbar'
 import display from './src/mixin/display'
+import request from './src/module/request'
 import events from './src/module/events'
@@ -51,3 +52,3 @@ import emitter from './src/module/emitter'
   View, attributes, build, dataset, device, display, events, emitter, jsonToHTML, mediator,
-  observer, smoothscroll
+  observer, request, smoothscroll
 }

package.json

 {
   "name": "material",
-  "version": "0.8.9",
+  "version": "0.9.0",
   "description": "A lightweight implementation of Material Design Components for the web - ES6",
@@ -5,0 +5,0 @@ "main": "index.js",

src/menu.js

@@ -9,3 +9,2 @@ import EventEmitter from './mixin/emitter'
 import Element from './element'
-import Button from './button'
 
@@ -27,6 +26,4 @@ class Menu extends EventEmitter {
       ['element.click', 'onClick'],
-      ['element.show', 'close'],
-      ['element.mouseenter', 'onMouseEnter'],
-      ['element.mouseleave', 'close'],
-      ['options.target.mouseleave', 'close']
+      ['select', 'destroy'],
+      ['underlay.click', 'close']
     ]
@@ -40,2 +37,3 @@ }
     this.build(this.constructor)
+    this.buildUnderlay()
     this.setup()
@@ -51,7 +49,21 @@
     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)
   }
@@ -71,19 +83,51 @@
     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')
@@ -93,9 +137,24 @@ if (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()
   }
@@ -102,0 +161,0 @@ }

src/mixin/position.js

@@ -11,4 +11,6 @@ export default {
 
+    // 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()
@@ -25,3 +27,2 @@
         if (left + element.width + offsetX > screen.width) {
-          console.log('out boundaries')
           left = caller.left - element.width + caller.width
@@ -39,6 +40,12 @@ }
 
+    // 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
     }
@@ -52,7 +59,2 @@
 
-    // console.log('class', name)
-    // console.log('scrollY', scrollY)
-    // console.log('vAlign', vAlign)
-    // console.log('target top', caller.top)
-
     switch (vAlign) {
@@ -62,2 +64,5 @@ case 'top':
         break
+      case 'inline':
+        top = caller.top + scrollY
+        break
       case 'bottom':
@@ -79,2 +84,8 @@ top = caller.top + caller.height + scrollY
 
+    // 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`
@@ -81,0 +92,0 @@ this.element.style.top = `${top}px`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

473036

increased by0.35%

Lines of code

11164

increased by0.5%

No dependency changes