PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-30 14:57: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 * 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); list.push(tagId);
} }
function removeTag(tagId, list) { function removeTag(tagId: number, list: number[]) {
list.splice(list.indexOf(tagId), 1); list.splice(list.indexOf(tagId), 1);
} }
function createTagDropdown(tag) { function createTagDropdown(tag: HTMLSpanElement) {
const { userIsSignedIn, userCanEditFilter, watchedTagList, spoileredTagList, hiddenTagList } = window.booru; 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 [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = $$<HTMLElement>('.tag__dropdown__link', tag);
const [ unwatched, watched, spoilered, hidden ] = [].slice.call(tag.querySelectorAll('.tag__state')); const [ unwatched, watched, spoilered, hidden ] = $$<HTMLSpanElement>('.tag__state', tag);
const tagId = parseInt(tag.dataset.tagId, 10); const tagId = parseInt(assertNotUndefined(tag.dataset.tagId), 10);
const actions = { const actions: TagDropdownActionList = {
unwatch() { hideEl(unwatch, watched); showEl(watch, unwatched); removeTag(tagId, watchedTagList); }, unwatch() { hideEl(unwatch, watched); showEl(watch, unwatched); removeTag(tagId, watchedTagList); },
watch() { hideEl(watch, unwatched); showEl(unwatch, watched); addTag(tagId, watchedTagList); }, watch() { hideEl(watch, unwatched); showEl(unwatch, watched); addTag(tagId, watchedTagList); },
@ -51,11 +56,14 @@ function createTagDropdown(tag) {
if (userIsSignedIn && if (userIsSignedIn &&
!userCanEditFilter) showEl(filter); !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() { export function initTagDropdown() {
[].forEach.call(document.querySelectorAll('.tag.dropdown'), createTagDropdown); 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}" 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
span.tag__state.hidden title="Unwatched" span.tag__state.hidden title="Unwatched"
| + | +