web/assets/js/_commons/search-display.js

152 lines
3.3 KiB
JavaScript
Raw Normal View History

2019-09-30 15:38:41 +03:00
/*
* This script make #search-result-wrapper switch to unloaded or shown automatically.
2019-09-30 15:38:41 +03:00
*/
$(function() {
2021-01-23 10:07:18 +03:00
const btnSbTrigger = $("#sidebar-trigger");
const btnSearchTrigger = $("#search-trigger");
const btnCancel = $("#search-cancel");
const btnClear = $("#search-cleaner");
2019-09-30 15:38:41 +03:00
2021-01-23 10:07:18 +03:00
const main = $("#main");
const topbarTitle = $("#topbar-title");
const searchWrapper = $("#search-wrapper");
const resultWrapper = $("#search-result-wrapper");
const results = $("#search-results");
const input = $("#search-input");
const hints = $("#search-hints");
/*--- Actions in small screens (Sidebar unloaded) ---*/
2021-01-23 10:07:18 +03:00
const scrollBlocker = (function () {
let offset = 0;
return {
2020-08-19 07:26:45 +03:00
block() {
offset = $(window).scrollTop();
},
2020-08-19 07:26:45 +03:00
release() {
$("html,body").scrollTop(offset);
},
2020-08-19 07:26:45 +03:00
getOffset() {
return offset;
}
2020-08-19 07:26:45 +03:00
};
}());
2021-01-23 10:07:18 +03:00
const mobileSearchBar = (function () {
return {
2020-08-19 07:26:45 +03:00
on() {
btnSbTrigger.addClass("unloaded");
topbarTitle.addClass("unloaded");
btnSearchTrigger.addClass("unloaded");
searchWrapper.addClass("d-flex");
btnCancel.addClass("loaded");
},
2020-08-19 07:26:45 +03:00
off() {
btnCancel.removeClass("loaded");
searchWrapper.removeClass("d-flex");
btnSbTrigger.removeClass("unloaded");
topbarTitle.removeClass("unloaded");
btnSearchTrigger.removeClass("unloaded");
}
2020-08-19 07:26:45 +03:00
};
}());
2021-01-23 10:07:18 +03:00
const resultSwitch = (function () {
let visible = false;
return {
2020-08-19 07:26:45 +03:00
on() {
2021-01-23 10:07:18 +03:00
if (!visible) {
2020-08-19 07:26:45 +03:00
resultWrapper.removeClass("unloaded");
main.addClass("hidden");
2021-01-23 10:07:18 +03:00
visible = true;
scrollBlocker.block();
}
},
2020-08-19 07:26:45 +03:00
off() {
2021-01-23 10:07:18 +03:00
if (visible) {
results.empty();
2020-08-19 07:26:45 +03:00
if (hints.hasClass("unloaded")) {
hints.removeClass("unloaded");
}
2020-08-19 07:26:45 +03:00
resultWrapper.addClass("unloaded");
2021-01-23 08:21:40 +03:00
btnClear.removeClass("visible");
2020-08-19 07:26:45 +03:00
main.removeClass("hidden");
2020-08-19 07:26:45 +03:00
input.val("");
2021-01-23 10:07:18 +03:00
visible = false;
scrollBlocker.release();
}
},
2021-01-23 10:07:18 +03:00
isVisible() {
return visible;
}
2020-08-19 07:26:45 +03:00
};
}());
2019-09-30 15:38:41 +03:00
function isMobileView() {
2020-08-19 07:26:45 +03:00
return btnCancel.hasClass("loaded");
}
2019-09-30 15:38:41 +03:00
btnSearchTrigger.click(function() {
mobileSearchBar.on();
resultSwitch.on();
input.focus();
2019-09-30 15:38:41 +03:00
});
btnCancel.click(function() {
mobileSearchBar.off();
resultSwitch.off();
2019-09-30 15:38:41 +03:00
});
input.focus(function() {
2020-08-19 07:26:45 +03:00
searchWrapper.addClass("input-focus");
});
2019-09-30 15:38:41 +03:00
input.focusout(function() {
2020-08-19 07:26:45 +03:00
searchWrapper.removeClass("input-focus");
});
2019-09-30 15:38:41 +03:00
2020-08-19 07:26:45 +03:00
input.on("keyup", function(e) {
if (e.keyCode === 8 && input.val() === "") {
if (!isMobileView()) {
resultSwitch.off();
} else {
2020-08-19 07:26:45 +03:00
hints.removeClass("unloaded");
}
} else {
2020-08-19 07:26:45 +03:00
if (input.val() !== "") {
resultSwitch.on();
2020-08-19 07:26:45 +03:00
if (!btnClear.hasClass("visible")) {
2021-01-23 08:21:40 +03:00
btnClear.addClass("visible");
}
if (isMobileView()) {
2020-08-19 07:26:45 +03:00
hints.addClass("unloaded");
}
}
2019-09-30 15:38:41 +03:00
}
});
2020-08-19 07:26:45 +03:00
btnClear.on("click", function() {
input.val("");
if (isMobileView()) {
2020-08-19 07:26:45 +03:00
hints.removeClass("unloaded");
results.empty();
} else {
resultSwitch.off();
2019-09-30 15:38:41 +03:00
}
input.focus();
2021-01-23 08:21:40 +03:00
btnClear.removeClass("visible");
2019-09-30 15:38:41 +03:00
});
2020-08-19 07:26:45 +03:00
});