material 0.8.5 → 0.8.7

package/package.json

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

package/src/card.js

@@ -1,36 +1,28 @@
-// import modules
-import create from './mixin/create'
-import insert from './mixin/insert'
-// import components
-import Layout from './layout'
-
-const defaults = {
-  prefix: 'material',
-  class: 'card',
-  tag: 'div'
-}
+import build from './module/build'
+import display from './mixin/display'
+import position from './mixin/position'
 
 class Card {
+  static defaults = {
+    class: 'card',
+    position: {
+      align: 'center',
+      vAlign: 'dynamic',
+      offsetX: 10,
+      offsetY: 10
+    },
+    close: true,
+    layout: []
+  }
+
   constructor (options) {
     this.init(options)
     this.build()
   }
 
   init (options) {
-    this.options = Object.assign({}, defaults, options || {})
-    Object.assign(this, insert)
-  }
-
-  /**
-   * build the component using the super method
-   * @return {Object} The class instance
-   */
-  build () {
-    this.element = create(this.options)
-
-    if (this.options.layout) {
-      this.layout = new Layout(this.options.layout, this.element)
-    }
+    this.options = Object.assign({}, Card.defaults, options || {})
+    Object.assign(this, build, display, position)
   }
 }
 

package/src/element.js

@@ -7,6 +7,9 @@ class Element {
     this.options = Object.assign({}, options || {})
     // console.log('element options', options)
     const element = document.createElement(this.options.tag || 'div')
+
+    const container = this.options.container
+    delete this.options.container
     delete this.options.tag
 
     if (options.html) element.innerHTML = this.options.html
@@ -17,14 +20,12 @@ class Element {
 
     if (options.id) element.setAttribute('id', options.id)
 
-    for (const property in this.options) {
-      if (this.options.hasOwnProperty(property)) {
-        element.setAttribute(property, this.options[property])
-      }
+    for (const [property, value] of Object.entries(this.options)) {
+      element.setAttribute(property, value)
     }
 
-    if (this.options.container) {
-      this.options.container.appendChild(element)
+    if (container) {
+      container.appendChild(element)
     }
 
     return element

package/src/menu.js

@@ -3,6 +3,7 @@ import EventEmitter from './mixin/emitter'
 import build from './module/build'
 import events from './module/events'
 import display from './mixin/display'
+import position from './mixin/position'
 
 import Element from './element'
 import Button from './button'
@@ -10,15 +11,22 @@ import Button from './button'
 class Menu extends EventEmitter {
   static defaults = {
     class: 'menu',
-    offset: 8,
     modal: false,
+    position: {
+      align: 'right',
+      vAlign: 'bottom',
+      offsetX: 10,
+      offsetY: 10
+    },
     layout: [
-      [Element, 'surface', { class: 'surface' },
-        [Element, 'list', { tag: 'ul', class: 'items' }]
-      ]
+      [Element, 'list', { tag: 'ul', class: 'items' }]
     ],
     events: [
-      ['element.click', 'close']
+      ['element.click', 'onClick'],
+      ['element.show', 'close'],
+      ['element.mouseenter', 'onMouseEnter'],
+      ['element.mouseleave', 'close'],
+      ['options.target.mouseleave', 'close']
     ]
   }
 
@@ -30,15 +38,18 @@ class Menu extends EventEmitter {
     this.setup()
 
     this.render(this.options.items)
+
+    return this
   }
 
   init (options) {
     this.options = Object.assign({}, Menu.defaults, options || {})
-    Object.assign(this, build, display)
+    Object.assign(this, build, display, position)
   }
 
   setup () {
     events.attach(this.options.events, this)
+    this.closeTimeout = null
   }
 
   render (items) {
@@ -58,42 +69,29 @@ class Menu extends EventEmitter {
       item = new Element({ tag: 'li', class: 'divider' })
     } else {
       obj.container = this.ui.list
-      obj.class = 'item'
-      item = new Button(obj).on('click', (ev) => {
-        // console.log('select', ev.target.name)
-        this.emit('select', ev.target.name)
-      })
+      item = new Element(obj).classList.add('item')
     }
 
     return this
   }
 
-  position (target) {
-    if (!target) return
-    const caller = target.getBoundingClientRect()
-    const screen = this.ui.surface.getBoundingClientRect()
-    const menu = this.ui.list.getBoundingClientRect()
-
-    // Calculate top position
-    let top = caller.top + caller.height
-    if (top + menu.height > window.innerHeight) {
-      top = window.innerHeight - menu.height - this.options.offset
-    }
-    this.ui.surface.style.top = top + 'px'
+  onMouseEnter () {
+    clearTimeout(this.closeTimeout)
+  }
 
-    // Calculate left position
-    let left = caller.left - caller.width + menu.width - screen.width + caller.width
-    if (left + menu.width > window.innerWidth) {
-      left = window.innerWidth - menu.width - this.options.offset
+  onClick (ev) {
+    // console.log('onClick', ev.target, ev.target.getAttribute('name'))
+    const name = ev.target.getAttribute('name')
+    if (name) {
+      this.emit('select', name)
     }
-    this.ui.surface.style.left = left + 'px'
-
-    return this
+    this.destroy()
   }
 
   close () {
-    // console.log('close')
-    this.destroy()
+    this.closeTimeout = setTimeout(() => {
+      this.destroy()
+    }, 200)
   }
 }
 

package/src/mixin/position.js

@@ -0,0 +1,79 @@
+export default {
+  position (target, position) {
+    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
+
+    const caller = target.getBoundingClientRect()
+    const screen = this.element.parentNode.getBoundingClientRect()
+    const element = this.element.getBoundingClientRect()
+
+    let left, top
+
+    switch (align) {
+      case 'left':
+        left = caller.left + caller.width
+        break
+      case 'right':
+        left = caller.left
+        if (left + element.width + offsetX > screen.width) {
+          console.log('out boundaries')
+          left = caller.left - element.width + caller.width
+        }
+        break
+      case 'center':
+        left = caller.left + (caller.width / 2) - (element.width / 2)
+
+      default:
+        left = caller.left + (caller.width / 2) - (element.width / 2)
+    }
+
+    // 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
+    }
+
+    // console.log('left', left)
+
+    // left = Math.max(offsetX, Math.min(left, screen.width - element.width - offsetX))
+
+    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 'bottom':
+        top = caller.top + caller.height + scrollY
+        break
+      case 'middle':
+      case 'dynamic':
+        if (caller.top + caller.height / 2 < screen.height / 2) {
+          top = caller.bottom + scrollY // Positionner en dessous si dans la moitié supérieure
+        } else {
+          top = caller.top + scrollY - element.height // Positionner au-dessus si dans la moitié inférieure
+        }
+        break
+
+      default:
+        top = caller.top + scrollY + (caller.height / 2) - (element.height / 2)
+    }
+
+    this.element.style.left = `${left}px`
+    this.element.style.top = `${top}px`
+
+    return this
+  }
+}

package/src/module/attributes.js

@@ -1,11 +1,21 @@
+/**
+ * Sets attributes on a DOM element based on provided options.
+ *
+ * This function iterates over a list of attributes and sets them on the specified element.
+ * Special attributes such as 'required', 'disabled', 'multiple', 'checked' are set as boolean attributes,
+ * while others are set with their corresponding values from the options.
+ *
+ * @param {Element} element - The DOM element to which attributes will be applied.
+ * @param {Object} options - An object containing the attributes and their values.
+ */
 const special = ['required', 'disabled', 'multiple', 'checked']
 
 const attributes = (element, options) => {
-  if (!element || !options.attributes) return
+  if (!element || !options?.attributes) return
 
   options.attributes.forEach(attribute => {
-    if (options[attribute] && String(options[attribute]) !== 'undefined') {
-      const value = special.includes(attribute) ? attribute : options[attribute]
+    if (options[attribute] !== undefined) {
+      const value = special.includes(attribute) ? '' : options[attribute]
       element.setAttribute(attribute, value)
     }
   })

package/src/module/dataset.js

@@ -1,11 +1,18 @@
-
-function dataset (element, data) {
+/**
+ * Applies data attributes to a DOM element based on an object's properties.
+ *
+ * This function takes an object and applies its key-value pairs as data attributes
+ * to a provided DOM element. Only the object's own properties (not inherited properties)
+ * are applied.
+ *
+ * @param {Element} element - The DOM element to which data attributes will be applied.
+ * @param {Object} data - An object containing key-value pairs to be applied as data attributes.
+ */
+const dataset = (element, data) => {
   if (data) {
-    for (const property in data) {
-      if (data.hasOwnProperty(property)) {
-        element.dataset[property] = data[property]
-      }
-    }
+    Object.entries(data).forEach(([key, value]) => {
+      element.dataset[key] = value
+    })
   }
 }
 

package/src/module/dot.js

@@ -1,20 +1,32 @@
+/**
+ * Converts a nested object into a flat object with dotted paths as keys.
+ *
+ * @param {Object} obj - The object to be flattened.
+ * @param {string} [base=''] - (Internal use) A prefix used to build the dotted paths. Users typically do not need to provide this.
+ * @returns {Object} A new object with the same values as `obj`, but flattened.
+ *
+ * @example
+ * const nested = { a: { b: { c: 1 }, d: 2 }, e: 3 };
+ * const flat = dot(nested);
+ * // flat is now { 'a.b.c': 1, 'a.d': 2, 'e': 3 }
+ *
+ * @example
+ * // It does not flatten arrays or date objects
+ * const complex = { a: [{ b: 1 }, { c: 2 }], d: new Date() };
+ * const flatComplex = dot(complex);
+ * // flatComplex is now { 'a': [{ b: 1 }, { c: 2 }], 'd': [Date Object] }
+ */
 
-function dot (obj) {
-  const res = {}
-  function recurse (obj, current) {
-    for (const key in obj) {
-      const value = obj[key]
-      const newKey = (current ? current + '.' + key : key)
-      if (value && typeof value === 'object') {
-        recurse(value, newKey)
-      } else {
-        res[newKey] = value
-      }
+const dot = (obj, base = '') => {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const newKey = base ? `${base}.${key}` : key
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(acc, dot(value, newKey))
+    } else {
+      acc[newKey] = value
     }
-  }
-
-  recurse(obj)
-  return res
+    return acc
+  }, {})
 }
 
 export default dot

package/src/skin/material/control/menu.sass

@@ -2,26 +2,17 @@
   //display: none
   &.show
     //display: block
-  .surface
-    .list
-      background: white
-      .item
-        color: rgba(0,0,0,.87)
+  .list
+    background: white
+    .item
+      color: rgba(0,0,0,.87)
 
   &.floating
-    position: fixed
-    top: 0
-    left: 0
-    bottom: 0
-    right: 0
     display: flex
     align-items: center
     justify-content: center
     overflow: hidden
     opacity: 0
     transition: 0.2s
-    .surface
-      position: absolute
-      background-color: white