tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

communications app, popup lib

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-08 11:46:20 +08:00
parent 449196b491
commit f85d4c9903
25 changed files with 746 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lib/ui/dropdown.js
View File

@ -20,7 +20,7 @@ if (dropdownGlobal == null) {
configurable: false,
enumerable: false,
value: function () {
const panel = document.querySelector('.dropdown-wrapper .dropdown-box.active');
const panel = document.querySelector('.drop-wrapper .drop-box.active');
if (panel == null) {
return;
}
@ -40,7 +40,7 @@ if (dropdownGlobal == null) {
document.addEventListener('mousedown', e => {
let parent = e.target;
while (parent != null) {
if (parent.classList.contains('dropdown-box')) {
if (parent.classList.contains('drop-box')) {
e.stopPropagation();
return;
}
@ -111,14 +111,14 @@ class Dropdown {
const options = this.#options;
// wrapper
const wrapper = createElement('div', 'dropdown-wrapper');
const wrapper = createElement('div', 'drop-wrapper');
const dropId = String(Math.random()).substring(2);
wrapper.dataset.dropId = dropId;
dropdownGlobal[dropId] = this;
this.#wrapper = wrapper;
// header
const header = createElement('div', 'dropdown-header');
const header = createElement('div', 'drop-header');
header.addEventListener('click', () => {
if (this.disabled) {
return;
@ -136,7 +136,7 @@ class Dropdown {
// label or input
let label;
if (options.input) {
label = createElement('input', 'dropdown-text');
label = createElement('input', 'drop-text');
label.setAttribute('type', 'text');
options.placeholder && label.setAttribute('placeholder', options.placeholder);
isPositive(options.maxlength) && label.setAttribute('maxlength', options.maxlength);
@ -151,7 +151,7 @@ class Dropdown {
label.addEventListener('mousedown', e => this.#expanded && e.stopPropagation());
} else {
isPositive(options.tabindex) && header.setAttribute('tabindex', options.tabindex);
label = createElement('label', 'dropdown-text');
label = createElement('label', 'drop-text');
}
this.#label = label;
if (options.multiselect) {
@ -164,7 +164,7 @@ class Dropdown {
} else if (options.selected != null) {
this.select(options.selected, true);
}
header.append(label, createElement('label', 'dropdown-caret'));
header.append(label, createElement('label', 'drop-caret'));
wrapper.appendChild(header);
this.disabled = options.disabled || false;
@ -173,16 +173,16 @@ class Dropdown {
get multiselect() { return this.#options.multiselect }
get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.dropdown-header.disabled') != null }
get disabled() { return this.#wrapper == null || this.#wrapper.querySelector('.drop-header.disabled') != null }
set disabled(flag) {
if (this.#wrapper == null) {
return;
}
if (flag) {
this.#wrapper.querySelector('.dropdown-header').classList.add('disabled');
this.#wrapper.querySelector('.drop-header').classList.add('disabled');
} else {
this.#wrapper.querySelector('.dropdown-header').classList.remove('disabled');
this.#wrapper.querySelector('.drop-header').classList.remove('disabled');
}
}
@ -275,16 +275,16 @@ class Dropdown {
}
}
get #expanded() { return this.#container?.style.visibility === 'visible' }
get #expanded() { return this.#container?.style?.visibility === 'visible' }
#dropdown(flag = true) {
const options = this.#options;
let panel = this.#container;
if (panel == null) {
panel = createElement('div', 'dropdown-box');
panel = createElement('div', 'drop-box');
// search box
if (!options.input && options.search) {
const search = createElement('div', 'dropdown-search');
const search = createElement('div', 'drop-search');
const input = createElement('input');
input.setAttribute('type', 'text');
isPositive(options.tabindex) && input.setAttribute('tabindex', options.tabindex);
@ -298,7 +298,7 @@ class Dropdown {
panel.appendChild(search);
}
// list
const list = createElement('ul', 'dropdown-list');
const list = createElement('ul', 'drop-list');
if (!this.multiselect) {
list.addEventListener('click', e => {
let li = e.target;
@ -321,7 +321,7 @@ class Dropdown {
if (flag) {
let source = this.source;
if (!options.input && options.search) {
const search = panel.querySelector('.dropdown-search > input');
const search = panel.querySelector('.drop-search > input');
if (!nullOrEmpty(search?.value)) {
source = filterSource(options.searchkeys, options.textkey, search.value, source);
}
@ -348,7 +348,7 @@ class Dropdown {
}
#filllist(source) {
const list = this.#container.querySelector('.dropdown-list');
const list = this.#container.querySelector('.drop-list');
list.replaceChildren();
const multiselect = this.multiselect;
const allchecked = this.#allChecked;