szurubooru/client/js/controls/post_edit_sidebar_control.js

'use strict';

const api = require('../api.js');
const events = require('../events.js');
const misc = require('../util/misc.js');
const views = require('../util/views.js');
const Note = require('../models/note.js');
const Point = require('../models/point.js');
const TagInputControl = require('./tag_input_control.js');
const ExpanderControl = require('../controls/expander_control.js');
const FileDropperControl = require('../controls/file_dropper_control.js');

const template = views.getTemplate('post-edit-sidebar');

class PostEditSidebarControl extends events.EventTarget {
    constructor(hostNode, post, postContentControl, postNotesOverlayControl) {
        super();
        this._hostNode = hostNode;
        this._post = post;
        this._postContentControl = postContentControl;
        this._postNotesOverlayControl = postNotesOverlayControl;
        this._newPostContent = null;

        this._postNotesOverlayControl.switchToPassiveEdit();

        views.replaceContent(this._hostNode, template({
            post: this._post,
            enableSafety: api.safetyEnabled(),
            hasClipboard: document.queryCommandSupported('copy'),
            canEditPostSafety: api.hasPrivilege('posts:edit:safety'),
            canEditPostSource: api.hasPrivilege('posts:edit:source'),
            canEditPostTags: api.hasPrivilege('posts:edit:tags'),
            canEditPostRelations: api.hasPrivilege('posts:edit:relations'),
            canEditPostNotes: api.hasPrivilege('posts:edit:notes') &&
                post.type !== 'video' &&
                post.type !== 'flash',
            canEditPostFlags: api.hasPrivilege('posts:edit:flags'),
            canEditPostContent: api.hasPrivilege('posts:edit:content'),
            canEditPostThumbnail: api.hasPrivilege('posts:edit:thumbnail'),
            canEditPostSource : api.hasPrivilege('posts:edit:source'),
            canCreateAnonymousPosts: api.hasPrivilege('posts:create:anonymous'),
            canDeletePosts: api.hasPrivilege('posts:delete'),
            canFeaturePosts: api.hasPrivilege('posts:feature'),
            canMergePosts: api.hasPrivilege('posts:merge'),
        }));

        new ExpanderControl(
            'post-info',
            'Basic info',
            this._hostNode.querySelectorAll('.safety, .relations, .flags, .post-source'));
        this._tagsExpander = new ExpanderControl(
            'post-tags',
            `Tags (${this._post.tags.length})`,
            this._hostNode.querySelectorAll('.tags'));
        this._notesExpander = new ExpanderControl(
            'post-notes',
            'Notes',
            this._hostNode.querySelectorAll('.notes'));
        new ExpanderControl(
            'post-content',
            'Content',
            this._hostNode.querySelectorAll('.post-content, .post-thumbnail'));
        new ExpanderControl(
            'post-management',
            'Management',
            this._hostNode.querySelectorAll('.management'));

        this._syncExpanderTitles();

        if (this._formNode) {
            this._formNode.addEventListener('submit', e => this._evtSubmit(e));
        }

        if (this._tagInputNode) {
            this._tagControl = new TagInputControl(
                this._tagInputNode, post.tags);
        }

        if (this._contentInputNode) {
            this._contentFileDropper = new FileDropperControl(
                this._contentInputNode, {
                    allowUrls: true,
                    lock: true,
                    urlPlaceholder: '...or paste an URL here.'});
            this._contentFileDropper.addEventListener('fileadd', e => {
                this._newPostContent = e.detail.files[0];
            });
            this._contentFileDropper.addEventListener('urladd', e => {
                this._newPostContent = e.detail.urls[0];
            });
        }

        if (this._thumbnailInputNode) {
            this._thumbnailFileDropper = new FileDropperControl(
                this._thumbnailInputNode, {lock: true});
            this._thumbnailFileDropper.addEventListener('fileadd', e => {
                this._newPostThumbnail = e.detail.files[0];
                this._thumbnailRemovalLinkNode.style.display = 'block';
            });
        }

        if (this._thumbnailRemovalLinkNode) {
            this._thumbnailRemovalLinkNode.addEventListener(
                'click', e => this._evtRemoveThumbnailClick(e));
            this._thumbnailRemovalLinkNode.style.display =
                this._post.hasCustomThumbnail ? 'block' : 'none';
        }

        if (this._addNoteLinkNode) {
            this._addNoteLinkNode.addEventListener(
                'click', e => this._evtAddNoteClick(e));
        }

        if (this._copyNotesLinkNode) {
            this._copyNotesLinkNode.addEventListener(
                'click', e => this._evtCopyNotesClick(e));
        }

        if (this._pasteNotesLinkNode) {
            this._pasteNotesLinkNode.addEventListener(
                'click', e => this._evtPasteNotesClick(e));
        }

        if (this._deleteNoteLinkNode) {
            this._deleteNoteLinkNode.addEventListener(
                'click', e => this._evtDeleteNoteClick(e));
        }

        if (this._featureLinkNode) {
            this._featureLinkNode.addEventListener(
                'click', e => this._evtFeatureClick(e));
        }

        if (this._mergeLinkNode) {
            this._mergeLinkNode.addEventListener(
                'click', e => this._evtMergeClick(e));
        }

        if (this._deleteLinkNode) {
            this._deleteLinkNode.addEventListener(
                'click', e => this._evtDeleteClick(e));
        }

        this._postNotesOverlayControl.addEventListener(
            'blur', e => this._evtNoteBlur(e));

        this._postNotesOverlayControl.addEventListener(
            'focus', e => this._evtNoteFocus(e));

        this._post.addEventListener(
            'changeContent', e => this._evtPostContentChange(e));

        this._post.addEventListener(
            'changeThumbnail', e => this._evtPostThumbnailChange(e));

        if (this._formNode) {
            const inputNodes = this._formNode.querySelectorAll(
                'input, textarea');
            for (let node of inputNodes) {
                node.addEventListener(
                    'change',
                    e => this.dispatchEvent(new CustomEvent('change')));
            }
            this._postNotesOverlayControl.addEventListener(
                'change',
                e => this.dispatchEvent(new CustomEvent('change')));
        }

        for (let eventType of ['add', 'remove']) {
            this._post.notes.addEventListener(eventType, e => {
                this._syncExpanderTitles();
            });
        }

        this._tagControl.addEventListener(
            'change', e => {
                this.dispatchEvent(new CustomEvent('change'));
                this._syncExpanderTitles();
            });

        if (this._noteTextareaNode) {
            this._noteTextareaNode.addEventListener(
                'change', e => this._evtNoteTextChangeRequest(e));
        }
    }

    _syncExpanderTitles() {
        this._notesExpander.title = `Notes (${this._post.notes.length})`;
        this._tagsExpander.title = `Tags (${this._post.tags.length})`;
    }

    _evtPostContentChange(e) {
        this._contentFileDropper.reset();
    }

    _evtPostThumbnailChange(e) {
        this._thumbnailFileDropper.reset();
    }

    _evtRemoveThumbnailClick(e) {
        e.preventDefault();
        this._thumbnailFileDropper.reset();
        this._newPostThumbnail = null;
        this._thumbnailRemovalLinkNode.style.display = 'none';
    }

    _evtFeatureClick(e) {
        e.preventDefault();
        if (confirm('Are you sure you want to feature this post?')) {
            this.dispatchEvent(new CustomEvent('feature', {
                detail: {
                    post: this._post,
                },
            }));
        }
    }

    _evtMergeClick(e) {
        e.preventDefault();
        this.dispatchEvent(new CustomEvent('merge', {
            detail: {
                post: this._post,
            },
        }));
    }

    _evtDeleteClick(e) {
        e.preventDefault();
        if (confirm('Are you sure you want to delete this post?')) {
            this.dispatchEvent(new CustomEvent('delete', {
                detail: {
                    post: this._post,
                },
            }));
        }
    }

    _evtNoteTextChangeRequest(e) {
        if (this._editedNote) {
            this._editedNote.text = this._noteTextareaNode.value;
        }
    }

    _evtNoteFocus(e) {
        this._editedNote = e.detail.note;
        this._addNoteLinkNode.classList.remove('inactive');
        this._deleteNoteLinkNode.classList.remove('inactive');
        this._noteTextareaNode.removeAttribute('disabled');
        this._noteTextareaNode.value = e.detail.note.text;
    }

    _evtNoteBlur(e) {
        this._evtNoteTextChangeRequest(null);
        this._addNoteLinkNode.classList.remove('inactive');
        this._deleteNoteLinkNode.classList.add('inactive');
        this._noteTextareaNode.blur();
        this._noteTextareaNode.setAttribute('disabled', 'disabled');
        this._noteTextareaNode.value = '';
    }

    _evtAddNoteClick(e) {
        e.preventDefault();
        if (e.target.classList.contains('inactive')) {
            return;
        }
        this._addNoteLinkNode.classList.add('inactive');
        this._postNotesOverlayControl.switchToDrawing();
    }

    _evtCopyNotesClick(e) {
        e.preventDefault();
        let textarea = document.createElement('textarea');
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        textarea.value = JSON.stringify([...this._post.notes].map(note => ({
            polygon: [...note.polygon].map(
                point => [point.x, point.y]),
            text: note.text,
        })));
        document.body.appendChild(textarea);
        textarea.select();

        let success = false;
        try {
            success = document.execCommand('copy');
        } catch (err) {
        }
        textarea.blur();
        document.body.removeChild(textarea);
        alert(success
            ? 'Notes copied to clipboard.'
            : 'Failed to copy the text to clipboard. Sorry.');
    }

    _evtPasteNotesClick(e) {
        e.preventDefault();
        const text = window.prompt(
            'Please enter the exported notes snapshot:');
        if (!text) {
            return;
        }
        const notesObj = JSON.parse(text);
        this._post.notes.clear();
        for (let noteObj of notesObj) {
            let note = new Note();
            for (let pointObj of noteObj.polygon) {
                note.polygon.add(new Point(pointObj[0], pointObj[1]));
            }
            note.text = noteObj.text;
            this._post.notes.add(note);
        }
    }

    _evtDeleteNoteClick(e) {
        e.preventDefault();
        if (e.target.classList.contains('inactive')) {
            return;
        }
        this._post.notes.remove(this._editedNote);
        this._postNotesOverlayControl.switchToPassiveEdit();
    }

    _evtSubmit(e) {
        e.preventDefault();
        this.dispatchEvent(new CustomEvent('submit', {
            detail: {
                post: this._post,

                safety: this._safetyButtonNodes.length ?
                    Array.from(this._safetyButtonNodes)
                        .filter(node => node.checked)[0]
                        .value.toLowerCase() :
                    undefined,

                flags: this._videoFlags,

                tags: this._tagInputNode ?
                    misc.splitByWhitespace(this._tagInputNode.value) :
                    undefined,

                relations: this._relationsInputNode ?
                    misc.splitByWhitespace(this._relationsInputNode.value)
                        .map(x => parseInt(x)) :
                    undefined,

                content: this._newPostContent ?
                    this._newPostContent :
                    undefined,

                thumbnail: this._newPostThumbnail !== undefined ?
                    this._newPostThumbnail :
                    undefined,

                source: this._sourceInputNode ?
                    this._sourceInputNode.value :
                    undefined,
            },
        }));
    }

    get _formNode() {
        return this._hostNode.querySelector('form');
    }

    get _submitButtonNode() {
        return this._hostNode.querySelector('.submit');
    }

    get _safetyButtonNodes() {
        return this._formNode.querySelectorAll('.safety input');
    }

    get _tagInputNode() {
        return this._formNode.querySelector('.tags input');
    }

    get _loopVideoInputNode() {
        return this._formNode.querySelector('.flags input[name=loop]');
    }

    get _soundVideoInputNode() {
        return this._formNode.querySelector('.flags input[name=sound]');
    }

    get _videoFlags() {
        if (!this._loopVideoInputNode) return undefined;
        let ret = [];
        if (this._loopVideoInputNode.checked) ret.push('loop');
        if (this._soundVideoInputNode.checked) ret.push('sound');
        return ret;
    }

    get _relationsInputNode() {
        return this._formNode.querySelector('.relations input');
    }

    get _contentInputNode() {
        return this._formNode.querySelector('.post-content .dropper-container');
    }

    get _thumbnailInputNode() {
        return this._formNode.querySelector(
            '.post-thumbnail .dropper-container');
    }

    get _thumbnailRemovalLinkNode() {
        return this._formNode.querySelector('.post-thumbnail a');
    }

    get _sourceInputNode() {
        return this._formNode.querySelector('.post-source input');
    }

    get _featureLinkNode() {
        return this._formNode.querySelector('.management .feature');
    }

    get _mergeLinkNode() {
        return this._formNode.querySelector('.management .merge');
    }

    get _deleteLinkNode() {
        return this._formNode.querySelector('.management .delete');
    }

    get _addNoteLinkNode() {
        return this._formNode.querySelector('.notes .add');
    }

    get _copyNotesLinkNode() {
        return this._formNode.querySelector('.notes .copy');
    }

    get _pasteNotesLinkNode() {
        return this._formNode.querySelector('.notes .paste');
    }

    get _deleteNoteLinkNode() {
        return this._formNode.querySelector('.notes .delete');
    }

    get _noteTextareaNode() {
        return this._formNode.querySelector('.notes textarea');
    }

    enableForm() {
        views.enableForm(this._formNode);
    }

    disableForm() {
        views.disableForm(this._formNode);
    }

    clearMessages() {
        views.clearMessages(this._hostNode);
    }

    showSuccess(message) {
        views.showSuccess(this._hostNode, message);
    }

    showError(message) {
        views.showError(this._hostNode, message);
    }
};

module.exports = PostEditSidebarControl;