111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
var ActionSelector: ActionSelector = {
|
|
elements: {
|
|
actiondialog: document.querySelector('.actiondialog')
|
|
},
|
|
|
|
fadeTimeout: null,
|
|
|
|
maps: {
|
|
integrationNames: {},
|
|
actionNames: {}
|
|
},
|
|
|
|
init() {
|
|
ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
|
|
var integrationID = item.getAttribute('integrationID');
|
|
var actionID = item.getAttribute('actionID');
|
|
var integrationName = (<HTMLDivElement>item.querySelector('.integration')).innerText.trim();
|
|
var actionName = (<HTMLDivElement>item.querySelector('.action')).innerText.trim();
|
|
|
|
if (ActionSelector.maps.integrationNames[integrationID] == undefined)
|
|
ActionSelector.maps.integrationNames[integrationID] = integrationName;
|
|
if (ActionSelector.maps.actionNames[actionID] == undefined)
|
|
ActionSelector.maps.actionNames[actionID] = actionName;
|
|
});
|
|
},
|
|
|
|
register(input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) {
|
|
input.onfocus = () => ActionSelector.show(input, callback);
|
|
input.onblur = () => setTimeout(ActionSelector.hide, 200);
|
|
input.oninput = () => ActionSelector.search(input.value);
|
|
},
|
|
|
|
show(input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) {
|
|
clearTimeout(ActionSelector.fadeTimeout);
|
|
|
|
ActionSelector.search('');
|
|
|
|
var boundingbox = input.getBoundingClientRect();
|
|
|
|
ActionSelector.elements.actiondialog.style.top = `${boundingbox.top - 31}px`;
|
|
ActionSelector.elements.actiondialog.style.left = `${boundingbox.left - 10}px`;
|
|
ActionSelector.elements.actiondialog.style.width = `${boundingbox.width - 4}px`;
|
|
ActionSelector.elements.actiondialog.style.maxHeight = `${Math.min(
|
|
window.innerHeight - boundingbox.top,
|
|
200
|
|
)}px`;
|
|
|
|
ActionSelector.elements.actiondialog.style.display = 'flex';
|
|
ActionSelector.elements.actiondialog.style.transitionDuration = '.3s';
|
|
ActionSelector.elements.actiondialog.style.opacity = '1';
|
|
ActionSelector.elements.actiondialog.style.pointerEvents = 'auto';
|
|
|
|
ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
|
|
item.onclick = () => {
|
|
var integrationID = item.getAttribute('integrationID');
|
|
var actionID = item.getAttribute('actionID');
|
|
callback(integrationID, actionID);
|
|
|
|
input.value = '';
|
|
};
|
|
});
|
|
},
|
|
|
|
hide() {
|
|
ActionSelector.elements.actiondialog.style.transitionDuration = '.3s';
|
|
ActionSelector.elements.actiondialog.style.opacity = '0';
|
|
ActionSelector.elements.actiondialog.style.pointerEvents = 'none';
|
|
|
|
clearTimeout(ActionSelector.fadeTimeout);
|
|
ActionSelector.fadeTimeout = setTimeout(() => {
|
|
ActionSelector.elements.actiondialog.style.display = 'none';
|
|
}, 300);
|
|
},
|
|
|
|
search(query: string) {
|
|
ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
|
|
var integration: HTMLDivElement = item.querySelector('.integration');
|
|
var action: HTMLDivElement = item.querySelector('.action');
|
|
|
|
var interactionQuery = integration.innerText.toLowerCase();
|
|
var actionQuery = action.innerText.toLowerCase();
|
|
|
|
query = query.toLowerCase();
|
|
|
|
if (interactionQuery.includes(query) || actionQuery.includes(query) || query.length == 0)
|
|
item.classList.remove('hidden');
|
|
else item.classList.add('hidden');
|
|
});
|
|
}
|
|
};
|
|
ActionSelector.init();
|
|
|
|
interface ActionSelector {
|
|
elements: {
|
|
actiondialog: HTMLDivElement;
|
|
};
|
|
|
|
fadeTimeout: any;
|
|
|
|
maps: {
|
|
integrationNames: { [integrationID: string]: string };
|
|
actionNames: { [actionID: string]: string };
|
|
};
|
|
|
|
init: () => void;
|
|
register: (input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) => void;
|
|
show: (input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) => void;
|
|
hide: () => void;
|
|
search: (query: string) => void;
|
|
}
|