@twobirds/microcomponents
Version:
Micro Components Organization Class
971 lines • 28.5 kB
JavaScript
import { addListener, removeListener } from './MC.js';
const isObject = (value) => {
return value != null && typeof value === 'object';
};
const words = (classes) => {
let classSet = new Set();
classes.forEach(c => {
c = c.trim();
c.split(' ').forEach(e => {
if (e !== '') {
classSet.add(e);
}
});
});
classes = Array.from(classSet);
return classes;
};
const getInputName = (e) => {
let ret = e instanceof HTMLInputElement
? 'input'
: e instanceof HTMLSelectElement
? 'select'
: e instanceof HTMLTextAreaElement
? 'textarea'
: '';
return ret;
};
const getInputHandlers = (e) => {
let inputList = $d('input,select,textarea', e).array, handlers = {};
inputList.forEach((i) => {
const name = i.getAttribute('name') || 'undefined';
if (name) {
let h;
switch (getInputName(i)) {
case 'input':
h = new InputHandler(i, e);
Object.defineProperty(handlers, name, {
enumerable: true,
configurable: true,
get: () => { return h.val; },
set: (value) => { h.val = value; }
});
break;
case 'select':
h = new SelectHandler(i);
Object.defineProperty(handlers, name, {
enumerable: true,
configurable: true,
get: () => { return h.val; },
set: (value) => { h.val = value; }
});
break;
case 'textarea':
h = new TextAreaHandler(i);
Object.defineProperty(handlers, name, {
enumerable: true,
configurable: true,
get: () => { return h.val; },
set: (value) => { h.val = value; }
});
break;
default:
console.warn('handler missing:', name, 'for', i);
break;
}
}
});
return handlers;
};
class InputBase {
constructor(e) {
}
}
class InputHandler extends InputBase {
#e;
#type;
#radioBase;
constructor(e, radioBase) {
super(e);
this.#e = e;
this.#type = e.type;
this.#radioBase = radioBase;
}
get val() {
let that = this, type = that.#type, ret;
switch (type) {
case 'radio':
const check = $d(`input[type="radio"][name="${this.#e.getAttribute('name')}"]`, this.#radioBase)
.filter(e => e.checked);
if (!check.length)
return '';
ret = check.array[0];
return ret.value;
case 'checkbox':
return that.#e.checked;
default:
return that.#e.value;
break;
}
return '';
}
set val(value) {
let that = this, type = that.#type, ret;
switch (type) {
case 'radio':
const selection = `input[type="radio"][name="${this.#e.getAttribute('name')}"]`, radios = $d(selection, this.#radioBase);
if (!radios.length)
return;
if (value === '') {
radios.forEach(r => { if (r.checked)
r.checked = false; });
return;
}
const setRadioElement = radios.filter(r => r.getAttribute('value') === value);
if (!setRadioElement.length)
return;
setRadioElement.array[0].checked = true;
return;
break;
case 'checkbox':
that.#e.checked = value;
break;
default:
that.#e.value = value;
break;
}
return;
}
}
class SelectHandler extends InputBase {
#e;
#multi = false;
constructor(e) {
super(e);
this.#e = e;
this.#multi = e.type === 'select-multiple';
}
get val() {
const that = this, ret = [];
const options = $d(that.#e.querySelectorAll('option'))
.filter(o => o.selected)
.forEach(o => { if (o.selected)
ret.push(o.value); });
if (this.#multi)
return ret;
return ret.length ? ret[0] : '';
}
set val(value) {
const that = this;
value = typeof value === 'string' ? [value] : value;
const options = $d(that.#e.querySelectorAll('option'))
.forEach(o => {
if (value.indexOf(o.value) > -1) {
o.setAttribute('selected', true);
o.selected = true;
}
else {
o.removeAttribute('selected');
o.selected = false;
}
});
return;
}
}
class TextAreaHandler extends InputBase {
#e;
constructor(e) {
super(e);
this.#e = e;
}
get val() {
return this.#e.value;
}
set val(value) {
this.#e.value = value;
return;
}
}
class DomSelector {
#set = new Set();
get set() {
return this.#set;
}
get array() {
return Array.from(this.#set);
}
set set(set) {
this.#set = set;
return;
}
get length() {
return this.#set.size;
}
constructor(selection, element = document.body) {
let that = this, undefinedTags = new Set();
if (!selection) {
return that;
}
}
$t(nameSpace) {
let result = new TbSelector();
this.#set.forEach((e) => {
if (e._mc) {
Object.values(e._mc).forEach((mc) => {
result.set.add(mc);
});
}
});
if (nameSpace) {
result.filter(mc => mc.nameSpace === nameSpace);
}
return result;
}
add(selection, target) {
let that = this;
$d(selection, target).forEach(element => {
that.#set.add(element);
});
return that;
}
addClass(...classes) {
classes = words(classes);
this.forEach(element => {
element.classList.add(...classes);
});
return this;
}
after(selection, target) {
let that = this, after = $d(selection, target);
;
if (!after.length)
return that;
after
.first()
.forEach(element => {
that.array.reverse().forEach((e) => {
e.after(element);
});
});
return that;
}
append(selection, target) {
let that = this, addTo = that.array['0'], append = $d(selection, target);
if (addTo) {
append.forEach((e) => {
addTo.append(e);
});
}
return that;
}
appendTo(selection, target) {
let that = this, appendTo = $d(selection, target).array['0'];
if (appendTo) {
that.forEach((e) => {
appendTo.append(e);
});
}
return that;
}
attr(first, second) {
let that = this, attributes = {};
if (!that.length)
return that;
if (!arguments.length) {
Array.from([...that.set][0].attributes).forEach((attribute) => {
attributes[attribute.name] = attribute.value;
});
return attributes;
}
if (typeof first === 'string') {
if (second === undefined) {
return [...that.set][0].getAttribute(first);
}
if (second === null) {
[...that.set].forEach((e) => {
e.removeAttribute(first);
});
return that;
}
if (typeof second === 'object') {
second = JSON.stringify(second);
}
[...that.set].forEach((e) => {
e.setAttribute(first, second);
});
return that;
}
if (typeof first === 'object') {
[...that.set].forEach((e) => {
Object.keys(first).forEach((key) => {
$d(e).attr(key, first.key);
});
});
return that;
}
return that;
}
before(selection, target) {
let that = this, before = $d(selection, target);
;
if (!before.length)
return that;
before
.first()
.forEach(element => {
that.forEach((e) => {
e.before(element);
});
});
return that;
}
children(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
Array.from(e.children).forEach((c) => {
set.add(c);
});
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
descendants(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e.querySelectorAll('*').forEach((h) => {
set.add(h);
});
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
empty() {
return this.filter((e) => false);
}
first(selection, rootNode) {
let that = this, set = new Set(), compare = false;
;
if (selection) {
compare = $d(selection, rootNode);
}
that.#set.forEach((e) => {
if (e.parentNode) {
set.add(e.parentNode.children[0]);
}
});
that = $d([...set]);
if (selection) {
that.filter((e) => compare.has(e));
}
return that;
}
has(element) {
return this.#set.has(element);
}
hasClass(...classes) {
classes = words(classes);
return this.every(e => {
return Array.from(e.classList).every(c => e.contains(c));
});
}
html(html) {
let that = this;
if (html) {
that.forEach((e) => {
!e.parentNode
? (() => {
console.warn('Cannot access the .innerHTML of a HTMLElement that hasnt been inserted yet', e);
console.trace(e, this);
console.info('If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!', 'color: blue;');
})()
: e.innerHTML = html;
});
return that;
}
return that.array[0].innerHTML;
}
last(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
let siblings = e.parentNode?.children;
if (siblings) {
set.add(Array.from(siblings).at(-1));
}
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
next(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
let siblings = e.parentNode?.children;
if (siblings) {
let arr = Array.from(siblings), pos = arr.indexOf(e) + 1;
if (pos < arr.length) {
set.add(arr.at(pos));
}
}
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
normalize() {
let that = this;
that.#set.forEach((e) => { e.normalize(); });
return that;
}
off(eventName, cb) {
let that = this, eventNames = eventName.indexOf(' ') > -1
? eventName.split(' ')
: [eventName];
that.array.forEach((e) => {
eventNames.forEach(function (n) {
removeListener(e, n, cb);
});
});
return that;
}
on(eventName, cb, capture = false, once = false) {
let that = this, eventNames = eventName.indexOf(' ') > -1
? eventName.split(' ').filter((s) => s !== '')
: [eventName];
function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
;
wrapper.cb = cb;
that.forEach((e) => {
eventNames.forEach(function (n) {
addListener(e, n, wrapper, capture, once);
});
});
return wrapper;
}
one(eventName, cb, capture = false) {
let that = this, eventNames = eventName.indexOf(' ') > -1
? eventName.split(' ').filter((s) => s !== '')
: [eventName];
function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
;
wrapper.cb = cb;
that.forEach((e) => {
eventNames.forEach(function (n) {
addListener(e, n, wrapper, capture, true);
});
});
return wrapper;
}
parent(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
if (e.parentNode && e.parentNode.tagName !== 'HTML') {
set.add(e.parentNode);
}
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
parents(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
let current = e;
while (current.parentNode && current.parentNode.tagName !== 'HTML') {
current = current.parentNode;
set.add(current);
}
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
prepend(selection, target) {
let that = this, addTo = that.array['0'], prepend = $d(selection, target);
if (addTo) {
prepend.forEach((e) => {
addTo.prepend(e);
});
}
return that;
}
prev(selection, rootNode) {
let that = this, set = new Set();
that.#set.forEach((e) => {
let siblings = e.parentNode?.children;
if (siblings) {
let arr = Array.from(siblings), pos = arr.indexOf(e) - 1;
if (pos > -1) {
set.add(arr.at(pos));
}
}
});
that = $d([...set]);
if (selection) {
let compare = $d(selection, rootNode);
that.filter((e) => compare.has(e));
}
return that;
}
removeClass(...classes) {
classes = words(classes);
this.forEach(element => {
element.classList.remove(...classes);
});
return this;
}
text(text) {
let that = this;
if (text) {
that.forEach((e) => {
!e.parentNode
? (() => {
console.warn('Cannot access the .textContent of a HTMLElement that hasnt been inserted yet', e);
console.trace(e, this);
console.info('If you called this from inside a Web Component constructor, consider using the %c[connected] event callback!', 'color: blue;');
})()
: e.innerText = text;
});
return that;
}
let t = that.array[0].innerText;
return t ?? '';
}
toggleClass(...classes) {
classes = words(classes);
this.forEach(element => {
element.classList.toggle(...classes);
});
return this;
}
trigger(eventName, data = {}, bubbles = false, cancelable = false, composed = false) {
let that = this, ev, options = { bubbles, cancelable, composed }, eventNames = eventName.indexOf(' ') > -1
? eventName.split(' ')
: [eventName];
that.#set.forEach((e) => {
eventNames.forEach(function (n) {
ev = new Event(n, options);
ev.data = data;
e.dispatchEvent(ev);
});
});
return that;
}
val(p1, p2) {
if (!this.length)
return this;
const that = this;
let result, handlers = getInputHandlers(that.array[0]);
if (!p1) {
result = Object.assign({}, handlers);
}
else {
if (isObject(p1)) {
Object.assign(handlers, p1);
result = that;
}
else if (typeof p1 === 'string') {
if (p2 === undefined) {
result = handlers[p1];
}
else {
handlers[p1] = p2;
result = that;
}
}
}
return result;
}
values(values) {
const that = this, holder = {};
let data = {};
if (!that.length) {
console.warn('no dom selection to search inputs in');
return {};
}
let handlers = getInputHandlers(that.array[0]);
Object.keys(handlers).forEach((key) => {
data[key] = handlers[key];
});
if (Object.keys(data).length === 0) {
console.warn('no inputs in this dom selection', that.array[0], data);
}
if (values) {
Object
.keys(values)
.forEach(key => {
if (handlers.hasOwnProperty(key)) {
console.log('key found', key);
handlers[key] = values[key];
}
});
}
return structuredClone(Object.assign(handlers));
}
at(index) {
return $d(this.array.at(index));
}
concat(items) {
let that = this, arr = items instanceof DomSelector
? items.array
: items;
arr.forEach((e) => {
that.#set.add(e);
});
return that;
}
entries() {
return this.array.entries();
}
every(predicate, thisArg) {
return this.array.every(predicate, thisArg);
}
filter(predicate, thisArg) {
this.#set = new Set(this.array.filter(predicate, thisArg));
return this;
}
forEach(predicate, thisArg) {
this.array.forEach(predicate, thisArg);
return this;
}
includes(item) {
return this.array.indexOf(item, 0) !== -1;
}
indexOf(item, start) {
return this.array.indexOf(item, start);
}
map(predicate, thisArg) {
return this.array.map(predicate, thisArg);
}
pop() {
return this.array.pop();
}
push(...items) {
items.forEach((item) => {
this.#set.add(item);
});
return this;
}
shift() {
let that = this, element = that.#set.size ? that.array[0] : undefined;
if (element) {
that.#set.delete(element);
}
return element;
}
slice(start, end) {
return $d(this.array.slice(start, end));
}
some(predicate, thisArg) {
return this.array.some(predicate, thisArg);
}
splice(start, deleteCount, ...items) {
let that = this, arr = that.array;
arr.splice(start, deleteCount, ...items);
return $d(arr);
}
}
;
class TbSelector {
#set = new Set();
get set() {
return this.#set;
}
get array() {
return Array.from(this.#set);
}
set set(set) {
this.#set = set;
return;
}
get length() {
return this.#set.size;
}
set length(value) {
}
constructor(selection, element = document.body) {
if (!selection) {
return this;
}
$d(selection, element).forEach((e) => {
$t(e).forEach((t) => {
this.#set.add(t);
});
});
}
$d(selection, element = document.body) {
let result = new DomSelector(), set = new Set(), compare = !!selection || false, compareSelection = new Set();
if (compare) {
compareSelection = $d(selection, element).set;
}
this.#set.forEach((e) => {
if (!compare || compareSelection.has(e._tg)) {
set.add(e._tg);
}
});
result.set = set;
return result;
}
children(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e.children(nameSpace).forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
return that;
}
descendants(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e.descendants(nameSpace).forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
return that;
}
first(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e
.parent()
.children()
.$d()
.first()
.$t()
.forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
if (nameSpace) {
that.filter((tb) => tb.nameSpace = nameSpace);
}
return that;
}
has(element) {
return this.#set.has(element);
}
last(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e
.parent()
.children()
.$d()
.last()
.$t()
.forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
if (nameSpace) {
that.filter((e) => e.nameSpace = nameSpace);
}
return that;
}
next(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
let elements = new Set(), element;
element = e._tg;
while (element.nextElementSibling !== null) {
element = element.nextElementSibling;
elements.add(element);
}
$t([...elements])
.$d()
.first()
.$t()
.forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
if (nameSpace) {
that.filter((e) => e.nameSpace = nameSpace);
}
return that;
}
ns(nameSpace) {
return this.filter((tb) => tb.nameSpace === nameSpace);
}
off(name, cb) {
let that = this, eventNames = name.indexOf(' ') > -1
? name.split(' ').filter((s) => s !== '')
: [name];
that.$d().array.forEach((e) => {
eventNames.forEach(function (n) {
removeListener(e, `[TB]${n}`, cb);
});
});
return that;
}
on(name, cb, once = false) {
let that = this, eventNames = name.indexOf(' ') > -1
? name.split(' ').filter((s) => s !== '')
: [name];
function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
;
wrapper.cb = cb;
that.forEach((tb) => {
eventNames.forEach(function (n) {
addListener(tb._tg, `[TB]${n}`, wrapper, false, once);
});
});
return wrapper;
}
one(name, cb) {
let that = this, eventNames = name.indexOf(' ') > -1
? name.split(' ').filter((s) => s !== '')
: [name];
function wrapper() { wrapper.cb.apply(that, Array.from(arguments)); }
;
wrapper.cb = cb;
that.forEach((tb) => {
eventNames.forEach(function (n) {
addListener(tb._tg, `[TB]${n}`, wrapper, false, true);
});
});
return wrapper;
}
parent(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e.parent(nameSpace).forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
return that;
}
parents(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
e.parents(nameSpace).forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
return that;
}
prev(nameSpace) {
let that = this, set = new Set();
that.#set.forEach((e) => {
let elements = new Set(), element;
element = e._tg;
while (element.previousElementSibling !== null) {
element = element.previousElementSibling;
elements.add(element);
}
$t([...elements])
.$d()
.last()
.$t()
.forEach((tb) => {
set.add(tb);
});
});
that.#set = set;
if (nameSpace) {
that.filter((e) => e.nameSpace = nameSpace);
}
return that;
}
trigger(ev, data = {}, bubble = 'l') {
let that = this;
that.forEach((tb) => {
tb.trigger(ev, data, bubble);
});
return that;
}
at(index) {
return $t(this.array.at(index));
}
concat(items) {
let that = this;
items.forEach((tb) => {
that.#set.add(tb);
});
return that;
}
entries() {
return this.array.entries();
}
every(predicate, thisArg) {
return this.array.every(predicate, thisArg);
}
filter(predicate, thisArg) {
return $t(this.array.filter(predicate, thisArg));
}
forEach(predicate, thisArg) {
let that = this;
that.array.forEach(predicate, thisArg);
return that;
}
includes(item) {
return this.array.indexOf(item) !== -1;
}
indexOf(item, start) {
return this.array.indexOf(item, start);
}
map(predicate, thisArg) {
return this.array.map(predicate, thisArg);
}
pop() {
let that = this, arr = that.array, result = arr.pop();
that.#set = new Set(arr);
return result;
}
push(item) {
let that = this;
that.#set.add(item);
return that;
}
shift() {
let that = this, first = this.array.shift();
that.#set.delete(first);
return first;
}
slice(start, end) {
return $t(this.array.slice(start, end));
}
some(predicate, thisArg) {
return this.array.some(predicate, thisArg);
}
splice(start, deleteCount, ...items) {
let that = this, arr = that.array, result = arr.splice(start, deleteCount, ...items);
return $t(result);
}
}
;
export const $d = (selection, element = document) => {
let set = new Set();
if (selection instanceof Array) {
selection.forEach(value => {
$d(value, element).forEach(n => {
set.add(n);
});
});
return new DomSelector([...set]);
}
else {
return new DomSelector(selection, element);
}
};
export const $t = (selection, element = document) => {
return $d(selection, element).$t();
};
//# sourceMappingURL=selectors.js.map