BookStack/resources/assets/js/components/image-picker.js

class ImagePicker {

    constructor(elem) {
        this.elem = elem;
        this.imageElem = elem.querySelector('img');
        this.input = elem.querySelector('input');

        this.isUsingIds = elem.getAttribute('data-current-id') !== '';
        this.isResizing = elem.getAttribute('data-resize-height') && elem.getAttribute('data-resize-width');
        this.isResizeCropping = elem.getAttribute('data-resize-crop') !== '';

        let selectButton = elem.querySelector('button[data-action="show-image-manager"]');
        selectButton.addEventListener('click', this.selectImage.bind(this));

        let resetButton = elem.querySelector('button[data-action="reset-image"]');
        resetButton.addEventListener('click', this.reset.bind(this));

        let removeButton = elem.querySelector('button[data-action="remove-image"]');
        if (removeButton) {
            removeButton.addEventListener('click', this.removeImage.bind(this));
        }
    }

    selectImage() {
        window.ImageManager.show(image => {
            if (!this.isResizing) {
                this.setImage(image);
                return;
            }

            let requestString = '/images/thumb/' + image.id + '/' + this.elem.getAttribute('data-resize-width') + '/' + this.elem.getAttribute('data-resize-height') + '/' + (this.isResizeCropping ? 'true' : 'false');

            window.$http.get(window.baseUrl(requestString)).then(resp => {
                image.url = resp.data.url;
                this.setImage(image);
            });
        });
    }

    reset() {
        this.setImage({id: 0, url: this.elem.getAttribute('data-default-image')});
    }

    setImage(image) {
        this.imageElem.src = image.url;
        this.input.value = this.isUsingIds ? image.id : image.url;
        this.imageElem.classList.remove('none');
    }

    removeImage() {
        this.imageElem.src = this.elem.getAttribute('data-default-image');
        this.imageElem.classList.add('none');
        this.input.value = 'none';
    }

}

export default ImagePicker;