pretix_cgo/src/pretix/static/pretixpresale/js/ui/cart.js

/*global $,gettext,ngettext */
var cart = {
    _deadline: null,
    _deadline_timeout: null,
    _deadline_call: 0,
    _time_offset: 0,
    _prev_diff_minutes: 0,
    _renewed_message: "",

    _get_now: function () {
        return moment().add(cart._time_offset, 'ms');
    },

    _calc_offset: function () {
        if (typeof window.performance === "undefined") {
            return;
        }
        var perf = window.performance.timing;
        var server_time = Math.round(parseFloat($("body").attr("data-now")) * 1000);
        // We use requestStart as we don't know how latency is distributed and we rather want to err on the safe side
        var client_time = perf.requestStart;
        cart._time_offset = server_time - client_time;
    },

    show_expiry_notification: function () {
        document.getElementById("dialog-cart-extend").showModal();
        cart._expiry_notified = true;
    },

    draw_deadline: function (renewed="") {
        function pad(n, width, z) {
            z = z || '0';
            n = n + '';
            return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
        }

        cart._deadline_call++;
        if ((typeof django === 'undefined' || typeof django.gettext === 'undefined') && cart._deadline_call < 5) {
            // Language files are not loaded yet, don't run during the first seconds
            return;
        }
        var now = cart._get_now();
        var diff_total_seconds = cart._deadline.diff(now) / 1000;
        var diff_minutes = Math.floor(diff_total_seconds / 60);
        var diff_seconds = Math.floor(diff_total_seconds % 60);

        if (diff_minutes < 0) {
            $("#cart-deadline").text(gettext("The items in your cart are no longer reserved for you. You can still complete your order as long as they’re available."));
            $("#cart-deadline-short").text(
                gettext("Cart expired")
            );
            if (!cart._deadline_timeout) {
                // no timeout => first time draw_deadline is invoked, but cart already expired => do not show dialog
                cart._expiry_notified = true;
            }
        } else {
            if (diff_minutes !== cart._prev_diff_minutes) {
                if (diff_minutes == 0) {
                    $("#cart-deadline").text(gettext("Your cart is about to expire. If you want to continue, please click here:"))
                } else {
                    $("#cart-deadline").text(
                        cart._renewed_message + " " +
                        ngettext(
                            "The items in your cart are reserved for you for one minute.",
                            "The items in your cart are reserved for you for {num} minutes.",
                            diff_minutes
                        ).replace(/\{num\}/g, diff_minutes)
                    );
                }
                cart._prev_diff_minutes = diff_minutes;
            }

            $("#cart-deadline-short").text(
                pad(diff_minutes.toString(), 2) + ':' + pad(diff_seconds.toString(), 2)
            );

            cart._renewed_message = "";
            cart._deadline_timeout = window.setTimeout(cart.draw_deadline, 500);
        }
        var already_expired = diff_total_seconds <= 0;
        var can_extend_cart = diff_minutes < 3 && (already_expired || cart._deadline < cart._max_extend);
        $("#cart-extend-button").toggle(can_extend_cart);
        if (can_extend_cart && diff_total_seconds < 45) {
            if (!cart._expiry_notified) cart.show_expiry_notification();
            $("#dialog-cart-extend-description").text(already_expired
                ? gettext("Your cart has expired. If you want to continue, please click here:")
                : gettext("Your cart is about to expire. If you want to continue, please click here:"));
        }
    },

    init: function () {
        "use strict";
        cart._calc_offset();
        cart.set_deadline(
            $("#cart-deadline").attr("data-expires"),
            $("#cart-deadline").attr("data-max-expiry-extend")
        );
    },

    set_deadline: function (expiry, max_extend, renewed_message) {
        "use strict";
        cart._expiry_notified = false;
        cart._deadline = moment(expiry);
        if (cart._deadline_timeout) {
            window.clearTimeout(cart._deadline_timeout);
        }
        cart._deadline_timeout = null;
        cart._max_extend = moment(max_extend);
        cart._renewed_message = renewed_message || "";
        cart.draw_deadline();
    }
};

$(function () {
    "use strict";

    if ($("#cart-deadline").length) {
        cart.init();
    }

    $("#cart-extend-form").on("pretix:async-task-success", function(e, data) {
        if (data.success) {
            cart.set_deadline(data.expiry, data.max_expiry_extend, data.message);
            var cart_panel_heading = $(this).closest(".panel").find(".panel-heading").get(0);
            if (cart_panel_heading) {
                cart_panel_heading.focus();
            }
        } else {
            alert(data.message);
        }
    });

    $("#dialog-cart-extend form").submit(function() {
        $("#cart-extend-form").submit();
    });

    $(".toggle-container").each(function() {
        var summary = $(".toggle-summary", this);
        var content = $("> :not(.toggle-summary)", this);
        var toggle  = summary.find(".toggle").on("click", function(e) {
            this.ariaExpanded = !this.ariaExpanded;
            if (this.classList.contains("toggle-remove")) summary.attr("hidden", true);
            content.show().find(":input:visible").first().focus();
        });
        if (toggle.attr("aria-expanded")) {
            content.hide();
        }
    });

    $(".cart-icon-details.collapse-lines").each(function () {
        var $content = $(this).find(".content");
        var original_html = $content.html();
        var br_exp = /<br\s*\/?>/i;
        $content.text(original_html.split(br_exp).join(', '));
        if ($content.get(0).scrollWidth > $content.get(0).offsetWidth) {
            var $handler = $("<button>")
                .text($(this).attr("data-expand-text"))
                .addClass("btn btn-link collapse-handler")
                .attr("type", "button")
                .attr("aria-controls", $content.attr('id'))
                .attr("aria-expanded", "false");
            $handler.on("click", function (ev) {
                $content.html(original_html).removeClass("content");
                $handler.attr("aria-expanded", "true").attr("aria-hidden", "true");
                $handler.hide();
            });
            $(this).append($handler);
        }
    })
});