Document info modal #19

web/css/dark.css

@@ -2,6 +2,26 @@
     outline: 0;
 }
 
+.info-icon {
+    width: 1rem;
+    margin-right: 0.2rem;
+    cursor: pointer;
+    color: #757575;
+    line-height: 1rem;
+    height: 1.1rem;
+}
+
+.info-icon:hover {
+    color: inherit;
+}
+
+.modal-title {
+    max-width: calc(100% - 2rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
 .path-row {
     display: -ms-flexbox;
     display: flex;
@@ -32,7 +52,7 @@ body {
     margin-top: 1em;
 }
 
-.card {
+.card, .modal-content {
     margin-top: 1em;
     background: #212121;
     color: #e0e0e0;
@@ -40,6 +60,27 @@ body {
     border: none;
 }
 
+.table {
+    color: #e0e0e0;
+}
+
+.table td, .table th {
+    border: none;
+}
+
+.table thead th {
+    border-bottom: 1px solid #646464;
+}
+
+.modal-header .close {
+    color: #e0e0e0;
+    text-shadow: none;
+}
+
+.modal-header {
+    border-bottom: 1px solid #646464;
+}
+
 .sub-document {
     background: #37474F !important;
 }
@@ -134,6 +175,8 @@ body {
 
 .file-title {
     width: 100%;
+    line-height: 1rem;
+    height: 1.1rem;
     font-size: 10pt;
     white-space: nowrap;
     text-overflow: ellipsis;

web/css/light.css

@@ -2,6 +2,25 @@
     outline: 0;
 }
 
+.info-icon {
+    width: 1rem;
+    margin-right: 0.2rem;
+    cursor: pointer;
+    color: #757575;
+    line-height: 1rem;
+    height: 1rem;
+}
+
+.info-icon:hover {
+    color: inherit;
+}
+
+.modal-title {
+    max-width: calc(100% - 2rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .path-row {
     display: -ms-flexbox;
     display: flex;
@@ -100,6 +119,8 @@ body {
 
 .file-title {
     width: 100%;
+    line-height: 1rem;
+    height: 1.1rem;
     font-size: 10pt;
     white-space: nowrap;
     text-overflow: ellipsis;

web/js/dom.js

@@ -153,11 +153,44 @@ function getTags(hit, mimeCategory) {
     return tags
 }
 
-/**
- *
- * @param hit
- * @returns {Element}
- */
+function infoButtonCb(hit) {
+    return () => {
+        getDocumentInfo(hit["_id"]).then(doc => {
+            $("#modal-title").text(doc["name"] + (doc["extension"] ? "." + doc["extension"] : ""));
+
+            const tbody = $("<tbody>");
+            $("#modal-body").empty()
+                .append($("<table class='table table-sm'>")
+                    .append($("<thead>")
+                        .append($("<tr>")
+                            .append($("<th>").text("Field"))
+                            .append($("<th>").text("Value"))
+                        )
+                    )
+                    .append(tbody)
+                );
+
+            const displayFields = new Set([
+                "mime", "size", "mtime", "path", "title", "width", "height", "duration", "audioc", "videoc",
+                "bitrate", "artist", "album", "album_artist", "genre", "title", "font_name", "tag"
+            ]);
+            Object.keys(doc)
+                .filter(key => key.startsWith("_keyword.") || key.startsWith("_text.") || displayFields.has(key))
+                .forEach(key => {
+                    tbody.append($("<tr>")
+                        .append($("<td>").text(key))
+                        .append($("<td>").text(doc[key]))
+                    );
+                });
+            if (doc.hasOwnProperty("content") && doc["content"]) {
+                $("#modal-body").append($("<div class='content-div'>").text(doc["content"]))
+            }
+
+            $("#modal").modal();
+        });
+    }
+}
+
 function createDocCard(hit) {
     let docCard = document.createElement("div");
     docCard.setAttribute("class", "card");
@@ -172,6 +205,7 @@ function createDocCard(hit) {
     let link = document.createElement("a");
     link.setAttribute("href", "f/" + hit["_id"]);
     link.setAttribute("target", "_blank");
+    link.style.maxWidth = "calc(100% - 1.2rem)";
     link.appendChild(title);
 
     if (hit["_source"].hasOwnProperty("parent")) {
@@ -271,7 +305,15 @@ function createDocCard(hit) {
     sizeTag.setAttribute("class", "text-muted");
     tagContainer.appendChild(sizeTag);
 
-    docCardBody.appendChild(link);
+    const titleWrapper = document.createElement("div");
+    titleWrapper.style.display = "flex";
+
+    const infoButton = makeInfoButton(hit);
+
+    titleWrapper.appendChild(infoButton);
+    titleWrapper.appendChild(link);
+
+    docCardBody.appendChild(titleWrapper);
     docCard.appendChild(docCardBody);
 
     docCardBody.appendChild(tagContainer);
@@ -352,6 +394,14 @@ function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
     return thumbnail;
 }
 
+function makeInfoButton(hit) {
+    const infoButton = document.createElement("span");
+    infoButton.appendChild(document.createTextNode("🛈"));
+    infoButton.setAttribute("class", "info-icon");
+    infoButton.addEventListener("click", infoButtonCb(hit));
+    return infoButton;
+}
+
 function createDocLine(hit) {
 
     const mime = hit["_source"]["mime"];
@@ -372,6 +422,8 @@ function createDocLine(hit) {
         isSubDocument = true;
     }
 
+    const infoButton = makeInfoButton(hit);
+
     const title = makeTitle(hit);
 
     let link = document.createElement("a");
@@ -380,8 +432,13 @@ function createDocLine(hit) {
     link.appendChild(title);
 
     const titleDiv = document.createElement("div");
-    titleDiv.setAttribute("class", "file-title");
-    titleDiv.appendChild(link);
+
+    const titleWrapper = document.createElement("div");
+    titleWrapper.style.display = "flex";
+    titleWrapper.appendChild(infoButton);
+    titleWrapper.appendChild(link);
+
+    titleDiv.appendChild(titleWrapper);
 
     line.appendChild(media);
 

web/js/search.js

@@ -81,6 +81,10 @@ $.jsonPost("i").then(resp => {
     });
 });
 
+function getDocumentInfo(id) {
+    return $.getJSON("d/" + id)
+}
+
 function handleTreeClick(tree) {
     return (event, node, handler) => {
         event.preventTreeDefault();

web/search.html

@@ -11,7 +11,7 @@
 
 <nav class="navbar navbar-expand-lg">
     <a class="navbar-brand" href="/">sist2</a>
-    <span class="badge badge-pill version">v1.2.1</span>
+    <span class="badge badge-pill version">v1.2.2</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>
@@ -65,6 +65,20 @@
         </div>
     </div>
 
+    <div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="modal-title"></h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body" id="modal-body"></div>
+            </div>
+        </div>
+    </div>
+
     <div id="searchResults"></div>
 </div>