Skip to content

Commit

Permalink
Fix Tool, Media Type, Username and Load button vanishing on window re…
Browse files Browse the repository at this point in the history 
…size
  • Loading branch information
@Koopzington
Koopzington committed Jan 4, 2025
1 parent 5edb75c commit 0cc75fc
Show file tree
Hide file tree
Showing 8 changed files with 91 additions and 66 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
- Added more tooltips for date filters to inform about the possibility to use "*" as wildcards
- Fixed a CSS issue where tooltips weren't shown on top of other content
- Moved the feedback button from the Settings to the header/sidebar
- Fixed an issue where the Tool and Media type dropdown, Username field and (Re)Load button would vanish during window resizing

## 2025-01-03
- Add "Remove all values" buttons on Tagify instances
Expand Down
12 changes: 1 addition & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,22 +174,12 @@ <h2 class="card-title">Columns</h2>
AniTools</a>
<!-- Navbar nav -->
<form class="navbar-content form-inline d-none d-xl-flex">
<button class="dark-mode-toggler btn btn-action" type="button" aria-label="Toggle dark mode">
<button class="dark-mode-toggler btn btn-action" type="button" aria-label="Toggle dark mode">
<i class="fa" aria-hidden="true"></i>
</button>
<a class="btn" href="#feedback-modal">Issues/Feature requests?</a>
</form>
<form id="navsidebar-nav" class="navbar-content form-inline d-none d-sm-flex ml-auto">
<select id="tool-dropdown" class="form-control"></select>
<select class="media-type form-control">
<option value="ANIME">Anime</option>
<option value="MANGA">Manga</option>
<option value="CHARACTER">Character</option>
<option value="STAFF">Staff</option>
</select>
<input id="list" data-logic="AND" class="form-control d-none">
<input id="al-user" type="text" class="form-control" placeholder="AL Username" required="required">
<button id="load" class="btn btn-primary" type="button">Load</button>
<a class="btn btn-primary d-none d-xl-inline-flex align-items-center" href="#settings-modal">Settings</a>
<a class="btn btn-action d-none d-xl-inline-flex align-items-center justify-content-center" href="#info-modal">
<i class="fa fa-info-circle"></i>
Expand Down
33 changes: 22 additions & 11 deletions src/AniTools.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,38 @@ import BetterList from './Tools/BetterList'
import Filters from './Filters'
import AniList from './AniList'
import Mapper from './Tools/Mapper'
import { htmlToNode } from './commonLib'
import { mediaTypeSelect, userNameField, loadButton } from './GlobalElements'

class AniTools {
// Tools which can be loaded and unloaded
private readonly Tools: { BetterList: BetterList } = {}
private readonly AniList: AniList
private readonly toolSelect: HTMLSelectElement = htmlToNode('<select id="tool-dropdown" class="form-control"></select>')
private activeModule: string | undefined
private toolSelect: HTMLSelectElement

private readonly alertTemplate = `
private readonly alertElement: HTMLDivElement = htmlToNode(`
<div class="alert" role="alert">
<button class="close" data-dismiss="alert" type="button" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<span class="message"></span>
</div>`
</div>`.trim()
)

constructor () {
this.AniList = new AniList()
}

public readonly init = async (): Promise<void> => {
this.initALLoginButton()
this.handleInputs()
// Check for stored username and replace default value if it exists
const userName = localStorage.getItem('userName')
if (userName !== null) {
document.querySelector<HTMLInputElement>('#al-user')!.value = userName
userNameField.value = userName
}

this.toolSelect = document.querySelector('#tool-dropdown')!
halfmoon.onDOMContentLoaded()
document.querySelector('#toggle-sidebar-btn')!.addEventListener('click', () => { halfmoon.toggleSidebar() })
document.querySelectorAll('.dark-mode-toggler').forEach((e) => e.addEventListener('click', () => { halfmoon.toggleDarkMode() }))
Expand All @@ -61,6 +64,7 @@ class AniTools {
this.initToolSelect()
this.route()
this.initChangelog()
window.onresize = this.handleInputs
}

private readonly initALLoginButton = (): void => {
Expand Down Expand Up @@ -149,12 +153,20 @@ class AniTools {

// Function moving elements around depending on screen width
private readonly handleInputs = (): void => {
const movingElements = [
loadButton,
userNameField,
mediaTypeSelect,
this.toolSelect,
]

let targetContainer = document.querySelector('#navsidebar-sidebar')
if (window.innerWidth >= 768) {
return
targetContainer = document.querySelector('#navsidebar-nav')
}

Object.values(document.querySelector('#navsidebar-nav')!.children).forEach((e) => {
document.querySelector('#navsidebar-sidebar')!.insertAdjacentElement('beforeend', e)
movingElements.forEach((e) => {
targetContainer?.insertAdjacentElement('afterbegin', e)
})
}

Expand Down Expand Up @@ -215,10 +227,9 @@ class AniTools {
}

public readonly alert = (msg: string, type: string = '', autoremove: boolean = true) => {
let alert = document.createElement('div')
alert.innerHTML = this.alertTemplate
let alert = this.alertElement.cloneNode(true)
if (type.length > 0) {
alert.querySelector('.alert')!.classList.add('alert-' + type)
alert.classList.add('alert-' + type)
}
alert.querySelector('.message')!.innerHTML = msg
document.querySelector('#alert-container')?.insertAdjacentElement('beforeend', alert)
Expand Down
17 changes: 9 additions & 8 deletions src/Columns.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* global localStorage */

import { mediaTypeSelect } from "./GlobalElements"

class Columns {
private readonly mediaTypeSelect: HTMLSelectElement = document.querySelector('.media-type')!
private readonly anilistBaseLink: string = 'https://anilist.co/'
private readonly warning: HTMLElement = document.createElement('i')

Expand Down Expand Up @@ -251,7 +252,7 @@ class Columns {
data: 'title',
render: (data: string, _type, row: Media) => {
const coverData = row.coverImage ? 'style="--cover: url(\'' + row.coverImage + '\')"' : ''
return '<a target="_blank" href="' + this.anilistBaseLink + this.mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
return '<a target="_blank" href="' + this.anilistBaseLink + mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
}
},
titleEng: {
Expand All @@ -260,7 +261,7 @@ class Columns {
data: 'titleEng',
render: (data: string, _type, row: Media) => {
const coverData = row.coverImage ? 'style="--cover: url(\'' + row.coverImage + '\')"' : ''
return '<a target="_blank" href="' + this.anilistBaseLink + this.mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + (data ?? row.title) + '</a>'
return '<a target="_blank" href="' + this.anilistBaseLink + mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + (data ?? row.title) + '</a>'
}
},
titleNat: {
Expand All @@ -269,7 +270,7 @@ class Columns {
data: 'titleNat',
render: (data: string, _type, row: Media) => {
const coverData = row.coverImage ? 'style="--cover: url(\'' + row.coverImage + '\')"' : ''
return '<a target="_blank" href="' + this.anilistBaseLink + this.mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
return '<a target="_blank" href="' + this.anilistBaseLink + mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
}
},
rowNum: {
Expand Down Expand Up @@ -545,7 +546,7 @@ class Columns {
data: 'nameFirst',
render: (data: string, _type, row: CharacterStaff) => {
const coverData = row.coverImage ? 'style="--cover: url(\'' + row.coverImage + '\')"' : ''
return '<a target="_blank" href="' + this.anilistBaseLink + this.mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
return '<a target="_blank" href="' + this.anilistBaseLink + mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
}
},
nameMiddle: {
Expand All @@ -564,7 +565,7 @@ class Columns {
data: 'nameFull',
render: (data: string, _type, row: CharacterStaff) => {
const coverData = row.coverImage ? 'style="--cover: url(\'' + row.coverImage + '\')"' : ''
return '<a target="_blank" href="' + this.anilistBaseLink + this.mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
return '<a target="_blank" href="' + this.anilistBaseLink + mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
}
},
nameNative: {
Expand All @@ -573,7 +574,7 @@ class Columns {
data: 'nameNative',
render: (data: string, _type, row: CharacterStaff) => {
const coverData = row.coverImage ? 'style="--cover: url(\'' + row.coverImage + '\')"' : ''
return '<a target="_blank" href="' + this.anilistBaseLink + this.mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
return '<a target="_blank" href="' + this.anilistBaseLink + mediaTypeSelect.value.toLowerCase() + '/' + row.id.toString() + '"' + coverData + ' >' + data + '</a>'
}
},
nameAlternatives: {
Expand Down Expand Up @@ -705,7 +706,7 @@ class Columns {
}
})

if (cols.indexOf('episodes') > -1 && this.mediaTypeSelect.value === 'MANGA') {
if (cols.indexOf('episodes') > -1 && mediaTypeSelect.value === 'MANGA') {
columnDefs['episodes'].title = 'Chapters'
}

Expand Down
21 changes: 10 additions & 11 deletions src/Filters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import wNumb from 'wnumb'
import Inputmask from 'inputmask'
import Settings from './Settings'
import { handleResponse, htmlToNode } from './commonLib'
import { mediaTypeSelect, userNameField, loadButton } from './GlobalElements'

class Filters extends EventTarget {
private readonly filterContainer: HTMLDivElement = document!.createElement('div')!
private readonly mediaTypeSelect: HTMLSelectElement = document!.querySelector('.media-type')!
private readonly userNameField: HTMLInputElement = document!.querySelector('#al-user')!
private readonly AniTools: AniTools
private readonly ATSettings: Settings
private curFilterValues: any
Expand Down Expand Up @@ -498,21 +497,21 @@ class Filters extends EventTarget {
})

let lists: TagifyValue[] = [];
if (this.userNameField.value.length > 0 && this.filterMap[filterSet].includes('userList')) {
if (userNameField.value.length > 0 && this.filterMap[filterSet].includes('userList')) {
this.abortController && this.abortController.abort()
this.abortController = new AbortController()

let forceReload = ''
if (document.querySelector('#load')!.classList.contains('btn-secondary')) {
document.querySelector('#load')!.classList.remove('btn-secondary')
document.querySelector('#load')!.title = ''
if (loadButton.classList.contains('btn-secondary')) {
loadButton.classList.remove('btn-secondary')
loadButton.title = ''
forceReload = '&force_reload=true'
}

let response
try {
response = await this.AniTools.fetch(
'/userLists?user_name=' + this.userNameField.value + '&media_type=' + this.mediaTypeSelect.value + forceReload,
'/userLists?user_name=' + userNameField.value + '&media_type=' + mediaTypeSelect.value + forceReload,
{ signal: this.abortController.signal }
)
} catch (error) {
Expand All @@ -531,8 +530,8 @@ class Filters extends EventTarget {
json.warnings.forEach((e) => {
this.AniTools.alert(e.message, 'warning')
if (Object.hasOwn(e, 'type') && e.type === 'timeout') {
document.querySelector('#load')!.classList.add('btn-secondary')
document.querySelector('#load')!.title = 'Force reloading may take a bit of time.'
loadButton.classList.add('btn-secondary')
loadButton.title = 'Force reloading may take a bit of time.'
}
})
}
Expand Down Expand Up @@ -578,7 +577,7 @@ class Filters extends EventTarget {
this.addRange(filterName, filterDef)
break;
case 'userList':
if (this.userNameField.value.length === 0 || lists.length === 0) {
if (userNameField.value.length === 0 || lists.length === 0) {
return
}

Expand Down Expand Up @@ -659,7 +658,7 @@ class Filters extends EventTarget {
let response: Response
try {
response = await this.AniTools.fetch(
'/filterValues?media_type=' + this.mediaTypeSelect.value,
'/filterValues?media_type=' + mediaTypeSelect.value,
{ signal: this.abortController.signal }
)
} catch (error) {
Expand Down
24 changes: 24 additions & 0 deletions src/GlobalElements.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { htmlToNode } from "./commonLib"

const mediaTypeSelect: HTMLSelectElement = htmlToNode(`
<select class="media-type form-control">
<option value="ANIME">Anime</option>
<option value="MANGA">Manga</option>
<option value="CHARACTER">Character</option>
<option value="STAFF">Staff</option>
</select>
`.trim())

const userNameField: HTMLInputElement = htmlToNode(
`<input id="al-user" type="text" class="form-control" placeholder="AL Username" required="required">`
)

const loadButton: HTMLButtonElement = htmlToNode(
`<button id="load" class="btn btn-primary" type="button">Load</button>`
)

export {
mediaTypeSelect,
userNameField,
loadButton,
}
Loading

0 comments on commit 0cc75fc

Please sign in to comment.