frontend tags

This commit is contained in:
2020-07-08 17:33:39 -04:00
parent 13f4dbed2d
commit 230988d6d1
10 changed files with 190 additions and 18 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -166,6 +166,12 @@ a:hover,.btn:hover {
background-color: #FAAB3C;
}
.add-tag-button {
cursor: pointer;
color: #212529;
background-color: #e0e0e0;
}
.card-img-overlay {
pointer-events: none;
padding: 0.75rem;
@@ -516,3 +522,7 @@ svg {
.wholerow {
outline: none !important;
}
.stat > .card-body {
padding: 0.7em 1.25em;
}

View File

@@ -111,6 +111,12 @@ body {
background-color: #FAAB3C;
}
.add-tag-button {
cursor: pointer;
color: #212529;
background-color: #e0e0e0;
}
.card-img-overlay {
pointer-events: none;
padding: 0.75rem;
@@ -379,3 +385,7 @@ mark {
.wholerow {
outline: none !important;
}
.stat > .card-body {
padding: 0.7em 1.25em;
}

File diff suppressed because one or more lines are too long

View File

@@ -338,9 +338,27 @@ function createDocCard(hit) {
docCardBody.appendChild(tagContainer);
attachTagContainerEventListener(tagContainer);
return docCard;
}
function attachTagContainerEventListener(tagContainer) {
const sizeTag = Array.from(tagContainer.children).find(child => child.tagName === "SMALL");
const addTagButton = document.createElement("span");
addTagButton.setAttribute("class", "badge badge-pill add-tag-button");
addTagButton.appendChild(document.createTextNode("+Add"));
tagContainer.addEventListener("mouseenter", () => tagContainer.insertBefore(addTagButton, sizeTag));
tagContainer.addEventListener("mouseleave", () => addTagButton.remove());
addTagButton.addEventListener("click", () => {
tagBar.value = "";
$("#tagModal").modal("show");
tagBar.focus();
});
}
function makeThumbnail(mimeCategory, hit, imgWrapper, small) {
if (!hit["_source"].hasOwnProperty("thumbnail")) {

View File

@@ -6,6 +6,7 @@ let tagTree;
let searchBar = document.getElementById("searchBar");
let pathBar = document.getElementById("pathBar");
let tagBar = document.getElementById("tagBar");
let lastDoc = null;
let reachedEnd = false;
let docCount = 0;
@@ -109,6 +110,53 @@ window.onload = () => {
searchDebounced();
}
});
new autoComplete({
selector: '#tagBar',
minChars: 1,
delay: 200,
renderItem: function (item) {
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item + '</div>';
},
source: async function (term, suggest) {
term = term.toLowerCase();
const choices = await getTagChoices();
let matches = [];
for (let i = 0; i < choices.length; i++) {
if (~choices[i].toLowerCase().indexOf(term)) {
matches.push(choices[i]);
}
}
suggest(matches.sort());
},
onSelect: function () {
}
});
[tagBar, document.getElementById("tag-color")].forEach(elem => {
elem.addEventListener("keyup", e => {
if (e.key === "Enter") {
console.log("Add tag");
//TODO
}
});
})
$("#tag-color").colorpicker({
format: "hex",
sliders: {
saturation: {
selector: '.colorpicker-saturation',
callLeft: 'setSaturationRatio',
callTop: 'setValueRatio'
},
hue: {
selector: '.colorpicker-hue',
maxLeft: 0,
callLeft: false,
callTop: 'setHueRatio'
}
}
});
};
function toggleFuzzy() {
@@ -257,12 +305,13 @@ function addTag(map, tag, id, count) {
children: [],
isLeaf: tags.length === 1,
//Overwrite base functions
blur: function() {},
select: function() {
blur: function () {
},
select: function () {
this.state("selected", true);
return this.check()
},
deselect: function() {
deselect: function () {
this.state("selected", false);
return this.uncheck()
},
@@ -719,5 +768,34 @@ function getPathChoices() {
}
}
}).then(resp => getPaths(resp["suggest"]["path"][0]["options"].map(opt => opt["_source"]["path"])));
})
});
}
function getTagChoices() {
return new Promise(getPaths => {
$.jsonPost("es", {
suggest: {
tag: {
prefix: tagBar.value,
completion: {
field: "suggest-tag",
skip_duplicates: true,
size: 10000
}
}
}
}).then(resp => {
const result = [];
resp["suggest"]["tag"][0]["options"].map(opt => opt["_source"]["tag"]).forEach(tags => {
tags.forEach(tag => {
const t = tag.split("#")[0];
if (result.indexOf(t) === -1) {
result.push(t);
}
});
});
getPaths(result);
});
});
}

View File

@@ -14,7 +14,8 @@
<span class="badge badge-pill version">2.5.2</span>
<span class="tagline">Lightning-fast file system indexer and search tool </span>
<a class="btn ml-auto" href="/stats">Stats</a>
<button class="btn" type="button" data-toggle="modal" data-target="#settings" onclick="loadSettings()">Settings</button>
<button class="btn" type="button" data-toggle="modal" data-target="#settings" onclick="loadSettings()">Settings
</button>
<button class="btn" title="Toggle theme" onclick="toggleTheme()">Theme</button>
</nav>
@@ -48,8 +49,11 @@
<div class="col">
<div class="input-group" style="margin-bottom: 0.5em; margin-top: 1em">
<div class="input-group-prepend">
<button id="pathBarHelper" class="btn btn-outline-secondary" data-toggle="modal" data-target="#pathTreeModal">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20px"><path d="M288 224h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32H400L368 0h-80a32 32 0 0 0-32 32v64H64V8a8 8 0 0 0-8-8H40a8 8 0 0 0-8 8v392a16 16 0 0 0 16 16h208v64a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32H400l-32-32h-80a32 32 0 0 0-32 32v64H64V128h192v64a32 32 0 0 0 32 32zm0 96h66.74l32 32H512v128H288zm0-288h66.74l32 32H512v128H288z"/></svg>
<button id="pathBarHelper" class="btn btn-outline-secondary" data-toggle="modal"
data-target="#pathTreeModal">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="20px">
<path d="M288 224h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32H400L368 0h-80a32 32 0 0 0-32 32v64H64V8a8 8 0 0 0-8-8H40a8 8 0 0 0-8 8v392a16 16 0 0 0 16 16h208v64a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32H400l-32-32h-80a32 32 0 0 0-32 32v64H64V128h192v64a32 32 0 0 0 32 32zm0 96h66.74l32 32H512v128H288zm0-288h66.74l32 32H512v128H288z"/>
</svg>
</button>
</div>
<input id="pathBar" type="search" class="form-control" placeholder="Filter path">
@@ -156,7 +160,8 @@
<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 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"
@@ -189,12 +194,14 @@
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settingSearchInPath">
<label class="custom-control-label" for="settingSearchInPath">Enable matching query against document path</label>
<label class="custom-control-label" for="settingSearchInPath">Enable matching query against
document path</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settingSuggestPath">
<label class="custom-control-label" for="settingSuggestPath">Enable auto-complete in path filter bar</label>
<label class="custom-control-label" for="settingSuggestPath">Enable auto-complete in path filter
bar</label>
</div>
<br/>
@@ -288,6 +295,32 @@
</div>
</div>
<div class="modal" id="tagModal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add tag</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col col-8">
<input type="text" id="tagBar" class="form-control">
</div>
<div class="col col-4">
<input type="text" id="tag-color" value="" class="form-control"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="searchResults"></div>
</div>

File diff suppressed because one or more lines are too long