summaryrefslogtreecommitdiff
path: root/assets/js/components/submit-buttons.js
blob: 9e8ec1ca1547f31e43aad029d871e80823aed08e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
KB.component('submit-buttons', function (containerElement, options) {
    var isLoading = false;
    var isDisabled = options.disabled || false;
    var submitLabel = options.submitLabel;
    var formActionElement = null;
    var submitButtonElement = null;

    function onSubmit() {
        isLoading = true;
        replaceButton();
        KB.trigger('modal.submit');
    }

    function onCancel() {
        KB.trigger('modal.close');
    }

    function onStop() {
        isLoading = false;
        replaceButton();
    }

    function onDisable() {
        isLoading = false;
        isDisabled = true;
        replaceButton();
    }

    function onEnable() {
        isLoading = false;
        isDisabled = false;
        replaceButton();
    }

    function onHide() {
        KB.dom(formActionElement).hide();
    }

    function onUpdateSubmitLabel(eventData) {
        submitLabel = eventData.submitLabel;
        replaceButton();
    }

    function buildButton() {
        var button = KB.dom('button')
            .attr('type', 'submit')
            .attr('class', 'btn btn-' + (options.color || 'blue'));

        if (KB.modal.isOpen()) {
            button.click(onSubmit);
        }

        if (options.tabindex) {
            button.attr('tabindex', options.tabindex);
        }

        if (isLoading) {
            button
                .disable()
                .add(KB.dom('i').attr('class', 'fa fa-spinner fa-pulse').build())
                .text(' ')
            ;
        }

        if (isDisabled) {
            button.disable();
        }

        return button
            .text(submitLabel)
            .build();
    }

    function replaceButton() {
        var buttonElement = buildButton();
        KB.dom(submitButtonElement).replace(buttonElement);
        submitButtonElement = buttonElement;
    }

    this.render = function () {
        KB.on('modal.stop', onStop);
        KB.on('modal.disable', onDisable);
        KB.on('modal.enable', onEnable);
        KB.on('modal.hide', onHide);
        KB.on('modal.submit.label', onUpdateSubmitLabel);

        KB.on('modal.close', function () {
            KB.removeListener('modal.stop', onStop);
            KB.removeListener('modal.disable', onDisable);
            KB.removeListener('modal.enable', onEnable);
            KB.removeListener('modal.hide', onHide);
            KB.removeListener('modal.submit.label', onUpdateSubmitLabel);
        });

        submitButtonElement = buildButton();

        var formActionElementBuilder = KB.dom('div')
            .attr('class', 'form-actions')
            .add(submitButtonElement);

        if (KB.modal.isOpen()) {
            formActionElementBuilder
                .text(' ' + options.orLabel + ' ')
                .add(KB.dom('a').attr('href', '#').click(onCancel).text(options.cancelLabel).build());
        }

        formActionElement = formActionElementBuilder.build();
        containerElement.appendChild(formActionElement);
    };
});