opengist/public/main.ts

205 lines
7.2 KiB
TypeScript
Raw Normal View History

2023-09-02 22:30:57 +00:00
import './style.scss';
2023-09-19 13:48:19 +00:00
import './favicon-32.png';
import './opengist.svg';
import './default.png';
2023-09-05 13:22:24 +00:00
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
2024-05-04 22:24:25 +00:00
import 'dayjs/locale/cs';
import 'dayjs/locale/de';
import 'dayjs/locale/es';
import 'dayjs/locale/fr';
import 'dayjs/locale/hu';
import 'dayjs/locale/pt';
import 'dayjs/locale/ru';
import 'dayjs/locale/zh';
2023-09-05 13:22:24 +00:00
import localizedFormat from 'dayjs/plugin/localizedFormat';
2023-04-03 21:37:54 +00:00
2023-09-05 13:22:24 +00:00
dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
2024-05-04 22:24:25 +00:00
dayjs.locale(window.opengist_locale || 'en');
2023-05-27 11:58:08 +00:00
2023-06-01 17:04:12 +00:00
document.addEventListener('DOMContentLoaded', () => {
2023-05-27 11:58:08 +00:00
const themeMenu = document.getElementById('theme-menu')!;
document.getElementById('light-mode')!.onclick = (e) => {
e.stopPropagation()
localStorage.theme = 'light';
themeMenu.classList.toggle('hidden');
2023-09-02 22:30:57 +00:00
// @ts-ignore
2023-05-27 11:58:08 +00:00
checkTheme()
}
document.getElementById('dark-mode')!.onclick = (e) => {
e.stopPropagation()
localStorage.theme = 'dark';
themeMenu.classList.toggle('hidden');
2023-09-02 22:30:57 +00:00
// @ts-ignore
2023-05-27 11:58:08 +00:00
checkTheme()
}
document.getElementById('system-mode')!.onclick = (e) => {
e.stopPropagation()
localStorage.removeItem('theme');
themeMenu.classList.toggle('hidden');
2023-09-02 22:30:57 +00:00
// @ts-ignore
2023-05-27 11:58:08 +00:00
checkTheme();
}
document.getElementById('theme-btn')!.onclick = () => {
2023-05-27 11:58:08 +00:00
themeMenu.classList.toggle('hidden');
}
document.getElementById('user-btn')?.addEventListener("click" , () => {
2023-06-21 16:19:17 +00:00
document.getElementById('user-menu').classList.toggle('hidden');
})
2023-04-03 21:37:54 +00:00
document.querySelectorAll('.moment-timestamp').forEach((e: HTMLElement) => {
2023-09-05 13:22:24 +00:00
e.title = dayjs.unix(parseInt(e.innerHTML)).format('LLLL');
e.innerHTML = dayjs.unix(parseInt(e.innerHTML)).fromNow();
2023-04-03 21:37:54 +00:00
});
document.querySelectorAll('.moment-timestamp-date').forEach((e: HTMLElement) => {
2023-09-05 13:22:24 +00:00
e.innerHTML = dayjs.unix(parseInt(e.innerHTML)).format('DD/MM/YYYY HH:mm');
2023-04-03 21:37:54 +00:00
});
document.querySelectorAll('form').forEach((form: HTMLFormElement) => {
form.onsubmit = () => {
form.querySelectorAll('input[type=datetime-local]').forEach((input: HTMLInputElement) => {
console.log(dayjs(input.value).unix());
const hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = 'expiredAtUnix'
hiddenInput.value = dayjs(input.value).unix().toString();
form.appendChild(hiddenInput);
});
return true;
};
})
2023-04-03 21:37:54 +00:00
const rev = document.querySelector<HTMLElement>('.revision-text');
if (rev) {
const fullRev = rev.innerHTML;
const smallRev = fullRev.substring(0, 7);
rev.innerHTML = smallRev;
rev.onmouseover = () => {
rev.innerHTML = fullRev;
};
rev.onmouseout = () => {
rev.innerHTML = smallRev;
};
}
const colorhash = () => {
Array.from(document.querySelectorAll('.table-code .selected')).forEach((el) => el.classList.remove('selected'));
const lineEl = document.querySelector<HTMLElement>(location.hash);
if (lineEl) {
const nextSibling = lineEl.nextSibling;
if (nextSibling instanceof HTMLElement) {
nextSibling.classList.add('selected');
}
}
};
if (location.hash) {
colorhash();
}
window.onhashchange = colorhash;
document.getElementById('main-menu-button')!.onclick = () => {
document.getElementById('mobile-menu')!.classList.toggle('hidden');
};
const tabs = document.getElementById('gist-tabs');
if (tabs) {
tabs.onchange = (e: Event) => {
const target = e.target as HTMLSelectElement;
window.location.href = target.selectedOptions[0].dataset.url || '';
};
}
const gistmenutoggle = document.getElementById('gist-menu-toggle');
if (gistmenutoggle) {
const gistmenucopy = document.getElementById('gist-menu-copy')!;
const gistmenubuttoncopy = document.getElementById('gist-menu-button-copy')!;
const gistmenuinput = document.getElementById('gist-menu-input') as HTMLInputElement;
const gistmenutitle = document.getElementById('gist-menu-title')!;
gistmenutitle.textContent = gistmenucopy.children[0].firstChild!.textContent;
gistmenuinput.value = (gistmenucopy.children[0] as HTMLElement).dataset.link || '';
gistmenutoggle.onclick = () => {
gistmenucopy.classList.toggle('hidden');
};
for (const item of Array.from(gistmenucopy.children)) {
(item as HTMLElement).onclick = () => {
gistmenutitle.textContent = item.firstChild!.textContent;
gistmenuinput.value = (item as HTMLElement).dataset.link || '';
gistmenucopy.classList.toggle('hidden');
};
}
gistmenubuttoncopy.onclick = () => {
const text = gistmenuinput.value;
navigator.clipboard.writeText(text).catch((err) => {
console.error('Could not copy text: ', err);
});
};
}
const sortgist = document.getElementById('sort-gists-button');
if (sortgist) {
sortgist.onclick = () => {
document.getElementById('sort-gists-dropdown')!.classList.toggle('hidden');
};
}
2023-09-22 15:26:09 +00:00
document.getElementById('language-btn')!.onclick = () => {
document.getElementById('language-list')!.classList.toggle('hidden');
};
2023-04-03 21:37:54 +00:00
document.querySelectorAll('.copy-gist-btn').forEach((e: HTMLElement) => {
e.onclick = () => {
navigator.clipboard.writeText(e.parentNode!.parentNode!.querySelector<HTMLElement>('.gist-content')!.textContent || '').catch((err) => {
2023-04-03 21:37:54 +00:00
console.error('Could not copy text: ', err);
});
};
});
const gistmenuvisibility = document.getElementById('gist-menu-visibility');
if (gistmenuvisibility) {
let submitgistbutton = (document.getElementById('submit-gist') as HTMLInputElement);
document.getElementById('gist-visibility-menu-button')!.onclick = () => {
gistmenuvisibility!.classList.toggle('hidden');
}
const lastVisibility = localStorage.getItem('visibility');
Array.from(document.querySelectorAll('.gist-visibility-option')).forEach((el) => {
const visibility = (el as HTMLElement).dataset.visibility || '0';
(el as HTMLElement).onclick = () => {
2023-09-22 15:26:09 +00:00
submitgistbutton.textContent = (el as HTMLElement).dataset.btntext;
submitgistbutton!.value = visibility;
localStorage.setItem('visibility', visibility);
gistmenuvisibility!.classList.add('hidden');
}
if (lastVisibility === visibility) {
(el as HTMLElement).click();
}
});
}
2024-01-04 02:38:15 +00:00
const searchinput = document.getElementById('search') as HTMLInputElement;
searchinput.addEventListener('focusin', () => {
document.getElementById('search-help').classList.remove('hidden');
})
searchinput.addEventListener('focusout', (e) => {
document.getElementById('search-help').classList.add('hidden');
})
2023-04-03 21:37:54 +00:00
});