@underpostnet/underpost
Version:
Underpost Platform — end-to-end CI/CD and application-delivery toolchain CLI. Covers bare metal, Kubernetes, K3s, kubeadm, LXD, container/image orchestration, secrets, databases, cron jobs, monitoring, SSH, runners, PWA + Workbox delivery, and release orc
110 lines (109 loc) • 3.78 kB
JavaScript
import { getId, s4 } from './CommonJs.js';
import { renderCssAttr } from './Css.js';
import { ToolTip } from './ToolTip.js';
import { getAllChildNodes, htmlStrSanitize, s } from './VanillaJs.js';
class BtnIcon {
static Tokens = {};
static async instance(
options = {
class: '',
type: '',
style: '',
attrs: '',
label: '',
labelStyle: '',
tabHref: '',
tooltipHtml: '',
useVisibilityHover: false,
useMenuBtn: false,
},
) {
const tokenId = getId(BtnIcon.Tokens, 'btn-token-');
if (options.useMenuBtn) options.class += ' main-menu-btn-selector';
BtnIcon.Tokens[tokenId] = { ...options };
setTimeout(() => {
if (s(`.a-${tokenId}`)) s(`.a-${tokenId}`).onclick = (e) => e.preventDefault();
});
let label = html` ${options.label}
${options.handleContainerClass
? html` <div class="abs ${options.handleContainerClass}">
<div class="abs center">
<i class="fas fa-grip-vertical"></i>
</div>
</div>`
: ''}`;
let render = html`<button
${options?.class ? `class="${options.class} ${tokenId}"` : ''}
${options?.type ? `type="${options.type}"` : `type="button"`}
${options?.style ? `style="${options.style}"` : ''}
${options?.attrs ? `${options.attrs}` : ''}
>
<div class="BtnIcon-label">
${options.tabHref
? html`<a
class="abs a-btn a-${tokenId}"
href="${options.tabHref}"
style="${renderCssAttr({ style: { width: '100%', height: '100%', top: '0%', left: '0%' } })}"
>
<span class="in btn-label-content" ${options?.labelStyle ? `style='${options.labelStyle}'` : ''}>
${label}</span
></a
>`
: label}
</div>
<label class="hide">${htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : tokenId}</label>
</button>`;
if (options.tooltipHtml)
setTimeout(() => {
if (s(`.${tokenId}`))
ToolTip.instance({
container: `.${tokenId}`,
id: tokenId,
htmlRender: options.tooltipHtml,
useVisibilityHover: !!options.useVisibilityHover,
useMenuBtn: !!options.useMenuBtn,
});
});
return render;
}
// https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch
static TouchTokens = {};
static async RenderTouch(options = { id: '', Events: {} }) {
const { id } = options;
BtnIcon.TouchTokens[id] = { Events: {}, ...options };
setTimeout(() => {
const triggerTouchEvents = () => {
for (const event of Object.keys(BtnIcon.TouchTokens[id].Events)) BtnIcon.TouchTokens[id].Events[event]();
};
if (s(`.${id}`)) {
s(`.${id}`).addEventListener('touchstart', () => {
// handleStart
triggerTouchEvents();
});
s(`.${id}`).addEventListener('touchmove', () => {
// handleMove
triggerTouchEvents();
});
s(`.${id}`).addEventListener('touchend', () => {
// handleEnd
triggerTouchEvents();
});
s(`.${id}`).addEventListener('touchcancel', () => {
// handleCancel
triggerTouchEvents();
});
s(`.${id}`).onclick = triggerTouchEvents;
}
});
return html` <canvas
class="abs ${id}"
style="${renderCssAttr({ style: { width: '100%', height: '100%', top: '0px', left: '0px', border: 'none' } })}"
>
</canvas>`;
}
static findLabel = (el) =>
getAllChildNodes(el).find((e) => {
return e.classList && Array.from(e.classList).find((e) => e.match('BtnIcon-label'));
});
}
export { BtnIcon };