summaryrefslogtreecommitdiff
path: root/assets/js/src/Popover.js
blob: 03716d412cb227ac2bf4b563ada7bc7481947fe1 (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
function Popover(app) {
    this.app = app;
    this.router = new Router();
    this.router.addRoute('screenshot-zone', Screenshot);
}

Popover.prototype.isOpen = function() {
    return $('#popover-container').size() > 0;
};

Popover.prototype.open = function(link) {
    var self = this;
    self.app.dropdown.close();

    $.get(link, function(content) {
        $("body").prepend('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');
        self.afterOpen();
    });
};

Popover.prototype.close = function(e) {
    if (this.isOpen()) {

        if (e) {
            e.preventDefault();
        }

        $('#popover-container').remove();
    }
};

Popover.prototype.onClick = function(e) {
    e.preventDefault();
    e.stopPropagation();

    var target = e.currentTarget || e.target;
    var link = target.getAttribute("href");

    if (! link) {
        link = target.getAttribute("data-href");
    }

    if (link) {
        this.open(link);
    }
};

Popover.prototype.listen = function() {
    $(document).on("click", ".popover", this.onClick.bind(this));
    $(document).on("click", ".close-popover", this.close.bind(this));
    $(document).on("click", "#popover-container", this.close.bind(this));
    $(document).on("click", "#popover-content", function(e) { e.stopPropagation(); });
};

Popover.prototype.afterOpen = function() {
    var self = this;
    var popoverForm = $("#popover-content .popover-form");

    self.app.refresh();
    self.router.dispatch(this.app);

    // Submit forms with Ajax request
    if (popoverForm) {
        popoverForm.on("submit", function(e) {
            e.preventDefault();

            $.ajax({
                type: "POST",
                url: popoverForm.attr("action"),
                data: popoverForm.serialize(),
                success: function(data, textStatus, request) {
                    self.afterSubmit(data, request, self);
                },
                beforeSend: function() {
                    var button = $('.popover-form button[type="submit"]');
                    button.html('<i class="fa fa-spinner fa-pulse"></i> ' + button.html());
                    button.attr("disabled", true);
                }
            });
        });
    }

    // Submit link with Ajax request
    $(document).on("click", ".popover-link", function(e) {
        e.preventDefault();

        $.ajax({
            type: "GET",
            url: $(this).attr("href"),
            success: function(data, textStatus, request) {
                self.afterSubmit(data, request, self);
            }
        });
    });
};

Popover.prototype.afterSubmit = function(data, request, self) {
    var redirect = request.getResponseHeader("X-Ajax-Redirect");

    if (redirect) {
        window.location = redirect === 'self' ? window.location.href.split("#")[0] : redirect;
    }
    else {
        $("#popover-content").html(data);
        $("#popover-content input[autofocus]").focus();
        self.afterOpen();
    }
};