User scripts, bug fixes, docker image

2025-12-11 14:38:54 +00:00 · 2019-11-12 20:58:43 -05:00
parent 6931d320a2
commit ebfd7e03ce
21 changed files with 489 additions and 63 deletions
--- a/web/css/dark.css
+++ b/web/css/dark.css
@@ -1,3 +1,7 @@
+*:focus {
+    outline: 0;
+}
+
 a {
    color: #00BCD4;
 }
@@ -95,6 +99,11 @@ body {
    margin-right: 3px;
 }

+.badge-user {
+    color: #212529;
+    background-color: #e0e0e0;
+}
+
 .fit {
    display: block;
    min-width: 64px;
@@ -164,6 +173,7 @@ mark {
    margin-top: 1em;
    margin-bottom: 1em;
 }
+
 .custom-select {
    overflow: auto;
    background-color: #37474F;
@@ -239,4 +249,38 @@ option {

 .btn {
    color: #eee;
-}
+}
+
+.nav-tabs .nav-link {
+    color: #e0e0e0;
+}
+
+.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+    background-color: #212121;
+    border-color: #616161 #616161 #212121;
+    color: #e0e0e0;
+}
+
+.nav-tabs .nav-link:focus, .nav-tabs .nav-link:focus {
+    border-color: #616161 #616161 #212121;
+    color: #e0e0e0;
+}
+
+.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
+    border-color: #e0e0e0 #e0e0e0 #212121;
+    color: #e0e0e0;
+}
+
+.nav-tabs {
+    border-bottom: #616161;
+}
+
+.nav {
+    margin-top: 0.5rem;
+}
+
+@media (min-width: 800px) {
+    .nav {
+        min-width: 800px;
+    }
+}
--- a/web/css/light.css
+++ b/web/css/light.css
@@ -1,3 +1,7 @@
+*:focus {
+    outline: 0;
+}
+
 body {overflow-y:scroll;}

 .progress {
@@ -47,6 +51,11 @@ body {overflow-y:scroll;}
    background-color: #FFC107;
 }

+.badge-user {
+    color: #212529;
+    background-color: #e0e0e0;
+}
+
 .badge-text {
    color: #FFFFFF;
    background-color: #FAAB3C;
@@ -168,4 +177,14 @@ mark {
    padding: .1rem .3rem;
    font-size: .875rem;
    border-radius: .2rem;
-}
+}
+
+.nav {
+    margin-top: 0.5rem;
+}
+
+@media (min-width: 800px) {
+    .nav {
+        min-width: 800px;
+    }
+}
--- a/web/js/dom.js
+++ b/web/js/dom.js
@@ -76,8 +76,8 @@ function shouldPlayVideo(hit) {
 }

 function makePlaceholder(w, h) {
-    const calc = w > h
-        ? (175 / w / h) >= 272
+    const calc = w > h
+        ? (175 / w / h) >= 272
            ? (175 * w / h)
            : 175
        : 175;
@@ -195,7 +195,7 @@ function createDocCard(hit) {
                if (hit["_source"].hasOwnProperty("duration")) {
                    thumbnailOverlay = document.createElement("div");
                    thumbnailOverlay.setAttribute("class", "card-img-overlay");
-                    let durationBadge = document.createElement("span");
+                    const durationBadge = document.createElement("span");
                    durationBadge.setAttribute("class", "badge badge-resolution");
                    durationBadge.appendChild(document.createTextNode(humanTime(hit["_source"]["duration"])));
                    thumbnailOverlay.appendChild(durationBadge);
@@ -207,7 +207,7 @@ function createDocCard(hit) {
            case "video":
            case "image":
                if (hit["_source"].hasOwnProperty("videoc")) {
-                    let formatTag = document.createElement("span");
+                    const formatTag = document.createElement("span");
                    formatTag.setAttribute("class", "badge badge-pill badge-video");
                    formatTag.appendChild(document.createTextNode(hit["_source"]["videoc"].replace(" ", "")));
                    tags.push(formatTag);
@@ -227,7 +227,7 @@ function createDocCard(hit) {
        //Content
        let contentHl = getContentHighlight(hit);
        if (contentHl !== undefined) {
-            let contentDiv = document.createElement("div");
+            const contentDiv = document.createElement("div");
            contentDiv.setAttribute("class", "content-div");
            contentDiv.insertAdjacentHTML('afterbegin', contentHl);
            docCard.appendChild(contentDiv);
@@ -254,6 +254,26 @@ function createDocCard(hit) {
            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]);
        }
--- a/web/js/search.js
+++ b/web/js/search.js
@@ -1,6 +1,8 @@
 const SIZE = 40;
 let mimeMap = [];
-let tree;
+let tagMap = [];
+let mimeTree;
+let tagTree;

 let searchBar = document.getElementById("searchBar");
 let pathBar = document.getElementById("pathBar");
@@ -49,6 +51,23 @@ $.jsonPost("i").then(resp => {
    });
 });

+function handleTreeClick (tree) {
+    return (event, node, handler) => {
+        event.preventTreeDefault();
+
+        if (node.id === "any") {
+            if (!node.itree.state.checked) {
+                tree.deselect();
+            }
+        } else {
+            tree.node("any").deselect();
+        }
+
+        handler();
+        searchDebounced();
+    }
+}
+
 $.jsonPost("es", {
    aggs: {
        mimeTypes: {
@@ -85,34 +104,86 @@ $.jsonPost("es", {
    });
    mimeMap.push({"text": "All", "id": "any"});

-    tree = new InspireTree({
+    mimeTree = new InspireTree({
        selection: {
            mode: 'checkbox'
        },
        data: mimeMap
    });
-    new InspireTreeDOM(tree, {
-        target: '.tree'
+    new InspireTreeDOM(mimeTree, {
+        target: '#mimeTree'
    });
-    tree.on("node.click", function (event, node, handler) {
-        event.preventTreeDefault();
+    mimeTree.on("node.click", handleTreeClick(mimeTree));
+    mimeTree.select();
+    mimeTree.node("any").deselect();
+});

-        if (node.id === "any") {
-            if (!node.itree.state.checked) {
-                tree.deselect();
+function leafTag(tag) {
+    const tokens = tag.split(".");
+    return tokens[tokens.length-1]
+}
+
+// Tags tree
+$.jsonPost("es", {
+    aggs: {
+        tags: {
+            terms: {
+                field: "tag",
+                size: 10000
            }
-        } else {
-            tree.node("any").deselect();
        }
-
-        handler();
-        searchDebounced();
+    },
+    size: 0,
+}).then(resp => {
+    resp["aggregations"]["tags"]["buckets"]
+        .sort((a, b) => a["key"].localeCompare(b["key"]))
+        .forEach(bucket => {
+        addTag(tagMap, bucket["key"], bucket["key"], bucket["doc_count"])
    });
-    tree.select();
-    tree.node("any").deselect();
+
+    tagMap.push({"text": "All", "id": "any"});
+    tagTree = new InspireTree({
+        selection: {
+            mode: 'checkbox'
+        },
+        data: tagMap
+    });
+    new InspireTreeDOM(tagTree, {
+        target: '#tagTree'
+    });
+    tagTree.on("node.click", handleTreeClick(tagTree));
+    tagTree.node("any").select();
    searchBusy = false;
 });

+function addTag(map, tag, id, count) {
+    let tags = tag.split("#")[0].split(".");
+
+    let child = {
+        id: id,
+        text: tags.length !== 1 ? tags[0] : `${tags[0]} (${count})`,
+        children: []
+    };
+
+    let found = false;
+    map.forEach(node => {
+        if (node.text === child.text) {
+            found = true;
+            if (tags.length !== 1) {
+                addTag(node.children, tags.slice(1).join("."), id, count);
+            }
+        }
+    });
+    if (!found) {
+        if (tags.length !== 1) {
+            addTag(child.children, tags.slice(1).join("."), id, count);
+            map.push(child);
+        } else {
+            map.push(child);
+        }
+    }
+}
+
 new autoComplete({
    selector: '#pathBar',
    minChars: 1,
@@ -181,8 +252,8 @@ function doScroll() {
        })
 }

-function getSelectedMimeTypes() {
-    let mimeTypes = [];
+function getSelectedNodes(tree) {
+    let selectedNodes = [];

    let selected = tree.selected();

@@ -194,11 +265,11 @@ function getSelectedMimeTypes() {

        //Only get children
        if (selected[i].text.indexOf("(") !== -1) {
-            mimeTypes.push(selected[i].id);
+            selectedNodes.push(selected[i].id);
        }
    }

-    return mimeTypes
+    return selectedNodes
 }

 function search() {
@@ -239,11 +310,16 @@ function search() {
    if (path !== "") {
        filters.push([{term: {path: path}}])
    }
-    let mimeTypes = getSelectedMimeTypes();
+    let mimeTypes = getSelectedNodes(mimeTree);
    if (!mimeTypes.includes("any")) {
        filters.push([{terms: {"mime": mimeTypes}}]);
    }

+    let tags = getSelectedNodes(tagTree);
+    if (!tags.includes("any")) {
+        filters.push([{terms: {"tag": tags}}]);
+    }
+
    $.jsonPost("es?scroll=1", {
        "_source": {
            excludes: ["content"]
--- a/web/js/util.js
+++ b/web/js/util.js
@@ -43,9 +43,9 @@ function humanTime(sec_num) {

 function debounce(func, wait) {
    let timeout;
-    return function() {
+    return function () {
        let context = this, args = arguments;
-        let later = function() {
+        let later = function () {
            timeout = null;
            func.apply(context, args);
        };
@@ -54,3 +54,13 @@ function debounce(func, wait) {
        func.apply(context, args);
    };
 }
+
+function lum(c) {
+    c = c.substring(1);
+    let rgb = parseInt(c, 16);
+    let r = (rgb >> 16) & 0xff;
+    let g = (rgb >> 8) & 0xff;
+    let b = (rgb >> 0) & 0xff;
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
--- a/web/search.html
+++ b/web/search.html
@@ -24,7 +24,7 @@
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
-                        <span onclick="document.getElementById('fuzzyToggle').click()">Fuzzy&nbsp</span>
+                        <span title="Toggle fuzzy searching"  onclick="document.getElementById('fuzzyToggle').click()">Fuzzy&nbsp</span>
                        <input title="Toggle fuzzy searching" type="checkbox" id="fuzzyToggle"
                               onclick="toggleFuzzy()" checked>
                    </div>
@@ -42,10 +42,24 @@
                </div>

                <div class="col">
-                    <label>Mime types</label>
-
-                    <div class="tree"></div>
+                    <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>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" data-toggle="tab" href="#tag" role="tab" aria-controls="profile" aria-selected="false" title="User-defined tags">Tags</a>
+                        </li>
+                    </ul>
+                    <div class="tab-content" id="myTabContent">
+                        <div class="tab-pane fade show active" id="mime" role="tabpanel" aria-labelledby="home-tab">
+                            <div id="mimeTree" class="tree"></div>
+                        </div>
+                        <div class="tab-pane fade" id="tag" role="tabpanel" aria-labelledby="profile-tab">
+                            <div id="tagTree" class="tree"></div>
+                        </div>
+                    </div>
                </div>
+
            </div>
        </div>
    </div>