comindware.core.ui/src/form/editors/impl/document/views/ImageBubbleItemView.ts

Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.

import dropdown from 'dropdown';
import template from '../templates/imageBubbleItem.html';
import DocumentItemController from '../controllers/DocumentItemController';
import TooltipPanelView from './TooltipPanelView';
import Marionette from 'backbone.marionette';
import Backbone from 'backbone';

const tooltipButtonTemplate = `
    <span class="image-item__tooltip-btn" title="{{localize 'CORE.FORM.EDITORS.DOCUMENT.ACTIONS'}}">
        <i class="{{iconPrefixer 'ellipsis-v'}}"></i>
    </span>
`;

const tooltipButtonView = Marionette.View.extend({
    template: Handlebars.compile(tooltipButtonTemplate)
});

const actions = {
    DOWNLOAD: 'download',
    REMOVE: 'remove'
};

export default Marionette.View.extend({
    initialize(options: { attachmentsController: any }) {
        this.revisionCollection = new Backbone.Collection();
        const controller = new DocumentItemController({ view: this });
        this.reqres = controller.reqres;
        this.readonly = this.options.readonly;
        this.displayFormat = this.options.displayFormat;
        this.allowDelete = this.options.allowDelete;
        this.editorHasHistory = this.options.editorHasHistory;
        this.attachmentsController = options.attachmentsController;
        this.listenTo(this.model, 'attachments:download', this.__download);
    },

    regions: {
        tooltipButtonRegion: '.js-btn-tooltip-region'
    },

    tagName: 'li',
    className() {
        return `image-item l-list__item ${this.__showAsPicture() ? 'image-item_picture' : ''}`;
    },

    template: Handlebars.compile(template),

    templateContext() {
        const { text, name, creator, creationDate } = this.model.toJSON();
        return {
            text: text || name,
            showAsPicture: this.__showAsPicture(),
            creator,
            creationDate
        };
    },

    ui: {
        remove: '.js-delete-button',
        revise: '.js-revise-button-region',
        link: '.js-link',
        downloadButton: '.js-download-button',
        edit: '.js-document-edit-btn'
    },

    triggers: {
        'click @ui.remove': 'remove'
    },

    events: {
        'click @ui.revise': '__getDocumentRevision',
        'click @ui.link': '__onLinkClick'
    },

    modelEvents: {
        'change:isLoading': 'render'
    },

    onRender() {
        const tooltipView = new dropdown.factory.createDropdown({
            buttonView: tooltipButtonView,
            buttonViewOptions: {
                model: new Backbone.Model()
            },
            panelView: TooltipPanelView,
            panelViewOptions: {
                collection: new Backbone.Collection(),
                clickHandler: (actionId: string) => tooltipView.trigger('item:execute', actionId),
                reqres: this.reqres,
                model: this.model,
                readonly: this.readonly,
                allowDelete: this.allowDelete,
                editorHasHistory: this.editorHasHistory
            },
            panelOffsetLeft: -171,
            panelMinWidth: '180px',
            autoOpen: true
        });

        this.showChildView('tooltipButtonRegion', tooltipView);

        tooltipView.on('click', (event: MouseEvent) => {
            event.stopPropagation();
            event.preventDefault();
        });
        tooltipView.on('item:execute', (actionId: string) => {
            switch (actionId) {
                case actions.DOWNLOAD:
                    this.__isDownload = true;
                    this.ui.link.get(0).click();
                    break;
                case actions.REMOVE:
                    this.model.trigger('attachments:remove', this.model);
                    break;
                default:
                    break;
            }
        });
    },

    __onLinkClick(linkDownloadEvent: MouseEvent) {
        if (this.__isDownload) {
            this.__isDownload = false;
            this.__executeDownload(linkDownloadEvent);
            return;
        }

        if (this.attachmentsController.isModelHasPreview(this.model)) {
            this.attachmentsController.showGallery(this.model);
            linkDownloadEvent.preventDefault();
        } else {
            this.__executeDownload(linkDownloadEvent);
        }
    },

    __executeDownload(linkDownloadEvent: MouseEvent) {
        if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(this.model.get('file'), this.model.get('name'));
            linkDownloadEvent.preventDefault();
        }
    },

    __showAsPicture() {
        return this.options.displayFormat === 'ShowAsPicture';
    }
});