material - npm Package Compare versions

Comparing version 0.9.6 to 0.9.7

index.js

@@ -40,2 +40,3 @@ // base classes
 import build from './src/mixin/build'
+import position from './src/mixin/position'
 // modules
@@ -55,2 +56,3 @@ import clone from './src/module/clone'
 import smoothscroll from './src/module/smoothscroll'
+import touch from './src/module/touch'
 
@@ -67,3 +69,3 @@ export {
   attributes, build, clone, create, dataset, device, display, events, emitter, jsonToHTML, mediator, merge,
-  observer, request, ripple, smoothscroll
+  observer, position, request, ripple, smoothscroll, touch
 }

package.json

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

src/card.js

@@ -1,8 +0,15 @@
-import build from './mixin/build'
-import display from './mixin/display'
-import position from './mixin/position'
+import {
+  Component,
+  display,
+  position
+} from '../'
 
-class Card {
+// import position from './mixin/position'
+
+console.log('position', position)
+
+class Card extends Component {
   static defaults = {
     class: 'card',
+    mixins: [display, position],
     position: {
@@ -14,17 +21,6 @@ align: 'center',
     },
-    close: true,
-    layout: []
+    close: true
   }
-
-  constructor (options) {
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...Card.defaults, ...options }
-    Object.assign(this, build, display, position)
-  }
 }
 
 export default Card

src/checkbox.js

@@ -1,6 +0,2 @@
-import EventEmitter from './mixin/events'
-// import control from './mixin/control'
-import build from './mixin/build'
-import events from './module/events'
-import * as css from './module/css'
+import Control from './class/control'
 
@@ -10,3 +6,3 @@ import icon from './skin/material/icon/checkbox.svg'
 
-class Checkbox {
+class Checkbox extends Control {
   static defaults = {
@@ -21,3 +17,3 @@ class: 'checkbox',
       ['ui.control.click', 'click'],
-      ['ui.label.click', 'toggle'],
+      ['ui.label.click', 'check'],
       // for accessibility purpose
@@ -32,16 +28,7 @@ // ['element.input.click', 'toggle'],
   constructor (options) {
-    this.init(options)
-    this.build()
+    super(options)
     this.setup()
   }
 
-  init (options) {
-    this.options = { ...Checkbox.defaults, ...options }
-    Object.assign(this, build, attach)
-  }
-
   setup () {
-    this.element = build(this.options.build)
-    this.element = this.element.root
-
     this.ui.control.innerHTML = icon
@@ -64,3 +51,3 @@
       this.ui.input.setAttribute('disabled', 'disabled')
-      css.add(this.element, 'is-disabled')
+      this.element.classList.add('is-disabled')
     }
@@ -75,4 +62,2 @@
     }
-
-    events.attach(this.options.events, this)
   }
@@ -98,13 +83,17 @@
 
-  check (checked) {
-    if (checked === true) {
-      css.add(this.element, 'is-checked')
+  get () {
+    return this.value
+  }
+
+  check (value) {
+    if (value === true) {
+      this.element.classList.add('is-checked')
       this.ui.input.checked = true
-      this.checked = true
-      this.emit('change', this.checked)
+      this.value = true
+      this.emit('change', this.value)
     } else {
-      css.remove(this.element, 'is-checked')
+      this.element.classList.remove('is-checked')
       this.ui.input.checked = false
-      this.checked = false
-      this.emit('change', this.checked)
+      this.value = false
+      this.emit('change', this.value)
     }
@@ -114,5 +103,9 @@ return this
 
-  click (e) {
-    this.toggle(e)
+  onClick (e) {
     this.ui.input.focus()
+    if (this.element.classList.add('is-checked')) {
+      this.check(false)
+    } else {
+      this.check(true)
+    }
 
@@ -119,0 +112,0 @@ return this

src/datehour.js

@@ -1,4 +0,4 @@
-import build from './mixin/build'
+import Component from './class/component'
 
-class DateHour {
+class DateHour extends Component {
   static defaults = {
@@ -9,12 +9,2 @@ class: 'date',
 
-  constructor (options) {
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...DateHour.defaults, ...options }
-    Object.assign(this, build)
-  }
-
   set (date) {
@@ -21,0 +11,0 @@ // console.log('set', src)

src/menu.js

@@ -1,13 +0,10 @@
-import EventEmitter from './mixin/emitter'
-// menu related modules
-import build from './mixin/build'
-import events from './module/events'
-import display from './mixin/display'
-import position from './mixin/position'
+import {
+  Control, Element, display, position
+} from '../index'
 
-import Element from './element'
-
-class Menu extends EventEmitter {
+class Menu extends Control {
   static defaults = {
     class: 'menu',
+    mixins: [display, position],
+    underlay: true,
     modal: false,
@@ -31,33 +28,11 @@ position: {
   constructor (options) {
-    super()
+    super(options)
 
-    this.init(options)
-    this.build(this.constructor)
-    this.buildUnderlay()
     this.setup()
 
     this.render(this.options.items)
-
-    return this
   }
 
-  init (options) {
-    this.options = { ...Menu.defaults, ...options }
-    Object.assign(this, build, display, position)
-
+  setup () {
     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
@@ -104,2 +79,3 @@
             container: this.options.container,
+            underlay: false,
             parentName: obj.name,
@@ -137,3 +113,2 @@ items: obj.items
   destroyMenu (menu) {
-  // Trouver l'index de menuToDestroy dans this.menus
     const index = this.menus.indexOf(menu)
@@ -146,3 +121,2 @@
 
-    // Appeler la méthode destroy sur le menuToDestroy
     menu.destroy()
@@ -149,0 +123,0 @@ }

src/mixin/position.js

 export default {
   position (target, position) {
+    // console.log('position', target)
     target = target || this.options.target
@@ -7,7 +8,7 @@ position = position || this.options.position
 
-    const name = this.constructor.name
+    if (!target) return this
 
-    if (!target) return
+    // console.log('--- target', target)
 
-    // console.log('container', this.options.container)
+    this.options.container = this.options.container || this.element.parentNode
 
@@ -14,0 +15,0 @@ const caller = target.getBoundingClientRect()

src/module/build.js

@@ -11,9 +11,5 @@ import * as css from './css'
   // console.log('name', instance.constructor.defaults)
-  const { tag = 'div', class: customClass, data, base, container, layout, icon, label, show } = instance.options
+  const { tag = 'div', class: customClass, data, base, container, underlay, layout, icon, label, show } = instance.options
   const { defaults = {} } = instance.constructor
 
-  if (instance.constructor?.defaults.class === 'length') {
-    console.log('---', instance.constructor.defaults)
-  }
-
   instance.element = document.createElement(tag)
@@ -40,4 +36,5 @@
 
-  if (icon) buildIcon(instance)
-  if (label) buildLabel(instance)
+  if (instance.options.underlay) buildUnderlay(instance, defaults.class)
+  if (icon && !instance.ui.icon) buildIcon(instance)
+  if (label && !instance.ui.label) buildLabel(instance)
 
@@ -55,5 +52,9 @@ if (show === true && instance.show) instance.show()
   instance.ui = instance.layout.component
+}
 
-  if (instance.constructor.name === 'Length') {
-    console.log(instance.ui)
+function buildUnderlay (instance, name) {
+  if (instance.options.underlay) {
+    instance.underlay = document.createElement('div')
+    instance.underlay.classList.add(name + '-underlay')
+    instance.options.container.appendChild(instance.underlay)
   }
@@ -60,0 +61,0 @@ }

src/module/extract.js

@@ -22,9 +22,13 @@
 
-  for (let i = 0, l = keys.length; i <= l; i++) {
-    const key = keys[i]
-    iteration = iteration || instance
-    iteration = iteration[key]
+  if (keys[0] === 'window') {
+    element = window
+  } else {
+    for (let i = 0, l = keys.length; i <= l; i++) {
+      const key = keys[i]
+      iteration = iteration || instance
+      iteration = iteration[key]
 
-    if (i === keys.length - 2) {
-      element = iteration
+      if (i === keys.length - 2) {
+        element = iteration
+      }
     }
@@ -31,0 +35,0 @@ }

src/text.js

@@ -1,4 +0,4 @@
-import build from './mixin/build'
+import Component from './class/component'
 
-class Text {
+class Text extends Component {
   static defaults = {
@@ -10,12 +10,6 @@ class: 'text',
   constructor (options) {
-    this.init(options)
-    this.build()
+    super(options)
     this.setup()
   }
 
-  init (options) {
-    this.options = { ...Text.defaults, ...options }
-    Object.assign(this, build)
-  }
-
   setup () {
@@ -22,0 +16,0 @@ if (this.options.text) {

src/tooltip.js

@@ -0,5 +1,12 @@
+import Component from './class/component'
+import Element from './element'
+import position from './mixin/position'
 import touch from './module/touch'
 
-class Tooltip {
+class Tooltip extends Component {
   static defaults = {
+    base: 'component',
+    class: 'tooltip',
+    tag: 'span',
+    mixins: [position],
     targets: '[data-tooltip]',
@@ -9,50 +16,17 @@ offset: {
     },
-    disabled: false
+    position: {
+      align: 'center',
+      vAlign: 'bottom'
+    },
+    disabled: false,
+    layout: [
+      [Element, { tag: 'span', class: 'pointer' }],
+      [Element, 'label', { tag: 'span', class: 'label' }]
+    ]
   }
 
-  /**
-   * The init method of the Button class
-   * @param  {Object} The element attributes
-   * @private
-   * @return {DOMElement} The dom element
-   */
-  constructor (options) {
-    // console.log('constructor')
-
-    this.init(options)
-    this.build()
-    this.bindEvents()
-
-    return this
-  }
-
-  init (options) {
-    this.options = { ...Tooltip.defaults, ...options }
-  }
-
-  build () {
-    const container = this.options.container || document.body
-
-    this.element = document.createElement('span')
-    this.element.classList.add('tooltip')
-    this.element.classList.add('control')
-
-    this.pointer = document.createElement('span')
-    this.pointer.classList.add('pointer')
-    this.element.appendChild(this.pointer)
-
-    this.label = document.createElement('span')
-    this.label.classList.add('label')
-    this.element.appendChild(this.label)
-
-    container.appendChild(this.element)
-  }
-
-  bindEvents () {
-    // console.log('attach', this.options.targets)
+  bindTargets () {
     const targets = document.querySelectorAll(this.options.targets)
-
     for (let i = 0; i < targets.length; i++) {
       targets[i].addEventListener('mouseover', (e) => {
-        // console.log('tooltip', touch(), this.disabled)
         if (touch()) return
@@ -70,12 +44,14 @@
 
-        this.label.innerHTML = e.currentTarget.dataset.tooltip
+        this.ui.label.innerHTML = e.currentTarget.dataset.tooltip
         const coord = this.offset(e.currentTarget)
 
         this.show()
-        this.element.style.top = (coord.top + this.options.offset.top) + 'px'
-        this.element.style.left = coord.left - (this.element.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
+        // this.element.style.top = (coord.top + this.options.offset.top) + 'px'
+        // this.element.style.left = coord.left - (this.element.offsetWidth / 2) + (e.currentTarget.offsetWidth / 2) + 'px'
+
+        this.position(e.currentTarget)
       })
 
       targets[i].addEventListener('mouseleave', (e) => {
-        this.label.innerHTML = ''
+        this.ui.label.innerHTML = ''
         this.hide()
@@ -82,0 +58,0 @@ })

src/view.js

@@ -1,23 +0,9 @@
-import EventEmitter from './mixin/emitter'
-import build from './mixin/build'
+import Control from './class/control'
 
-class View extends EventEmitter {
+class View extends Control {
   static defaults = {
-    class: 'view',
-    type: null
+    class: 'view'
   }
-
-  constructor (options) {
-    super()
-
-    this.init(options)
-    this.build()
-  }
-
-  init (options) {
-    this.options = { ...View.defaults, ...options }
-    Object.assign(this, build)
-  }
 }
 
 export default View

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

Number of medium supply chain risk alerts

11

decreased by-8.33%

Worsened metrics

Total package byte prevSize

451107

decreased by-4.46%

Number of package files

219

decreased by-5.6%

Lines of code

10345

decreased by-6.6%

No dependency changes