PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-27 05:37:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #286 from philomena-dev/ts-tags

Browse source 
Convert tag dropdown scripts to TypeScript
This commit is contained in:
liamwhite 2024-06-12 00:10:51 -04:00 committed by GitHub
commit 0f7c399b18
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/js/tags.js → assets/js/tags.ts
View file

@ -2,23 +2,28 @@
* Tags Dropdown
*/
import { showEl, hideEl } from './utils/dom';
import { $$, showEl, hideEl } from './utils/dom';
import { assertNotUndefined } from './utils/assert';
import '../types/ujs';
function addTag(tagId, list) {
type TagDropdownActionFunction = () => void;
type TagDropdownActionList = Record<string, TagDropdownActionFunction>;
function addTag(tagId: number, list: number[]) {
list.push(tagId);
}
function removeTag(tagId, list) {
function removeTag(tagId: number, list: number[]) {
list.splice(list.indexOf(tagId), 1);
}
function createTagDropdown(tag) {
function createTagDropdown(tag: HTMLSpanElement) {
const { userIsSignedIn, userCanEditFilter, watchedTagList, spoileredTagList, hiddenTagList } = window.booru;
const [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = [].slice.call(tag.querySelectorAll('.tag__dropdown__link'));
const [ unwatched, watched, spoilered, hidden ] = [].slice.call(tag.querySelectorAll('.tag__state'));
const tagId = parseInt(tag.dataset.tagId, 10);
const [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = $$<HTMLElement>('.tag__dropdown__link', tag);
const [ unwatched, watched, spoilered, hidden ] = $$<HTMLSpanElement>('.tag__state', tag);
const tagId = parseInt(assertNotUndefined(tag.dataset.tagId), 10);
const actions = {
const actions: TagDropdownActionList = {
unwatch() { hideEl(unwatch, watched); showEl(watch, unwatched); removeTag(tagId, watchedTagList); },
watch() { hideEl(watch, unwatched); showEl(unwatch, watched); addTag(tagId, watchedTagList); },
@ -51,11 +56,14 @@ function createTagDropdown(tag) {
if (userIsSignedIn &&
!userCanEditFilter) showEl(filter);
tag.addEventListener('fetchcomplete', event => actions[event.target.dataset.tagAction]());
tag.addEventListener('fetchcomplete', event => {
const act = assertNotUndefined(event.target.dataset.tagAction);
actions[act]();
});
}
function initTagDropdown() {
[].forEach.call(document.querySelectorAll('.tag.dropdown'), createTagDropdown);
export function initTagDropdown() {
for (const tagSpan of $$<HTMLSpanElement>('.tag.dropdown')) {
createTagDropdown(tagSpan);
}
}
export { initTagDropdown };

2
lib/philomena_web/templates/tag/_tag.html.slime
View file

@ -1,5 +1,5 @@
span.tag.dropdown data-tag-category="#{@tag.category}" data-tag-id="#{@tag.id}" data-tag-name="#{@tag.name}" data-tag-slug="#{@tag.slug}"
/ The order of tag states and dropdown links is important for tags.js
/ The order of tag states and dropdown links is important for tags.ts
span
span.tag__state.hidden title="Unwatched"
| +