mirror of
https://github.com/Karaka-Management/jsOMS.git
synced 2026-01-10 17:38:41 +00:00
404 lines
14 KiB
JavaScript
404 lines
14 KiB
JavaScript
import { jsOMS } from '../../Utils/oLib.js';
|
|
import { Request } from '../../Message/Request/Request.js';
|
|
|
|
/**
|
|
* @typedef {import('../../Event/EventManager.js').EventManager} EventManager
|
|
*/
|
|
|
|
/**
|
|
* Advanced input class.
|
|
*
|
|
* @copyright Dennis Eichhorn
|
|
* @license OMS License 2.2
|
|
* @version 1.0.0
|
|
* @since 1.0.0
|
|
*/
|
|
export class TagInput
|
|
{
|
|
/**
|
|
* @constructor
|
|
*
|
|
* @param {Element} e Element to bind
|
|
* @param {EventManager} eventManager Event manager
|
|
* @param {Object} observer Observer
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
constructor (e, eventManager, observer)
|
|
{
|
|
/** @type {string} id */
|
|
this.id = e.id;
|
|
|
|
/** @type {Element} e */
|
|
this.inputComponent = e;
|
|
|
|
this.inputField = this.inputComponent.getElementsByClassName('input')[0];
|
|
this.dropdownElement = document.getElementById(this.id + '-popup');
|
|
this.tagElement = document.getElementById(this.id + '-tags');
|
|
this.dataList = this.dropdownElement.getElementsByTagName('table')[0];
|
|
this.dataListBody = this.dataList.getElementsByTagName('tbody')[0];
|
|
this.dataTpl = document.getElementById(this.id + '-rowElement');
|
|
this.tagTpl = this.tagElement !== null ? this.tagElement.getElementsByTagName('template')[0] : null;
|
|
this.src = this.inputField.getAttribute('data-src');
|
|
|
|
const self = this;
|
|
this.inputField.addEventListener('focusout', function (e) {
|
|
/**
|
|
* @todo Karaka/Modules#63
|
|
* If you click anything outside of the input element the dropdown list closes.
|
|
* This is also true if you click something inside of the dropdown list e.g. sort/filter etc.
|
|
* This might be fixable by changing the focus from the input element to the dropdown element and keep the dropdown element visible if it has focus.
|
|
*/
|
|
if (e.relatedTarget === null
|
|
|| e.relatedTarget.parentElement === null
|
|
|| e.relatedTarget.parentElement.parentElement === null
|
|
|| !jsOMS.hasClass(e.relatedTarget.parentElement.parentElement.parentElement, 'popup')
|
|
) {
|
|
jsOMS.removeClass(self.dropdownElement, 'active');
|
|
}
|
|
});
|
|
|
|
this.inputField.addEventListener('keydown', function (e) {
|
|
if (e.keyCode === 13 || e.keyCode === 40) {
|
|
jsOMS.preventAll(e);
|
|
}
|
|
|
|
if (e.keyCode === 40) {
|
|
// down-key
|
|
self.selectOption(self.dataListBody.firstElementChild);
|
|
jsOMS.preventAll(e);
|
|
} else {
|
|
// handle change delay
|
|
self.inputTimeDelay({ id: self.id, delay: 300 }, self.changeCallback, self, e);
|
|
}
|
|
});
|
|
|
|
this.inputField.addEventListener('focusin', function (e) {
|
|
jsOMS.addClass(self.dropdownElement, 'active');
|
|
});
|
|
|
|
this.dropdownElement.addEventListener('keydown', function (e) {
|
|
jsOMS.preventAll(e);
|
|
|
|
/**
|
|
* @todo Karaka/jsOMS#61
|
|
* Jumping out of the dropdown list is a little bit annoying for handheld users.
|
|
* A solution could be to add a exit/none element which closes the dropdown when clicked.
|
|
*
|
|
* @todo Karaka/jsOMS#62
|
|
* If the data for the input element is only locally defined the filter or sort should be done by the best match.
|
|
*/
|
|
if (e.code === 'Escape' || e.code === 'Delete' || e.code === 'Backspace') {
|
|
// handle esc, del to go back to input field
|
|
self.inputField.focus();
|
|
self.clearDataListSelection(self);
|
|
} else if (e.code === 'ArrowUp') {
|
|
// handle up-click
|
|
if (document.activeElement.previousElementSibling !== null) {
|
|
self.clearDataListSelection(self);
|
|
self.selectOption(document.activeElement.previousElementSibling);
|
|
}
|
|
} else if (e.code === 'ArrowDown') {
|
|
// handle down-click
|
|
if (document.activeElement.nextElementSibling !== null) {
|
|
self.clearDataListSelection(self);
|
|
self.selectOption(document.activeElement.nextElementSibling);
|
|
}
|
|
} else if (e.code === 'Enter' || e.code === 'Tab') {
|
|
self.clearDataListSelection(self);
|
|
self.addToResultList(self, document.activeElement);
|
|
}
|
|
});
|
|
|
|
this.dropdownElement.addEventListener('focusout', function (e) {
|
|
self.clearDataListSelection(self);
|
|
jsOMS.removeClass(self.dropdownElement, 'active');
|
|
});
|
|
|
|
this.dropdownElement.addEventListener('click', function (e) {
|
|
if (document.activeElement.tagName.toLowerCase() !== 'tr') {
|
|
return;
|
|
}
|
|
|
|
self.clearDataListSelection(self);
|
|
self.addToResultList(self, document.activeElement);
|
|
jsOMS.removeClass(self.dropdownElement, 'active');
|
|
});
|
|
|
|
observer.observe(this.tagElement, { childList: true, attributes: false, subtree: false });
|
|
eventManager.attach(this.id + '-tags-childList', function (data) {
|
|
const removes = data.target.querySelectorAll('.close');
|
|
const removesLength = removes === null ? 0 : removes.length;
|
|
|
|
if (removesLength < 1) {
|
|
return;
|
|
}
|
|
|
|
removes[removesLength - 1].addEventListener('click', function (e) {
|
|
if (e.target.parentNode.parentNode === null) {
|
|
return;
|
|
}
|
|
|
|
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Handle remote data response result
|
|
*
|
|
* This method adds remote results to the dropdown list for selecting
|
|
*
|
|
* @param {TagInput} self This reference
|
|
* @param {Object} data Response data
|
|
*
|
|
* @return {void}
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
remoteCallback (self, data)
|
|
{
|
|
window.omsApp.logger.log(data);
|
|
data = JSON.parse(data.response)[0];
|
|
const dataLength = data.length;
|
|
|
|
// if dropdown == true
|
|
if (self.dropdownElement.getAttribute('data-active') === 'true') {
|
|
while (self.dataListBody.firstChild) {
|
|
self.dataListBody.removeChild(self.dataListBody.firstChild);
|
|
}
|
|
|
|
for (let i = 0; i < dataLength; ++i) {
|
|
// set readable value
|
|
const newRow = self.dataTpl.content.cloneNode(true);
|
|
let fields = newRow.querySelectorAll('[data-tpl-text]');
|
|
let fieldLength = fields.length;
|
|
|
|
for (let j = 0; j < fieldLength; ++j) {
|
|
fields[j].appendChild(
|
|
document.createTextNode(
|
|
jsOMS.getArray(fields[j].getAttribute('data-tpl-text'), data[i])
|
|
)
|
|
);
|
|
}
|
|
|
|
// set internal value
|
|
fields = newRow.querySelectorAll('[data-tpl-value]');
|
|
fieldLength = fields.length;
|
|
|
|
for (let j = 0; j < fieldLength; ++j) {
|
|
fields[j].setAttribute(
|
|
'data-value',
|
|
jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data[i])
|
|
);
|
|
}
|
|
|
|
// set data cache
|
|
newRow.firstElementChild.setAttribute('data-data', JSON.stringify(data[i]));
|
|
|
|
self.dataListBody.appendChild(newRow);
|
|
self.dataListBody.lastElementChild.addEventListener('focusout', function (e) {
|
|
if (e.relatedTarget === null) {
|
|
return;
|
|
}
|
|
|
|
let sibling = e.relatedTarget.parentNode.firstElementChild;
|
|
do {
|
|
if (sibling === e.relatedTarget) {
|
|
jsOMS.preventAll(e);
|
|
return;
|
|
}
|
|
} while ((sibling = sibling.nextElementSibling) !== null);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Callback for input field content change
|
|
*
|
|
* @param {TagInput} self This reference
|
|
*
|
|
* @return {void}
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
changeCallback (self)
|
|
{
|
|
// if remote data
|
|
if (typeof self.src !== 'undefined' && self.src !== '') {
|
|
const request = new Request(self.src);
|
|
request.setSuccess(function (data) { self.remoteCallback(self, data); });
|
|
request.send();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Select element in dropdown (only mark it as selected)
|
|
*
|
|
* @param {Element} e Element to select in dropdown
|
|
*
|
|
* @return {void}
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
selectOption (e)
|
|
{
|
|
e.focus();
|
|
|
|
/**
|
|
* @todo Karaka/jsOMS#70
|
|
* Implement external styles for selections instead of inline css
|
|
*/
|
|
e.setAttribute('style', 'background: #f00');
|
|
jsOMS.addClass(e, 'active');
|
|
};
|
|
|
|
/**
|
|
* Clear all selected/marked options in dropdown
|
|
*
|
|
* @param {TagInput} self This reference
|
|
*
|
|
* @return {void}
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
clearDataListSelection (self)
|
|
{
|
|
const list = self.dataListBody.getElementsByTagName('tr');
|
|
const length = list.length;
|
|
|
|
for (let i = 0; i < length; ++i) {
|
|
/**
|
|
* @todo Karaka/jsOMS#70
|
|
* Implement external styles for selections instead of inline css
|
|
*/
|
|
list[i].setAttribute('style', '');
|
|
jsOMS.removeClass(list[i], 'active');
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Add selected dropdown elements to some final result list
|
|
*
|
|
* This can add the selected dropdown elements to a table, badge list etc. depending on the template structure.
|
|
*
|
|
* @param {TagInput} self This reference
|
|
* @param {Element} e Element
|
|
*
|
|
* @return {void}
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
addToResultList (self, e) {
|
|
const data = JSON.parse(e.getAttribute('data-data'));
|
|
|
|
if (self.inputField.getAttribute('data-autocomplete') === 'true') {
|
|
self.inputField.value = jsOMS.getArray(self.inputField.getAttribute('data-value'), data);
|
|
}
|
|
|
|
if (self.tagElement !== null && self.tagElement.getAttribute('data-active') === 'true') {
|
|
/**
|
|
* @todo Karaka/jsOMS#71
|
|
* Make badges removable
|
|
*/
|
|
const newTag = self.tagTpl.content.cloneNode(true);
|
|
|
|
// set internal value
|
|
let fields = newTag.querySelectorAll('[data-tpl-value]');
|
|
let fieldLength = fields.length;
|
|
let uuid = '';
|
|
let value = '';
|
|
|
|
for (let j = 0; j < fieldLength; ++j) {
|
|
fields[j].setAttribute(
|
|
'data-value',
|
|
jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data)
|
|
);
|
|
|
|
value = jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data);
|
|
uuid += value;
|
|
}
|
|
|
|
/**
|
|
* @todo Karaka/jsOMS#72
|
|
* Allow duplication
|
|
* Create a `data-duplicate=true` attribute to allow duplication and then have a count as part of the uuid (maybe row id).
|
|
*/
|
|
if (self.tagElement.querySelectorAll('[data-tpl-uuid="' + uuid + '"').length !== 0) {
|
|
return;
|
|
}
|
|
|
|
newTag.firstElementChild.setAttribute('data-tpl-uuid', uuid);
|
|
|
|
// set readable text
|
|
fields = newTag.querySelectorAll('[data-tpl-text]');
|
|
fieldLength = fields.length;
|
|
|
|
for (let j = 0; j < fieldLength; ++j) {
|
|
fields[j].appendChild(
|
|
document.createTextNode(
|
|
jsOMS.getArray(fields[j].getAttribute('data-tpl-text'), data)
|
|
)
|
|
);
|
|
}
|
|
|
|
// set innerHtml (e.g. styles) {/path}
|
|
const regex = /{\/.*?}/g;
|
|
const matches = newTag.firstElementChild.outerHTML.match(regex);
|
|
const matchLength = matches === null ? 0 : matches.length;
|
|
|
|
for (let i = 0; i < matchLength; ++i) {
|
|
newTag.firstElementChild.outerHTML = newTag.firstElementChild.outerHTML.replace(
|
|
matches[i],
|
|
jsOMS.getArray(matches[i].substring(1, matches[i].length - 1), data)
|
|
);
|
|
}
|
|
|
|
// allow limit
|
|
if (self.tagElement.childElementCount >= self.tagElement.getAttribute('data-limit')
|
|
&& self.tagElement.getAttribute('data-limit') !== '0'
|
|
) {
|
|
self.tagElement.removeChild(self.tagElement.firstElementChild);
|
|
}
|
|
|
|
self.tagElement.appendChild(newTag);
|
|
}
|
|
|
|
if (self.inputField.getAttribute('data-emptyAfter') === 'true') {
|
|
self.inputField.value = '';
|
|
}
|
|
|
|
self.inputField.focus();
|
|
};
|
|
|
|
/**
|
|
* Delay handler (e.g. delay after finishing typing)
|
|
*
|
|
* After waiting for a delay a callback can be triggered.
|
|
*
|
|
* @param {Object} action Action type
|
|
* @param {function} callback Callback to be triggered
|
|
* @param {TagInput} self This reference (passed to callback)
|
|
* @param {Object} data Data (passed to callback)
|
|
*
|
|
* @return {void}
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
inputTimeDelay (action, callback, self, data)
|
|
{
|
|
if (TagInput.timerDelay[action.id]) {
|
|
clearTimeout(TagInput.timerDelay[action.id]);
|
|
delete TagInput.timerDelay[action.id];
|
|
}
|
|
|
|
TagInput.timerDelay[action.id] = setTimeout(function () {
|
|
delete TagInput.timerDelay[action.id];
|
|
callback(self, data);
|
|
}, action.delay);
|
|
};
|
|
};
|
|
|
|
TagInput.timerDelay = {};
|