material - npm Package Compare versions
Comparing version 0.8.2 to 0.8.3
@@ -33,3 +33,3 @@ import AppBar from './src/appbar' | ||
| import View from './src/view' | ||
| import attach from './src/module/attach' | ||
| import events from './src/module/events' | ||
| import attributes from './src/module/attributes' | ||
@@ -50,4 +50,4 @@ import build from './src/module/build' | ||
| Selecter, Slider, Snackbar, Switch, Switcher, Tabs, TabView, Text, Textfield, Toolbar, Tooltip, | ||
| View, attach, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator, | ||
| View, events, attributes, build, dataset, display, events, emitter, jsonToHTML, mediator, | ||
| observer, smoothscroll | ||
| } |
| { | ||
| "name": "material", | ||
| "version": "0.8.2", | ||
| "version": "0.8.3", | ||
| "description": "A lightweight implementation of Material Design Components for the web - ES6", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
| import EventEmitter from './mixin/emitter' | ||
| import build from './module/build' | ||
| import display from './mixin/display' | ||
| import bindEvents from './module/events' | ||
| import events from './module/events' | ||
| import dataset from './module/dataset' | ||
@@ -38,3 +38,2 @@ import ripple from './module/ripple' | ||
| this.setup() | ||
| this.bindEvents() | ||
| } | ||
@@ -44,3 +43,3 @@ | ||
| this.options = { ...Button.defaults, ...options } | ||
| Object.assign(this, build, display, bindEvents) | ||
| Object.assign(this, build, display) | ||
| } | ||
@@ -55,2 +54,4 @@ | ||
| } | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -57,0 +58,0 @@ |
| import create from './element/create' | ||
| import insert from './element/insert' | ||
| import * as css from './module/css' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import emitter from './module/emitter' | ||
@@ -48,3 +48,3 @@ | ||
| this.build() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
@@ -51,0 +51,0 @@ return this |
| import EventEmitter from './mixin/events' | ||
| // import control from './mixin/control' | ||
| import build from './module/build' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import * as css from './module/css' | ||
@@ -15,4 +15,4 @@ | ||
| layout: [ | ||
| [Element, 'input', { type: 'checkbox' } ], | ||
| [Element, 'control', { type: 'checkbox' } ], | ||
| [Element, 'input', { type: 'checkbox' }], | ||
| [Element, 'control', { type: 'checkbox' }], | ||
| [Element, 'label', { tag: 'label' }] | ||
@@ -35,3 +35,2 @@ ], | ||
| this.setup() | ||
| this.attach() | ||
| } | ||
@@ -77,2 +76,4 @@ | ||
| } | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -113,3 +114,2 @@ | ||
| click (e) { | ||
@@ -116,0 +116,0 @@ this.toggle(e) |
| // dialog related modules | ||
| import emitter from './module/emitter' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import display from './mixin/display' | ||
@@ -41,3 +41,3 @@ | ||
| this.render() | ||
| this.attach() | ||
| this.setup() | ||
@@ -49,3 +49,3 @@ return this | ||
| this.options = Object.assign({}, Dialog.defaults, options || {}) | ||
| Object.assign(this, emitter, attach, display) | ||
| Object.assign(this, emitter, display) | ||
| } | ||
@@ -105,2 +105,6 @@ | ||
| setup () { | ||
| events.attach(this.options.events, this) | ||
| } | ||
| setPosition () { | ||
@@ -107,0 +111,0 @@ const coord = this.options.target.getBoundingClientRect() |
@@ -28,3 +28,2 @@ import init from './mixin/init' | ||
| this.attach() | ||
| this.emit('ready') | ||
@@ -31,0 +30,0 @@ } |
| import EventEmitter from './mixin/emitter' | ||
| import events from './module/events' | ||
| import build from './module/build' | ||
@@ -10,3 +10,7 @@ import dataset from './module/dataset' | ||
| class: 'file', | ||
| attributes: ['name', 'accept', 'required', 'disabled', 'multiple'] | ||
| attributes: ['name', 'accept', 'required', 'disabled', 'multiple'], | ||
| events: [ | ||
| ['input.change', 'change'] | ||
| ] | ||
| } | ||
@@ -18,3 +22,3 @@ | ||
| this.buildInput() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -45,6 +49,4 @@ | ||
| attach () { | ||
| this.input.addEventListener('change', (e) => { | ||
| this.emit('change', e) | ||
| }) | ||
| change (e) { | ||
| this.emit('change', e) | ||
| } | ||
@@ -51,0 +53,0 @@ |
| import insert from './element/insert' | ||
| import * as css from './module/css' | ||
| import emitter from './module/emitter' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import controller from './mixin/controller' | ||
@@ -34,3 +34,3 @@ | ||
| this.build() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
@@ -37,0 +37,0 @@ return this |
| export default { | ||
| init () { | ||
| this.build() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| } | ||
| } |
@@ -9,3 +9,3 @@ class Loader { | ||
| // Object.assign(this, attach, mediator, build) | ||
| // Object.assign(this, mediator, build) | ||
@@ -12,0 +12,0 @@ this.build() |
@@ -1,2 +0,1 @@ | ||
| import mediator from '../module/mediator' | ||
@@ -53,3 +52,3 @@ import emitter from 'material/src/module/emitter' | ||
| Object.assign( | ||
| this, attach, emitter, init, build, viewport, mouse, | ||
| this, emitter, init, build, viewport, mouse, | ||
| mode, countries, | ||
@@ -56,0 +55,0 @@ set, display, select, focus |
| import EventEmitter from './mixin/emitter' | ||
| // menu related modules | ||
| import build from './module/build' | ||
| import bindEvents from './module/events' | ||
| import events from './module/events' | ||
| import display from './mixin/display' | ||
@@ -30,3 +30,3 @@ | ||
| this.build(this.constructor) | ||
| this.bindEvents() | ||
| this.setup() | ||
@@ -38,5 +38,9 @@ this.render(this.options.items) | ||
| this.options = Object.assign({}, Menu.defaults, options || {}) | ||
| Object.assign(this, build, bindEvents, display) | ||
| Object.assign(this, build, display) | ||
| } | ||
| setup () { | ||
| events.attach(this.options.events, this) | ||
| } | ||
| render (items) { | ||
@@ -43,0 +47,0 @@ if (items && Array.isArray(items)) { |
@@ -5,2 +5,4 @@ import extract from './extract' | ||
| const attachModule = { | ||
| eventHandlers: [], // Utiliser un tableau pour stocker les événements et les gestionnaires | ||
| attach (events) { | ||
@@ -10,3 +12,3 @@ events = events || this.options.events | ||
| events.map(([eventDef, funcDef, option]) => { | ||
| events.forEach(([eventDef, funcDef, option]) => { | ||
| const e = extract.e(this, eventDef) | ||
@@ -37,9 +39,7 @@ const isFunction = typeof funcDef === 'function' | ||
| if (handler && e && e.element && e.element.addEventListener) { | ||
| if (option) { | ||
| e.element.addEventListener(e.name, handler, option) | ||
| } else { | ||
| e.element.addEventListener(e.name, handler) | ||
| } | ||
| 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 { | ||
@@ -51,6 +51,22 @@ // console.error(`Can't attach ${eventDef}`) | ||
| return this | ||
| }, | ||
| detach (events) { | ||
| (events || []).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 | ||
| }) | ||
| } | ||
| } | ||
| export default attachModule |
| import extract from './extract' | ||
| import last from './last' | ||
| const attachModule = { | ||
| bindEvents (events) { | ||
| events = events || this.options.events | ||
| if (!events) return | ||
| const events = { | ||
| eventHandlers: [], // Utiliser un tableau pour stocker les événements et les gestionnaires | ||
| events.map(([eventDef, funcDef, option]) => { | ||
| const e = extract.e(this, eventDef) | ||
| attach (eventsArray, context) { | ||
| if (!eventsArray) return | ||
| eventsArray.forEach(([eventDef, funcDef, option]) => { | ||
| const e = extract.e(context, eventDef) | ||
| const isFunction = typeof funcDef === 'function' | ||
| const f = isFunction ? null : extract.f(this, funcDef) | ||
| const keys = funcDef.split('.') | ||
| keys.pop() | ||
| const bound = this.last(keys.join('.')) | ||
| let f = null | ||
| let keys = [] | ||
| if (!isFunction) { | ||
| f = extract.f(context, funcDef) | ||
| keys = funcDef.split('.') | ||
| keys.pop() | ||
| } | ||
| const bound = last(keys.join('.'), context) | ||
| let handler = null | ||
| if (isFunction && funcDef) { | ||
| handler = funcDef.bind(this) | ||
| if (isFunction) { | ||
| handler = funcDef.bind(context) | ||
| } else if (f && bound) { | ||
@@ -28,9 +36,7 @@ handler = f.bind(bound) | ||
| if (handler && e && e.element && e.element.addEventListener) { | ||
| if (option) { | ||
| e.element.addEventListener(e.name, handler, option) | ||
| } else { | ||
| e.element.addEventListener(e.name, handler) | ||
| } | ||
| 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 { | ||
@@ -44,10 +50,20 @@ // console.error(`Can't attach ${eventDef}`) | ||
| last (str) { | ||
| if (!str) return this | ||
| if (!str.includes('.')) return this[str] | ||
| return str.split('.').reduce((acc, key) => acc[key], this) | ||
| 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 | ||
| }) | ||
| } | ||
| } | ||
| export default attachModule | ||
| export default events |
@@ -5,3 +5,3 @@ import EventEmitter from './mixin/emitter' | ||
| import build from './module/build' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import display from './mixin/display' | ||
@@ -29,3 +29,3 @@ import Element from './element' | ||
| this.build() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| this.setup() | ||
@@ -36,3 +36,3 @@ } | ||
| this.options = { ...Navigation.defaults, ...options } | ||
| Object.assign(this, build, attach, display) | ||
| Object.assign(this, build, display) | ||
| this.items = [] | ||
@@ -39,0 +39,0 @@ } |
@@ -5,3 +5,3 @@ import EventEmitter from './mixin/emitter' | ||
| import display from './mixin/display' | ||
| import bindEvents from './module/events' | ||
| import events from './module/events' | ||
@@ -17,4 +17,4 @@ import Element from './element' | ||
| layout: [ | ||
| [Element, 'input', { tag: 'input', class: 'input'} ], | ||
| [Button, 'clear', { class: 'clear'} ] | ||
| [Element, 'input', { tag: 'input', class: 'input' }], | ||
| [Button, 'clear', { class: 'clear' }] | ||
| ], | ||
@@ -32,5 +32,3 @@ events: [ | ||
| this.build() | ||
| this.bindEvents() | ||
| this.input = this.ui.input | ||
| this.setup() | ||
| } | ||
@@ -40,5 +38,10 @@ | ||
| this.options = { ...Search.defaults, ...options } | ||
| Object.assign(this, build, display, bindEvents) | ||
| Object.assign(this, build, display) | ||
| } | ||
| setup () { | ||
| this.input = this.ui.input | ||
| events.attach(this.options.events, this) | ||
| } | ||
| set (value) { | ||
@@ -45,0 +48,0 @@ if (value) this.input.value = value |
| import EventEmitter from './mixin/emitter' | ||
| // modules | ||
| import build from './module/build' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import attributes from './module/attributes' | ||
@@ -23,3 +23,3 @@ import dataset from './module/dataset' | ||
| this.buildInput() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -29,3 +29,3 @@ | ||
| this.options = Object.assign({}, Select.defaults, options || {}) | ||
| Object.assign(this, build, attach, dataset) | ||
| Object.assign(this, build, dataset) | ||
| } | ||
@@ -32,0 +32,0 @@ |
| import EventEmitter from './mixin/emitter' | ||
| // modules | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import dataset from './module/dataset' | ||
@@ -42,3 +42,3 @@ import attributes from './module/attributes' | ||
| this.setup() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -48,3 +48,3 @@ | ||
| this.options = Object.assign({}, Selecter.defaults, options || {}) | ||
| Object.assign(this, attach, dataset) | ||
| Object.assign(this, dataset) | ||
| } | ||
@@ -51,0 +51,0 @@ |
| import emitter from './module/emitter' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
@@ -44,3 +44,3 @@ const defaults = { | ||
| this.setup() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
@@ -47,0 +47,0 @@ if (this.options.container) { |
@@ -10,3 +10,2 @@ import init from './mixin/init' | ||
| // import control from './control'; | ||
| import attach from './module/attach' | ||
| import * as css from './module/css' | ||
@@ -27,3 +26,3 @@ import emitter from './module/emitter' | ||
| step: 5, | ||
| modules: [events, control, emitter, attach], | ||
| modules: [control, emitter], | ||
| mixins: [], | ||
@@ -65,3 +64,3 @@ build: ['$root.material-slider', {}, | ||
| this.build(this.options) | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
@@ -68,0 +67,0 @@ return this |
@@ -5,3 +5,3 @@ // base class | ||
| import build from './module/build' | ||
| import bindEvents from './module/events' | ||
| import events from './module/events' | ||
| import display from './mixin/display' | ||
@@ -39,3 +39,3 @@ // ui element | ||
| this.render() | ||
| this.bindEvents() | ||
| events.attach(this.options.events, this) | ||
| this.show() | ||
@@ -52,3 +52,3 @@ | ||
| this.options = Object.assign({}, Snackbar.defaults, options || {}) | ||
| Object.assign(this, build, bindEvents, display) | ||
| Object.assign(this, build, display) | ||
@@ -55,0 +55,0 @@ this.buildSnackbarContainer(this.options.container) |
@@ -6,3 +6,3 @@ // base | ||
| import dataset from './module/dataset' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import attributes from './module/attributes' | ||
@@ -41,3 +41,3 @@ // ui | ||
| this.setup() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -47,3 +47,3 @@ | ||
| this.options = Object.assign({}, Switch.defaults, options || {}) | ||
| Object.assign(this, build, attach, dataset) | ||
| Object.assign(this, build, dataset) | ||
@@ -50,0 +50,0 @@ this.value = this.options.value |
| import EventEmitter from './mixin/emitter' | ||
| import events from './module/events' | ||
@@ -10,3 +11,6 @@ class Switcher extends EventEmitter { | ||
| mode: 'unique', | ||
| allowEmpty: false | ||
| allowEmpty: false, | ||
| events: [ | ||
| ['element.click', 'click'] | ||
| ] | ||
| } | ||
@@ -19,7 +23,3 @@ | ||
| this.build() | ||
| this.attach() | ||
| if (this.options.default) { | ||
| this.selectByName(this.options.default, true) | ||
| } | ||
| this.setup() | ||
| } | ||
@@ -70,9 +70,17 @@ | ||
| attach () { | ||
| this.element.addEventListener('click', (event) => { | ||
| if (!event.target.dataset.switcher) return | ||
| this.select(event.target) | ||
| }) | ||
| setup () { | ||
| console.log('events.attach', this.options.events) | ||
| events.attach(this.options.events, this) | ||
| if (this.options.default) { | ||
| this.selectByName(this.options.default, true) | ||
| } | ||
| } | ||
| click (event) { | ||
| console.log('click', event) | ||
| if (!event.target.dataset.switcher) return | ||
| this.select(event.target) | ||
| } | ||
| select (option) { | ||
@@ -79,0 +87,0 @@ if (this.options.mode === 'multiple') { |
| import EventEmitter from './mixin/emitter' | ||
| import observer from './element/observer' | ||
| import events from './module/events' | ||
| import build from './module/build' | ||
@@ -10,3 +11,6 @@ import display from './view/display' | ||
| class: 'tabview', | ||
| mode: 'style' | ||
| mode: 'style', | ||
| events: [ | ||
| ['ui.tabs.click', 'onTabClick'] | ||
| ] | ||
| } | ||
@@ -26,3 +30,3 @@ | ||
| this.setup() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
@@ -69,11 +73,9 @@ this.emit('ready') | ||
| attach () { | ||
| this.ui.tabs.addEventListener('click', (e) => { | ||
| e.stopPropagation() | ||
| if (e.target === e.currentTarget) return | ||
| onTabClick (e) { | ||
| e.stopPropagation() | ||
| if (e.target === e.currentTarget) return | ||
| if (e.target.matches('BUTTON')) { | ||
| this.click(e.target) | ||
| } | ||
| }) | ||
| if (e.target.matches('BUTTON')) { | ||
| this.click(e.target) | ||
| } | ||
| } | ||
@@ -80,0 +82,0 @@ |
| import emitter from './module/emitter' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import dataset from './module/dataset' | ||
@@ -25,3 +25,3 @@ import attributes from './module/attributes' | ||
| this.build() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
| } | ||
@@ -31,3 +31,3 @@ | ||
| this.options = Object.assign({}, Textfield.defaults, options || {}) | ||
| Object.assign(this, emitter, attach, dataset) | ||
| Object.assign(this, emitter, dataset) | ||
| // console.log('options', options) | ||
@@ -34,0 +34,0 @@ } |
@@ -35,3 +35,3 @@ import touch from './module/touch' | ||
| this.build() | ||
| this.attach() | ||
| this.attachEvent() | ||
@@ -59,3 +59,3 @@ return this | ||
| attach () { | ||
| attachEvent () { | ||
| // console.log('attach', this.options.targets) | ||
@@ -62,0 +62,0 @@ const targets = document.querySelectorAll(this.options.targets) |
| import emitter from './module/emitter' | ||
| import * as css from './module/css' | ||
| import attach from './module/attach' | ||
| import events from './module/events' | ||
| import insert from './mixin/insert' | ||
@@ -22,3 +22,3 @@ | ||
| this.build() | ||
| this.attach() | ||
| events.attach(this.options.events, this) | ||
@@ -25,0 +25,0 @@ return this |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by2.54%
466187
- Number of package files
- increased by0.45%
225
- Lines of code
- increased by3.74%
11007