material 0.8.4 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "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,91 @@
+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
+    console.log('constructor', name)
+
+    if (!target) return
+
+    const caller = target.getBoundingClientRect()
+    const screen = this.element.parentNode.getBoundingClientRect()
+    const element = this.element.getBoundingClientRect()
+
+    console.log('caller', caller)
+    console.log('screen', screen)
+    console.log('element', element)
+
+    let left, top
+
+    console.log('align', align)
+    console.log('target left', caller.left)
+
+    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)
+    }
+
+    if (left < 0) left = offsetX
+
+    if (left + element.width + offsetX > screen.width) {
+      left = caller.left - element.width + caller.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)
+    }
+
+    // if (this.options.class !== 'menu') {
+    //   top = Math.max(offsetY, Math.min(top, screen.height - element.height - offsetY))
+    // }
+
+    console.log('top', top)
+
+    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/device.js

@@ -6,6 +6,8 @@ const previousDevice = window.device
 const device = {}
 const os = ['ios', 'iphone', 'ipad', 'ipod', 'android', 'blackberry', 'macos', 'windows', 'fxos', 'meego', 'television']
 const type = ['mobile', 'tablet', 'desktop']
+const television = ['googletv', 'viera', 'smarttv', 'internet.tv', 'netcast', 'nettv', 'appletv', 'boxee', 'kylo', 'roku', 'dlnadoc', 'pov_tv', 'hbbtv', 'ce-html']
+
 const changeOrientationList = []
 
 // Add device as a global object.
@@ -19,22 +21,6 @@ const documentElement = window.document.documentElement
 let userAgent = window.navigator.userAgent.toLowerCase()
 
 // Detectable television devices.
-const television = [
-  'googletv',
-  'viera',
-  'smarttv',
-  'internet.tv',
-  'netcast',
-  'nettv',
-  'appletv',
-  'boxee',
-  'kylo',
-  'roku',
-  'dlnadoc',
-  'pov_tv',
-  'hbbtv',
-  'ce-html'
-]
 
 // Main functions
 // --------------

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/module/events.js

@@ -2,11 +2,17 @@ import extract from './extract'
 import last from './last'
 
 const events = {
-  eventHandlers: [], // Utiliser un tableau pour stocker les événements et les gestionnaires
+  eventHandlers: {}, // Utiliser un tableau pour stocker les événements et les gestionnaires
 
   attach (eventsArray, context) {
     if (!eventsArray) return
 
+    // Ensure each context has a unique UID
+    const uid = context._uid || (context._uid = context.options.class + Math.random().toString(36).substr(2, 9))
+
+    // Initialize storage for this context if it doesn't already exist
+    this.eventHandlers[uid] = this.eventHandlers[uid] || {}
+
     eventsArray.forEach(([eventDef, funcDef, option]) => {
       const e = extract.e(context, eventDef)
       const isFunction = typeof funcDef === 'function'
@@ -20,7 +26,6 @@ const events = {
       }
 
       const bound = last(keys.join('.'), context)
-
       let handler = null
 
       if (isFunction) {
@@ -28,18 +33,17 @@ const events = {
       } else if (f && bound) {
         handler = f.bind(bound)
       } else {
-        // console.error(`Can't bind function for ${eventDef}`)
-        return
+        return // Cannot bind function for eventDef
       }
 
-      if (handler && e && e.element && e.element.addEventListener) {
-        e.element.addEventListener(e.name, handler, option)
-        this.eventHandlers.push({ eventDef, element: e.element, handler })
-      } else if (e && e.element && e.element.on && handler) {
-        e.element.on(e.name, handler)
-        this.eventHandlers.push({ eventDef, element: e.element, handler })
-      } else {
-        // console.error(`Can't attach ${eventDef}`)
+      if (!this.eventHandlers[uid][eventDef]) {
+        if (handler && e && e.element?.addEventListener) {
+          e.element.addEventListener(e.name, handler, option)
+          this.eventHandlers[uid][eventDef] = handler
+        } else if (e && e.element?.on && handler) {
+          e.element.on(e.name, handler)
+          this.eventHandlers[uid][eventDef] = handler
+        }
       }
     })
 
@@ -47,20 +51,26 @@ const events = {
   },
 
   detach (eventsArray, context) {
-    (eventsArray || []).forEach(([eventDef]) => {
-      this.eventHandlers.forEach((handlerObj, index) => {
-        if (handlerObj.eventDef === eventDef) {
-          const { element, handler } = handlerObj
-          if (element.removeEventListener) {
-            element.removeEventListener(eventDef, handler)
-          } else if (element.off) {
-            element.off(eventDef, handler)
-          }
-          delete this.eventHandlers[index]
-        }
-      })
-      this.eventHandlers = this.eventHandlers.filter(Boolean) // Nettoyer les entrées supprimées
-    })
+    const uid = context._uid
+    if (!this.eventHandlers[uid]) return
+
+    eventsArray.forEach(([eventDef, funcDef, option]) => {
+      const e = extract.e(context, eventDef)
+      const handler = this.eventHandlers[uid][eventDef]
+      if (handler) {
+        e.element.removeEventListener(e.name, handler)
+      } else if (e.element.off) {
+        e.element.off(e.name, handler)
+      }
+
+      delete this.eventHandlers[uid][eventDef]
+    }
+    )
+  },
+
+  list (context) {
+    const uid = context?._uid
+    return uid ? this.eventHandlers[uid] || {} : this.eventHandlers
   }
 }
 

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
 
 

package/src/switcher.js

@@ -66,7 +66,7 @@ class Switcher extends EventEmitter {
   }
 
   setup () {
-    console.log('events.attach', this.options.events)
+    // console.log('events.attach', this.options.events)
     events.attach(this.options.events, this)
 
     if (this.options.default) {
@@ -75,7 +75,7 @@ class Switcher extends EventEmitter {
   }
 
   click (event) {
-    console.log('click', event)
+    // console.log('click', event)
     if (!event.target.dataset.switcher) return
     this.select(event.target)
   }