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

156 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.
2020-01-02 16:17:49 +03:00
* v2.0
* https://github.com/cotes2020/jekyll-theme-chirpy
2019-09-30 15:38:41 +03:00
* © 2018-2019 Cotes Chung
* MIT License
*/
$(function() {
2020-08-19 07:26:45 +03:00
var btnSbTrigger = $("#sidebar-trigger");
var btnSearchTrigger = $("#search-trigger");
var btnCancel = $("#search-cancel");
var btnClear = $("#search-cleaner");
2019-09-30 15:38:41 +03:00
2020-08-19 07:26:45 +03:00
var main = $("#main");
var topbarTitle = $("#topbar-title");
var searchWrapper = $("#search-wrapper");
var resultWrapper = $("#search-result-wrapper");
var results = $("#search-results");
var input = $("#search-input");
var hints = $("#search-hints");
/*--- Actions in small screens (Sidebar unloaded) ---*/
var scrollBlocker = (function() {
var 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
};
}());
var 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
};
}());
var resultSwitch = (function() {
var visable = false;
return {
2020-08-19 07:26:45 +03:00
on() {
if (!visable) {
2020-08-19 07:26:45 +03:00
resultWrapper.removeClass("unloaded");
main.addClass("hidden");
visable = true;
scrollBlocker.block();
}
},
2020-08-19 07:26:45 +03:00
off() {
if (visable) {
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");
btnClear.removeClass("visable");
main.removeClass("hidden");
2020-08-19 07:26:45 +03:00
input.val("");
visable = false;
scrollBlocker.release();
}
},
2020-08-19 07:26:45 +03:00
isVisable() {
return visable;
}
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")) {
btnClear.addClass("visable");
}
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();
2020-08-19 07:26:45 +03:00
btnClear.removeClass("visable");
2019-09-30 15:38:41 +03:00
});
2020-08-19 07:26:45 +03:00
});