UI tweaks, search syntax (#25)

src/ctx.h

@@ -28,7 +28,7 @@ struct {
 
     pthread_mutex_t mupdf_mu;
     char * tesseract_lang;
-    char * tesseract_path;
+    const char * tesseract_path;
 } ScanCtx;
 
 struct {

src/main.c

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

web/css/dark.css

@@ -423,3 +423,21 @@ option {
     margin-top: -14px;
     font-size: 11px;
 }
+
+@media (min-width: 800px) {
+    .small-btn {
+        display: none;
+    }
+    .large-btn {
+        display: inherit;
+    }
+}
+
+@media (max-width: 801px) {
+    .small-btn {
+        display: inherit;
+    }
+    .large-btn {
+        display: none;
+    }
+}

web/css/light.css

@@ -287,3 +287,21 @@ mark {
     margin-top: -14px;
     font-size: 11px;
 }
+
+@media (min-width: 800px) {
+    .small-btn {
+        display: none;
+    }
+    .large-btn {
+        display: inherit;
+    }
+}
+
+@media (max-width: 801px) {
+    .small-btn {
+        display: inherit;
+    }
+    .large-btn {
+        display: none;
+    }
+}

web/js/dom.js

@@ -389,6 +389,7 @@ function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
 
         if (!hit["_source"]["parent"] && shouldDisplayRawImage(hit)) {
             imgWrapper.setAttribute("id", "sp" + hit["_id"]);
+            imgWrapper.setAttribute("data-src", `t/${hit["_source"]["index"]}/${hit["_id"]}`);
             imgWrapper.setAttribute("href", `f/${hit["_id"]}`);
             imgWrapper.setAttribute("data-caption", hit["_source"]["path"] + "/" + hit["_source"]["name"] + ext(hit));
             imgWrapper.setAttribute("data-group", "p" + Math.floor(docCount / SIZE));

web/js/search.js

@@ -152,8 +152,8 @@ $.jsonPost("es", {
         target: '#mimeTree'
     });
     mimeTree.on("node.click", handleTreeClick(mimeTree));
-    mimeTree.select();
+    mimeTree.deselect();
-    mimeTree.node("any").deselect();
+    mimeTree.node("any").select();
 });
 
 function leafTag(tag) {
@@ -351,11 +351,10 @@ function search(after = null) {
         query: {
             bool: {
                 [condition]: {
-                    multi_match: {
+                    simple_query_string: {
                         query: query,
-                        type: "most_fields",
                         fields: fields,
-                        operator: "and"
+                        default_operator: "and"
                     }
                 },
                 filter: filters
@@ -407,7 +406,7 @@ function search(after = null) {
         searchResults.appendChild(resultContainer);
 
         window.setTimeout(() => {
-            $(".sp").SmartPhoto({animationSpeed: 200});
+            $(".sp").SmartPhoto({animationSpeed: 0, swipeTopToClose: true, showAnimation: false, forceInterval: 50});
         }, 100);
 
         if (!after) {
@@ -475,6 +474,15 @@ function updateIndices() {
 document.getElementById("indices").addEventListener("change", updateIndices);
 updateIndices();
 
+window.onkeyup = function(e) {
+    if (e.key === "/" || e.key === "Escape") {
+        const bar = document.getElementById("searchBar");
+        bar.scrollIntoView();
+        bar.focus();
+    }
+    console.log(e)
+};
+
 //Suggest
 function getPathChoices() {
     return new Promise(getPaths => {

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.11</span>
+    <span class="badge badge-pill version">v1.2.12</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>
@@ -31,7 +31,14 @@
                     </div>
                 </div>
                 <input id="searchBar" type="search" class="form-control" placeholder="Search">
-
+                <div class="input-group-append">
+                    <button class="btn btn-outline-secondary small-btn" type="button" data-toggle="modal"
+                            data-target="#help">?
+                    </button>
+                    <button class="btn btn-outline-secondary large-btn" type="button" data-toggle="modal"
+                            data-target="#help">Help
+                    </button>
+                </div>
             </div>
 
             <input title="File size" id="sizeSlider" name="size">
@@ -45,10 +52,12 @@
                 <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>
+                            <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>
+                            <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">
@@ -79,6 +88,69 @@
         </div>
     </div>
 
+    <div class="modal" id="help" 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">Search help</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+
+                    <table class="table">
+                        <tbody>
+                        <tr>
+                            <td><code>+</code></td>
+                            <td>signifies AND operation</td>
+                        </tr>
+                        <tr>
+                            <td><code>|</code></td>
+                            <td>signifies OR operation</td>
+                        </tr>
+                        <tr>
+                            <td><code>-</code></td>
+                            <td>negates a single token</td>
+                        </tr>
+                        <tr>
+                            <td><code>""</code></td>
+                            <td>wraps a number of tokens to signify a phrase for searching</td>
+                        </tr>
+                        <tr>
+                            <td><code>*</code></td>
+                            <td>at the end of a term signifies a prefix query</td>
+                        </tr>
+                        <tr>
+                            <td><code>(</code> and <code>)</code></td>
+                            <td>signify precedence</td>
+                        </tr>
+                        <tr>
+                            <td><code>~N</code></td>
+                            <td>after a word signifies edit distance (fuzziness)</td>
+                        </tr>
+                        <tr>
+                            <td><code>~N</code></td>
+                            <td>after a phrase signifies slop amount</td>
+                        </tr>
+                        </tbody>
+                    </table>
+
+                    <p>For example: <code>"fried eggs" +(eggplant | potato) -frittata</code> will match the phrase
+                        <i>fried eggs</i> and either <i>eggplant</i> or <i>potato</i>, but will ignore results
+                        containing <i>frittata</i>.</p>
+
+                    <p>When neither <code>+</code> or <code>|</code> is specified, the default operator is <code>+</code> (and).</p>
+                    <p>When the <b>Fuzzy</b> option is checked, partial matches are also returned.</p>
+                    <br>
+                    <p>For more information, see <a target="_blank"
+                                                    href="//www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-simple-query-string-query.html">Elasticsearch
+                        documentation</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div id="searchResults"></div>
 </div>