Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-29 19:56:09 +01:00
Code Issues Projects Releases Wiki Activity

feature (tag): tag feature behind canary flag

Browse source
This commit is contained in:
MickaelK 2024-11-19 14:54:36 +11:00
parent 92673f9ae3
commit 66cc697b25
8 changed files with 109 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/assets/components/breadcrumb.js
View file

@ -119,7 +119,7 @@ class ComponentBreadcrumb extends HTMLElement {
return `
<div class="component_path-element n${idx}" data-path="${pathChunks.slice(0, idx+1).join("/") + "/"}">
<div class="li component_path-element-wrapper">
<a class="label" href="${forwardURLParams(toHref("/files") + link, ["share"])}" data-link>
<a class="label" href="${forwardURLParams(toHref("/files") + link, ["share", "canary"])}" data-link>
${tmpl}
</a>
<div class="component_separator">

10
public/assets/components/sidebar.css
View file

@ -16,7 +16,8 @@
.component_filemanager_shell .component_sidebar > div { direction: ltr; }
.component_filemanager_shell .component_sidebar h3 {
display: flex;
margin-bottom: 10px;
margin-bottom: 5px;
margin-top: 20px;
color: var(--light);
font-size: 0.9rem;
opacity: 0.8;
@ -29,10 +30,11 @@ body.touch-no .component_filemanager_shell .component_sidebar h3 img:hover {
.component_filemanager_shell .component_sidebar h3 img {
padding-right: 4px;
cursor: pointer;
width: 16px;
}
.component_filemanager_shell .component_sidebar h3 input::placeholder {
text-transform: capitalize;
color: var(--color);
color: var(--light);
}
.component_filemanager_shell .component_sidebar h3 input {
border: none;
@ -41,7 +43,8 @@ body.touch-no .component_filemanager_shell .component_sidebar h3 img:hover {
font-size: inherit;
background: inherit;
}
.component_filemanager_shell .component_sidebar [data-bind="your-files"] > ul { margin-left: 0px; }
.component_filemanager_shell .component_sidebar [data-bind="your-files"] { margin-bottom: 30px; }
.component_filemanager_shell .component_sidebar [data-bind] > ul { margin-left: 0px; }
.component_filemanager_shell .component_sidebar ul {
margin-top: 0px;
padding: 0;
@ -87,4 +90,5 @@ body.touch-no .component_filemanager_shell .component_sidebar h3 img:hover {
}
.component_filemanager_shell .component_sidebar a > div {
padding-left: 2px;
text-transform: capitalize;
}

71
public/assets/components/sidebar.js
View file

@ -1,4 +1,4 @@
import { createElement, onDestroy } from "../lib/skeleton/index.js";
import { createElement, createRender, onDestroy } from "../lib/skeleton/index.js";
import rxjs, { effect, onClick } from "../lib/rx.js";
import { fromHref, toHref } from "../lib/skeleton/router.js";
import { qs, qsa } from "../lib/dom.js";
@ -29,13 +29,11 @@ export default async function ctrlSidebar(render, nRestart = 0) {
</h3>
<div data-bind="your-files"></div>
<!--
<h3>${t("Shared Drive")}</h3>
<div></div>
<h3>${t("Tags")}</h3>
<div></div>
-->
<h3>
<img src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxwYXRoIHN0eWxlPSJmaWxsOiAjNTc1OTVhOyIgZD0iTTEgNy43NzVWMi43NUMxIDEuNzg0IDEuNzg0IDEgMi43NSAxaDUuMDI1Yy40NjQgMCAuOTEuMTg0IDEuMjM4LjUxM2w2LjI1IDYuMjVhMS43NSAxLjc1IDAgMCAxIDAgMi40NzRsLTUuMDI2IDUuMDI2YTEuNzUgMS43NSAwIDAgMS0yLjQ3NCAwbC02LjI1LTYuMjVBMS43NTIgMS43NTIgMCAwIDEgMSA3Ljc3NVptMS41IDBjMCAuMDY2LjAyNi4xMy4wNzMuMTc3bDYuMjUgNi4yNWEuMjUuMjUgMCAwIDAgLjM1NCAwbDUuMDI1LTUuMDI1YS4yNS4yNSAwIDAgMCAwLS4zNTRsLTYuMjUtNi4yNWEuMjUuMjUgMCAwIDAtLjE3Ny0uMDczSDIuNzVhLjI1LjI1IDAgMCAwLS4yNS4yNVpNNiA1YTEgMSAwIDEgMSAwIDIgMSAxIDAgMCAxIDAtMloiPjwvcGF0aD4NCjwvc3ZnPg0K" alt="tag">
${t("Tags")}
</h3>
<div data-bind="your-tags"></div>
</div></div>
`));
@ -70,6 +68,14 @@ export default async function ctrlSidebar(render, nRestart = 0) {
forceRefresh();
})));
// fature: navigation pane
ctrlNavigationPane(render, { $sidebar, nRestart });
// feature: tag viewer
ctrlTagPane(createRender(qs($sidebar, `[data-bind="your-tags"]`)));
}
async function ctrlNavigationPane(render, { $sidebar, nRestart }) {
// feature: setup the DOM
const $files = qs($sidebar, `[data-bind="your-files"]`);
if (state.$cache) {
@ -88,7 +94,7 @@ export default async function ctrlSidebar(render, nRestart = 0) {
for (let i = 0; i<arr.length-1; i++) {
const path = chunk.toString(i);
try {
const $list = await createListOfFiles(path, arr[i+1], fullpath);
const $list = await _createListOfFiles(path, arr[i+1], fullpath);
const $anchor = i === 0 ? $tree : qs($tree, `[data-path="${chunk.toString(i)}"]`);
$anchor.appendChild($list);
} catch (err) {
@ -103,7 +109,7 @@ export default async function ctrlSidebar(render, nRestart = 0) {
// feature: smart refresh whenever something happen
const cleaners = [];
cleaners.push(hooks.ls.listen(async({ path }) => {
const $list = await createListOfFiles(path);
const $list = await _createListOfFiles(path);
try {
const $ul = qs($sidebar, `[data-path="${path}"] ul`);
$ul.replaceWith($list);
@ -111,7 +117,7 @@ export default async function ctrlSidebar(render, nRestart = 0) {
}));
cleaners.push(hooks.mutation.listen(async({ op, path }) => {
if (["mv", "mkdir", "rm"].indexOf(op) === -1) return;
const $list = await createListOfFiles(path);
const $list = await _createListOfFiles(path);
try {
const $ul = qs($sidebar, `[data-path="${path}"] ul`);
$ul.replaceWith($list);
@ -133,7 +139,7 @@ export default async function ctrlSidebar(render, nRestart = 0) {
rxjs.debounceTime(200),
rxjs.tap((e) => {
const inputValue = e.target.value.toLowerCase();
qsa($sidebar, "li a").forEach(($li) => {
qsa($sidebar, "[data-bind=\"your-files\"] li a").forEach(($li) => {
if (inputValue === "") {
$li.classList.remove("hidden");
$sidebar.classList.remove("search");
@ -148,7 +154,7 @@ export default async function ctrlSidebar(render, nRestart = 0) {
));
}
async function createListOfFiles(path, currentName, fullpath) {
async function _createListOfFiles(path, currentName, fullpath) {
const r = await cache().get(path);
const whats = r === null
? (currentName ? [currentName] : [])
@ -161,7 +167,7 @@ async function createListOfFiles(path, currentName, fullpath) {
const currpath = path + whats[i] + "/";
const $li = createElement(`
<li data-path="${currpath}" title="${currpath}" class="no-select">
<a data-link href="${forwardURLParams(toHref("/files" + currpath), ["share"])}" draggable="false">
<a data-link href="${forwardURLParams(toHref("/files" + currpath), ["share", "canary"])}" draggable="false">
<img class="component_icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgYXJpYS1oaWRkZW49InRydWUiCiAgIGZvY3VzYWJsZT0iZmFsc2UiCiAgIGNsYXNzPSJvY3RpY29uIG9jdGljb24tZmlsZS1kaXJlY3RvcnktZmlsbCIKICAgdmlld0JveD0iMCAwIDE2IDE2IgogICB3aWR0aD0iMTYiCiAgIGhlaWdodD0iMTYiCiAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgdXNlci1zZWxlY3Q6IG5vbmU7IHZlcnRpY2FsLWFsaWduOiB0ZXh0LWJvdHRvbTsgb3ZlcmZsb3c6IHZpc2libGU7IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNTgiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImdpdGh1YmZvbGRlci5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMi4yIChiMGE4NDg2NTQxLCAyMDIyLTEyLTAxKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTYyIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3MTYwIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzAwMDAwMCIKICAgICBib3JkZXJvcGFjaXR5PSIwLjI1IgogICAgIGlua3NjYXBlOnNob3dwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjcxLjYyNSIKICAgICBpbmtzY2FwZTpjeD0iNy44MTE1MTgzIgogICAgIGlua3NjYXBlOmN5PSI4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjAzNiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzk3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSI3IgogICAgIGlua3NjYXBlOndpbmRvdy15PSIzNCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzE1OCIgLz4KICA8cGF0aAogICAgIGQ9Ik0xLjc1IDFBMS43NSAxLjc1IDAgMCAwIDAgMi43NXYxMC41QzAgMTQuMjE2Ljc4NCAxNSAxLjc1IDE1aDEyLjVBMS43NSAxLjc1IDAgMCAwIDE2IDEzLjI1di04LjVBMS43NSAxLjc1IDAgMCAwIDE0LjI1IDNINy41YS4yNS4yNSAwIDAgMS0uMi0uMWwtLjktMS4yQzYuMDcgMS4yNiA1LjU1IDEgNSAxSDEuNzVaIgogICAgIGlkPSJwYXRoMTU2IgogICAgIHN0eWxlPSJmaWxsOiM1NzU5NWE7ZmlsbC1vcGFjaXR5OjEiIC8+Cjwvc3ZnPgo=" alt="directory">
<div class="ellipsis">${whats[i]}</div>
</a>
@ -196,6 +202,43 @@ async function createListOfFiles(path, currentName, fullpath) {
return $ul;
}
async function ctrlTagPane(render) {
const $page = createElement(`
<ul>
<li data-bind="taglist"></li>
</ul>
`);
render($page);
// only enable this pane in canary mode until it's actually ready
if (new URLSearchParams(location.search).get("canary") !== "true") {
$page.classList.add("hidden");
$page.parentElement.previousElementSibling.classList.add("hidden");
return;
}
const tags = [
{ name: t("Bookmark"), color: "green" },
{ name: "important", color: "red" },
{ name: "foobar", color: "saddlebrown" },
];
const $tmpl = (name, color) => createElement(`
<a data-link href="/tags/${name}/?canary=true" draggable="false">
<svg class="component_icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" style="opacity: 0.25; fill: ${color};" />
</svg>
<div class="ellipsis">${name}</div>
</a>
`);
const $fragment = document.createDocumentFragment();
tags.forEach(({ name, color }) => {
$fragment.appendChild($tmpl(name, color));
});
qs($page, `[data-bind="taglist"]`).appendChild($fragment);
}
export function init() {
return loadCSS(import.meta.url, "./sidebar.css");
}

15
public/assets/pages/filespage/ctrl_submenu.js
View file

@ -12,7 +12,6 @@ import "../../components/icon.js";
import { createModal } from "../../components/modal.js";
import componentShare from "./modal_share.js";
import componentEmbed from "./modal_embed.js";
import componentTag from "./modal_tag.js";
import componentRename from "./modal_rename.js";
import componentDelete from "./modal_delete.js";
@ -116,10 +115,7 @@ function componentLeft(render, { $scroll }) {
<button data-action="share" title="${t("Share")}" class="${(window.CONFIG["enable_share"] && !new URLSearchParams(location.search).has("share")) ? "" : "hidden"}">
${t("Share")}
</button>
<button data-action="embed" title="${t("Embed")}" class="hidden">
${t("Embed")}
</button>
<button data-action="tag" title="${t("Tag")}" class="hidden">
<button data-action="tag" title="${t("Tag")}" class="${new URLSearchParams(location.search).get("canary") === 'true' ? "" : "hidden"}">
${t("Tag")}
</button>
`))),
@ -135,11 +131,12 @@ function componentLeft(render, { $scroll }) {
targetHeight: 315,
}), { path: expandSelection()[0].path });
})),
onClick(qs($page, `[data-action="embed"]`)).pipe(rxjs.tap(() => {
componentEmbed(createModal(modalOpt));
})),
onClick(qs($page, `[data-action="tag"]`)).pipe(rxjs.tap(() => {
componentTag(createModal(modalOpt));
componentTag(createModal({
...modalOpt,
withButtonsLeft: null,
withButtonsRight: null,
}, { path: expandSelection()[0].path }));
})),
onClick(qs($page, `[data-action="rename"]`)).pipe(rxjs.mergeMap(() => {
const path = expandSelection()[0].path;

10
public/assets/pages/filespage/modal_embed.js
View file

@ -1,10 +0,0 @@
import { createElement } from "../../lib/skeleton/index.js";
export default function(render) {
const $modal = createElement(`
<div>
EMBED CODE
</div>
`);
render($modal);
}

27
public/assets/pages/filespage/modal_tag.css
View file

@ -1,19 +1,26 @@
.component_tag {
font-size: 1rem;
}
.component_tag input {
font-size: 1.2em;
font-size: 1.15rem;
border: 2px solid var(--border);
border-radius: 3px;
padding: 2px 5px;
color: var(--color);
}
.component_tag input::placeholder {
font-weight: 100;
color: rgba(0,0,0,0.2);
}
.component_tag .box {
display: flex;
background: var(--bg-color);
transition: background 0.1s ease;
padding: 5px 10px;
padding: 2px 5px 2px 8px;
border-radius: 3px;
font-size: 0.95rem;
}
.component_tag .box.active {
background: var(--primary);
color: var(--color);
}
.component_tag .box > div {
flex-grow: 1;
@ -26,17 +33,7 @@
}
.component_tag .box img[alt="close"] {
width: 14px;
padding: 3px;
}
.component_tag .box .count {
opacity: 0.5;
font-size: 0.9rem;
}
.component_tag .box .count:before {
content: "[";
}
.component_tag .box .count:after {
content: "]";
padding: 5px;
}
.component_tag .scroll-y {

47
public/assets/pages/filespage/modal_tag.js
View file

@ -1,35 +1,38 @@
import { createElement } from "../../lib/skeleton/index.js";
import { qs } from "../../lib/dom.js";
import t from "../../locales/index.js";
const ICON_CLOSE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=";
const $tmpl = createElement(`
<div class="box no-select">
<div class="ellipsis">Projects</div>
<img class="component_icon" draggable="false" src="${ICON_CLOSE}" alt="close">
</div>
`);
export default function(render) {
const tags = [
{ name: "Bookmark", active: true },
{ name: "Projects" },
{ name: "Important" },
];
const $modal = createElement(`
<div class="component_tag">
<form>
<input class="component_input" type="text" placeholder="${t("Create a Tag")}" value="">
</form>
<div class="scroll-y">
<div class="box no-select">
<div class="ellipsis">test <span class="count">2</span></div>
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMwOSIgZD0ibSAxNi44ODUsMTUuNDU1IC00LjU5LC00LjU4IC00LjU5LDQuNTggLTEuNDEsLTEuNDEgNiwtNiA2LDYgeiIgLz4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMC0uMjVoMjR2MjRIMHoiIC8+Cjwvc3ZnPgo=" alt="arrow_top">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMyMSIgZD0ibSA3LjcwNSw4LjA0NSA0LjU5LDQuNTggNC41OSwtNC41OCAxLjQxLDEuNDEgLTYsNiAtNiwtNiB6IiAvPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wLS4yNWgyNHYyNEgweiIgLz4KPC9zdmc+Cg==" alt="arrow_bottom">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=" alt="close">
</div>
<div class="box no-select">
<div class="ellipsis">kjhjk <span class="count">1</span></div>
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMwOSIgZD0ibSAxNi44ODUsMTUuNDU1IC00LjU5LC00LjU4IC00LjU5LDQuNTggLTEuNDEsLTEuNDEgNiwtNiA2LDYgeiIgLz4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMC0uMjVoMjR2MjRIMHoiIC8+Cjwvc3ZnPgo=" alt="arrow_top">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMyMSIgZD0ibSA3LjcwNSw4LjA0NSA0LjU5LDQuNTggNC41OSwtNC41OCAxLjQxLDEuNDEgLTYsNiAtNiwtNiB6IiAvPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wLS4yNWgyNHYyNEgweiIgLz4KPC9zdmc+Cg==" alt="arrow_bottom">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=" alt="close">
</div>
<div class="box no-select active">
<div class="ellipsis">jh <span class="count">2</span></div>
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMwOSIgZD0ibSAxNi44ODUsMTUuNDU1IC00LjU5LC00LjU4IC00LjU5LDQuNTggLTEuNDEsLTEuNDEgNiwtNiA2LDYgeiIgLz4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMC0uMjVoMjR2MjRIMHoiIC8+Cjwvc3ZnPgo=" alt="arrow_top">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMyMSIgZD0ibSA3LjcwNSw4LjA0NSA0LjU5LDQuNTggNC41OSwtNC41OCAxLjQxLDEuNDEgLTYsNiAtNiwtNiB6IiAvPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wLS4yNWgyNHYyNEgweiIgLz4KPC9zdmc+Cg==" alt="arrow_bottom">
<img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MS45NzYgNTEuOTc2Ij4KICA8cGF0aCBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eTowLjUzMzMzMjg1O3N0cm9rZS13aWR0aDoxLjQ1NjgxMTE5IiBkPSJtIDQxLjAwNTMxLDQwLjg0NDA2MiBjIC0xLjEzNzc2OCwxLjEzNzc2NSAtMi45ODIwODgsMS4xMzc3NjUgLTQuMTE5ODYxLDAgTCAyNi4wNjg2MjgsMzAuMDI3MjM0IDE0LjczNzU1MSw0MS4zNTgzMSBjIC0xLjEzNzc3MSwxLjEzNzc3MSAtMi45ODIwOTMsMS4xMzc3NzEgLTQuMTE5ODYxLDAgLTEuMTM3NzcyMiwtMS4xMzc3NjggLTEuMTM3NzcyMiwtMi45ODIwODggMCwtNC4xMTk4NjEgTCAyMS45NDg3NjYsMjUuOTA3MzcyIDExLjEzMTkzOCwxNS4wOTA1NTEgYyAtMS4xMzc3NjQ3LC0xLjEzNzc3MSAtMS4xMzc3NjQ3LC0yLjk4MzU1MyAwLC00LjExOTg2MSAxLjEzNzc3NCwtMS4xMzc3NzIxIDIuOTgyMDk4LC0xLjEzNzc3MjEgNC4xMTk4NjUsMCBMIDI2LjA2ODYyOCwyMS43ODc1MTIgMzYuMzY5NzM5LDExLjQ4NjM5OSBjIDEuMTM3NzY4LC0xLjEzNzc2OCAyLjk4MjA5MywtMS4xMzc3NjggNC4xMTk4NjIsMCAxLjEzNzc2NywxLjEzNzc2OSAxLjEzNzc2NywyLjk4MjA5NCAwLDQuMTE5ODYyIEwgMzAuMTg4NDg5LDI1LjkwNzM3MiA0MS4wMDUzMSwzNi43MjQxOTcgYyAxLjEzNzc3MSwxLjEzNzc2NyAxLjEzNzc3MSwyLjk4MjA5MSAwLDQuMTE5ODY1IHoiIC8+Cjwvc3ZnPgo=" alt="close">
</div>
</div>
<div class="scroll-y" data-bind="taglist"></div>
</div>
`);
render($modal, ({ id }) => {
console.log("QUIT", id);
const $fragment = document.createDocumentFragment();
tags.forEach(({ name, active }) => {
const $el = $tmpl.cloneNode(true);
$el.firstElementChild.innerText = name;
if (active) $el.classList.add("active");
$fragment.appendChild($el);
});
qs($modal, `[data-bind="taglist"]`).appendChild($fragment);
render($modal, ({ id }) => { console.log("QUIT", id) });
}

2
server/ctrl/static.go
View file

@ -271,7 +271,7 @@ func ServeFrontofficeHandler(ctx *App, res http.ResponseWriter, req *http.Reques
"/assets/pages/filespage/model_files.js", "/assets/pages/filespage/helper.js",
"/assets/pages/filespage/model_acl.js", "/assets/pages/filespage/state_config.js",
"/assets/pages/filespage/state_newthing.js", "/assets/pages/filespage/state_selection.js",
"/assets/pages/filespage/modal_delete.js", "/assets/pages/filespage/modal_rename.js", "/assets/pages/filespage/modal_tag.js", "/assets/pages/filespage/modal_embed.js",
"/assets/pages/filespage/modal_delete.js", "/assets/pages/filespage/modal_rename.js", "/assets/pages/filespage/modal_tag.js",
"/assets/components/form.js",
"/assets/helpers/log.js", "/assets/lib/error.js", "/assets/model/config.js",