mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-30 14:57:59 +01:00
Merge pull request #282 from philomena-dev/ts-galleries
Convert gallery rearrangement scripts to TypeScript
This commit is contained in:
commit
cb4a651d18
2 changed files with 17 additions and 8 deletions
|
@ -3,6 +3,7 @@
|
|||
*/
|
||||
|
||||
import { arraysEqual } from './utils/array';
|
||||
import { assertNotNull, assertNotUndefined } from './utils/assert';
|
||||
import { $, $$ } from './utils/dom';
|
||||
import { initDraggables } from './utils/draggable';
|
||||
import { fetchJson } from './utils/requests';
|
||||
|
@ -10,17 +11,18 @@ import { fetchJson } from './utils/requests';
|
|||
export function setupGalleryEditing() {
|
||||
if (!$('.rearrange-button')) return;
|
||||
|
||||
const [ rearrangeEl, saveEl ] = $$('.rearrange-button');
|
||||
const sortableEl = $('#sortable');
|
||||
const containerEl = $('.js-resizable-media-container');
|
||||
const [ rearrangeEl, saveEl ] = $$<HTMLElement>('.rearrange-button');
|
||||
const sortableEl = assertNotNull($<HTMLDivElement>('#sortable'));
|
||||
const containerEl = assertNotNull($<HTMLDivElement>('.js-resizable-media-container'));
|
||||
|
||||
// Copy array
|
||||
let oldImages = window.booru.galleryImages.slice();
|
||||
let newImages = window.booru.galleryImages.slice();
|
||||
const galleryImages = assertNotUndefined(window.booru.galleryImages);
|
||||
let oldImages = galleryImages.slice();
|
||||
let newImages = galleryImages.slice();
|
||||
|
||||
initDraggables();
|
||||
|
||||
$$('.media-box', containerEl).forEach(i => i.draggable = true);
|
||||
$$<HTMLDivElement>('.media-box', containerEl).forEach(i => i.draggable = true);
|
||||
|
||||
rearrangeEl.addEventListener('click', () => {
|
||||
sortableEl.classList.add('editing');
|
||||
|
@ -31,12 +33,15 @@ export function setupGalleryEditing() {
|
|||
sortableEl.classList.remove('editing');
|
||||
containerEl.classList.remove('drag-container');
|
||||
|
||||
newImages = $$('.image-container', containerEl).map(i => parseInt(i.dataset.imageId, 10));
|
||||
newImages = $$<HTMLDivElement>('.image-container', containerEl)
|
||||
.map(i => parseInt(assertNotUndefined(i.dataset.imageId), 10));
|
||||
|
||||
// If nothing changed, don't bother.
|
||||
if (arraysEqual(newImages, oldImages)) return;
|
||||
|
||||
fetchJson('PATCH', saveEl.dataset.reorderPath, {
|
||||
const reorderPath = assertNotUndefined(saveEl.dataset.reorderPath);
|
||||
|
||||
fetchJson('PATCH', reorderPath, {
|
||||
image_ids: newImages,
|
||||
|
||||
// copy the array again so that we have the newly updated set
|
4
assets/types/booru-object.d.ts
vendored
4
assets/types/booru-object.d.ts
vendored
|
@ -69,6 +69,10 @@ interface BooruObject {
|
|||
* Indicates whether sensitive staff-only info should be hidden or not.
|
||||
*/
|
||||
hideStaffTools: string;
|
||||
/**
|
||||
* List of image IDs in the current gallery.
|
||||
*/
|
||||
galleryImages?: number[];
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
|
Loading…
Reference in a new issue