diff --git a/docs/demo/pages/select.html b/docs/demo/pages/select.html
index 5bef8be..46242c0 100644
--- a/docs/demo/pages/select.html
+++ b/docs/demo/pages/select.html
@@ -73,7 +73,7 @@
attribute: 'position',
options: ['C', '1B', '2B', '3B', 'SS', 'LF', 'CF', 'RF', 'DH']
});
- positionSelect.addEventListener('change', renderOutput);
+ positionSelect.addEventListener('komp:change', renderOutput);
document.getElementById('position-select').append(positionSelect);
const teamSelect = new Select({
@@ -96,7 +96,7 @@
return team
})
});
- teamSelect.addEventListener('change', renderOutput);
+ teamSelect.addEventListener('komp:change', renderOutput);
document.getElementById('team-select').append(teamSelect);
renderOutput();
diff --git a/lib/komps/content-area.js b/lib/komps/content-area.js
index 5ae5636..d3a6fb9 100644
--- a/lib/komps/content-area.js
+++ b/lib/komps/content-area.js
@@ -69,7 +69,7 @@ export default class ContentArea extends KompElement {
if (this.onchange) {
this.onchange(v, this.valueWas)
}
- this.trigger('change', v, this.valueWas)
+ this.trigger('komp:change', v, this.valueWas)
this.valueWas = v
}
}
diff --git a/lib/komps/dropzone.js b/lib/komps/dropzone.js
index ea597c4..05be2aa 100644
--- a/lib/komps/dropzone.js
+++ b/lib/komps/dropzone.js
@@ -124,7 +124,7 @@ export default class Dropzone extends KompElement {
e.preventDefault();
([...e.dataTransfer.files]).forEach(file => {
if (this.onFileDrop) { this.onFileDrop(file) }
- this.trigger('filedrop', file)
+ this.trigger('komp:filedrop', file)
});
}
diff --git a/lib/komps/element.js b/lib/komps/element.js
index 20492e4..9f21280 100644
--- a/lib/komps/element.js
+++ b/lib/komps/element.js
@@ -134,7 +134,8 @@ export default class KompElement extends HTMLElement {
* @type {Array}
* @static
*/
- static events = ['afterRemove', 'beforeRemove', 'beforeConnect', 'afterConnect', 'beforeDisconnect', 'afterDisconnect']
+ static lifecycleEvents = ['afterRemove', 'beforeRemove', 'beforeConnect', 'afterConnect', 'beforeDisconnect', 'afterDisconnect']
+ static events = []
static get observedAttributes() { return this.watch }
@@ -275,7 +276,8 @@ export default class KompElement extends HTMLElement {
})
/* events */
- scanPrototypesFor(this.constructor, 'events').filter(x => x).reverse().forEach(events => {
+ // Lifecycle events are unprefixed; component events are prefixed with komp:
+ scanPrototypesFor(this.constructor, 'lifecycleEvents').filter(x => x).reverse().forEach(events => {
events.forEach(event => {
const eventKey = "on" + event[0].toUpperCase() + event.slice(1)
if (attrs.hasOwnProperty(eventKey)) {
@@ -284,6 +286,16 @@ export default class KompElement extends HTMLElement {
}
})
})
+ scanPrototypesFor(this.constructor, 'events').filter(x => x).reverse().forEach(events => {
+ events.forEach(event => {
+ const prefixed = 'komp:' + event
+ const eventKey = "on" + event[0].toUpperCase() + event.slice(1)
+ if (attrs.hasOwnProperty(eventKey)) {
+ this.addEventListener(prefixed, attrs[eventKey])
+ delete htmlAttrs[eventKey]
+ }
+ })
+ })
Object.keys(htmlAttrs).forEach(key => {
if (htmlAttrs[key] == undefined) delete htmlAttrs[key]
@@ -370,7 +382,7 @@ export default class KompElement extends HTMLElement {
changed(attribute, was, now){}
attributeChangedCallback(attribute, ...args) {
if (this[attribute+"Changed"]) { this[attribute+"Changed"](...args) }
- this.trigger(attribute+"Changed", {
+ this.trigger('komp:' + attribute+"Changed", {
detail: args
})
return this.changed(attribute, ...args)
diff --git a/lib/komps/floater.js b/lib/komps/floater.js
index c8093db..f9552d6 100644
--- a/lib/komps/floater.js
+++ b/lib/komps/floater.js
@@ -273,7 +273,7 @@ export default class Floater extends KompElement {
window.activeTooltips[this.scope] = this
}
this.container.append(this)
- this.trigger('shown')
+ this.trigger('komp:shown')
}
return this;
}
@@ -298,7 +298,7 @@ export default class Floater extends KompElement {
if (this.parentElement) {
return this._removing = this.remove().then(() => {
this.showing = false
- this.trigger('hidden')
+ this.trigger('komp:hidden')
if (this.onHide) this.onHide()
delete this._hideTimeout;
delete this._removing;
diff --git a/lib/komps/resizer.js b/lib/komps/resizer.js
index 8306970..e9d1459 100644
--- a/lib/komps/resizer.js
+++ b/lib/komps/resizer.js
@@ -209,7 +209,7 @@ export default class Resizer extends KompElement {
window.addEventListener('mousemove', mousemove)
window.addEventListener('mouseup', () => {
this.onResize(this)
- this.trigger('resize')
+ this.trigger('komp:resize')
window.removeEventListener('mousemove', mousemove)
// Resume observing target
Resizer.observe(this)
diff --git a/lib/komps/search-field.js b/lib/komps/search-field.js
index 001861c..baa4dd2 100644
--- a/lib/komps/search-field.js
+++ b/lib/komps/search-field.js
@@ -118,14 +118,14 @@ export default class SearchField extends KompElement {
}
buttonResult (button, e) {
- this.trigger('select', { detail: [button?.result, this.query, e] });
+ this.trigger('komp:select', { detail: [button?.result, this.query, e] });
return button.result
}
/* ACTIONS */
async _search (query) {
if (query.length === 0) return;
- this.trigger('search', { detail: [query] });
+ this.trigger('komp:search', { detail: [query] });
if (this.loader) {
content(this.resultsList, result(this, 'loader', query))
this.showResults();
diff --git a/lib/komps/select.js b/lib/komps/select.js
index 445fb22..774f29d 100644
--- a/lib/komps/select.js
+++ b/lib/komps/select.js
@@ -53,7 +53,7 @@ export default class Select extends KompElement {
this.dropdown.querySelector('.-active')?.classList?.remove('-active')
const current = Array.from(this.dropdown.querySelectorAll('button')).find(b => b.value == v)
current?.classList?.add('-active')
- this.trigger('change')
+ this.trigger('komp:change')
}
connected () {
@@ -69,11 +69,11 @@ export default class Select extends KompElement {
placement: 'bottom-start',
content: this.renderOptions()
})
- this.dropdown.addEventListener('shown', () => {
+ this.dropdown.addEventListener('komp:shown', () => {
this.toggleAttribute('open', this.dropdown.showing)
this.dropdown.style.minWidth = this.offsetWidth + "px"
})
- this.dropdown.addEventListener('hidden', () => {
+ this.dropdown.addEventListener('komp:hidden', () => {
this.toggleAttribute('open', this.dropdown.showing)
})
diff --git a/lib/komps/spreadsheet.js b/lib/komps/spreadsheet.js
index 41d3b6f..735c382 100644
--- a/lib/komps/spreadsheet.js
+++ b/lib/komps/spreadsheet.js
@@ -415,7 +415,7 @@ export default class Spreadsheet extends Table {
if (cell.column.constructor.pasteAccepts.some(x => "text/plain".match(new RegExp(x)))) {
await cell.paste(data)
} else {
- this.trigger('invalidPaste', {
+ this.trigger('komp:invalidPaste', {
detail: data
})
}
@@ -425,7 +425,7 @@ export default class Spreadsheet extends Table {
if (cell.column.constructor.pasteAccepts.some(x => file.type.match(new RegExp(x)))) {
files.push(file)
} else {
- this.trigger('invalidPaste', {
+ this.trigger('komp:invalidPaste', {
detail: data
})
}
diff --git a/lib/komps/spreadsheet/cell.js b/lib/komps/spreadsheet/cell.js
index b28bf96..c5281cf 100644
--- a/lib/komps/spreadsheet/cell.js
+++ b/lib/komps/spreadsheet/cell.js
@@ -130,7 +130,7 @@ export default class SpreadsheetCell extends TableCell {
if (inputFloater === undefined || inputFloater === null || inputFloater === false) { return }
this.tabIndex = -1
- inputFloater.addEventListener('hidden', () => {
+ inputFloater.addEventListener('komp:hidden', () => {
this.tabIndex = 0
this.render()
})
diff --git a/lib/komps/spreadsheet/columns/select-column.js b/lib/komps/spreadsheet/columns/select-column.js
index 321eee1..d070768 100644
--- a/lib/komps/spreadsheet/columns/select-column.js
+++ b/lib/komps/spreadsheet/columns/select-column.js
@@ -24,7 +24,7 @@ export default class SelectColumn extends Column {
select.dropdown.show()
select.button.focus()
})
- select.addEventListener('change', () => {
+ select.addEventListener('komp:change', () => {
select.dropdown.hide()
})
return select
diff --git a/lib/komps/table.js b/lib/komps/table.js
index f565a35..8c131b7 100644
--- a/lib/komps/table.js
+++ b/lib/komps/table.js
@@ -172,7 +172,7 @@ export default class Table extends KompElement {
await append(this, await this.renderRows())
this.renderFrozenDivider()
this.setTemplateRows()
- this.trigger('afterRender')
+ this.trigger('komp:afterRender')
}
renderFrozenDivider () {
diff --git a/lib/komps/table/column.js b/lib/komps/table/column.js
index e5bb23f..0da9d3e 100644
--- a/lib/komps/table/column.js
+++ b/lib/komps/table/column.js
@@ -177,7 +177,7 @@ export default class TableColumn {
headerChanged (was, now) {
if (this._is_initialized) {
- this.table.trigger('headerChanged', {
+ this.table.trigger('komp:headerChanged', {
detail: this
})
}
@@ -242,7 +242,7 @@ export default class TableColumn {
this.cells.forEach(cell => cell.remove())
this.cells.clear()
if (options.silent != true) {
- this.table.trigger('columnRemoved', {
+ this.table.trigger('komp:columnRemoved', {
detail: this
})
}
diff --git a/lib/komps/table/plugins/reorderable.js b/lib/komps/table/plugins/reorderable.js
index f7c9179..762b647 100644
--- a/lib/komps/table/plugins/reorderable.js
+++ b/lib/komps/table/plugins/reorderable.js
@@ -252,7 +252,7 @@ export default function (proto) {
await this.appendRow(indexNew, ...slices)
}
- this.trigger(`${direction.toLowerCase()}Reorder`, {
+ this.trigger(`komp:${direction.toLowerCase()}Reorder`, {
detail: {
fromIndex: indexStart - 1,
toIndex: indexNew - 1
diff --git a/lib/komps/table/plugins/resizable.js b/lib/komps/table/plugins/resizable.js
index 2af3537..5ca0b18 100644
--- a/lib/komps/table/plugins/resizable.js
+++ b/lib/komps/table/plugins/resizable.js
@@ -203,7 +203,7 @@ export default function (proto) {
slice[inlineDimension.toLowerCase()] = delta + "px"
})
- this.trigger(`${direction.toLowerCase()}Resize`, {
+ this.trigger(`komp:${direction.toLowerCase()}Resize`, {
detail: {[sliceType]: slices}
})