mirror of
https://github.com/simon987/Simple-Incremental-Search-Tool.git
synced 2025-04-19 02:06:45 +00:00
509 lines
18 KiB
HTML
509 lines
18 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% set active_page = "search" %}
|
|
|
|
{% block title %}Search{% endblock title %}
|
|
|
|
{% block body %}
|
|
|
|
<style>
|
|
.document {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.document p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.document:hover p {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.badge-video {
|
|
color: #FFFFFF;
|
|
background-color: #F27761;
|
|
}
|
|
|
|
.badge-image {
|
|
color: #FFFFFF;
|
|
background-color: #AA99C9;
|
|
}
|
|
|
|
.badge-resolution {
|
|
color: #212529;
|
|
background-color: #FFC107;
|
|
}
|
|
|
|
|
|
|
|
.card-img-top {
|
|
display: block;
|
|
min-width: 64px;
|
|
max-width: 100%;
|
|
max-height: 256px;
|
|
width: unset;
|
|
margin: 0 auto 0;
|
|
padding: 3px 3px 0 3px;
|
|
}
|
|
|
|
.card-img-overlay {
|
|
pointer-events: none;
|
|
padding: 0.75rem;
|
|
|
|
bottom: 0;
|
|
top: unset;
|
|
left: unset;
|
|
right: unset;
|
|
}
|
|
|
|
.file-title {
|
|
font-size: 10pt;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.badge {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.fit {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 3px;
|
|
padding: 3px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.card-columns {
|
|
column-count: 4;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1500px) {
|
|
.container {
|
|
max-width: 1440px;
|
|
}
|
|
.card-columns {
|
|
column-count: 5;
|
|
}
|
|
}
|
|
|
|
.hl {
|
|
color: red;
|
|
}
|
|
</style>
|
|
|
|
<div class="container">
|
|
|
|
<div class="card">
|
|
{# <div class="card-header">An excellent form</div>#}
|
|
<div class="card-body">
|
|
<div class="input-group mb-2">
|
|
<div class="input-group-prepend">
|
|
<div class="input-group-text"></div>
|
|
</div>
|
|
<input id="searchBar" type="search" class="form-control" placeholder="Search">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="searchResults">
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var searchBar = document.getElementById("searchBar");
|
|
var scroll_id = null;
|
|
var coolingDown = false;
|
|
var docCount = 0;
|
|
|
|
function makeStatsCard(searchResult) {
|
|
|
|
var statsCard = document.createElement("div");
|
|
statsCard.setAttribute("class", "card");
|
|
var statsCardBody = document.createElement("div");
|
|
statsCardBody.setAttribute("class", "card-body");
|
|
|
|
var stat = document.createElement("p");
|
|
stat.appendChild(document.createTextNode(searchResult["hits"]["total"] + " results in " + searchResult["took"] + "ms"));
|
|
statsCardBody.appendChild(stat);
|
|
statsCard.appendChild(statsCardBody);
|
|
|
|
return statsCard;
|
|
}
|
|
|
|
function makeResultContainer() {
|
|
var resultContainer = document.createElement("div");
|
|
resultContainer.setAttribute("class", "card-columns");
|
|
|
|
return resultContainer;
|
|
}
|
|
|
|
/**
|
|
* https://stackoverflow.com/questions/10420352
|
|
*/
|
|
function humanFileSize(bytes) {
|
|
|
|
if(bytes === 0) {
|
|
return "? B"
|
|
}
|
|
|
|
var thresh = 1000;
|
|
if(Math.abs(bytes) < thresh) {
|
|
return bytes + ' B';
|
|
}
|
|
var units = ['kB','MB','GB','TB','PB','EB','ZB','YB'];
|
|
var u = -1;
|
|
do {
|
|
bytes /= thresh;
|
|
++u;
|
|
} while(Math.abs(bytes) >= thresh && u < units.length - 1);
|
|
|
|
return bytes.toFixed(1) + ' ' + units[u];
|
|
}
|
|
|
|
|
|
function initPopover() {
|
|
$('[data-toggle="popover"]').popover({
|
|
trigger: "focus",
|
|
delay: { "show": 0, "hide": 100 },
|
|
placement: "bottom",
|
|
html: true
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Enable gif loading on hover
|
|
* @param thumbnail
|
|
* @param documentId
|
|
*/
|
|
function gifOver(thumbnail, documentId) {
|
|
var callee = arguments.callee;
|
|
|
|
thumbnail.addEventListener("mouseover", function () {
|
|
|
|
thumbnail.mouseStayedOver = true;
|
|
|
|
window.setTimeout(function() {
|
|
if (thumbnail.mouseStayedOver) {
|
|
thumbnail.removeEventListener('mouseover', callee, false);
|
|
|
|
//Load gif
|
|
thumbnail.setAttribute("src", "/file/" + documentId);
|
|
}
|
|
}, 750); //todo grab hover time from config
|
|
|
|
});
|
|
|
|
thumbnail.addEventListener("mouseout", function() {
|
|
//Reset timer
|
|
thumbnail.mouseStayedOver = false;
|
|
thumbnail.setAttribute("src", "/thumb/" + documentId);
|
|
|
|
})
|
|
}
|
|
|
|
function videoOver(thumbnail, imgWrapper, thumbnailOverlay, documentId) {
|
|
|
|
thumbnail.addEventListener("mouseover", function () {
|
|
|
|
this.mouseStayedOver = true;
|
|
|
|
window.setTimeout(function() {
|
|
if(thumbnail.mouseStayedOver) {
|
|
imgWrapper.removeChild(thumbnail);
|
|
imgWrapper.removeChild(thumbnailOverlay);
|
|
|
|
var video = document.createElement("video");
|
|
var vidSource = document.createElement("source");
|
|
vidSource.setAttribute("src", "/file/" + documentId);
|
|
vidSource.setAttribute("type", "video/webm");
|
|
video.appendChild(vidSource);
|
|
video.setAttribute("class", "fit");
|
|
video.setAttribute("poster", "/thumb/" + documentId);
|
|
imgWrapper.appendChild(video);
|
|
|
|
//Video hover
|
|
video.addEventListener("mouseover", function() {
|
|
var isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2;
|
|
|
|
if (!isPlaying) {
|
|
video.play();
|
|
}
|
|
});
|
|
|
|
video.addEventListener("mouseout", function() {
|
|
video.currentTime = 0;
|
|
video.pause();
|
|
});
|
|
|
|
video.addEventListener("dblclick", function() {
|
|
video.webkitRequestFullScreen();
|
|
})
|
|
}
|
|
}, 750);
|
|
});
|
|
thumbnail.addEventListener("mouseout", function() {
|
|
this.mouseStayedOver = false;
|
|
});
|
|
}
|
|
|
|
function downloadPopover(element, documentId) {
|
|
element.setAttribute("data-content",
|
|
'<a class="btn btn-sm btn-primary" href="/dl/'+ documentId +'"><i class="fas fa-download"></i> Download</a>' +
|
|
'<a class="btn btn-sm btn-success" style="margin-left:3px;" href="/file/'+ documentId + '" target="_blank"><i class="fas fa-eye"></i> View</a>');
|
|
element.setAttribute("data-toggle", "popover");
|
|
element.addEventListener("mouseover", function() {
|
|
element.focus();
|
|
});
|
|
}
|
|
|
|
var counter = 0;
|
|
/**
|
|
*
|
|
* @param hit
|
|
* @returns {Element}
|
|
*/
|
|
function createDocCard(hit) {
|
|
|
|
var docCard = document.createElement("div");
|
|
docCard.setAttribute("class", "card");
|
|
docCard.setAttribute("tabindex", "-1");
|
|
|
|
var docCardBody = document.createElement("div");
|
|
docCardBody.setAttribute("class", "card-body document");
|
|
|
|
var link = document.createElement("a");
|
|
link.setAttribute("href", "/document/" + hit["_id"]);
|
|
link.setAttribute("target", "_blank");
|
|
|
|
//Title
|
|
var title = document.createElement("p");
|
|
title.setAttribute("class", "file-title");
|
|
var extention = hit["_source"].hasOwnProperty("extension") && hit["_source"]["extension"] !== null ? "." + hit["_source"]["extension"] : "";
|
|
title.insertAdjacentHTML('afterbegin', hit["highlight"]["name"] + extention);
|
|
title.setAttribute("title", hit["_source"]["path"]);
|
|
docCard.appendChild(title);
|
|
|
|
var tagContainer = document.createElement("div");
|
|
tagContainer.setAttribute("class", "card-text");
|
|
|
|
if (hit["_source"].hasOwnProperty("mime") && hit["_source"]["mime"] !== null) {
|
|
|
|
var tags = [];
|
|
var thumbnail = null;
|
|
var thumbnailOverlay = null;
|
|
var imgWrapper = document.createElement("div");
|
|
imgWrapper.setAttribute("style", "position: relative");
|
|
|
|
var mimeCategory = hit["_source"]["mime"].split("/")[0];
|
|
|
|
//Thumbnail
|
|
switch (mimeCategory) {
|
|
|
|
case "video":
|
|
case "image":
|
|
thumbnail = document.createElement("img");
|
|
thumbnail.setAttribute("class", "card-img-top");
|
|
thumbnail.setAttribute("src", "/thumb/" + hit["_id"]);
|
|
break;
|
|
}
|
|
|
|
//Thumbnail overlay
|
|
switch (mimeCategory) {
|
|
|
|
case "image":
|
|
thumbnailOverlay = document.createElement("div");
|
|
thumbnailOverlay.setAttribute("class", "card-img-overlay");
|
|
|
|
//Resolution
|
|
var resolutionBadge = document.createElement("span");
|
|
resolutionBadge.setAttribute("class", "badge badge-resolution");
|
|
resolutionBadge.appendChild(document.createTextNode(hit["_source"]["width"] + "x" + hit["_source"]["height"]));
|
|
thumbnailOverlay.appendChild(resolutionBadge);
|
|
|
|
var format = hit["_source"]["format"];
|
|
|
|
//Hover
|
|
if(format === "GIF") {
|
|
gifOver(thumbnail, hit["_id"]);
|
|
}
|
|
break;
|
|
|
|
case "video":
|
|
thumbnailOverlay = document.createElement("div");
|
|
thumbnailOverlay.setAttribute("class", "card-img-overlay");
|
|
|
|
//Duration
|
|
var durationBadge = document.createElement("span");
|
|
durationBadge.setAttribute("class", "badge badge-resolution");
|
|
durationBadge.appendChild(document.createTextNode(parseFloat(hit["_source"]["duration"]).toFixed(2) + "s"));
|
|
thumbnailOverlay.appendChild(durationBadge);
|
|
|
|
//Hover
|
|
videoOver(thumbnail, imgWrapper, thumbnailOverlay, hit["_id"])
|
|
|
|
}
|
|
|
|
//Tags
|
|
switch (mimeCategory) {
|
|
|
|
case "video":
|
|
var formatTag = document.createElement("span");
|
|
formatTag.setAttribute("class", "badge badge-pill badge-video");
|
|
formatTag.appendChild(document.createTextNode(hit["_source"]["format_long_name"].replace(" ", "")));
|
|
tags.push(formatTag);
|
|
|
|
break;
|
|
case "image":
|
|
formatTag = document.createElement("span");
|
|
formatTag.setAttribute("class", "badge badge-pill badge-image");
|
|
formatTag.appendChild(document.createTextNode(format));
|
|
tags.push(formatTag);
|
|
|
|
break;
|
|
}
|
|
|
|
//Content
|
|
if (hit.hasOwnProperty("highlight") && hit["highlight"].hasOwnProperty("content")) {
|
|
|
|
var contentDiv = document.createElement("div");
|
|
contentDiv.innerHTML = hit["highlight"]["content"][0];
|
|
docCard.appendChild(contentDiv);
|
|
}
|
|
|
|
//Size tag
|
|
var sizeTag = document.createElement("small");
|
|
sizeTag.appendChild(document.createTextNode(humanFileSize(hit["_source"]["size"])));
|
|
sizeTag.setAttribute("class", "text-muted");
|
|
|
|
for (var i = 0; i < tags.length; i++) {
|
|
tagContainer.appendChild(tags[i]);
|
|
}
|
|
|
|
tagContainer.appendChild(sizeTag);
|
|
|
|
if (thumbnail !== null) {
|
|
imgWrapper.appendChild(thumbnail);
|
|
docCard.appendChild(imgWrapper);
|
|
|
|
}
|
|
if (thumbnailOverlay !== null) {
|
|
imgWrapper.appendChild(thumbnailOverlay);
|
|
}
|
|
}
|
|
|
|
//Download button
|
|
downloadPopover(docCard, hit["_id"]);
|
|
|
|
docCardBody.appendChild(link);
|
|
docCard.appendChild(docCardBody);
|
|
|
|
link.appendChild(title);
|
|
docCardBody.appendChild(tagContainer);
|
|
|
|
return docCard;
|
|
}
|
|
|
|
function makePageIndicator(searchResult) {
|
|
var pageIndicator = document.createElement("div");
|
|
pageIndicator.appendChild(document.createTextNode(docCount + " / " +searchResult["hits"]["total"]));
|
|
return pageIndicator;
|
|
}
|
|
|
|
|
|
function insertHits(resultContainer, hits) {
|
|
for (var i = 0 ; i < hits.length; i++) {
|
|
resultContainer.appendChild(createDocCard(hits[i]));
|
|
docCount++;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", function () {
|
|
|
|
if (!coolingDown) {
|
|
var threshold = 200;
|
|
|
|
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - threshold) {
|
|
//load next page
|
|
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState === 4 && this.status === 200) {
|
|
|
|
var searchResult = JSON.parse(this.responseText);
|
|
var searchResults = document.getElementById("searchResults");
|
|
var hits = searchResult["hits"]["hits"];
|
|
|
|
//Page indicator
|
|
var pageIndicator = makePageIndicator(searchResult);
|
|
searchResults.appendChild(pageIndicator);
|
|
|
|
//Result container
|
|
var resultContainer = makeResultContainer();
|
|
searchResults.appendChild(resultContainer);
|
|
|
|
insertHits(resultContainer, hits);
|
|
|
|
initPopover();
|
|
|
|
if(hits.length !== 0) {
|
|
coolingDown = false;
|
|
}
|
|
}
|
|
};
|
|
xhttp.open("GET", "/scroll?scroll_id=" + scroll_id, true);
|
|
xhttp.send();
|
|
coolingDown = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
searchBar.addEventListener("keyup", function () {
|
|
|
|
//Clear old search results
|
|
var searchResults = document.getElementById("searchResults");
|
|
while (searchResults.firstChild) {
|
|
searchResults.removeChild(searchResults.firstChild);
|
|
}
|
|
|
|
|
|
|
|
var query = searchBar.value;
|
|
|
|
console.log("query: " + query);
|
|
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState === 4 && this.status === 200) {
|
|
|
|
var searchResult = JSON.parse(this.responseText);
|
|
scroll_id = searchResult["_scroll_id"];
|
|
|
|
//Search stats
|
|
searchResults.appendChild(makeStatsCard(searchResult));
|
|
|
|
//Setup page
|
|
var resultContainer = makeResultContainer();
|
|
searchResults.appendChild(resultContainer);
|
|
|
|
//Insert search results (hits)
|
|
insertHits(resultContainer, searchResult["hits"]["hits"]);
|
|
|
|
//Initialise download/view button popover
|
|
initPopover();
|
|
}
|
|
};
|
|
xhttp.open("GET", "/search?q=" + query, true);
|
|
xhttp.send();
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
|
|
{% endblock body %} |