- Added to assets-package
This commit is contained in:
commit
fa69a8281b
|
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
import { ElementObserver } from "./element-observer.js";
|
||||||
|
|
||||||
|
import { UiTabs } from "./module/ui-tabs.js";
|
||||||
|
window.customElements.define("ui-tabs", UiTabs);
|
||||||
|
|
||||||
|
import { UiPopup } from "./module/ui-popup.js";
|
||||||
|
window.customElements.define("ui-popup", UiPopup);
|
||||||
|
|
||||||
|
import { UiTextarea } from "./module/ui-textarea.js";
|
||||||
|
window.customElements.define("ui-textarea", UiTextarea);
|
||||||
|
|
||||||
|
import { UiSelect } from "./module/ui-select.js";
|
||||||
|
window.customElements.define("ui-select", UiSelect);
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
/*
|
||||||
|
* @author Dave Mc Nicoll
|
||||||
|
* @version 1.0.0
|
||||||
|
*
|
||||||
|
* Analysis elements entering or quitting the DOM, triggering events whenever
|
||||||
|
* a matching element is found.
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
import { Hourglass } from "./hourglass.js";
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
resize: {
|
||||||
|
timer: 200
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ACTION_ADDED = 0,
|
||||||
|
ACTION_REMOVED = 1,
|
||||||
|
ACTION_RESIZED = 2,
|
||||||
|
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
||||||
|
|
||||||
|
class ElementObserver {
|
||||||
|
|
||||||
|
constructor(options) {
|
||||||
|
this.observer = null;
|
||||||
|
this.listeners = [ [] , [] ];
|
||||||
|
}
|
||||||
|
|
||||||
|
added(selector, callback) {
|
||||||
|
this._observe(selector, callback, ACTION_ADDED);
|
||||||
|
}
|
||||||
|
|
||||||
|
removed(selector, callback) {
|
||||||
|
this._observe(selector, callback, ACTION_REMOVED);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* a little hacky function, awaiting the ResizeObserver specs to be ready */
|
||||||
|
resize(element, callback) {
|
||||||
|
var width = 0;
|
||||||
|
|
||||||
|
if ( ! this.hourglass ) {
|
||||||
|
element.dataset.element_width = element.getBoundingClientRect().width;
|
||||||
|
|
||||||
|
this.hourglass = new Hourglass(function() {
|
||||||
|
this.resizing.forEach(function(item) {
|
||||||
|
width = item.element.getBoundingClientRect().width;
|
||||||
|
|
||||||
|
if ( item.element.dataset !== width ) {
|
||||||
|
item.element.dataset.element_width = width;
|
||||||
|
item.callback.call(item.element, width);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}.bind(this), {
|
||||||
|
start : false,
|
||||||
|
repeat : false,
|
||||||
|
timer : config.resize.timer
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
this.hourglass.restart();
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resizing = this.resizing || [];
|
||||||
|
|
||||||
|
this.resizing.push({
|
||||||
|
element: element,
|
||||||
|
callback: callback
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_observe(selector, callback, action) {
|
||||||
|
this.listeners[action].push({
|
||||||
|
selector : selector,
|
||||||
|
callback : callback
|
||||||
|
});
|
||||||
|
|
||||||
|
this._register_observer();
|
||||||
|
}
|
||||||
|
|
||||||
|
_analyze_element(element, action) {
|
||||||
|
let split_selector = [];
|
||||||
|
|
||||||
|
for (let j = 0, l1 = this.listeners[action].length; j < l1; j++) {
|
||||||
|
split_selector = this.listeners[action][j].selector.split(' ');
|
||||||
|
|
||||||
|
if ( split_selector.length > 1 ) {
|
||||||
|
console.log("@todo!", split_selector);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if ( $element.is( this.listeners[action][j].selector ) ) {
|
||||||
|
this.listeners[action][j].callback.call(element, element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_analyze_added_element() {
|
||||||
|
return this._analyze_element(this, ACTION_ADDED);
|
||||||
|
}
|
||||||
|
|
||||||
|
_analyze_removed_element() {
|
||||||
|
return this._analyze_element(this, ACTION_REMOVED);
|
||||||
|
}
|
||||||
|
|
||||||
|
_observe_element(e) {
|
||||||
|
for(var i = 0; i < e.length; i++) {
|
||||||
|
if (e[i].type === 'childList') {
|
||||||
|
console.error("THIS PART IS NOT TRANSLATED INTO PURE JS AS OF NOW ... SOME THINKING NEED TO BE DONE FIRST !");
|
||||||
|
// $(e[i].addedNodes).each(this.analyze_added_element);
|
||||||
|
// $(e[i].removedNodes).each(this.analyze_removed_element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_register_observer() {
|
||||||
|
if ( this.observer || ( this.observer = new MutationObserver(this._observe_element) ) ) {
|
||||||
|
this.observer.observe(document.documentElement, {
|
||||||
|
subtree: true,
|
||||||
|
childList: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
set observer(value) {
|
||||||
|
return this._observer = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get observer() {
|
||||||
|
return this._observer;
|
||||||
|
}
|
||||||
|
|
||||||
|
set listeners(value) {
|
||||||
|
return this._listeners = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get listeners() {
|
||||||
|
return this._listeners;
|
||||||
|
}
|
||||||
|
|
||||||
|
get hourglass() {
|
||||||
|
return this._hourglass;
|
||||||
|
}
|
||||||
|
|
||||||
|
set hourglass(value) {
|
||||||
|
return this._hourglass = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get resizing() {
|
||||||
|
return this._resizing;
|
||||||
|
}
|
||||||
|
|
||||||
|
set resizing(value) {
|
||||||
|
return this._resizing = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ElementObserver }
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
/*
|
||||||
|
* Really simple timer / timeout object
|
||||||
|
*
|
||||||
|
* @author Dave Mc Nicoll
|
||||||
|
* @version 2.0.0
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
timer: 1000,
|
||||||
|
start: false,
|
||||||
|
loop: true,
|
||||||
|
run: false, // If you need a defined number of code execution, set a number to run and loop to false.
|
||||||
|
complete: function(){} // This complete callback function is called if the run exec number is reached.
|
||||||
|
};
|
||||||
|
|
||||||
|
class Hourglass {
|
||||||
|
|
||||||
|
constructor(callback, options) {
|
||||||
|
this.object_id = null;
|
||||||
|
this.counter = null;
|
||||||
|
this.callback = callback !== undefined ? callback : function() {};
|
||||||
|
|
||||||
|
if ( config.start ) {
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
start(timeout) {
|
||||||
|
let time = ( timeout !== undefined ? timeout : config.timer );
|
||||||
|
|
||||||
|
if ( config.loop ) {
|
||||||
|
if ( this.counter === null ) {
|
||||||
|
this.counter = config.loop ? 0 : null
|
||||||
|
}
|
||||||
|
|
||||||
|
this.object_id = window.setInterval( this.call_interval.bind(this), time);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.object_id = window.setTimeout( this.call_timeout.bind(this), time);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
restart(timeout) {
|
||||||
|
this.clear();
|
||||||
|
this.start(timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
stop() {
|
||||||
|
if ( config.loop ) {
|
||||||
|
this.object_id && window.clearInterval(this.object_id);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.object_id && window.clearTimeout(this.object_id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clear() {
|
||||||
|
this.stop();
|
||||||
|
this.counter = null;
|
||||||
|
this.object_id = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
call_timeout() {
|
||||||
|
this.callback();
|
||||||
|
this.clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
call_interval() {
|
||||||
|
this.callback();
|
||||||
|
|
||||||
|
if ( this.counter !== null && ++this.counter === config.run ) {
|
||||||
|
this.clear();
|
||||||
|
config.complete !== undefined && config.complete();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
running() {
|
||||||
|
return !! this.object_id;
|
||||||
|
}
|
||||||
|
|
||||||
|
get callback() {
|
||||||
|
return this._callback;
|
||||||
|
}
|
||||||
|
|
||||||
|
set callback(value) {
|
||||||
|
return this._callback = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get counter() {
|
||||||
|
return this._counter;
|
||||||
|
}
|
||||||
|
|
||||||
|
set counter(value) {
|
||||||
|
return this._counter = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get object_id() {
|
||||||
|
return this._object_id;
|
||||||
|
}
|
||||||
|
|
||||||
|
set object_id(value) {
|
||||||
|
return this._object_id = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Hourglass }
|
||||||
|
|
@ -0,0 +1,324 @@
|
||||||
|
import { Webcomponent } from "./webcomponent.js";
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
item: ".tab-item",
|
||||||
|
content: ".tab-content"
|
||||||
|
};
|
||||||
|
|
||||||
|
class UiPopup extends Webcomponent {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.fetch_template();
|
||||||
|
this.message = this.querySelector('.message');
|
||||||
|
this.title = this.querySelector('.title');
|
||||||
|
|
||||||
|
this.replaceVarsPlaceholder().attach().render();
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
this.handleOptions();
|
||||||
|
}
|
||||||
|
handleOptions() {
|
||||||
|
if ( this.options ) {
|
||||||
|
if ( ! this.options['skip-keys'] ) {
|
||||||
|
document.addEventListener('keyup', function(e) {
|
||||||
|
if ( this.visible() ) {
|
||||||
|
let trigger, ev;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// There's no real value in checking if the popup is shown or not.
|
||||||
|
switch ( e.keyCode ) {
|
||||||
|
// RETURN
|
||||||
|
case 13:
|
||||||
|
trigger = this.querySelector('[action="confirm"]');
|
||||||
|
ev = new CustomEvent('click', { trigger: trigger } );
|
||||||
|
|
||||||
|
trigger.dispatchEvent(ev);
|
||||||
|
break;
|
||||||
|
|
||||||
|
// ESC
|
||||||
|
case 27:
|
||||||
|
trigger = this.querySelector('[action="close"]');
|
||||||
|
ev = new CustomEvent('click', { trigger: trigger } );
|
||||||
|
|
||||||
|
trigger.dispatchEvent(ev);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
document.addEventListener('keyup', function(e) {
|
||||||
|
if ( this.visible() ) {
|
||||||
|
let trigger, ev;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// There's no real value in checking if the popup is shown or not.
|
||||||
|
switch ( e.keyCode ) {
|
||||||
|
case 13: // RETURN
|
||||||
|
trigger = this.querySelector('[action="confirm"]');
|
||||||
|
ev = new CustomEvent('click', { trigger: trigger } );
|
||||||
|
|
||||||
|
trigger.dispatchEvent(ev);
|
||||||
|
break;
|
||||||
|
|
||||||
|
|
||||||
|
case 8: // BACKSPACE
|
||||||
|
case 27: // ESC
|
||||||
|
trigger = this.querySelector('[action="close"]');
|
||||||
|
ev = new CustomEvent('click', { trigger: trigger } );
|
||||||
|
|
||||||
|
trigger.dispatchEvent(ev);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
attach() {
|
||||||
|
let triggers = document.querySelectorAll('[ui-popup]');
|
||||||
|
|
||||||
|
if ( triggers.length ) {
|
||||||
|
triggers.forEach(function(item) {
|
||||||
|
let trigger_args = this._parseTriggerArguments(item);
|
||||||
|
|
||||||
|
if ( trigger_args.name === this.getAttribute('name') ) {
|
||||||
|
item.addEventListener('click', this.triggerAction.bind(this, item, trigger_args));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.options = trigger_args.options;
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.querySelectorAll('[action]').forEach(function(element) {
|
||||||
|
element.addEventListener("click", this.action.bind(this, element), false);
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
action(element, e) {
|
||||||
|
if ( ! element.attributes.action ) {
|
||||||
|
throw "A button was clicked onto which no action was bound.";
|
||||||
|
}
|
||||||
|
|
||||||
|
switch(element.attributes.action.value) {
|
||||||
|
case "confirm":
|
||||||
|
case "yes":
|
||||||
|
case "ok":
|
||||||
|
this.actionFollowLink(element) ||
|
||||||
|
this.actionClickButton(element) ||
|
||||||
|
this.actionSendForm(this.trigger) ||
|
||||||
|
this.actionSendForm(element);
|
||||||
|
|
||||||
|
case "cancel":
|
||||||
|
case "no":
|
||||||
|
case "close":
|
||||||
|
this.hide();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dispatchEvent(new CustomEvent('action:' + element.attributes.action.value));
|
||||||
|
this.trigger.dispatchEvent(new CustomEvent('action:' + element.attributes.action.value));
|
||||||
|
|
||||||
|
if ( element.getAttribute("action") ) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
hide() {
|
||||||
|
this.classList.remove('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
show() {
|
||||||
|
this.classList.add('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
visible() {
|
||||||
|
return this.classList.contains('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
actionFollowLink(element) {
|
||||||
|
|
||||||
|
//if ( element.getAttribute('follow-link') !== null ) {
|
||||||
|
// Automatically redirect to given location if it exists.
|
||||||
|
if ( this.trigger.tagName === "A" ) {
|
||||||
|
let href = this.trigger.getAttribute('href');
|
||||||
|
|
||||||
|
if ( href ) {
|
||||||
|
window.location = href;
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
actionClickButton(element) {
|
||||||
|
|
||||||
|
//if ( element.getAttribute('button-click') !== null ) {
|
||||||
|
let tag = this.trigger.tagName.toLowerCase();
|
||||||
|
|
||||||
|
// Automatically redirect to given location if it exists.
|
||||||
|
if ( tag === "button" || ( ( tag === "input" ) && ( this.trigger.getAttribute("type").toLowerCase() === "submit") ) ) {
|
||||||
|
this.pause = true;
|
||||||
|
|
||||||
|
this.trigger.click();
|
||||||
|
|
||||||
|
this.pause = false;
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
//}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
actionSendForm(element) {
|
||||||
|
//if ( element.getAttribute('send-form') !== null ) {
|
||||||
|
//let form = this.trigger.tagName === "FORM" ? this.trigger : this.trigger.closest('FORM');
|
||||||
|
let form = element.tagName === "FORM" ? element : element.closest('FORM');
|
||||||
|
|
||||||
|
if ( form ) {
|
||||||
|
form.submit();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
throw "A send-form action was set on a popup where the trigger as no parent form.";
|
||||||
|
}
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
triggerAction(item, args, e) {
|
||||||
|
if (this.pause) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.trigger = item;
|
||||||
|
|
||||||
|
args.vars && Object.keys(args.vars).map(function(objectKey, index) {
|
||||||
|
// let element = this.message.querySelectorAll(`.${objectKey}`);
|
||||||
|
let element = Array.prototype.slice.call( this.message.querySelectorAll(`.${objectKey}`) ).concat(Array.prototype.slice.call(this.title.querySelectorAll(`.${objectKey}`)));
|
||||||
|
|
||||||
|
element.length ? element.forEach(function(item) {
|
||||||
|
item.innerHTML = args.vars[objectKey];
|
||||||
|
}) : ( function() {
|
||||||
|
console.warn(`Variable '${objectKey}' could not be found within popup's message`);
|
||||||
|
} )();
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
if ( args.options ) {
|
||||||
|
args.options['input'] && Object.keys(args.options['input']).forEach(
|
||||||
|
key => this.querySelectorAll(`[name="${key}"]`).forEach(function(f) {
|
||||||
|
if (f.tagName === "TEXTAREA") {
|
||||||
|
f.value = args.options['input'][key];
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
f.setAttribute("value", args.options['input'][key]);
|
||||||
|
}
|
||||||
|
|
||||||
|
f.dispatchEvent(new Event("change"));
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.show();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
replaceVarsPlaceholder() {
|
||||||
|
let setVar = function(match, varname) {
|
||||||
|
let element = document.createElement('span');
|
||||||
|
element.classList.add('variable', varname);
|
||||||
|
|
||||||
|
return element.outerHTML;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.message.innerHTML = this.message.innerHTML.replace(/{\$(.*?)}/g, setVar);
|
||||||
|
this.title.innerHTML = this.title.innerHTML.replace(/{\$(.*?)}/g, setVar);
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
get trigger() {
|
||||||
|
return this._trigger;
|
||||||
|
}
|
||||||
|
|
||||||
|
set trigger(value) {
|
||||||
|
return this._trigger = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get pause() {
|
||||||
|
return this._pause;
|
||||||
|
}
|
||||||
|
|
||||||
|
set pause(value) {
|
||||||
|
return this._pause = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get message() {
|
||||||
|
return this._message;
|
||||||
|
}
|
||||||
|
|
||||||
|
set message(value) {
|
||||||
|
return this._message = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get title() {
|
||||||
|
return this._title;
|
||||||
|
}
|
||||||
|
|
||||||
|
set title(value) {
|
||||||
|
return this._title = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get action_func() {
|
||||||
|
return this._action_func;
|
||||||
|
}
|
||||||
|
|
||||||
|
set action_func(value) {
|
||||||
|
return this._action_func = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
_parseTriggerArguments(item) {
|
||||||
|
let attr = item.getAttribute('ui-popup').trim();
|
||||||
|
|
||||||
|
if ( attr.charAt(0) === '{' ) {
|
||||||
|
try {
|
||||||
|
return JSON.parse(attr);
|
||||||
|
}
|
||||||
|
catch(error) {
|
||||||
|
console.error("Popup trigger failed on JSON parsing of " + attr + " from object:", item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if ( typeof attr === "string" && attr.length ) {
|
||||||
|
return {
|
||||||
|
name: attr
|
||||||
|
};
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
throw "A popup name must be given to attach this object.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { UiPopup }
|
||||||
|
|
@ -0,0 +1,283 @@
|
||||||
|
|
||||||
|
import { Webcomponent } from './webcomponent.js';
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
content: {
|
||||||
|
wrapper: ".wrapper",
|
||||||
|
list: ".item-list"
|
||||||
|
},
|
||||||
|
lang: {
|
||||||
|
create: "Create «{$name}»"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
class UiSelect extends Webcomponent {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.fetch_template();
|
||||||
|
|
||||||
|
this.wrapper = this.shadowRoot.querySelector(config.content.wrapper);
|
||||||
|
this.list = this.shadowRoot.querySelector(config.content.list);
|
||||||
|
this.input = this.querySelector('input:not([type="hidden"])');
|
||||||
|
this.select = this.querySelector('select');
|
||||||
|
this.active = false;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.input.setAttribute('readonly', 'readonly');
|
||||||
|
|
||||||
|
if ( this.getAttribute("create") !== null ) {
|
||||||
|
this.item_create = this.add_item("__create__", config.lang.create, false, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
Array.from(this.select.options).forEach(function(item) {
|
||||||
|
this.add_item(item.value, item.text, item.value === this.select.value);
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
[ "mouseover" , "mouseleave" ].forEach(function(ev) {
|
||||||
|
this.list.addEventListener(ev, function(e) {
|
||||||
|
this.active = ( ev === 'mouseover' ) && ( document.activeElement === this.input );
|
||||||
|
}.bind(this));
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
[ "focus" , "blur", "keyup", "click" ].forEach(function(ev) {
|
||||||
|
this.input.addEventListener(ev, function(e) {
|
||||||
|
switch(ev) {
|
||||||
|
case "focus":
|
||||||
|
case "blur":
|
||||||
|
setTimeout(function() {
|
||||||
|
this.has_focus = ev === "focus";
|
||||||
|
this[ (this.has_focus ? "show" : "hide" ) + "_list" ].call(this, false);
|
||||||
|
}.bind(this), 100);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "click":
|
||||||
|
if ( ! this.editing && this.has_focus ) {
|
||||||
|
this.editing = true;
|
||||||
|
this.input.removeAttribute('readonly');
|
||||||
|
this.show_list();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case "keyup":
|
||||||
|
e.target.value && this.editing ? this.filter(e.target.value) : this.show_list(true);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}.bind(this));
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
add_item(key, value, selselfected, hide) {
|
||||||
|
let elem = document.createElement('li');
|
||||||
|
|
||||||
|
if (this.list.querySelector(`[data-key="${key}"]`) !== null) {
|
||||||
|
console.error(`Item with key '${key}' is already existing.`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
elem.setAttribute('data-key', key);
|
||||||
|
|
||||||
|
if (! (elem.innerText = value) ) {
|
||||||
|
elem.innerHTML = " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
|
||||||
|
elem.addEventListener("click", function(e) {
|
||||||
|
self.set_value(this.getAttribute('data-key'), this.innerText);
|
||||||
|
|
||||||
|
let item = self.list.querySelector(".selected");
|
||||||
|
|
||||||
|
if ( item ) {
|
||||||
|
item.classList.remove("selected");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.classList.add("selected");
|
||||||
|
|
||||||
|
self.hide_list(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (selected) {
|
||||||
|
elem.click();
|
||||||
|
// this.input.key_up();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hide) {
|
||||||
|
elem.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.list.appendChild(
|
||||||
|
elem
|
||||||
|
);
|
||||||
|
|
||||||
|
return elem;
|
||||||
|
}
|
||||||
|
|
||||||
|
set_value(key, value) {
|
||||||
|
this.input.value = value.trim();
|
||||||
|
this.select.value = key;
|
||||||
|
}
|
||||||
|
|
||||||
|
hide_list(force) {
|
||||||
|
if ( ! this.active || force ) {
|
||||||
|
this.has_focus = this.editing = false;
|
||||||
|
this.list.classList.add('hidden');
|
||||||
|
this.input.setAttribute('readonly', 'readonly');
|
||||||
|
this.show_all_items();
|
||||||
|
this.item_create.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
show_list(show_all_items) {
|
||||||
|
this.list.classList.remove('hidden');
|
||||||
|
|
||||||
|
if ( show_all_items ) {
|
||||||
|
this.show_all_items();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.editing && this.input.value && this.filter(this.input.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((! this.querySelectorAll(":not(.hidden)").length || show_all_items ) && this.item_create ) {
|
||||||
|
this.item_create.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
flush() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
filter(org_query) {
|
||||||
|
let empty = true,
|
||||||
|
has_exact_result = false,
|
||||||
|
query = org_query.trim().normalize().toLowerCase();
|
||||||
|
|
||||||
|
Array.from( this.list.querySelectorAll('li:not([data-key="__create__"])') ).forEach(function(item) {
|
||||||
|
let text = item.innerText.normalize().toLowerCase(),
|
||||||
|
keep = false;
|
||||||
|
|
||||||
|
if ( text === query ) {
|
||||||
|
keep = true;
|
||||||
|
empty = false;
|
||||||
|
has_exact_result = true;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
query.split(this._advanced_search ? " " : "\n").filter(item => item.length > 1).forEach(function(query_item) {
|
||||||
|
if ( text.indexOf(query_item) !== -1 ) {
|
||||||
|
keep = true;
|
||||||
|
empty = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( keep ) {;
|
||||||
|
item.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
item.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
if ( this.item_create ) {
|
||||||
|
if ( empty && ! has_exact_result ) {
|
||||||
|
this.item_create.classList.remove('hidden');
|
||||||
|
|
||||||
|
this.item_create.innerText = this.replace_vars(config.lang.create, {
|
||||||
|
name: org_query
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.item_create.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
replace_vars(content, vars) {
|
||||||
|
return content.replace(/{\$(.*?)}/g, function(match, varname) {
|
||||||
|
return vars[varname];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
show_all_items() {
|
||||||
|
Array.from( this.list.querySelectorAll('li') ).forEach(item => item.classList.remove('hidden'));
|
||||||
|
}
|
||||||
|
|
||||||
|
get content() {
|
||||||
|
return this._content;
|
||||||
|
}
|
||||||
|
|
||||||
|
set content(value) {
|
||||||
|
return this._content = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get list() {
|
||||||
|
return this._list;
|
||||||
|
}
|
||||||
|
|
||||||
|
set list(value) {
|
||||||
|
return this._list = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get wrapper() {
|
||||||
|
return this._wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
set wrapper(value) {
|
||||||
|
return this._wrapper = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get input() {
|
||||||
|
return this._input;
|
||||||
|
}
|
||||||
|
|
||||||
|
set input(value) {
|
||||||
|
return this._input = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get active() {
|
||||||
|
return this._active;
|
||||||
|
}
|
||||||
|
|
||||||
|
set active(value) {
|
||||||
|
return this._active = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get item_create() {
|
||||||
|
return this._item_create;
|
||||||
|
}
|
||||||
|
|
||||||
|
set item_create(value) {
|
||||||
|
return this._item_create = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get has_focus() {
|
||||||
|
return this._has_focus;
|
||||||
|
}
|
||||||
|
|
||||||
|
set has_focus(value) {
|
||||||
|
return this._has_focus = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get editing() {
|
||||||
|
return this._editing;
|
||||||
|
}
|
||||||
|
|
||||||
|
set editing(value) {
|
||||||
|
this.wrapper.classList[value ? "add" : "remove"]('is-editing');
|
||||||
|
return this._editing = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get advanced_search() {
|
||||||
|
return this._advanced_search;
|
||||||
|
}
|
||||||
|
|
||||||
|
set advanced_search(value) {
|
||||||
|
return this._advanced_search = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { UiSelect }
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
|
||||||
|
import { Webcomponent } from "./webcomponent.js";
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
item: ".tab-item",
|
||||||
|
content: ".tab-content",
|
||||||
|
activeClass: "ui-tab-active",
|
||||||
|
};
|
||||||
|
|
||||||
|
class UiTabs extends Webcomponent {
|
||||||
|
constructor(parameters) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
window.addEventListener("hashchange", this.hashChange.bind(this), false);
|
||||||
|
|
||||||
|
//this.querySelectorAll(config.item).forEach(ele => ele.addEventListener("click", this.clickTab.bind(this)));
|
||||||
|
|
||||||
|
if (window.location.hash) {
|
||||||
|
let eve = new Event("click");
|
||||||
|
eve.newURL = window.location.hash;
|
||||||
|
this.hashChange(eve);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hashChange(e) {
|
||||||
|
let anchor = e.newURL.split('#')[1];
|
||||||
|
|
||||||
|
document.querySelectorAll("#" + anchor + config.content).forEach(function(content) {
|
||||||
|
content.parentNode.querySelectorAll(config.content + "." + config.activeClass).forEach(ele => ele.classList.remove(config.activeClass));
|
||||||
|
content.classList.add(config.activeClass);
|
||||||
|
});
|
||||||
|
|
||||||
|
let element = this.querySelector("." + config.activeClass);
|
||||||
|
element ? element.classList.remove(config.activeClass) : null;
|
||||||
|
|
||||||
|
element = this.querySelector(config.item + `[href="#${anchor}"]`);
|
||||||
|
element ? element.closest('div').classList.add(config.activeClass) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
clickTab(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
history.pushState(null, null, this.getAttribute('href'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { UiTabs }
|
||||||
|
|
@ -0,0 +1,246 @@
|
||||||
|
|
||||||
|
import { Webcomponent } from "./webcomponent.js";
|
||||||
|
|
||||||
|
const baseRows = 1.6;
|
||||||
|
|
||||||
|
const domElements = {
|
||||||
|
input: ".input",
|
||||||
|
toolbar: ".toolbar",
|
||||||
|
wrapper: ".wrapper",
|
||||||
|
boilerplate: ".content"
|
||||||
|
};
|
||||||
|
|
||||||
|
const domReplaceTag = {
|
||||||
|
i: "em",
|
||||||
|
b: "strong",
|
||||||
|
pre: "div"
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyCss = [
|
||||||
|
"font", "font-size", "color", "background", "outline"
|
||||||
|
];
|
||||||
|
|
||||||
|
class UiTextarea extends Webcomponent {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.fetch_template();
|
||||||
|
this.wrapper = this.shadowRoot.querySelector(domElements.wrapper);
|
||||||
|
this.content = this.shadowRoot.querySelector(domElements.boilerplate);
|
||||||
|
this.toolbar = this.shadowRoot.querySelector(domElements.toolbar);
|
||||||
|
|
||||||
|
if ( ! this.textareaInit() ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toolbarInit();
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
document.execCommand("DefaultParagraphSeparator", false, "p");
|
||||||
|
|
||||||
|
this.content.innerHTML = this.textarea.value.trim();
|
||||||
|
|
||||||
|
this.content.addEventListener("input", function(e, d) {
|
||||||
|
this.content.querySelectorAll('[style]').forEach(function(element) {
|
||||||
|
element.removeAttribute('style');
|
||||||
|
});
|
||||||
|
|
||||||
|
this.content.querySelectorAll('[class]').forEach(function(element) {
|
||||||
|
element.removeAttribute('class');
|
||||||
|
});
|
||||||
|
|
||||||
|
this.textarea.value = this.content.innerHTML;
|
||||||
|
|
||||||
|
this.content.dispatchEvent(new Event("change"));
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
actionAlign(value) {
|
||||||
|
switch(value) {
|
||||||
|
case "left" :
|
||||||
|
return document.execCommand('justifyLeft',false,null);
|
||||||
|
|
||||||
|
case "center" :
|
||||||
|
return document.execCommand('justifyCenter',false,null);
|
||||||
|
|
||||||
|
case "right" :
|
||||||
|
return document.execCommand('justifyRight',false,null);
|
||||||
|
|
||||||
|
case "justify" :
|
||||||
|
return document.execCommand('justifyFull',false,null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
actionBold(value, content) {
|
||||||
|
return document.execCommand('bold', false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionItalic(value, content) {
|
||||||
|
return document.execCommand('italic', false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionUnderline() {
|
||||||
|
return document.execCommand('underline',false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionStrike() {
|
||||||
|
return document.execCommand('strikeThrough',false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionUl() {
|
||||||
|
return document.execCommand('insertUnorderedList',false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionOl() {
|
||||||
|
return document.execCommand('insertOrderedList',false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionUndo() {
|
||||||
|
return document.execCommand('undo', false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionRedo() {
|
||||||
|
return document.execCommand('redo', false, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionForecolor(color) {
|
||||||
|
return document.execCommand('forecolor', false, color);
|
||||||
|
}
|
||||||
|
|
||||||
|
actionLink() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
actionImage() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
actionDocument() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
actionTag(tag) {
|
||||||
|
return document.execCommand('formatBlock', false, '<'+tag+'>');
|
||||||
|
}
|
||||||
|
|
||||||
|
toolbarInit() {
|
||||||
|
let action = this.getAttribute('toolbar');
|
||||||
|
|
||||||
|
if ( action !== null ) {
|
||||||
|
this.toolbar.setAttribute('action', action);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toolbar.querySelectorAll('[data-action]:not(.font-color)').forEach(function(item){
|
||||||
|
item.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
let action = item.getAttribute('data-action');
|
||||||
|
|
||||||
|
return this["action" + action[0].toUpperCase() + action.slice(1)].call(this, item.getAttribute('data-value'), this.content);
|
||||||
|
}.bind(this));
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.toolbar.querySelectorAll('.font-color').forEach(function(item) {
|
||||||
|
item.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.toolbar.querySelector('label[for="colorpicker"]').dispatchEvent(new Event('click'));
|
||||||
|
}.bind(this));
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.toolbar.querySelector('input[type="color"]').addEventListener('change', function(e) {
|
||||||
|
return this.actionForecolor.call(this, e.target.value);
|
||||||
|
}.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
textareaInit() {
|
||||||
|
if ( ! (this.textarea = this.querySelector("textarea") ) ) {
|
||||||
|
// throw "You should have a <textarea> element within a container with slot='input'";
|
||||||
|
|
||||||
|
this.textarea = document.createElement("textarea");
|
||||||
|
this.textarea.innerHTML = this.innerHTML;
|
||||||
|
this.append(this.textarea);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( this.textarea.getAttribute('readonly') ) {
|
||||||
|
this.wrapper.classList.add("readonly");
|
||||||
|
this.content.removeAttribute('contenteditable');
|
||||||
|
}
|
||||||
|
|
||||||
|
let rows = this.textarea.getAttribute('rows') ;
|
||||||
|
|
||||||
|
if ( rows ) {
|
||||||
|
rows = parseInt(rows);
|
||||||
|
this.content.style.minHeight = ( rows * baseRows ) + "em";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.textarea.webcomponent = this;
|
||||||
|
|
||||||
|
if ( this.classList.contains("lite") ) {
|
||||||
|
this.wrapper.classList.add("lite");
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
html(html) {
|
||||||
|
return html !== undefined ? this.content.innerHTML = html : this.content.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
text(text) {
|
||||||
|
return text !== undefined ? this.content.innerText = text : this.content.innerText;
|
||||||
|
}
|
||||||
|
|
||||||
|
get content() {
|
||||||
|
return this._content;
|
||||||
|
}
|
||||||
|
|
||||||
|
set content(value) {
|
||||||
|
return this._content = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get toolbar() {
|
||||||
|
return this._toolbar;
|
||||||
|
}
|
||||||
|
|
||||||
|
set toolbar(value) {
|
||||||
|
return this._toolbar = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get textarea() {
|
||||||
|
return this._textarea;
|
||||||
|
}
|
||||||
|
|
||||||
|
set textarea(value) {
|
||||||
|
return this._textarea = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get element() {
|
||||||
|
return this._element;
|
||||||
|
}
|
||||||
|
|
||||||
|
set element(value) {
|
||||||
|
return this._element = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get wrapper() {
|
||||||
|
return this._wrapper;
|
||||||
|
}
|
||||||
|
|
||||||
|
set wrapper(value) {
|
||||||
|
return this._wrapper = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get value() {
|
||||||
|
return this.content.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
set value(value) {
|
||||||
|
this.content.innerHTML = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { UiTextarea }
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
|
||||||
|
class Webcomponent extends HTMLElement {
|
||||||
|
|
||||||
|
fetch_template() {
|
||||||
|
this.attachShadow({mode: 'open'}).appendChild(
|
||||||
|
document.querySelector("template#" + this.tagName.toLowerCase()).content.cloneNode(true)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get_name() {
|
||||||
|
return Object.getPrototypeOf(this).constructor.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
get_slot(name) {
|
||||||
|
return this.querySelector('[slot="' + name + '"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
empty_element(element) {
|
||||||
|
while (element.lastChild) {
|
||||||
|
element.removeChild(element.lastChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
build_url(url, data) {
|
||||||
|
return url + ( Object.entries(data).length ? "?" + Object.keys(data).map(function(key) {
|
||||||
|
return [key, data[key]].map(encodeURIComponent).join("=");
|
||||||
|
}).join("&") : "" );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Webcomponent };
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"name": "assets-package/webcomponent",
|
||||||
|
"description": "Web component package",
|
||||||
|
"type": "library",
|
||||||
|
"license": "MIT",
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Dave Mc Nicoll",
|
||||||
|
"email": "info@mcnd.ca"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"require": {},
|
||||||
|
"autoload": {}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue