Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replaced instances of dom_el with domEl #372

Merged
merged 2 commits into from
Oct 21, 2024
Merged

Replaced instances of dom_el with domEl #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ae6af8
Replaced instances of dom_el with domEl
mkocansey Oct 21, 2024
f9223f8
Merge pull request #371 from mkocansey/v2.7
mkocansey Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions public/js/dropmenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,23 @@ class BladewindDropmenu {
// do this is only there are items
if (this.hasItems()) {
changeCss(this.items, 'opacity-0,hidden', 'remove');
dom_el(this.items).setAttribute('data-open', '1');
if (this.options.hideAfterClick && dom_els(`${this.items} .bw-item`)) {
dom_els(`${this.items} .bw-item`).forEach((item) => {
domEl(this.items).setAttribute('data-open', '1');
if (this.options.hideAfterClick && domEls(`${this.items} .bw-item`)) {
domEls(`${this.items} .bw-item`).forEach((item) => {
item.addEventListener('click', () => {
this.hide();
});
});
}
document.addEventListener('mouseup', (e) => {
let container = dom_el(`.${this.name}`);
let container = domEl(`.${this.name}`);
if (container && !container.contains(e.target)) this.hide();
});
}
}

hide = () => {
dom_el(this.items).setAttribute('data-open', '0');
domEl(this.items).setAttribute('data-open', '0');
changeCss(this.items, 'animate__fadeIn', 'remove');
changeCss(this.items, 'animate__fadeOut');
setTimeout(() => {
Expand All @@ -45,17 +45,17 @@ class BladewindDropmenu {
}

toggle = () => {
(dom_el(this.items).getAttribute('data-open') === '0') ? this.show() : this.hide();
(domEl(this.items).getAttribute('data-open') === '0') ? this.show() : this.hide();
}

activate = () => {
dom_el(`.${this.name} .bw-trigger`).addEventListener(this.options.triggerOn, () => {
domEl(`.${this.name} .bw-trigger`).addEventListener(this.options.triggerOn, () => {
this.toggle();
});
}

hasItems = () => {
return dom_els(`${this.items} .bw-item`);
return domEls(`${this.items} .bw-item`);
}


Expand Down
90 changes: 45 additions & 45 deletions public/js/select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ class BladewindSelect {
this.itemsContainer = `${this.rootElement} .bw-select-items-container`;
this.searchInput = `${this.itemsContainer} .bw_search`;
this.selectItems = `${this.itemsContainer} .bw-select-items .bw-select-item`;
this.isMultiple = (dom_el(this.rootElement).getAttribute('data-multiple') === 'true');
this.required = (dom_el(this.rootElement).getAttribute('data-required') === 'true');
this.isMultiple = (domEl(this.rootElement).getAttribute('data-multiple') === 'true');
this.required = (domEl(this.rootElement).getAttribute('data-required') === 'true');
this.formInput = `input.bw-${this.name}`;
dom_el(this.displayArea).style.maxWidth = `${(dom_el(this.rootElement).offsetWidth - 40)}px`;
domEl(this.displayArea).style.maxWidth = `${(domEl(this.rootElement).offsetWidth - 40)}px`;
this.maxSelection = -1;
this.canClear = (!this.required && !this.isMultiple);
this.enabled = true;
Expand All @@ -36,7 +36,7 @@ class BladewindSelect {

activate = (options = {}) => {
if (options.disabled !== '1' && options.readonly !== '1') {
dom_el(this.clickArea).addEventListener('click', (e) => {
domEl(this.clickArea).addEventListener('click', (e) => {
unhide(this.itemsContainer);
});
this.hide();
Expand All @@ -51,12 +51,12 @@ class BladewindSelect {
}

enableKeyboardNavigation = () => {
dom_el(this.rootElement).addEventListener('keydown', (e) => {
domEl(this.rootElement).addEventListener('keydown', (e) => {
if (e.key === "Enter") {
if (!this.selectedItem) {
e.preventDefault();
unhide(this.itemsContainer);
dom_el(this.searchInput).focus();
domEl(this.searchInput).focus();
} else {
hide(this.itemsContainer);
}
Expand All @@ -67,7 +67,7 @@ class BladewindSelect {

if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.preventDefault();
let els = [...dom_els(this.selectItems)].filter((el) => {
let els = [...domEls(this.selectItems)].filter((el) => {
if (el.classList.contains('hidden')) {
return false;
}
Expand Down Expand Up @@ -97,16 +97,16 @@ class BladewindSelect {

hide = () => {
document.addEventListener('mouseup', (e) => {
let searchArea = dom_el(this.searchInput);
let container = dom_el((this.isMultiple) ? this.itemsContainer : this.clickArea);
let searchArea = domEl(this.searchInput);
let container = domEl((this.isMultiple) ? this.itemsContainer : this.clickArea);
if (searchArea && container && !searchArea.contains(e.target) && !container.contains(e.target)) hide(this.itemsContainer);
});
}

search = () => {
dom_el(this.searchInput).addEventListener('keyup', (e) => {
let value = (dom_el(this.searchInput).value);
dom_els(this.selectItems).forEach((el) => {
domEl(this.searchInput).addEventListener('keyup', (e) => {
let value = (domEl(this.searchInput).value);
domEls(this.selectItems).forEach((el) => {
(el.innerText.toLowerCase().indexOf(value.toLowerCase()) !== -1) ?
unhide(el, true) :
hide(el, true);
Expand All @@ -120,18 +120,18 @@ class BladewindSelect {
* manually checking if each select-item should be selected or not.
*/
manualModePreSelection = () => {
let select_mode = dom_el(`${this.rootElement}`).getAttribute('data-type');
let selected_value = dom_el(`${this.rootElement}`).getAttribute('data-selected-value');
let select_mode = domEl(`${this.rootElement}`).getAttribute('data-type');
let selected_value = domEl(`${this.rootElement}`).getAttribute('data-selected-value');
if (select_mode === 'manual' && selected_value !== null) {
dom_els(this.selectItems).forEach((el) => {
domEls(this.selectItems).forEach((el) => {
let item_value = el.getAttribute('data-value');
if (item_value === selected_value) el.setAttribute('data-selected', true);
});
}
}

selectItem = () => {
dom_els(this.selectItems).forEach((el) => {
domEls(this.selectItems).forEach((el) => {
let selected = (el.getAttribute('data-selected') !== null);
if (selected) this.setValue(el);
let isSelectable = (el.getAttribute('data-unselectable') === null);
Expand Down Expand Up @@ -160,8 +160,8 @@ class BladewindSelect {
setValue = (item) => {
this.selectedValue = item ? item.getAttribute('data-value') : null;
let selectedLabel = item ? item.getAttribute('data-label') : null;
let svg = dom_el(`${this.rootElement} div[data-value="${this.selectedValue}"] svg`);
let input = dom_el(this.formInput);
let svg = domEl(`${this.rootElement} div[data-value="${this.selectedValue}"] svg`);
let input = domEl(this.formInput);

hide(`${this.rootElement} .placeholder`);
unhide(this.displayArea);
Expand All @@ -173,13 +173,13 @@ class BladewindSelect {
if (this.enabled) {
if (!this.isMultiple) {
changeCssForDomArray(`${this.selectItems} svg`, 'hidden');
dom_el(this.displayArea).innerText = selectedLabel;
domEl(this.displayArea).innerText = selectedLabel;
input.value = this.selectedValue;
unhide(svg, true);
this.moveLabel();
if (this.canClear) {
unhide(`${this.clickArea} .reset`);
dom_el(`${this.clickArea} .reset`).addEventListener('click', (e) => {
domEl(`${this.clickArea} .reset`).addEventListener('click', (e) => {
this.unsetValue(item);
e.stopImmediatePropagation();
});
Expand All @@ -191,7 +191,7 @@ class BladewindSelect {
if (!this.maxSelectableExceeded()) {
unhide(svg, true);
input.value += `,${this.selectedValue}`;
dom_el(this.displayArea).innerHTML += this.labelTemplate(selectedLabel, this.selectedValue);
domEl(this.displayArea).innerHTML += this.labelTemplate(selectedLabel, this.selectedValue);
this.removeLabel(this.selectedValue);
} else {
showNotification('', this.maxSelectionError, 'error');
Expand All @@ -208,26 +208,26 @@ class BladewindSelect {
unsetValue = (item) => {
this.selectedValue = item ? item.getAttribute('data-value') : null;
// let selectedValue = item.getAttribute('data-value');
let svg = dom_el(`${this.rootElement} div[data-value="${this.selectedValue}"] svg`);
let input = dom_el(this.formInput);
let svg = domEl(`${this.rootElement} div[data-value="${this.selectedValue}"] svg`);
let input = domEl(this.formInput);

// only unset values if the Select component is not disabled
if (this.enabled) { //!dom_el(this.clickArea).classList.contains('disabled')
if (this.enabled) { //!domEl(this.clickArea).classList.contains('disabled')
if (!this.isMultiple) {
unhide(`${this.rootElement} .placeholder`);
changeCssForDomArray(`${this.selectItems} svg`, 'hidden');
dom_el(this.displayArea).innerText = '';
domEl(this.displayArea).innerText = '';
input.value = '';
hide(this.displayArea);
hide(`${this.clickArea} .reset`);
this.moveLabel('down');
} else {
if (dom_el(`${this.displayArea} span.bw-sp-${this.selectedValue}`)) {
if (domEl(`${this.displayArea} span.bw-sp-${this.selectedValue}`)) {
let keyword = `(,?)${this.selectedValue}`;
input.value = input.value.replace(input.value.match(keyword)[0], '');
hide(svg, true);
dom_el(`${this.displayArea} span.bw-sp-${this.selectedValue}`).remove();
if (dom_el(this.displayArea).innerText === '') {
domEl(`${this.displayArea} span.bw-sp-${this.selectedValue}`).remove();
if (domEl(this.displayArea).innerText === '') {
unhide(`${this.rootElement} .placeholder`);
hide(this.displayArea);
this.moveLabel('down');
Expand All @@ -241,14 +241,14 @@ class BladewindSelect {
}

scrollbars = () => {
if (dom_el(this.displayArea).scrollWidth > dom_el(this.rootElement).clientWidth) {
if (domEl(this.displayArea).scrollWidth > domEl(this.rootElement).clientWidth) {
unhide(`${this.clickArea} .scroll-left`);
unhide(`${this.clickArea} .scroll-right`);
dom_el(`${this.clickArea} .scroll-right`).addEventListener('click', (e) => {
domEl(`${this.clickArea} .scroll-right`).addEventListener('click', (e) => {
this.scroll(150);
e.stopImmediatePropagation();
});
dom_el(`${this.clickArea} .scroll-left`).addEventListener('click', (e) => {
domEl(`${this.clickArea} .scroll-left`).addEventListener('click', (e) => {
this.scroll(-150);
e.stopImmediatePropagation();
});
Expand All @@ -259,11 +259,11 @@ class BladewindSelect {
}

scroll = (amount) => {
dom_el(this.displayArea).scrollBy(amount, 0);
((dom_el(this.displayArea).clientWidth + dom_el(this.displayArea).scrollLeft) >= dom_el(this.displayArea).scrollWidth) ?
domEl(this.displayArea).scrollBy(amount, 0);
((domEl(this.displayArea).clientWidth + domEl(this.displayArea).scrollLeft) >= domEl(this.displayArea).scrollWidth) ?
hide(`${this.clickArea} .scroll-right`) :
unhide(`${this.clickArea} .scroll-right`);
(dom_el(this.displayArea).scrollLeft === 0) ?
(domEl(this.displayArea).scrollLeft === 0) ?
hide(`${this.clickArea} .scroll-left`) :
unhide(`${this.clickArea} .scroll-left`);
}
Expand All @@ -278,23 +278,23 @@ class BladewindSelect {
}

removeLabel = () => {
dom_els(`${this.displayArea} span svg`).forEach((el) => {
domEls(`${this.displayArea} span svg`).forEach((el) => {
el.addEventListener('click', (e) => {
let value = el.getAttribute('data-value');
this.unsetValue(dom_el(`.bw-select-item[data-value="${value}"]`));
this.unsetValue(domEl(`.bw-select-item[data-value="${value}"]`));
});
});
}

selectByValue = (value) => {
dom_els(this.selectItems).forEach((el) => {
domEls(this.selectItems).forEach((el) => {
if (el.getAttribute('data-value') === value) this.setValue(el);
});
}

reset = () => {
if (this.enabled) {
dom_els(this.selectItems).forEach((el) => {
domEls(this.selectItems).forEach((el) => {
this.unsetValue(el);
});
hide(this.displayArea);
Expand All @@ -306,7 +306,7 @@ class BladewindSelect {
changeCss(this.clickArea, 'disabled');
changeCss(this.clickArea, 'enabled, readonly', 'remove');
// hide(`${this.clickArea} .reset`);
dom_el(this.clickArea).addEventListener('click', () => {
domEl(this.clickArea).addEventListener('click', () => {
hide(this.itemsContainer);
});
this.enabled = false;
Expand All @@ -315,7 +315,7 @@ class BladewindSelect {
enable = () => {
changeCss(this.clickArea, 'readonly, disabled', 'remove');
changeCss(this.clickArea, 'enabled');
dom_el(this.clickArea).addEventListener('click', (e) => {
domEl(this.clickArea).addEventListener('click', (e) => {
unhide(this.itemsContainer);
});
this.enabled = true;
Expand All @@ -328,7 +328,7 @@ class BladewindSelect {
`${user_function}(
'${item.getAttribute('data-value')}',
'${item.getAttribute('data-label')}',
'${dom_el(this.formInput).value}')`
'${domEl(this.formInput).value}')`
);
}
}
Expand All @@ -339,15 +339,15 @@ class BladewindSelect {
}

maxSelectableExceeded = () => {
let input = dom_el(this.formInput);
let input = domEl(this.formInput);
let total_selected = (input.value.split(',')).length;
return ((this.maxSelection !== -1) && total_selected === this.maxSelection);
}

filter = (element, by = '') => {
this.toFilter = element;
if (by !== '') { //this.selectedValue
dom_els(`.bw-select-${element} .bw-select-items .bw-select-item`).forEach((el) => {
domEls(`.bw-select-${element} .bw-select-items .bw-select-item`).forEach((el) => {
const filter_value = el.getAttribute('data-filter-value');
(filter_value === by) ? unhide(el, true) : hide(el, true);
});
Expand All @@ -358,11 +358,11 @@ class BladewindSelect {
if (element) {
const element_items = `.bw-select-${element} .bw-select-items .bw-select-item`;
if (by === '') { // clear all filters
dom_els(element_items).forEach((el) => {
domEls(element_items).forEach((el) => {
unhide(el, true);
});
} else { // clear specific values' filters
dom_els(element_items).forEach((el) => {
domEls(element_items).forEach((el) => {
const filter_value = el.getAttribute('data-filter-value');
(filter_value === this.selectedValue) ? hide(el, true) : unhide(el, true);
});
Expand Down
22 changes: 11 additions & 11 deletions resources/views/components/filepicker.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,38 +68,38 @@ class="bw-{{ $name }} @if($required) required @endif"
</div>

<script>
dom_el('.bw-fp-{{ $name }}').addEventListener('drop', function (evt) {
domEl('.bw-fp-{{ $name }}').addEventListener('drop', function (evt) {
changeCss('.bw-fp-{{ $name }}', 'border-gray-500', 'remove');
changeCss('.bw-fp-{{ $name }}', 'border-gray-300');
evt.preventDefault();
dom_el('.bw-{{ $name }}').click();
domEl('.bw-{{ $name }}').click();
});

dom_el('.bw-fp-{{ $name }}').addEventListener('click', function () {
dom_el('.bw-{{ $name }}').click();
domEl('.bw-fp-{{ $name }}').addEventListener('click', function () {
domEl('.bw-{{ $name }}').click();
});

dom_el('.bw-{{ $name }}').addEventListener('change', function () {
domEl('.bw-{{ $name }}').addEventListener('change', function () {
let selection = this.value;
if (selection !== '') {
const [file] = this.files

if (file) {
if (allowedFileSize(file.size, {{$max_file_size}})) {
dom_el('.bw-fp-{{ $name }} .selection').innerHTML =
domEl('.bw-fp-{{ $name }} .selection').innerHTML =
(file.type.indexOf('image') !== -1) ? '<img src="' + URL.createObjectURL(file) + '" class="rounded-md" />' : file.name;
convertToBase64(file, '.b64-{{ $name }}');
} else {
dom_el('.bw-fp-{{ $name }} .selection').innerHTML = '<span class="text-red-500">File must be {{$max_file_size}}mb or below</span>';
domEl('.bw-fp-{{ $name }} .selection').innerHTML = '<span class="text-red-500">File must be {{$max_file_size}}mb or below</span>';
}
}
changeCss('.bw-fp-{{ $name }} .clear', 'hidden', 'remove');
}
});

dom_el('.bw-fp-{{ $name }} .clear').addEventListener('click', function (e) {
dom_el('.bw-fp-{{ $name }} .selection').innerHTML = '{{ $placeholder }}';
dom_el('.bw-{{ $name }}').value = dom_el('.b64-{{ $name }}').value = '';
domEl('.bw-fp-{{ $name }} .clear').addEventListener('click', function (e) {
domEl('.bw-fp-{{ $name }} .selection').innerHTML = '{{ $placeholder }}';
domEl('.bw-{{ $name }}').value = domEl('.b64-{{ $name }}').value = '';
changeCss('.bw-fp-{{ $name }} .clear', 'hidden');
e.stopImmediatePropagation();
});
Expand All @@ -110,7 +110,7 @@ class="bw-{{ $name }} @if($required) required @endif"
@else
file = '{{ ($selected_value != '') ? $selected_value : $url }}';
@endif
dom_el('.bw-fp-{{ $name }} .selection').innerHTML = file;
domEl('.bw-fp-{{ $name }} .selection').innerHTML = file;
changeCss('.bw-fp-{{ $name }} .clear', 'hidden', 'remove');
@endif

Expand Down
Loading