mirror of
https://github.com/byReqz/blue-searchpage.git
synced 2024-11-22 13:31:15 +00:00
381 lines
8.9 KiB
JavaScript
381 lines
8.9 KiB
JavaScript
var eng = {},
|
|
current = {},
|
|
fadeDur = 200,
|
|
titlePrefix = "Search ",
|
|
|
|
idxWidth = 700,
|
|
idxLogoFull = [225, 80],
|
|
idxLogoSmall = [157, 56],
|
|
idxMargin = 24,
|
|
idxFadedOpacity = 0.3,
|
|
|
|
idxHeight = 0;
|
|
|
|
|
|
$(function() {
|
|
// Create Engine Index
|
|
|
|
indexCreate();
|
|
|
|
// Behavior
|
|
|
|
$("#i").keyup(function(ev) {
|
|
fetchSuggestions(ev.which);
|
|
});
|
|
$(document).click(function(ev) {
|
|
closeSugBox(ev.srcElement)
|
|
});
|
|
|
|
$("#toggleInfo").click(function() {
|
|
$("#infoBox").toggle(400);
|
|
});
|
|
|
|
// Set up first engine
|
|
|
|
build(firstProp(eng), false);
|
|
});
|
|
|
|
function doSearch() {
|
|
var url = eng[current.engine].places[current.place][0];
|
|
url = url.replace("%query%", encodeURIComponent($("#i").val()));
|
|
if (typeof eng[current.engine].languages == "object")
|
|
url = url.replace("%lang%", eng[current.engine].languages[current.language]);
|
|
|
|
window.location.href = url;
|
|
return false;
|
|
}
|
|
|
|
|
|
/* ENGINE INDEX
|
|
----------------------------------------------------- */
|
|
|
|
function indexCreate() {
|
|
var row = 0,
|
|
i = 0, // Reset every row
|
|
j = 0, // Total
|
|
offset = 0,
|
|
cols = Math.floor(idxWidth / idxLogoSmall[0]);
|
|
|
|
for (e in eng) {
|
|
// If the offset hasn't been set yet
|
|
// And the number of engines left to draw is <= items in the final row
|
|
if (
|
|
offset == 0 &&
|
|
(numKeys(eng) - j) <= (numKeys(eng) % cols)
|
|
) {
|
|
offset = cols - numKeys(eng) % cols;
|
|
offset = offset * (idxLogoSmall[0] + idxMargin) / 2;
|
|
}
|
|
|
|
$("#engines").prepend("<a id='" + e + "_logo' ref='" + e + "'><img src='engines/" + eng[e].logo + "'></a>");
|
|
|
|
if (i == cols) {
|
|
i = 0;
|
|
row++;
|
|
};
|
|
eng[e].idxPos = [
|
|
(idxLogoSmall[0] + idxMargin) * i - idxWidth / 2 + offset,
|
|
(idxLogoSmall[1] + idxMargin) * row
|
|
];
|
|
i++;
|
|
j++;
|
|
}
|
|
idxHeight = (row + 1) * (idxLogoSmall[1] + idxMargin) - idxMargin;
|
|
idxHeight = Math.max(idxHeight, idxLogoFull[1]);
|
|
|
|
$("#engines a").click(function() {
|
|
build($(this).attr("ref"), true);
|
|
})
|
|
|
|
$("#engines a").css({
|
|
"left": "50%",
|
|
"bottom": "0",
|
|
"marginLeft": -idxLogoFull[0] / 2 + "px"
|
|
});
|
|
|
|
$("#engines").mouseenter(function() {
|
|
indexOpen();
|
|
});
|
|
$("#engines").mouseleave(function() {
|
|
indexClose();
|
|
});
|
|
}
|
|
|
|
var idxState = false,
|
|
idxClear = undefined;
|
|
|
|
function indexOpen() {
|
|
idxState = true;
|
|
clearTimeout(idxClear);
|
|
|
|
$("#engines").css({
|
|
"height": idxHeight
|
|
});
|
|
|
|
for (e in eng) {
|
|
var op = $("#" + e + "_logo").hasClass("active");
|
|
$("#" + e + "_logo").stop().queue("fx", []).animate({
|
|
"marginLeft": eng[e].idxPos[0] + "px",
|
|
"marginBottom": eng[e].idxPos[1] + "px",
|
|
"opacity": (op) ? 1 : idxFadedOpacity,
|
|
"width": idxLogoSmall[0],
|
|
"height": idxLogoSmall[1],
|
|
}, fadeDur);
|
|
}
|
|
}
|
|
|
|
function indexClose() {
|
|
idxState = false;
|
|
|
|
$("#engines").css({
|
|
"height": idxLogoFull[1]
|
|
});
|
|
|
|
$("#engines a").each(function() {
|
|
var op = $(this).hasClass("active");
|
|
$(this).stop().queue("fx", []).animate({
|
|
"marginLeft": -idxLogoFull[0] / 2 + "px",
|
|
"marginBottom": 0,
|
|
"opacity": (op) ? 1 : 0,
|
|
"width": idxLogoFull[0],
|
|
"height": idxLogoFull[1]
|
|
}, fadeDur);
|
|
});
|
|
|
|
// Because jQuery doesn't like me
|
|
idxClear = setTimeout(function() {
|
|
$("#engines a:not(.active)").css("opacity", 0)
|
|
}, fadeDur);
|
|
}
|
|
|
|
|
|
|
|
/* GENERATING THE SEARCH ENGINE PAGE
|
|
----------------------------------------------------- */
|
|
|
|
function build(e, animate) {
|
|
var methodFade = (animate) ? fadeDur : 0;
|
|
|
|
current.engine = e; // Just the engine's ID for reference
|
|
e = eng[e]; // Engine object
|
|
|
|
$("#title").html(titlePrefix + e.pageTitle);
|
|
|
|
$("#method").stop().queue("fx", []).animate({
|
|
"opacity": 0
|
|
}, methodFade);
|
|
|
|
op = (idxState) ? idxFadedOpacity : 0;
|
|
$("#engines a").stop().queue("fx", []).removeClass("active");
|
|
$("#" + current.engine + "_logo").addClass("active").animate({
|
|
"opacity": 1
|
|
}, fadeDur);
|
|
$("#engines a:not(.active)").animate({
|
|
"opacity": op
|
|
}, fadeDur);
|
|
|
|
if (typeof e.languages == "object") setLang(firstProp(e.languages));
|
|
else $("#lang").fadeOut(fadeDur);
|
|
|
|
closeSugBox(false);
|
|
|
|
$("#i").attr("autosave", "com.infinise.go." + current.engine);
|
|
$("#input input").focus();
|
|
|
|
setTimeout(function() {
|
|
$("#method").html("");
|
|
for (place in e.places) $("#method").append("<a onclick='setPlace(this)'>" + place + "</a>");
|
|
|
|
setPlace("#method a:first");
|
|
|
|
$("#method").animate({
|
|
"opacity": 1
|
|
}, fadeDur);
|
|
}, methodFade);
|
|
}
|
|
|
|
function setPlace(place) {
|
|
current.place = $(place).html();
|
|
|
|
$("#method a").removeClass("active");
|
|
$(place).addClass("active");
|
|
$("#input input").focus();
|
|
|
|
if (eng[current.engine].places[current.place][1] !== false) {
|
|
fetchSuggestions();
|
|
$("#i").attr("autocomplete", "off");
|
|
} else {
|
|
closeSugBox(false);
|
|
$("#i").attr("autocomplete", "on");
|
|
}
|
|
}
|
|
|
|
function setLang(language) {
|
|
current.language = language;
|
|
|
|
$("#lang").fadeIn(fadeDur).html(language);
|
|
$("#input input").focus();
|
|
}
|
|
|
|
|
|
/* KEYBOARD SHORTCUTS
|
|
----------------------------------------------------- */
|
|
|
|
var isCtrl = false;
|
|
var isCmd = false;
|
|
|
|
$(document).keyup(function(e) {
|
|
if (e.which == 17) isCtrl = false;
|
|
if (e.which == 91) isCmd = false;
|
|
}).keydown(function(e) {
|
|
if (e.which == 17) isCtrl = true;
|
|
if (e.which == 91) isCmd = true;
|
|
|
|
if (e.which == 49 && isCtrl == true) {
|
|
/* Key "1" */
|
|
nextEngine();
|
|
return false;
|
|
}
|
|
if (e.which == 50 && isCtrl == true) {
|
|
/* Key "2" */
|
|
nextPlace();
|
|
return false;
|
|
}
|
|
if (e.which == 51 && isCtrl == true) {
|
|
/* Key "3" */
|
|
nextLanguage();
|
|
return false;
|
|
}
|
|
|
|
if (e.which == 38) {
|
|
/* Arrow Up */
|
|
prevSugResult();
|
|
}
|
|
if (e.which == 40) {
|
|
/* Arrow Down */
|
|
nextSugResult();
|
|
}
|
|
if (e.which == 27) {
|
|
/* ESC */
|
|
closeSugBox(false);
|
|
}
|
|
if (e.which == 13) {
|
|
/* Enter */
|
|
applySugResult();
|
|
}
|
|
});
|
|
|
|
function nextEngine() {
|
|
build(findNext(eng, current.engine), true);
|
|
}
|
|
|
|
function nextPlace() {
|
|
var nextPlace = findNext(eng[current.engine].places, current.place);
|
|
$("#method a").each(function() {
|
|
if ($(this).html() == nextPlace) setPlace($(this));
|
|
})
|
|
}
|
|
|
|
function nextLanguage() {
|
|
setLang(findNext(eng[current.engine].languages, current.language));
|
|
}
|
|
|
|
|
|
/* SUGGESTIONS
|
|
----------------------------------------------------- */
|
|
|
|
function fetchSuggestions(key) {
|
|
if (key == undefined || (!inArray(key, new Array(13, 16, 20, 27, 37, 38, 39, 40)) && !isCtrl && !isCmd)) {
|
|
if ($("#i").val() != "" && eng[current.engine].places[current.place][1] !== false) {
|
|
current.suggestionsTimestamp = new Date().getTime();
|
|
|
|
var url = eng[current.engine].places[current.place][1];
|
|
url = url.replace("%query%", encodeURIComponent($("#i").val()));
|
|
url = url.replace("%time%", current.suggestionsTimestamp);
|
|
if (typeof eng[current.engine].languages == "object")
|
|
url = url.replace("%lang%", eng[current.engine].languages[current.language]);
|
|
|
|
$.getJSON(url, function(data) {
|
|
buildSuggestions(data);
|
|
})
|
|
} else closeSugBox(false);
|
|
}
|
|
}
|
|
|
|
function buildSuggestions(list) {
|
|
if (list.empty) {
|
|
if (console) console.log("(1) Suggestions for '" + list.query + "' empty.");
|
|
closeSugBox(false);
|
|
} else if (
|
|
list.engine == current.engine &&
|
|
list.timestamp == current.suggestionsTimestamp &&
|
|
list.query == $("#i").val()
|
|
) {
|
|
if (console) console.log("(2) Suggestions for '" + list.query + "' accepted.");
|
|
|
|
$("#sugs").html("");
|
|
for (sug in list.results) {
|
|
sug = list.results[sug];
|
|
$("#sugs").append("<li><a href='" + sug[1] + "'>" + sug[0] + "</a></li>");
|
|
}
|
|
|
|
$("#sugs").css({
|
|
"display": "block"
|
|
});
|
|
$("#sugs li").mousemove(function() {
|
|
$("#sugs .active").removeClass("active");
|
|
$(this).addClass("active");
|
|
}).click(function() {
|
|
applySugResult();
|
|
});
|
|
} else {
|
|
if (console) console.log("(3) Suggestions for '" + list.query + "' discarded.");
|
|
}
|
|
}
|
|
|
|
function prevSugResult() {
|
|
if ($("#sugs").css("display") == "none") return;
|
|
if ($("#sugs .active").length == 0) {
|
|
$("#sugs li:last-child").addClass("active");
|
|
} else {
|
|
$("#sugs .active").removeClass("active").prev().addClass("active");
|
|
}
|
|
backupQuery();
|
|
}
|
|
|
|
function nextSugResult() {
|
|
if ($("#sugs").css("display") == "none") return;
|
|
if ($("#sugs .active").length == 0) {
|
|
$("#sugs li:first-child").addClass("active");
|
|
} else {
|
|
$("#sugs .active").removeClass("active").next().addClass("active");
|
|
}
|
|
backupQuery();
|
|
}
|
|
|
|
var originalQuery = false;
|
|
|
|
function backupQuery() {
|
|
if ($("#sugs .active").length > 0) {
|
|
if (!originalQuery) originalQuery = $("#i").val();
|
|
$("#i").val($("#sugs .active a").html());
|
|
} else {
|
|
$("#i").val(originalQuery);
|
|
originalQuery = false;
|
|
}
|
|
}
|
|
|
|
function closeSugBox(src) {
|
|
if (src == false || src == undefined || (src.id != "i" && src.id != "sugs"))
|
|
$("#sugs").html("").css({
|
|
"display": "none"
|
|
});
|
|
}
|
|
|
|
function applySugResult() {
|
|
if ($("#sugs .active").length > 0) {
|
|
$("#i").val($("#sugs .active a").html());
|
|
closeSugBox(false);
|
|
}
|
|
}
|