Merge pull request #6 from simon987/wip

List mode #5

src/main.c

@@ -10,7 +10,7 @@
 #define EPILOG "Made by simon987 <me@simon987.net>. Released under GPL-3.0"
 
 
-static const char *const Version = "1.1.6";
+static const char *const Version = "1.1.7";
 static const char *const usage[] = {
         "sist2 scan [OPTION]... PATH",
         "sist2 index [OPTION]... INDEX",

web/css/dark.css

@@ -23,6 +23,20 @@ body {
     border: none;
 }
 
+.list-group-item {
+    background: #212121;
+    color: #e0e0e0;
+
+    border-top: 1px solid #424242;
+    border-bottom: none;
+    border-left: none;
+    border-right: none;
+}
+
+.list-group-item:first-child {
+    border-top: none;
+}
+
 .navbar-brand {
     font-size: 1.75rem;
     padding: 0;
@@ -93,6 +107,7 @@ body {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    color: #00BCD4;
 }
 
 .badge {
@@ -115,6 +130,15 @@ body {
     height: auto;
 }
 
+.fit-sm {
+    display: block;
+    max-width: 64px;
+    max-height: 64px;
+    margin: 0 auto 0;
+    width: auto;
+    height: auto;
+}
+
 .audio-fit {
     height: 39px;
     vertical-align: bottom;
@@ -239,6 +263,7 @@ option {
     padding: 0.5rem;
     background: #212121;
     color: #eee;
+    margin-top: 1em;
 }
 
 .btn-xs {
@@ -279,8 +304,45 @@ option {
     margin-top: 0.5rem;
 }
 
-@media (min-width: 800px) {
+@media (max-width: 800px) {
-    .nav {
+    #treeTabs {
-        min-width: 800px;
+        flex-basis: inherit;
+        flex-grow: inherit;
     }
 }
+
+.list-group {
+    margin-top: 1em;
+}
+
+.list-group-item {
+    padding: .25rem 0.5rem;
+}
+
+.wrapper-sm {
+    min-width: 64px;
+}
+
+.media-expanded {
+    display: inherit;
+}
+
+.media-expanded .fit {
+    max-height: 250px;
+}
+
+@media (max-width: 600px) {
+    .media-expanded .fit {
+        max-height: none;
+    }
+    .tagline {
+        display: none;
+    }
+}
+
+.version {
+    color: #00BCD4;
+    margin-left: -18px;
+    margin-top: -14px;
+    font-size: 11px;
+}

web/css/light.css

@@ -2,7 +2,9 @@
     outline: 0;
 }
 
-body {overflow-y:scroll;}
+body {
+    overflow-y: scroll;
+}
 
 .progress {
     margin-top: 1em;
@@ -10,15 +12,19 @@ body {overflow-y:scroll;}
 
 .card {
     margin-top: 1em;
-    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
+    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
 }
+
 .navbar-brand {
     font-size: 1.75rem;
     padding: 0;
 }
+
 .navbar {
-    background: #F7F7F7; border-bottom: solid 1px #dfdfdf;
+    background: #F7F7F7;
+    border-bottom: solid 1px #dfdfdf;
 }
+
 .document {
     padding: 0.5rem;
 }
@@ -93,6 +99,15 @@ body {overflow-y:scroll;}
     height: auto;
 }
 
+.fit-sm {
+    display: block;
+    max-width: 64px;
+    max-height: 64px;
+    margin: 0 auto 0;
+    width: auto;
+    height: auto;
+}
+
 .audio-fit {
     height: 39px;
     vertical-align: bottom;
@@ -107,16 +122,17 @@ body {overflow-y:scroll;}
 }
 
 @media (min-width: 1500px) {
-    .container  {
+    .container {
         max-width: 1440px;
     }
+
     .card-columns {
         column-count: 5;
     }
 }
 
 @media (min-width: 1800px) {
-    .container  {
+    .container {
         max-width: 1550px;
     }
 }
@@ -128,7 +144,7 @@ mark {
 }
 
 .content-div {
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 13px;
     padding: 1em;
     background-color: #f5f5f5;
@@ -154,8 +170,7 @@ mark {
     margin-bottom: 1em;
 }
 
-.inspire-tree .selected > .wholerow, .inspire-tree .selected > .title-wrap:hover + .wholerow
+.inspire-tree .selected > .wholerow, .inspire-tree .selected > .title-wrap:hover + .wholerow {
-{
     background: none;
 }
 
@@ -171,6 +186,7 @@ mark {
     line-height: 1rem;
     padding: 0.5rem;
     background: #f8f9fa;
+    margin-top: 1em;
 }
 
 .btn-xs {
@@ -183,8 +199,46 @@ mark {
     margin-top: 0.5rem;
 }
 
-@media (min-width: 800px) {
+@media (max-width: 800px) {
-    .nav {
+    #treeTabs {
-        min-width: 800px;
+        flex-basis: inherit;
+        flex-grow: inherit;
     }
 }
+
+.list-group {
+    margin-top: 1em;
+}
+
+.list-group-item {
+    padding: .25rem 0.5rem;
+}
+
+.wrapper-sm {
+    min-width: 64px;
+}
+
+.media-expanded {
+    display: inherit;
+}
+
+.media-expanded .fit {
+    max-height: 250px;
+}
+
+@media (max-width: 600px) {
+    .media-expanded .fit {
+        max-height: none;
+    }
+
+    .tagline {
+        display: none;
+    }
+}
+
+.version {
+    color: #007bff;
+    margin-left: -18px;
+    margin-top: -14px;
+    font-size: 11px;
+}

web/js/dom.js

@@ -75,18 +75,84 @@ function shouldPlayVideo(hit) {
     return videoc !== "hevc" && videoc !== "mpeg2video" && videoc !== "wmv3";
 }
 
-function makePlaceholder(w, h) {
+function makePlaceholder(w, h, small) {
-    const calc = w > h
+    let calc;
-        ? (175 / w / h) >= 272
+    if (small) {
-            ? (175 * w / h)
+        calc = w > h
-            : 175
+            ? (64 / w / h) >= 100
-        : 175;
+                ? (64 * w / h)
+                : 64
+            : 64;
+    } else {
+        calc = w > h
+            ? (175 / w / h) >= 272
+                ? (175 * w / h)
+                : 175
+            : 175;
+    }
 
     const el = document.createElement("div");
     el.setAttribute("style", `height: ${calc}px`);
     return el;
 }
 
+function makeTitle(hit) {
+    let title = document.createElement("div");
+    title.setAttribute("class", "file-title");
+    let extension = hit["_source"].hasOwnProperty("extension") && hit["_source"]["extension"] !== "" ? "." + hit["_source"]["extension"] : "";
+
+    applyNameToTitle(hit, title, extension);
+
+    title.setAttribute("title", hit["_source"]["path"] + "/" + hit["_source"]["name"] + extension);
+    return title;
+}
+
+function getTags(hit, mimeCategory) {
+
+    let tags = [];
+    switch (mimeCategory) {
+        case "video":
+        case "image":
+            if (hit["_source"].hasOwnProperty("videoc")) {
+                const formatTag = document.createElement("span");
+                formatTag.setAttribute("class", "badge badge-pill badge-video");
+                formatTag.appendChild(document.createTextNode(hit["_source"]["videoc"].replace(" ", "")));
+                tags.push(formatTag);
+            }
+            break;
+        case "audio": {
+            if (hit["_source"].hasOwnProperty("audioc")) {
+                let formatTag = document.createElement("span");
+                formatTag.setAttribute("class", "badge badge-pill badge-audio");
+                formatTag.appendChild(document.createTextNode(hit["_source"]["audioc"]));
+                tags.push(formatTag);
+            }
+        }
+            break;
+    }
+    // User tags
+    if (hit["_source"].hasOwnProperty("tag")) {
+        hit["_source"]["tag"].forEach(tag => {
+            const userTag = document.createElement("span");
+            userTag.setAttribute("class", "badge badge-pill badge-user");
+
+            const tokens = tag.split("#");
+
+            if (tokens.length > 1) {
+                const bg = "#" + tokens[1];
+                const fg = lum(tokens[1]) > 40 ? "#000" : "#fff";
+                userTag.setAttribute("style", `background-color: ${bg}; color: ${fg}`);
+            }
+
+            const name = tokens[0].split(".")[tokens[0].split(".").length - 1];
+            userTag.appendChild(document.createTextNode(name));
+            tags.push(userTag);
+        })
+    }
+
+    return tags
+}
+
 /**
  *
  * @param hit
@@ -104,22 +170,13 @@ function createDocCard(hit) {
     link.setAttribute("target", "_blank");
 
     //Title
-    let title = document.createElement("p");
+    let title = makeTitle(hit);
-    title.setAttribute("class", "file-title");
-    let extension = hit["_source"].hasOwnProperty("extension") && hit["_source"]["extension"] !== "" ? "." + hit["_source"]["extension"] : "";
-
-    applyNameToTitle(hit, title, extension);
-
-    title.setAttribute("title", hit["_source"]["path"] + "/" + hit["_source"]["name"] + extension);
-    docCard.appendChild(title);
 
     let tagContainer = document.createElement("div");
     tagContainer.setAttribute("class", "card-text");
 
     if (hit["_source"].hasOwnProperty("mime") && hit["_source"]["mime"] !== null) {
 
-        let tags = [];
-        let thumbnail = null;
         let thumbnailOverlay = null;
         let imgWrapper = document.createElement("div");
         imgWrapper.setAttribute("style", "position: relative");
@@ -127,47 +184,7 @@ function createDocCard(hit) {
         let mimeCategory = hit["_source"]["mime"].split("/")[0];
 
         //Thumbnail
-        if (mimeCategory === "video" && shouldPlayVideo(hit)) {
+        let thumbnail = makeThumbnail(mimeCategory, hit, imgWrapper, false);
-            thumbnail = document.createElement("video");
-            addVidSrc("f/" + hit["_id"], hit["_source"]["mime"], thumbnail);
-
-            const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"]);
-            imgWrapper.appendChild(placeholder);
-
-            thumbnail.setAttribute("class", "fit");
-            thumbnail.setAttribute("controls", "");
-            thumbnail.setAttribute("preload", "none");
-            thumbnail.setAttribute("poster", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
-            thumbnail.addEventListener("dblclick", function () {
-                thumbnail.webkitRequestFullScreen();
-            });
-            const poster = new Image();
-            poster.src = thumbnail.getAttribute('poster');
-            poster.addEventListener("load", function () {
-                placeholder.remove();
-                imgWrapper.appendChild(thumbnail);
-            });
-        } else if ((hit["_source"].hasOwnProperty("width") && hit["_source"]["width"] > 20 && hit["_source"]["height"] > 20)
-            || hit["_source"]["mime"] === "application/pdf"
-            || hit["_source"]["mime"] === "application/epub+zip"
-            || hit["_source"]["mime"] === "application/x-cbz"
-            || hit["_source"].hasOwnProperty("font_name")
-        ) {
-            thumbnail = document.createElement("img");
-            thumbnail.setAttribute("class", "card-img-top fit");
-            thumbnail.setAttribute("src", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
-
-            const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"]);
-            imgWrapper.appendChild(placeholder);
-
-            thumbnail.addEventListener("error", () => {
-                imgWrapper.remove();
-            });
-            thumbnail.addEventListener("load", () => {
-                placeholder.remove();
-                imgWrapper.appendChild(thumbnail);
-            });
-        }
 
         //Thumbnail overlay
         switch (mimeCategory) {
@@ -202,26 +219,10 @@ function createDocCard(hit) {
                 }
         }
 
-        //Tags
+        // Tags
-        switch (mimeCategory) {
+        let tags = getTags(hit, mimeCategory);
-            case "video":
+        for (let i = 0; i < tags.length; i++) {
-            case "image":
+            tagContainer.appendChild(tags[i]);
-                if (hit["_source"].hasOwnProperty("videoc")) {
-                    const formatTag = document.createElement("span");
-                    formatTag.setAttribute("class", "badge badge-pill badge-video");
-                    formatTag.appendChild(document.createTextNode(hit["_source"]["videoc"].replace(" ", "")));
-                    tags.push(formatTag);
-                }
-                break;
-            case "audio": {
-                if (hit["_source"].hasOwnProperty("audioc")) {
-                    let formatTag = document.createElement("span");
-                    formatTag.setAttribute("class", "badge badge-pill badge-audio");
-                    formatTag.appendChild(document.createTextNode(hit["_source"]["audioc"]));
-                    tags.push(formatTag);
-                }
-            }
-                break;
         }
 
         //Content
@@ -253,30 +254,6 @@ function createDocCard(hit) {
         if (thumbnailOverlay !== null) {
             imgWrapper.appendChild(thumbnailOverlay);
         }
-
-        // User tags
-        if (hit["_source"].hasOwnProperty("tag")) {
-            hit["_source"]["tag"].forEach(tag => {
-                const userTag = document.createElement("span");
-                userTag.setAttribute("class", "badge badge-pill badge-user");
-
-                const tokens = tag.split("#");
-
-                if (tokens.length > 1) {
-                    const bg = "#" + tokens[1];
-                    const fg = lum(tokens[1]) > 40 ? "#000" : "#fff";
-                    userTag.setAttribute("style", `background-color: ${bg}; color: ${fg}`);
-                }
-
-                const name = tokens[0].split(".")[tokens[0].split(".").length - 1];
-                userTag.appendChild(document.createTextNode(name));
-                tags.push(userTag);
-            })
-        }
-
-        for (let i = 0; i < tags.length; i++) {
-            tagContainer.appendChild(tags[i]);
-        }
     }
 
     //Size tag
@@ -294,6 +271,138 @@ function createDocCard(hit) {
     return docCard;
 }
 
+function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
+    let thumbnail;
+
+    if (mimeCategory === "video" && shouldPlayVideo(hit)) {
+        thumbnail = document.createElement("video");
+        addVidSrc("f/" + hit["_id"], hit["_source"]["mime"], thumbnail);
+
+        const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"], small);
+        imgWrapper.appendChild(placeholder);
+
+        if (small) {
+            thumbnail.setAttribute("class", "fit-sm");
+        } else {
+            thumbnail.setAttribute("class", "fit");
+        }
+        if (small) {
+            thumbnail.style.cursor = "pointer";
+            thumbnail.title = "Enlarge";
+            thumbnail.addEventListener("click", function () {
+                imgWrapper.classList.remove("wrapper-sm", "mr-1");
+                imgWrapper.parentElement.classList.add("media-expanded");
+                thumbnail.setAttribute("class", "fit");
+                thumbnail.setAttribute("controls", "");
+            });
+        } else {
+            thumbnail.setAttribute("controls", "");
+        }
+        thumbnail.setAttribute("preload", "none");
+        thumbnail.setAttribute("poster", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
+        thumbnail.addEventListener("dblclick", function () {
+            thumbnail.setAttribute("controls", "");
+            if (thumbnail.webkitRequestFullScreen) {
+                thumbnail.webkitRequestFullScreen();
+            } else {
+                thumbnail.requestFullscreen();
+            }
+        });
+        const poster = new Image();
+        poster.src = thumbnail.getAttribute('poster');
+        poster.addEventListener("load", function () {
+            placeholder.remove();
+            imgWrapper.appendChild(thumbnail);
+        });
+    } else if ((hit["_source"].hasOwnProperty("width") && hit["_source"]["width"] > 32 && hit["_source"]["height"] > 32)
+        || hit["_source"]["mime"] === "application/pdf"
+        || hit["_source"]["mime"] === "application/epub+zip"
+        || hit["_source"]["mime"] === "application/x-cbz"
+        || hit["_source"].hasOwnProperty("font_name")
+    ) {
+        thumbnail = document.createElement("img");
+        if (small) {
+            thumbnail.setAttribute("class", "fit-sm");
+        } else {
+            thumbnail.setAttribute("class", "card-img-top fit");
+        }
+        thumbnail.setAttribute("src", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
+
+        const placeholder = makePlaceholder(hit["_source"]["width"], hit["_source"]["height"], small);
+        imgWrapper.appendChild(placeholder);
+
+        thumbnail.addEventListener("error", () => {
+            imgWrapper.remove();
+        });
+        thumbnail.addEventListener("load", () => {
+            placeholder.remove();
+            imgWrapper.appendChild(thumbnail);
+        });
+    }
+
+    return thumbnail;
+}
+
+function createDocLine(hit) {
+
+    let mimeCategory = hit["_source"]["mime"].split("/")[0];
+    let tags = getTags(hit, mimeCategory);
+
+    let imgWrapper = document.createElement("div");
+    imgWrapper.setAttribute("class", "align-self-start mr-1 wrapper-sm");
+
+    let media = document.createElement("div");
+    media.setAttribute("class", "media");
+
+    const line = document.createElement("div");
+    line.setAttribute("class", "list-group-item flex-column align-items-start");
+
+    // Content
+    let contentHl = getContentHighlight(hit);
+    if (contentHl !== undefined) {
+        const contentDiv = document.createElement("div");
+        contentDiv.setAttribute("class", "content-div");
+        contentDiv.insertAdjacentHTML('afterbegin', contentHl);
+        line.appendChild(contentDiv);
+    }
+
+    const title = makeTitle(hit);
+
+    let link = document.createElement("a");
+    link.setAttribute("href", "f/" + hit["_id"]);
+    link.setAttribute("target", "_blank");
+    link.appendChild(title);
+
+    const titleDiv = document.createElement("div");
+    titleDiv.setAttribute("class", "file-title");
+    titleDiv.appendChild(link);
+
+    line.appendChild(media);
+
+    let thumbnail = makeThumbnail(mimeCategory, hit, imgWrapper, true);
+    if (thumbnail) {
+        media.appendChild(imgWrapper);
+    }
+    media.appendChild(titleDiv);
+
+    let tagContainer = document.createElement("div");
+    tagContainer.setAttribute("class", "");
+
+    for (let i = 0; i < tags.length; i++) {
+        tagContainer.appendChild(tags[i]);
+    }
+
+    //Size tag
+    let sizeTag = document.createElement("small");
+    sizeTag.appendChild(document.createTextNode(humanFileSize(hit["_source"]["size"])));
+    sizeTag.setAttribute("class", "text-muted");
+    tagContainer.appendChild(sizeTag);
+
+    titleDiv.appendChild(tagContainer);
+
+    return line;
+}
+
 function makePreloader() {
     const elem = document.createElement("div");
     elem.setAttribute("class", "progress");
@@ -318,18 +427,53 @@ function makePageIndicator(searchResult) {
 function makeStatsCard(searchResult) {
 
     let statsCard = document.createElement("div");
-    statsCard.setAttribute("class", "card");
+    statsCard.setAttribute("class", "card stat");
     let statsCardBody = document.createElement("div");
     statsCardBody.setAttribute("class", "card-body");
 
-    let stat = document.createElement("p");
+    const resultMode = document.createElement("div");
+    resultMode.setAttribute("class", "btn-group btn-group-toggle");
+    resultMode.setAttribute("data-toggle", "buttons");
+    resultMode.style.cssFloat = "right";
+
+    const listMode = document.createElement("label");
+    listMode.setAttribute("class", "btn btn-primary");
+    listMode.appendChild(document.createTextNode("List"));
+
+    const gridMode = document.createElement("label");
+    gridMode.setAttribute("class", "btn btn-primary");
+    gridMode.appendChild(document.createTextNode("Grid"));
+
+    resultMode.appendChild(gridMode);
+    resultMode.appendChild(listMode);
+
+    if (mode === "grid") {
+        gridMode.classList.add("active")
+    } else {
+        listMode.classList.add("active")
+    }
+
+    gridMode.addEventListener("click", () => {
+        mode = "grid";
+        localStorage.setItem("mode", mode);
+        searchDebounced();
+    });
+    listMode.addEventListener("click", () => {
+        mode = "list";
+        localStorage.setItem("mode", mode);
+        searchDebounced();
+    });
+
+    let stat = document.createElement("span");
     const totalHits = searchResult["hits"]["total"].hasOwnProperty("value")
         ? searchResult["hits"]["total"]["value"] : searchResult["hits"]["total"];
     stat.appendChild(document.createTextNode(totalHits + " results in " + searchResult["took"] + "ms"));
+
     statsCardBody.appendChild(stat);
+    statsCardBody.appendChild(resultMode);
 
     if (totalHits !== 0) {
-        let sizeStat = document.createElement("span");
+        let sizeStat = document.createElement("div");
         sizeStat.appendChild(document.createTextNode(humanFileSize(searchResult["aggregations"]["total_size"]["value"])));
         statsCardBody.appendChild(sizeStat);
     }
@@ -341,7 +485,11 @@ function makeStatsCard(searchResult) {
 
 function makeResultContainer() {
     let resultContainer = document.createElement("div");
-    resultContainer.setAttribute("class", "card-columns");
 
+    if (mode === "grid") {
+        resultContainer.setAttribute("class", "card-columns");
+    } else {
+        resultContainer.setAttribute("class", "list-group");
+    }
     return resultContainer;
 }

web/js/search.js

@@ -12,6 +12,13 @@ let coolingDown = false;
 let searchBusy = true;
 let selectedIndices = [];
 
+let mode;
+if (localStorage.getItem("mode") === null) {
+    mode = "grid";
+} else {
+    mode = localStorage.getItem("mode")
+}
+
 jQuery["jsonPost"] = function (url, data) {
     return jQuery.ajax({
         url: url,
@@ -211,7 +218,12 @@ new autoComplete({
 
 function insertHits(resultContainer, hits) {
     for (let i = 0; i < hits.length; i++) {
-        resultContainer.appendChild(createDocCard(hits[i]));
+
+        if (mode === "grid") {
+            resultContainer.appendChild(createDocCard(hits[i]));
+        } else {
+            resultContainer.appendChild(createDocLine(hits[i]));
+        }
         docCount++;
     }
 }

web/search.html

@@ -11,6 +11,7 @@
 
 <nav class="navbar navbar-expand-lg">
     <a class="navbar-brand" href="/">sist2</a>
+    <span class="badge badge-pill version">v1.1.7</span>
     <span class="tagline">Lightning-fast file system indexer and search tool </span>
     <a style="margin-left: auto" id="theme" class="btn" title="Toggle theme" href="/">Theme</a>
 </nav>
@@ -41,7 +42,7 @@
                     <select class="custom-select" id="indices" multiple size="6"></select>
                 </div>
 
-                <div class="col">
+                <div class="col" id="treeTabs">
                     <ul class="nav nav-tabs" role="tablist">
                         <li class="nav-item">
                             <a class="nav-link active" data-toggle="tab" href="#mime" role="tab" aria-controls="home" aria-selected="true">Mime Types</a>