rx/presenters

View on GitHub
views/mdc/assets/js/components/button.js

Summary

Maintainability
A
1 hr
Test Coverage
import {MDCRipple} from '@material/ripple';
import {VBaseComponent} from './base-component';
import {hookupComponents} from './base-component';
import {eventHandlerMixin} from './mixins/event-handler';

export function initButtons(e) {
    console.debug('\tButtons');
    hookupComponents(e, '.v-button', VButton, MDCRipple);
}


export class VButton extends eventHandlerMixin(VBaseComponent) {
    constructor(element, mdcComponent) {
        super(element, mdcComponent);

        mdcComponent.unbounded = true;

        this.element.addEventListener('V:postStarted', (e) => this.disable());
        this.element.addEventListener('V:eventsHalted', (e) => this.enable());
        if (this.element.dataset.disabledOnPostFinished === 'false') {
            this.element.addEventListener('V:postFinished', (e) => this.enable());
        } else {
            this.element.addEventListener('V:postFailed', (e) => this.enable());
        }

    }

    preview(result, acceptsMimeTypes, file) {
        if (this.element.classList.contains('v-button--image')) {
            this.element.style.backgroundImage = `url('${result}')`;
        }
        else {
            console.warn(
                `WARNING: Attempted to preview an image on a Button (id: ${this.element.id}) that is NOT an image button.
Make sure you set the type: :image on the button.`);
        }
    }

    disable() {
        this.element.setAttribute('disabled', 'disabled');
    }

    enable() {
        this.element.removeAttribute('disabled');
    }

    actionsHalted(vEvent) {
        const parentDialog = this.parentComponent('.v-dialog');

        if (!parentDialog) {
            return;
        }

        parentDialog.actionsHalted(vEvent);
    }

    actionsSucceeded(vEvent) {
        const parentDialog = this.parentComponent('.v-dialog');

        if (!parentDialog) {
            return;
        }

        parentDialog.actionsSucceeded(vEvent);
    }

    actionsFinished(vEvent) {
        const parentDialog = this.parentComponent('.v-dialog');

        if (!parentDialog) {
            return;
        }

        parentDialog.actionsFinished(vEvent);
    }
}