refactor: type view.ts, dom.ts and time.ts
parent
35b8baef92
commit
fa97027321
GPG Key ID:
94A2F643C51F37FA
@ -1,92 +0,0 @@
|
||||
/**
|
||||
* example usage:
|
||||
*
|
||||
* const props = {className: 'btn', onclick: async (e) => alert('hi')};
|
||||
* const btn = elem('button', props, ['download']);
|
||||
* document.body.append(btn);
|
||||
*
|
||||
* @param {string} name
|
||||
* @param {HTMLElement.prototype} props
|
||||
* @param {Array<HTMLElement|string>} children
|
||||
* @return HTMLElement
|
||||
*/
|
||||
export function elem(name = 'div', {data, ...props} = {}, children = []) {
|
||||
const el = document.createElement(name);
|
||||
Object.assign(el, props);
|
||||
if (['number', 'string'].includes(typeof children)) {
|
||||
el.append(children);
|
||||
} else {
|
||||
el.append(...children);
|
||||
}
|
||||
if (data) {
|
||||
Object.entries(data).forEach(([key, value]) => el.dataset[key] = value);
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
function isValidURL(url) {
|
||||
if (!['http:', 'https:'].includes(url.protocol)) {
|
||||
return false;
|
||||
}
|
||||
if (!['', '443', '80'].includes(url.port)) {
|
||||
return false;
|
||||
}
|
||||
if (url.hostname === 'localhost') {
|
||||
return false;
|
||||
}
|
||||
const lastDot = url.hostname.lastIndexOf('.');
|
||||
if (lastDot < 1) {
|
||||
return false;
|
||||
}
|
||||
if (url.hostname.slice(lastDot) === '.local') {
|
||||
return false;
|
||||
}
|
||||
if (url.hostname.slice(lastDot + 1).match(/^[\d]+$/)) { // there should be no tld with numbers, possible ipv4
|
||||
return false;
|
||||
}
|
||||
if (url.hostname.includes(':')) { // possibly an ipv6 addr; certainly an invalid hostname
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export function parseTextContent(string) {
|
||||
let firstLink;
|
||||
return [string
|
||||
.trimRight()
|
||||
.replaceAll(/\n{3,}/g, '\n\n')
|
||||
.split('\n')
|
||||
.map(line => {
|
||||
const words = line.split(/\s/);
|
||||
return words.map(word => {
|
||||
if (word.match(/^ln(tbs?|bcr?t?)[a-z0-9]+$/g)) {
|
||||
return elem('a', {
|
||||
href: `lightning:${word}`
|
||||
}, `lightning:${word.slice(0, 24)}…`);
|
||||
}
|
||||
if (!word.match(/^(https?:\/\/|www\.)\S*/)) {
|
||||
return word;
|
||||
}
|
||||
try {
|
||||
if (!word.startsWith('http')) {
|
||||
word = 'https://' + word;
|
||||
}
|
||||
const url = new URL(word);
|
||||
if (!isValidURL(url)) {
|
||||
return word;
|
||||
}
|
||||
firstLink = firstLink || url.href;
|
||||
return elem('a', {
|
||||
href: url.href,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer'
|
||||
}, url.href.slice(url.protocol.length + 2));
|
||||
} catch (err) {
|
||||
return word;
|
||||
}
|
||||
})
|
||||
.reduce((acc, word) => [...acc, word, ' '], []);
|
||||
})
|
||||
.reduce((acc, words) => [...acc, ...words, elem('br')], []),
|
||||
{firstLink}];
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/**
|
||||
* throttle and debounce given function in regular time interval,
|
||||
* but with the difference that the last call will be debounced and therefore never missed.
|
||||
* @param {*} function to throttle and debounce
|
||||
* @param {*} time desired interval to execute function
|
||||
* @returns callback
|
||||
*/
|
||||
export const bounce = (fn, time) => {
|
||||
let throttle;
|
||||
let debounce;
|
||||
return (/*...args*/) => {
|
||||
if (throttle) {
|
||||
clearTimeout(debounce);
|
||||
debounce = setTimeout(() => fn(/*...args*/), time);
|
||||
return;
|
||||
}
|
||||
fn(/*...args*/);
|
||||
throttle = setTimeout(() => {
|
||||
throttle = false;
|
||||
}, time);
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,129 @@
|
||||
type Attributes = {
|
||||
[key: string]: string | number;
|
||||
} & {
|
||||
data?: {
|
||||
[key: string]: string | number;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* example usage:
|
||||
*
|
||||
* const props = {className: 'btn', onclick: async (e) => alert('hi')};
|
||||
* const btn = elem('button', props, ['download']);
|
||||
* document.body.append(btn);
|
||||
*
|
||||
* @param {string} name
|
||||
* @param {HTMLElement.prototype} props
|
||||
* @param {Array<HTMLElement|string>} children
|
||||
* @return HTMLElement
|
||||
*/
|
||||
export const elem = (
|
||||
name: keyof HTMLElementTagNameMap,
|
||||
attrs: Attributes = {},
|
||||
children: Array<Node> | string = []
|
||||
) => {
|
||||
const {data, ...props} = attrs;
|
||||
const el = document.createElement(name);
|
||||
Object.assign(el, props);
|
||||
if (Array.isArray(children)) {
|
||||
el.append(...children);
|
||||
} else {
|
||||
const childType = typeof children;
|
||||
if (childType === 'number' || childType === 'string') {
|
||||
el.append(children);
|
||||
} else {
|
||||
console.error('call me');
|
||||
}
|
||||
}
|
||||
if (data) {
|
||||
Object.entries(data).forEach(([key, value]) => {
|
||||
el.dataset[key] = value as string;
|
||||
});
|
||||
}
|
||||
return el;
|
||||
};
|
||||
|
||||
export const isValidURL = (url: URL) => {
|
||||
if (!['http:', 'https:'].includes(url.protocol)) {
|
||||
return false;
|
||||
}
|
||||
if (!['', '443', '80'].includes(url.port)) {
|
||||
return false;
|
||||
}
|
||||
if (url.hostname === 'localhost') {
|
||||
return false;
|
||||
}
|
||||
const lastDot = url.hostname.lastIndexOf('.');
|
||||
if (lastDot < 1) {
|
||||
return false;
|
||||
}
|
||||
if (url.hostname.slice(lastDot) === '.local') {
|
||||
return false;
|
||||
}
|
||||
if (url.hostname.slice(lastDot + 1).match(/^[\d]+$/)) { // there should be no tld with numbers, possible ipv4
|
||||
return false;
|
||||
}
|
||||
if (url.hostname.includes(':')) { // possibly an ipv6 addr; certainly an invalid hostname
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* example usage:
|
||||
*
|
||||
* const [content, {firstLink}] = parseTextContent('Hi<br>click https://nostr.ch/');
|
||||
*
|
||||
* @param {string} content
|
||||
* @returns [Array<string | HTMLElement>, {firstLink: href}]
|
||||
*/
|
||||
export const parseTextContent = (
|
||||
content: string,
|
||||
): [
|
||||
Array<string | HTMLAnchorElement | HTMLBRElement>,
|
||||
{firstLink: string | undefined},
|
||||
] => {
|
||||
let firstLink: string | undefined;
|
||||
const parsedContent = content
|
||||
.trim()
|
||||
.replaceAll(/\n{3,}/g, '\n\n')
|
||||
.split('\n')
|
||||
.map(line => {
|
||||
const words = line.split(/\s/);
|
||||
return words.map(word => {
|
||||
if (word.match(/^ln(tbs?|bcr?t?)[a-z0-9]+$/g)) {
|
||||
return elem('a', {
|
||||
href: `lightning:${word}`
|
||||
}, `lightning:${word.slice(0, 24)}…`);
|
||||
}
|
||||
if (!word.match(/^(https?:\/\/|www\.)\S*/)) {
|
||||
return word;
|
||||
}
|
||||
try {
|
||||
if (!word.startsWith('http')) {
|
||||
word = 'https://' + word;
|
||||
}
|
||||
const url = new URL(word);
|
||||
if (!isValidURL(url)) {
|
||||
return word;
|
||||
}
|
||||
firstLink = firstLink || url.href;
|
||||
return elem('a', {
|
||||
href: url.href,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer'
|
||||
}, url.href.slice(url.protocol.length + 2));
|
||||
} catch (err) {
|
||||
return word;
|
||||
}
|
||||
})
|
||||
.reduce((acc, word) => [...acc, word, ' '], []);
|
||||
})
|
||||
.reduce((acc, words) => [...acc, ...words, elem('br')], []);
|
||||
|
||||
return [
|
||||
parsedContent,
|
||||
{firstLink}
|
||||
];
|
||||
};
|
||||
@ -0,0 +1,2 @@
|
||||
export {elem, parseTextContent} from './dom';
|
||||
export {bounce, dateTime, formatTime} from './time';
|
||||
@ -0,0 +1,76 @@
|
||||
import {elem} from './utils';
|
||||
|
||||
type Container = {
|
||||
id: string;
|
||||
view: HTMLSelectElement;
|
||||
content: HTMLDivElement;
|
||||
dom: {
|
||||
[eventId: string]: HTMLElement
|
||||
}
|
||||
};
|
||||
|
||||
const containers: Array<Container> = [];
|
||||
|
||||
let activeContainerIndex = -1;
|
||||
|
||||
export const getViewContent = () => containers[activeContainerIndex]?.content;
|
||||
|
||||
export const clearView = () => {
|
||||
// TODO: this is clears the current view, but it should probably do this for all views
|
||||
const domMap = containers[activeContainerIndex]?.dom;
|
||||
Object.keys(domMap).forEach(eventId => delete domMap[eventId]);
|
||||
getViewContent().replaceChildren();
|
||||
};
|
||||
|
||||
export const getViewElem = (eventId: string) => {
|
||||
return containers[activeContainerIndex]?.dom[eventId];
|
||||
};
|
||||
|
||||
export const setViewElem = (eventId: string, node: HTMLElement) => {
|
||||
const container = containers[activeContainerIndex];
|
||||
if (container) {
|
||||
container.dom[eventId] = node;
|
||||
}
|
||||
return node;
|
||||
};
|
||||
|
||||
const mainContainer = document.querySelector('main');
|
||||
|
||||
const getContainer = (route: string) => {
|
||||
let container = containers.find(c => c.id === route);
|
||||
if (container) {
|
||||
return container;
|
||||
}
|
||||
const content = elem('div', {className: 'content'});
|
||||
const view = elem('section', {className: 'view'}, [content]);
|
||||
mainContainer?.append(view);
|
||||
container = {id: route, view, content, dom: {}};
|
||||
containers.push(container);
|
||||
return container;
|
||||
};
|
||||
|
||||
export const view = (route: string) => {
|
||||
const active = containers[activeContainerIndex];
|
||||
active?.view.classList.remove('view-active');
|
||||
const nextContainer = getContainer(route);
|
||||
const nextContainerIndex = containers.indexOf(nextContainer);
|
||||
if (nextContainerIndex === activeContainerIndex) {
|
||||
return;
|
||||
}
|
||||
if (active) {
|
||||
nextContainer.view.classList.add('view-next');
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
nextContainer.view.classList.remove('view-next', 'view-prev');
|
||||
nextContainer.view.classList.add('view-active');
|
||||
});
|
||||
// // console.log(activeContainerIndex, nextContainerIndex);
|
||||
getViewContent()?.querySelectorAll('.view-prev').forEach(prev => {
|
||||
prev.classList.remove('view-prev');
|
||||
prev.classList.add('view-next');
|
||||
});
|
||||
active?.view.classList.add(nextContainerIndex < activeContainerIndex ? 'view-next' : 'view-prev');
|
||||
activeContainerIndex = nextContainerIndex;
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2021"
|
||||
},
|
||||
"exclude": ["node_modules", "dist", "**/*.test.ts"]
|
||||
}
|
||||
Loading…
Reference in New Issue