CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-07 15:34:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Main menu: Add load indicator to event selector (#3508)

Browse Source
This commit is contained in:
Mira
2023-08-07 14:25:50 +02:00
committed by GitHub
parent 0365f6d9fc
commit 015ffeecbf
2 changed files with 66 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/pretix/static/pretixcontrol/js/ui/typeahead.js
View File

@@ -11,11 +11,22 @@ $(function () {
var $container = $(this); var $container = $(this);
var $query = $(this).find('[data-typeahead-query]').length ? $(this).find('[data-typeahead-query]') : $($(this).attr("data-typeahead-field")); var $query = $(this).find('[data-typeahead-query]').length ? $(this).find('[data-typeahead-query]') : $($(this).attr("data-typeahead-field"));
$container.find("li:not(.query-holder)").remove(); $container.find("li:not(.query-holder)").remove();
var lastQuery = ""; var lastQuery = null;
var runQueryTimeout = null; var runQueryTimeout = null;
var loadIndicatorTimeout = null;
function showLoadIndicator() {
$container.find("li:not(.query-holder)").remove();
$container.append("<li class='loading'><span class='fa fa-4x fa-cog fa-spin'></span></li>");
$container.toggleClass('focused', $query.is(":focus") && $container.children().length > 0);
}
function runQuery() { function runQuery() {
lastQuery = $query.val();
var thisQuery = $query.val(); var thisQuery = $query.val();
if (thisQuery === lastQuery) return;
lastQuery = $query.val();
window.clearTimeout(loadIndicatorTimeout)
loadIndicatorTimeout = window.setTimeout(showLoadIndicator, 80)
$.getJSON( $.getJSON(
$container.attr("data-source") + "?query=" + encodeURIComponent($query.val()) + (typeof $container.attr("data-organizer") !== "undefined" ? "&organizer=" + $container.attr("data-organizer") : ""), $container.attr("data-source") + "?query=" + encodeURIComponent($query.val()) + (typeof $container.attr("data-organizer") !== "undefined" ? "&organizer=" + $container.attr("data-organizer") : ""),
function (data) { function (data) {
@@ -23,93 +34,58 @@ $(function () {
// Lost race condition // Lost race condition
return; return;
} }
window.clearTimeout(loadIndicatorTimeout);
$container.find("li:not(.query-holder)").remove(); $container.find("li:not(.query-holder)").remove();
$.each(data.results, function (i, res) { $.each(data.results, function (i, res) {
let $linkContent = $("<div>");
if (res.type === "organizer") { if (res.type === "organizer") {
$container.append( $linkContent.append(
$("<li>").append( $("<span>").addClass("event-name-full").append(
$("<a>").attr("href", res.url).append( $("<span>").addClass("fa fa-users fa-fw")
$("<div>").append( ).append(" ").append($("<div>").text(res.name).html())
$("<span>").addClass("event-name-full").append( )
$("<span>").addClass("fa fa-users fa-fw")
).append(" ").append($("<div>").text(res.name).html())
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
} else if (res.type === "order" || res.type === "voucher") { } else if (res.type === "order" || res.type === "voucher") {
$container.append( $linkContent.append(
$("<li>").append( $("<span>").addClass("event-name-full").append($("<div>").text(res.title).html())
$("<a>").attr("href", res.url).append( ).append(
$("<div>").append( $("<span>").addClass("event-organizer").append(
$("<span>").addClass("event-name-full").append($("<div>").text(res.title).html()) $("<span>").addClass("fa fa-calendar fa-fw")
).append( ).append(" ").append($("<div>").text(res.event).html())
$("<span>").addClass("event-organizer").append( )
$("<span>").addClass("fa fa-calendar fa-fw")
).append(" ").append($("<div>").text(res.event).html())
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
} else if (res.type === "user") { } else if (res.type === "user") {
$container.append( $linkContent.append(
$("<li>").append( $("<span>").addClass("event-name-full").append(
$("<a>").attr("href", res.url).append( $("<span>").addClass("fa fa-user fa-fw")
$("<div>").append( ).append(" ").append($("<div>").text(res.name).html())
$("<span>").addClass("event-name-full").append( )
$("<span>").addClass("fa fa-user fa-fw")
).append(" ").append($("<div>").text(res.name).html())
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
} else { } else {
$container.append( $linkContent.append(
$("<li>").append( $("<span>").addClass("event-name-full").append($("<div>").text(res.name).html())
$("<a>").attr("href", res.url).append( ).append(
$("<div>").append( $("<span>").addClass("event-organizer").append(
$("<span>").addClass("event-name-full").append($("<div>").text(res.name).html()) $("<span>").addClass("fa fa-users fa-fw")
).append( ).append(" ").append($("<div>").text(res.organizer).html())
$("<span>").addClass("event-organizer").append( ).append(
$("<span>").addClass("fa fa-users fa-fw") $("<span>").addClass("event-daterange").append(
).append(" ").append($("<div>").text(res.organizer).html()) $("<span>").addClass("fa fa-calendar fa-fw")
).append( ).append(" ").append(res.date_range)
$("<span>").addClass("event-daterange").append( )
$("<span>").addClass("fa fa-calendar fa-fw")
).append(" ").append(res.date_range)
)
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
} }
$container.append(
$("<li>").append(
$("<a>").attr("href", res.url).append(
$linkContent
).on("mousedown", function (event) {
if ($(this).length) {
location.href = $(this).attr("href");
}
$(this).parent().addClass("active");
event.preventDefault();
event.stopPropagation();
})
)
);
}); });
$container.toggleClass('focused', $query.is(":focus") && $container.children().length > 0); $container.toggleClass('focused', $query.is(":focus") && $container.children().length > 0);
} }
@@ -118,15 +94,14 @@ $(function () {
$query.on("forceRunQuery", function () { $query.on("forceRunQuery", function () {
runQuery(); runQuery();
}); });
$query.on("change", function () { $query.on("input", function () {
if ($container.attr("data-typeahead-field") && $query.val() === "") { if ($container.attr("data-typeahead-field") && $query.val() === "") {
$container.removeClass('focused'); $container.removeClass('focused');
$container.find("li:not(.query-holder)").remove(); $container.find("li:not(.query-holder)").remove();
lastQuery = null;
return; return;
} }
if (runQueryTimeout != null) { window.clearTimeout(runQueryTimeout)
window.clearTimeout(runQueryTimeout)
}
runQueryTimeout = window.setTimeout(runQuery, 250) runQueryTimeout = window.setTimeout(runQuery, 250)
}); });
$query.on("keydown", function (event) { $query.on("keydown", function (event) {
@@ -180,8 +155,6 @@ $(function () {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;
} else {
$(this).change();
} }
}); });
}); });

5
src/pretix/static/pretixcontrol/scss/main.scss
View File

@@ -412,6 +412,11 @@ body.loading #wrapper {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.loading {
padding: 10px;
text-align: center;
color: lightgrey;
}
} }
.sidebar-content { .sidebar-content {