diff --git a/public/components/breadcrumb.js b/public/components/breadcrumb.js
index 08733772..35b2b13d 100644
--- a/public/components/breadcrumb.js
+++ b/public/components/breadcrumb.js
@@ -7,7 +7,9 @@ class ComponentBreadcrumb extends HTMLDivElement {
super();
if (new window.URL(location.href).searchParams.get("nav") === "false") return null;
- const htmlLogout = isRunningFromAnIframe ? "":`
+ const htmlLogout = isRunningFromAnIframe
+ ? ""
+ : `
@@ -17,17 +19,18 @@ class ComponentBreadcrumb extends HTMLDivElement {
const htmlPathChunks = paths.slice(0, -1).map((chunk, idx) => {
const label = idx === 0 ? "Filestash" : chunk;
const link = paths.slice(0, idx).join("/") + "/";
- const minify = () => {
- if (idx === 0) return false;
- else if (paths.length <= (document.body.clientWidth > 800 ? 5 : 4)) return false;
- else if (idx > paths.length - (document.body.clientWidth > 1000? 4 : 3)) return false;
- return true;
- };
+ // const minify = () => {
+ // if (idx === 0) return false;
+ // else if (paths.length <= (document.body.clientWidth > 800 ? 5 : 4)) return false;
+ // else if (idx > paths.length - (document.body.clientWidth > 1000 ? 4 : 3)) return false;
+ // return true;
+ // };
const limitSize = (word) => { // TODO
return word;
};
const isLast = idx === paths.length - 1;
- if (isLast) return `
+ if (isLast) {
+ return `
@@ -36,6 +39,7 @@ class ComponentBreadcrumb extends HTMLDivElement {
`;
+ }
return `
@@ -48,7 +52,7 @@ class ComponentBreadcrumb extends HTMLDivElement {
- `
+ `;
}).join("");
this.innerHTML = `
diff --git a/public/components/form.js b/public/components/form.js
index a7d04616..b75ea7af 100644
--- a/public/components/form.js
+++ b/public/components/form.js
@@ -8,7 +8,7 @@ export function formTmpl(options = {}) {
const {
autocomplete = true,
renderNode = null,
- renderLeaf = null,
+ renderLeaf = null
} = options;
return {
renderNode: (opts) => {
@@ -36,7 +36,7 @@ export function formTmpl(options = {}) {
`);
},
renderInput: $renderInput({ autocomplete }),
- formatLabel: format,
+ formatLabel: format
};
};
@@ -53,34 +53,34 @@ function $renderInput(options = {}) {
readonly = false,
path = [],
datalist = null,
- options = null,
+ options = null
} = props;
let attr = `name="${path.join(".")}" `;
if (id) attr += `id="${id}" `;
if (placeholder) attr += `placeholder="${safe(placeholder, "\"")}" `;
- if (!autocomplete) attr += `autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off" `;
+ if (!autocomplete) attr += "autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"off\" ";
if (required) attr += "required ";
if (readonly) attr += "readonly ";
switch (type) {
- case "text": // TODO
- const dataListId = gid("list_");
- const $input = createElement(`
+ case "text": // TODO
+ const dataListId = gid("list_");
+ const $input = createElement(`
`);
- if (!datalist) return $input;
- const $wrapper = window.document.createElement("span");
- const $datalist = window.document.createElement("datalist")
- $wrapper.appendChild($input);
- $datalist.setAttribute("id", dataListId);
- return $wrapper;
- case "enable":
- return createElement(`
+ if (!datalist) return $input;
+ const $wrapper = window.document.createElement("span");
+ const $datalist = window.document.createElement("datalist");
+ $wrapper.appendChild($input);
+ $datalist.setAttribute("id", dataListId);
+ return $wrapper;
+ case "enable":
+ return createElement(`
`);
- case "number":
- return createElement(`
+ case "number":
+ return createElement(`
`);
- case "password":
- // TODO: click eye
- const $node = createElement(`
+ case "password":
+ // TODO: click eye
+ const $node = createElement(`
`);
- const $icon = $node.querySelector("component-icon");
- if ($icon instanceof window.HTMLElement) $icon.onclick = function(e) {
+ const $icon = $node.querySelector("component-icon");
+ if ($icon instanceof window.HTMLElement) {
+ $icon.onclick = function(e) {
if (!(e.target instanceof window.HTMLElement)) return;
const $input = e.target.parentElement.previousElementSibling;
if ($input.getAttribute("type") === "password") $input.setAttribute("type", "text");
else $input.setAttribute("type", "password");
};
- return $node;
- case "long_password":
- // TODO
- case "long_text":
- return createElement(`
+ }
+ return $node;
+ case "long_password":
+ // TODO
+ case "long_text":
+ return createElement(`
`);
- case "bcrypt":
- return createElement(`
+ case "bcrypt":
+ return createElement(`
`);
- // TODO
- case "hidden":
- return createElement(`
+ // TODO
+ case "hidden":
+ return createElement(`
`);
- case "boolean":
- return createElement(`
+ case "boolean":
+ return createElement(`
`);
- case "select":
- const renderOption = (name) => ``;
- return createElement(`
+ case "select":
+ const renderOption = (name) => ``;
+ return createElement(`
`);
- case "date":
- return createElement(`
+ case "date":
+ return createElement(`
`);
- case "datetime":
- return createElement(`
+ case "datetime":
+ return createElement(`
`);
- case "image":
- return createElement(`})
`);
- case "file":
- // return createElement() // TODO
- default:
- return createElement(`
+ case "image":
+ return createElement(``);
+ case "file":
+ // return createElement() // TODO
+ default:
+ return createElement(`
`);
}
- }
+ };
}
export function format(name) {
diff --git a/public/components/icon.js b/public/components/icon.js
index 8071d6d4..ffc90931 100644
--- a/public/components/icon.js
+++ b/public/components/icon.js
@@ -1,8 +1,4 @@
class Icon extends window.HTMLElement {
- constructor() {
- super();
- }
-
static get observedAttributes() {
return ["name"];
}
@@ -19,16 +15,16 @@ class Icon extends window.HTMLElement {
draggable="false"
src="${img}"
alt="${name}" />`;
-
}
+
_mapOfIcon(name) {
- switch(name) {
+ switch (name) {
case "arrow_right":
return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MC41MzMzMzMzNiIgZD0iTTguNTkgMTYuMzRsNC41OC00LjU5LTQuNTgtNC41OUwxMCA1Ljc1bDYgNi02IDZ6IiAvPgogIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wLS4yNWgyNHYyNEgweiIgLz4KPC9zdmc+Cg==";
case "arrow_left":
- return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzZmNmY2ZjtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS41MTE4MTEwMjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgZD0ibSAxNiw3LjE2IC00LjU4LDQuNTkgNC41OCw0LjU5IC0xLjQxLDEuNDEgLTYsLTYgNiwtNiB6Ii8+CiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAtLjI1aDI0djI0SDB6Ii8+Cjwvc3ZnPgo="
+ return "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggc3R5bGU9ImZpbGw6IzZmNmY2ZjtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MS41MTE4MTEwMjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZSIgZD0ibSAxNiw3LjE2IC00LjU4LDQuNTkgNC41OCw0LjU5IC0xLjQxLDEuNDEgLTYsLTYgNiwtNiB6Ii8+CiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAtLjI1aDI0djI0SDB6Ii8+Cjwvc3ZnPgo=";
case "eye":
- return "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzkxOTE5MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjRweDt9PC9zdHlsZT4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEsMjRhMjYuODUsMjYuODUsMCwwLDEsNDYsMCIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMSwyNGEyNi44NSwyNi44NSwwLDAsMCw0NiwwIi8+CiAgICA8ZWxsaXBzZSBjbGFzcz0iY2xzLTEiIGN4PSIyNCIgY3k9IjI0IiByeD0iNyIgcnk9IjciLz4KPC9zdmc+Cg=="
+ return "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8c3R5bGU+LmNscy0xe2ZpbGw6bm9uZTtzdHJva2U6IzkxOTE5MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjRweDt9PC9zdHlsZT4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEsMjRhMjYuODUsMjYuODUsMCwwLDEsNDYsMCIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMSwyNGEyNi44NSwyNi44NSwwLDAsMCw0NiwwIi8+CiAgICA8ZWxsaXBzZSBjbGFzcz0iY2xzLTEiIGN4PSIyNCIgY3k9IjI0IiByeD0iNyIgcnk9IjciLz4KPC9zdmc+Cg==";
case "loading":
return "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0nMTIwcHgnIGhlaWdodD0nMTIwcHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXJpbmctYWx0Ij4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgY2xhc3M9ImJrIj48L3JlY3Q+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L2NpcmNsZT4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSIjNmY2ZjZmIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2UtZGFzaG9mZnNldCIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGZyb209IjAiIHRvPSI1MDIiPjwvYW5pbWF0ZT4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNoYXJyYXkiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiB2YWx1ZXM9IjE1MC42IDEwMC40OzEgMjUwOzE1MC42IDEwMC40Ij48L2FuaW1hdGU+CiAgPC9jaXJjbGU+Cjwvc3ZnPgo=";
}
diff --git a/public/components/loader.js b/public/components/loader.js
index 73441031..3a229099 100644
--- a/public/components/loader.js
+++ b/public/components/loader.js
@@ -40,8 +40,8 @@ class Loader extends window.HTMLElement {
window.customElements.define("component-loader", Loader);
-export default createElement(``);
+export default createElement("");
export function toggle($node, show = false) {
- if (show === true) return rxjs.tap(() => $node.appendChild(createElement(``)));
+ if (show === true) return rxjs.tap(() => $node.appendChild(createElement("")));
else return rxjs.tap(() => $node.querySelector("component-loader")?.remove());
}
diff --git a/public/components/modal.js b/public/components/modal.js
index 335e66aa..35b78042 100644
--- a/public/components/modal.js
+++ b/public/components/modal.js
@@ -8,17 +8,13 @@ import { CSS } from "../helpers/loader.js";
let _observables = [];
const effect = (obs) => _observables.push(obs.subscribe());
const free = () => {
- for (let i=0; i<_observables.length; i++) {
+ for (let i = 0; i < _observables.length; i++) {
_observables[i].unsubscribe();
}
_observables = [];
-}
+};
export default class Modal extends HTMLElement {
- constructor() {
- super();
- }
-
async trigger($node, opts = {}) {
const { onQuit, leftButton, rightButton } = opts;
const $modal = createElement(`
@@ -39,7 +35,7 @@ export default class Modal extends HTMLElement {
// feature: setup the modal body
effect(rxjs.of([$node]).pipe(
- applyMutation(qs($modal, `[data-bind="body"]`), "appendChild"),
+ applyMutation(qs($modal, "[data-bind=\"body\"]"), "appendChild")
));
// feature: closing the modal
@@ -48,24 +44,24 @@ export default class Modal extends HTMLElement {
rxjs.filter((e) => e.target.getAttribute("id") === "modal-box")
),
rxjs.fromEvent(window, "keydown").pipe(
- rxjs.filter((e) => e.keyCode === 27),
- ),
+ rxjs.filter((e) => e.keyCode === 27)
+ )
).pipe(
rxjs.tap(() => typeof onQuit === "function" && onQuit()),
rxjs.tap(() => animate(qs($modal, "div > div"), {
time: 200,
keyframes: [
{ opacity: 1, transform: "translateY(0)" },
- { opacity: 0, transform: "translateY(20px)" },
+ { opacity: 0, transform: "translateY(20px)" }
]
})),
rxjs.delay(100),
rxjs.tap(() => animate($modal, {
time: 200,
- keyframes: [ { opacity: 1 }, { opacity: 0 } ]
+ keyframes: [{ opacity: 1 }, { opacity: 0 }]
})),
rxjs.mapTo([]), applyMutation($modal, "remove"),
- rxjs.tap(free),
+ rxjs.tap(free)
));
// feature: animate opening
@@ -75,17 +71,17 @@ export default class Modal extends HTMLElement {
time: 250,
keyframes: [
{ opacity: 0 },
- { opacity: 1 },
- ],
+ { opacity: 1 }
+ ]
})),
rxjs.delay(50),
rxjs.tap(() => animate(qs($modal, "div > div"), {
time: 200,
keyframes: [
{ opacity: 0, transform: "translateY(10px)" },
- { opacity: 1, transform: "translateY(0)" },
- ],
- })),
+ { opacity: 1, transform: "translateY(0)" }
+ ]
+ }))
));
// feature: center horizontally
@@ -103,7 +99,7 @@ export default class Modal extends HTMLElement {
return size;
}),
rxjs.map((size) => ["margin", `${size}px auto 0 auto`]),
- applyMutation(qs(this, ".component_modal > div"), "style", "setProperty"),
+ applyMutation(qs(this, ".component_modal > div"), "style", "setProperty")
));
}
}
diff --git a/public/helpers/loader.js b/public/helpers/loader.js
index 2de2cf67..3b871e9b 100644
--- a/public/helpers/loader.js
+++ b/public/helpers/loader.js
@@ -15,9 +15,9 @@ export async function CSS(baseURL, ...arrayOfFilenames) {
async function loadSingleCSS(baseURL, filename) {
const res = await fetch(baseURL.replace(/(.*)\/[^\/]+$/, "$1/") + filename, {
- cache: "default",
+ cache: "default"
});
if (res.status !== 200) return `/* ERROR: ${res.status} */`;
- else if (!res.headers.get("Content-Type").startsWith("text/css")) return `/* ERROR: wrong type, got "${res.headers.get("Content-Type")}"*/`
+ else if (!res.headers.get("Content-Type").startsWith("text/css")) return `/* ERROR: wrong type, got "${res.headers.get("Content-Type")}"*/`;
return await res.text();
}
diff --git a/public/helpers/log.js b/public/helpers/log.js
index 7c8ab9ad..263f63e5 100644
--- a/public/helpers/log.js
+++ b/public/helpers/log.js
@@ -1,12 +1,12 @@
export function report(msg, error, link, lineNo, columnNo) {
if (window.navigator.onLine === false) return Promise.resolve();
let url = "/report?";
- url += "url="+encodeURIComponent(location.href)+"&";
- url += "msg="+encodeURIComponent(msg)+"&";
- url += "from="+encodeURIComponent(link)+"&";
- url += "from.lineNo="+lineNo+"&";
- url += "from.columnNo="+columnNo;
- if (error) url += "error="+encodeURIComponent(error.message)+"&";
+ url += "url=" + encodeURIComponent(location.href) + "&";
+ url += "msg=" + encodeURIComponent(msg) + "&";
+ url += "from=" + encodeURIComponent(link) + "&";
+ url += "from.lineNo=" + lineNo + "&";
+ url += "from.columnNo=" + columnNo;
+ if (error) url += "error=" + encodeURIComponent(error.message) + "&";
return fetch(url, { method: "post" }).catch(() => {});
}
diff --git a/public/jest.setup.js b/public/jest.setup.js
index 478ef90a..bf649704 100644
--- a/public/jest.setup.js
+++ b/public/jest.setup.js
@@ -6,16 +6,16 @@ global.window = new JSDOM("", { url: "http://example.com" }).window
global.document = global.window.document;
global.nextTick = () => new Promise((done) => process.nextTick(done));
global.location = global.window.location;
-global.createRender = function () {
+global.createRender = function() {
const fn = jest.fn();
- fn.get = (i = 0) => fn.mock.calls[i][0]
+ fn.get = (i = 0) => fn.mock.calls[i][0];
fn.size = () => fn.mock.calls.length;
return fn;
-}
+};
global.console = {
...console,
debug: jest.fn(),
info: jest.fn(),
warn: jest.fn(),
- error: jest.fn(),
+ error: jest.fn()
};
diff --git a/public/lib/ajax.js b/public/lib/ajax.js
index 2a160c7a..753ff63e 100644
--- a/public/lib/ajax.js
+++ b/public/lib/ajax.js
@@ -7,19 +7,19 @@ export default function(opts) {
if (!opts.headers) opts.headers = {};
opts.headers["X-Requested-With"] = "XmlHttpRequest";
const isJson = opts.responseType;
- return ajax({ ...opts, responseType: "text"}).pipe(
+ return ajax({ ...opts, responseType: "text" }).pipe(
rxjs.catchError((err) => rxjs.throwError(processError(err.xhr, err))),
rxjs.map((res) => {
- let result = res.xhr.responseText;
+ const result = res.xhr.responseText;
if (opts.responseType === "json") {
const json = JSON.parse(result);
- if (json["status"] !== "ok") {
+ if (json.status !== "ok") {
throw new AjaxError("Oups something went wrong", result);
}
- res["responseJSON"] = json;
+ res.responseJSON = json;
}
return res;
- }),
+ })
);
}
@@ -35,7 +35,7 @@ function processError(xhr, err) {
.replace(/\n{2,}/, "\n")
.trim()
.split("\n")
- )).join(" "),
+ )).join(" ")
};
}
return message || { message: "empty response" };
@@ -46,51 +46,51 @@ function processError(xhr, err) {
if (navigator.onLine === false) {
return new AjaxError("Connection Lost", err, "NO_INTERNET");
}
- switch(xhr.status) {
+ switch (xhr.status) {
case 500:
return new AjaxError(
message || "Oups something went wrong with our servers",
- err, "INTERNAL_SERVER_ERROR",
+ err, "INTERNAL_SERVER_ERROR"
);
break;
case 401:
return new AjaxError(
message || "Authentication error",
- err, "Unauthorized",
+ err, "Unauthorized"
);
case 403:
return new AjaxError(
message || "You can\'t do that",
- err, "FORBIDDEN",
+ err, "FORBIDDEN"
);
break;
case 413:
return new AjaxError(
message || "Payload too large",
- err, "PAYLOAD_TOO_LARGE",
+ err, "PAYLOAD_TOO_LARGE"
);
case 502:
return new AjaxError(
message || "The destination is acting weird",
- err, "BAD_GATEWAY",
+ err, "BAD_GATEWAY"
);
case 409:
- if (response["error_summary"]) { // dropbox way to say doesn't exist
+ if (response.error_summary) { // dropbox way to say doesn't exist
return new AjaxError(
"Doesn\'t exist",
- err, "UNKNOWN_PATH",
+ err, "UNKNOWN_PATH"
);
}
return new AjaxError(
message || "Oups you just ran into a conflict",
- err, "CONFLICT",
+ err, "CONFLICT"
);
case 0:
- switch(xhr.responseText) {
+ switch (xhr.responseText) {
case "":
return new AjaxError(
"Service unavailable, if the problem persist, contact your administrator",
- err, "INTERNAL_SERVER_ERROR",
+ err, "INTERNAL_SERVER_ERROR"
);
break;
default:
diff --git a/public/lib/animate.js b/public/lib/animate.js
index 1d61b16e..328dcbd9 100644
--- a/public/lib/animate.js
+++ b/public/lib/animate.js
@@ -4,15 +4,15 @@ import rxjs from "./rx.js";
export function transition($node, opts = {}) {
const {
timeEnter = 250, enter = slideXIn(5),
- timeLeave = 100, leave = opacityOut(),
+ timeLeave = 100, leave = opacityOut()
} = opts;
animate($node, { time: timeEnter, keyframes: enter });
- onDestroy(async () => await animate($node, { time: timeLeave, keyframes: leave }));
+ onDestroy(async() => await animate($node, { time: timeLeave, keyframes: leave }));
return $node;
}
export function animate($node, opts = {}) {
- let { time = 250, keyframes = opacityIn() } = opts;
+ const { time = 250, keyframes = opacityIn() } = opts;
if (!$node) return Promise.resolve();
else if (typeof $node.animate !== "function") return Promise.resolve();
@@ -20,42 +20,42 @@ export function animate($node, opts = {}) {
return new Promise((done) => {
const run = $node.animate(keyframes, {
duration: time,
- fill: "forwards",
+ fill: "forwards"
}).onfinish = done;
});
}
export const slideXIn = (dist) => ([
{ transform: `translateX(${dist}px)`, opacity: 0 },
- { transform: `translateX(0)`, opacity: 1 },
+ { transform: "translateX(0)", opacity: 1 }
]);
export const slideXOut = (size) => ([
- { opacity: 1, transform: `translateX(0)`},
- { opacity: 0, transform: `translateX(${size}px)` },
+ { opacity: 1, transform: "translateX(0)" },
+ { opacity: 0, transform: `translateX(${size}px)` }
]);
export const opacityIn = () => ([
{ opacity: 0 },
- { opacity: 1 },
+ { opacity: 1 }
]);
export const opacityOut = () => ([
{ opacity: 1 },
- { opacity: 0 },
+ { opacity: 0 }
]);
export const slideYIn = (size) => ([
{ opacity: 0, transform: `translateY(${size}px)` },
- { opacity: 1, transform: `translateY(0)`},
+ { opacity: 1, transform: "translateY(0)" }
]);
export const slideYOut = (size) => ([
- { opacity: 0, transform: `translateY(0px)` },
- { opacity: 1, transform: `translateY(${size}px)`},
+ { opacity: 0, transform: "translateY(0px)" },
+ { opacity: 1, transform: `translateY(${size}px)` }
]);
export const zoomIn = (size) => ([
- { opacity: 0, transform: `scale(${size})`},
- { opacity: 1, transform: `scale(1)`},
+ { opacity: 0, transform: `scale(${size})` },
+ { opacity: 1, transform: "scale(1)" }
]);
diff --git a/public/lib/dom.js b/public/lib/dom.js
index d43881f6..11590bb4 100644
--- a/public/lib/dom.js
+++ b/public/lib/dom.js
@@ -15,8 +15,8 @@ export function safe(str, ...escapeChars) {
const $div = document.createElement("div");
escapeChars.forEach((c) => {
- str = str.replaceAll(c, "\\"+c);
+ str = str.replaceAll(c, "\\" + c);
});
- $div.textContent = str;
- return $div.innerHTML;
+ $div.textContent = str;
+ return $div.innerHTML;
}
diff --git a/public/lib/form.js b/public/lib/form.js
index bcb1d2b4..a4d0a66f 100644
--- a/public/lib/form.js
+++ b/public/lib/form.js
@@ -7,8 +7,8 @@ export function mutateForm(formSpec, formState) {
const keys = inputName.split(".");
let ptr = formSpec;
- while (keys.length>1) ptr = ptr[keys.shift()]
- ptr[keys.shift()]["value"] = (value === "" ? null : value);
+ while (keys.length > 1) ptr = ptr[keys.shift()];
+ ptr[keys.shift()].value = (value === "" ? null : value);
});
return formSpec;
}
@@ -24,13 +24,17 @@ async function createFormNodes(node, { renderNode, renderLeaf, renderInput, path
$list.push(createElement(`ERR: node[${typeof node[key]}] path[${path.join(".")}] level[${level}]
`));
}
// CASE 1: non leaf node
- else if (typeof node[key]["type"] !== "string") {
+ else if (typeof node[key].type !== "string") {
const $chunk = renderNode({ level, label: key });
- const $children = $chunk.querySelector(`[data-bind="children"]`) || $chunk;
+ const $children = $chunk.querySelector("[data-bind=\"children\"]") || $chunk;
$children.removeAttribute("data-bind");
const $nested = await createForm(node[key], {
- path: path.concat(key), level: level + 1, label: key,
- renderNode, renderLeaf, renderInput,
+ path: path.concat(key),
+ level: level + 1,
+ label: key,
+ renderNode,
+ renderLeaf,
+ renderInput
});
$children.appendChild($nested);
$list.push($chunk);
@@ -40,14 +44,14 @@ async function createFormNodes(node, { renderNode, renderLeaf, renderInput, path
const currentPath = path.concat(key);
const $leaf = renderLeaf({ ...node[key], path: currentPath, label: key });
const $input = await renderInput({ ...node[key], path: currentPath });
- const $target = $leaf.querySelector(`[data-bind="children"]`) || $leaf;
+ const $target = $leaf.querySelector("[data-bind=\"children\"]") || $leaf;
// leaf node is either "classic" or can be the target of something that can be toggled
// That's how we can hide input elements conditionally for use cases like the log level
// settings that will not be visible unless log is first enabled or the advanced section
// of the login screen
- const isAToggleElementItself = typeof node[key]["id"] === "string";
- const canToggleOtherElements = node[key]["type"] === "enable" && node[key]["target"] && node[key]["target"].length > 0;
+ const isAToggleElementItself = typeof node[key].id === "string";
+ const canToggleOtherElements = node[key].type === "enable" && node[key].target && node[key].target.length > 0;
if (!isAToggleElementItself) {
$target.removeAttribute("data-bind");
$target.appendChild($input);
@@ -60,12 +64,12 @@ async function createFormNodes(node, { renderNode, renderLeaf, renderInput, path
$container.style.setProperty("overflow", "hidden");
for (const k of Object.keys(node)) {
if (typeof node[k] !== "object") continue;
- else if (!node[k]["id"]) continue;
- else if (node[key]["target"].indexOf(node[k]["id"]) === -1) continue;
+ else if (!node[k].id) continue;
+ else if (node[key].target.indexOf(node[k].id) === -1) continue;
const $kleaf = renderLeaf({ ...node[k], path: currentPath, label: k });
const $kinput = await renderInput({ ...node[k], path: currentPath });
- const $ktarget = $kleaf.querySelector(`[data-bind="children"]`) || $kleaf;
+ const $ktarget = $kleaf.querySelector("[data-bind=\"children\"]") || $kleaf;
$ktarget.removeAttribute("data-bind");
$ktarget.appendChild($kinput);
$container.appendChild($kleaf);
@@ -73,26 +77,26 @@ async function createFormNodes(node, { renderNode, renderLeaf, renderInput, path
$list.push($container);
// initial state of the toggle
- const isToggled = typeof node[key]["value"] === "boolean" ? node[key]["value"] : node[key]["default"];
+ const isToggled = typeof node[key].value === "boolean" ? node[key].value : node[key].default;
if (!isToggled) $container.style.setProperty("display", "none");
let clientHeight = null; // this will only be known when the dom is mounted
// setup events
- $input.onchange = async (e) => {
+ $input.onchange = async(e) => {
$container.style.setProperty("display", "inherit");
if (clientHeight === null) clientHeight = $container.offsetHeight;
if (e.target.checked) {
animate($container, {
time: Math.max(50, Math.min(clientHeight, 150)),
- keyframes: [{ height:0 }, {height:`${clientHeight}px`}],
+ keyframes: [{ height: 0 }, { height: `${clientHeight}px` }]
});
} else {
animate($container, {
time: Math.max(25, Math.min(clientHeight, 75)),
- keyframes: [ {height: `${clientHeight}px`}, {height: 0}],
+ keyframes: [{ height: `${clientHeight}px` }, { height: 0 }]
});
}
- }
+ };
}
}
}
diff --git a/public/lib/skeleton/index.js b/public/lib/skeleton/index.js
index ac49acc8..bd96d0e2 100644
--- a/public/lib/skeleton/index.js
+++ b/public/lib/skeleton/index.js
@@ -7,16 +7,16 @@ export { onDestroy } from "./lifecycle.js";
let pageLoader;
export default async function($root, routes, opts = {}) {
- window.addEventListener("pagechange", async () => {
+ window.addEventListener("pagechange", async() => {
try {
const route = currentRoute(routes, "");
const [ctrl] = await Promise.all([
load(route, { ...opts, $root }),
- $root.cleanup(),
+ $root.cleanup()
]);
if (typeof ctrl !== "function") throw new Error(`Unknown route for ${route}`);
pageLoader = ctrl(createRender($root));
- } catch(err) {
+ } catch (err) {
window.onerror && window.onerror(err.message);
}
});
@@ -50,12 +50,12 @@ async function load(route, opts) {
/**
* @param {string} str
- * @returns {HTMLElement}
+ * @return {HTMLElement}
*/
export function createElement(str) {
const $n = window.document.createElement("div");
$n.innerHTML = str;
- if (!($n.firstElementChild instanceof window.HTMLElement)) throw new Error(`createElement - unexpected type`);
+ if (!($n.firstElementChild instanceof window.HTMLElement)) throw new Error("createElement - unexpected type");
return $n.firstElementChild;
}
diff --git a/public/lib/skeleton/lifecycle.js b/public/lib/skeleton/lifecycle.js
index 09ebb291..d82c559b 100644
--- a/public/lib/skeleton/lifecycle.js
+++ b/public/lib/skeleton/lifecycle.js
@@ -2,7 +2,7 @@ let _cleanup = [];
export async function init($root) {
$root.cleanup = () => {
- const fns = _cleanup.map((fn) => fn($root))
+ const fns = _cleanup.map((fn) => fn($root));
_cleanup = [];
return Promise.all(fns);
};
diff --git a/public/lib/skeleton/router.js b/public/lib/skeleton/router.js
index 7c810dcf..6fe5ff12 100644
--- a/public/lib/skeleton/router.js
+++ b/public/lib/skeleton/router.js
@@ -29,7 +29,7 @@ export function currentRoute(r, notFoundRoute) {
return r[notFoundRoute];
}
-function _getHref ($node, $root) {
+function _getHref($node, $root) {
if ($node.matches("[data-link]")) return $node.getAttribute("href");
if (!$node.parentElement || $node.isSameNode($root)) return null;
return _getHref($node.parentElement, $root);
diff --git a/public/model/session.js b/public/model/session.js
index c53fe671..2da19e35 100644
--- a/public/model/session.js
+++ b/public/model/session.js
@@ -13,15 +13,15 @@ export function getSession() {
return ajax({
url: "/api/session",
method: "GET",
- responseType: "json",
+ responseType: "json"
}).pipe(
- rxjs.map(({ responseJSON }) => responseJSON.result),
+ rxjs.map(({ responseJSON }) => responseJSON.result)
);
}
export function deleteSession() {
return ajax({
url: "/api/session",
- method: "DELETE",
+ method: "DELETE"
});
}
diff --git a/public/pages/adminpage/animate.js b/public/pages/adminpage/animate.js
index 1908ca27..83406bd3 100644
--- a/public/pages/adminpage/animate.js
+++ b/public/pages/adminpage/animate.js
@@ -3,8 +3,8 @@ import { transition, slideYIn } from "../../lib/animate.js";
export default function($node) {
return transition($node, {
timeEnter: 100,
- enter: slideYIn(3),
+ enter: slideYIn(3)
});
}
-export const cssHideMenu = `.component_menu_sidebar{transform: translateX(-300px)}`;
+export const cssHideMenu = ".component_menu_sidebar{transform: translateX(-300px)}";
diff --git a/public/pages/adminpage/ctrl_about.js b/public/pages/adminpage/ctrl_about.js
index 2d21c5fd..cba166d1 100644
--- a/public/pages/adminpage/ctrl_about.js
+++ b/public/pages/adminpage/ctrl_about.js
@@ -1,5 +1,5 @@
import { createElement } from "../../lib/skeleton/index.js";
-import rxjs, { effect, stateMutation } from "../../lib/rx.js"
+import rxjs, { effect, stateMutation } from "../../lib/rx.js";
import { qs } from "../../lib/dom.js";
import { CSS } from "../../helpers/loader.js";
import transition from "./animate.js";
@@ -19,7 +19,7 @@ export default AdminOnly(WithShell(async function(render) {
effect(Release.get().pipe(
rxjs.map(({ html }) => html),
- stateMutation(qs($page, `[data-bind="about"]`), "innerHTML"),
+ stateMutation(qs($page, "[data-bind=\"about\"]"), "innerHTML")
));
}));
diff --git a/public/pages/adminpage/ctrl_backend.js b/public/pages/adminpage/ctrl_backend.js
index 3b58a706..5812a082 100644
--- a/public/pages/adminpage/ctrl_backend.js
+++ b/public/pages/adminpage/ctrl_backend.js
@@ -22,7 +22,7 @@ export default AdminOnly(WithShell(function(render) {
`);
render(transition($page));
- componentStorageBackend(createRender(qs($page, `[data-bind="backend"]`)));
+ componentStorageBackend(createRender(qs($page, "[data-bind=\"backend\"]")));
}));
function componentStorageBackend(render) {
@@ -47,9 +47,8 @@ function componentStorageBackend(render) {
`)]),
- applyMutation(qs($page, `[data-bind="backend-available"]`), "appendChild"),
+ applyMutation(qs($page, "[data-bind=\"backend-available\"]"), "appendChild")
));
}
-
const css = await CSS(import.meta, "ctrl_backend.css");
diff --git a/public/pages/adminpage/ctrl_logger.js b/public/pages/adminpage/ctrl_logger.js
index 4a50986f..4951d63d 100644
--- a/public/pages/adminpage/ctrl_logger.js
+++ b/public/pages/adminpage/ctrl_logger.js
@@ -33,7 +33,7 @@ function Page(render) {
export default AdminOnly(WithShell(Page));
function componentLogForm(render) {
- const $form = createElement(``);
+ const $form = createElement("");
render($form);
@@ -43,14 +43,14 @@ function componentLogForm(render) {
rxjs.map((formSpec) => createForm(formSpec, formTmpl({ renderLeaf }))),
rxjs.mergeMap((promise) => rxjs.from(promise)),
rxjs.map(($form) => [$form]),
- applyMutation($form, "appendChild"),
+ applyMutation($form, "appendChild")
));
// TODO feature2: response to form change
}
function componentLogViewer(render) {
- const $page = createElement(`t
`);
+ const $page = createElement("t
");
render($page);
effect(Log.get().pipe(
@@ -69,16 +69,16 @@ function componentAuditor(render) {
// setup the form
effect(Audit.get().pipe(
- rxjs.map(({ form }) => form),
+ rxjs.map(({ form }) => form),
rxjs.map((formSpec) => createForm(formSpec, formTmpl())),
rxjs.mergeMap((promise) => rxjs.from(promise)),
rxjs.map(($form) => [$form]),
- applyMutation(qs($page, "form"), "appendChild"),
+ applyMutation(qs($page, "form"), "appendChild")
));
// setup the result
effect(Audit.get().pipe(
rxjs.map(({ render }) => render),
- stateMutation(qs($page, `[data-bind="auditor"]`), "innerHTML"),
+ stateMutation(qs($page, "[data-bind=\"auditor\"]"), "innerHTML")
));
}
diff --git a/public/pages/adminpage/ctrl_login.js b/public/pages/adminpage/ctrl_login.js
index c18a1b80..a3329ca2 100644
--- a/public/pages/adminpage/ctrl_login.js
+++ b/public/pages/adminpage/ctrl_login.js
@@ -30,21 +30,22 @@ export default function(render) {
rxjs.mapTo(["name", "loading"]),
applyMutation(qs($form, "component-icon"), "setAttribute"),
// STEP2: attempt to login
- rxjs.map(() => ({ password: qs($form, `[name="password"]`).value })),
+ rxjs.map(() => ({ password: qs($form, "[name=\"password\"]").value })),
authenticate$(),
// STEP3: update the UI when authentication fails, happy path is handle at the middleware
// level one layer above as the login ctrl has no idea what to show after login
rxjs.filter((ok) => !ok),
rxjs.mapTo(["name", "arrow_right"]), applyMutation(qs($form, "component-icon"), "setAttribute"),
- rxjs.mapTo(""), stateMutation(qs($form, `[name="password"]`), "value"),
+ rxjs.mapTo(""), stateMutation(qs($form, "[name=\"password\"]"), "value"),
rxjs.mapTo(["error"]), applyMutation(qs($form, ".input_group"), "classList", "add"),
- rxjs.delay(300), applyMutation(qs($form, ".input_group"), "classList", "remove"),
+ rxjs.delay(300), applyMutation(qs($form, ".input_group"), "classList", "remove")
));
// feature: nice transition
render(transition($form, {
- timeoutEnter: 250, enter: zoomIn(1.2),
- timeoutLeave: 0,
+ timeoutEnter: 250,
+ enter: zoomIn(1.2),
+ timeoutLeave: 0
}));
// feature: autofocus
@@ -56,7 +57,7 @@ export default function(render) {
effect(rxjs.fromEvent(window, "resize").pipe(
rxjs.startWith(null),
rxjs.map(() => ["margin-top", `${Math.floor(window.innerHeight / 3)}px`]),
- applyMutation($form, "style", "setProperty"),
+ applyMutation($form, "style", "setProperty")
));
}
diff --git a/public/pages/adminpage/ctrl_settings.js b/public/pages/adminpage/ctrl_settings.js
index c46ebca3..4c8c1749 100644
--- a/public/pages/adminpage/ctrl_settings.js
+++ b/public/pages/adminpage/ctrl_settings.js
@@ -23,7 +23,7 @@ export default AdminOnly(WithShell(function(render) {
delete res.constant;
delete res.middleware;
return res;
- }),
+ })
);
const tmpl = formTmpl({
@@ -35,28 +35,29 @@ export default AdminOnly(WithShell(function(render) {
`);
- }, renderLeaf,
- })
+ },
+ renderLeaf
+ });
effect(config$.pipe(
rxjs.mergeMap((formSpec) => createForm(formSpec, tmpl)),
rxjs.map(($form) => [$form]),
- applyMutation(qs($container, `[data-bind="form"]`), "appendChild"),
+ applyMutation(qs($container, "[data-bind=\"form\"]"), "appendChild")
));
effect(config$.pipe(
- rxjs.mergeMap(() => qsa($container, `[data-bind="form"] [name]`)),
+ rxjs.mergeMap(() => qsa($container, "[data-bind=\"form\"] [name]")),
rxjs.mergeMap(($el) => rxjs.fromEvent($el, "input")),
rxjs.map((e) => ({
name: e.target.getAttribute("name"),
- value: e.target.value,
+ value: e.target.value
})),
rxjs.scan((store, keyValue) => {
store[keyValue.name] = keyValue.value;
return store;
- }, {}),
+ }, {})
).pipe(
rxjs.withLatestFrom(config$),
rxjs.map(([formState, formSpec]) => mutateForm(formSpec, formState)),
- Config.save(),
+ Config.save()
));
}));
diff --git a/public/pages/adminpage/ctrl_setup.js b/public/pages/adminpage/ctrl_setup.js
index 74eae26e..97c3db41 100644
--- a/public/pages/adminpage/ctrl_setup.js
+++ b/public/pages/adminpage/ctrl_setup.js
@@ -26,14 +26,14 @@ export default function(render) {
effect(stepper$.pipe(
rxjs.map((step) => {
- switch(step) {
+ switch (step) {
case 1: return WithShell(componentStep1);
case 2: return WithShell(componentStep2);
default: throw new ApplicationError("INTERNAL_ERROR", "Assumption failed");
}
}),
- rxjs.tap((ctrl) => ctrl(createRender(qs($page, `[data-bind="multistep-form"]`)))),
- rxjs.catchError((err) => ctrlError(err)(render)),
+ rxjs.tap((ctrl) => ctrl(createRender(qs($page, "[data-bind=\"multistep-form\"]")))),
+ rxjs.catchError((err) => ctrlError(err)(render))
));
};
@@ -54,8 +54,9 @@ function componentStep1(render) {
`);
render(transition($page, {
- timeEnter: 250, enter: zoomIn(1.2),
- timeLeave: 0,
+ timeEnter: 250,
+ enter: zoomIn(1.2),
+ timeLeave: 0
}));
// feature: form handling
@@ -66,17 +67,17 @@ function componentStep1(render) {
rxjs.delay(1000),
rxjs.tap(() => animate($page, { time: 200, keyframes: slideXOut(-30) })),
rxjs.delay(200),
- rxjs.tap(() => stepper$.next(2)),
+ rxjs.tap(() => stepper$.next(2))
));
// feature: hide side menu to remove distractions
effect(rxjs.of(cssHideMenu).pipe(
- stateMutation(qs($page, "style"), "textContent"),
+ stateMutation(qs($page, "style"), "textContent")
));
// feature: autofocus
effect(rxjs.of([]).pipe(
- applyMutation(qs($page, "input"), "focus"),
+ applyMutation(qs($page, "input"), "focus")
));
}
@@ -94,8 +95,8 @@ function componentStep2(render) {
render($page);
// feature: navigate previous step
- effect(rxjs.fromEvent(qs($page, `[data-bind="previous"]`), "click").pipe(
- rxjs.tap(() => stepper$.next(1)),
+ effect(rxjs.fromEvent(qs($page, "[data-bind=\"previous\"]"), "click").pipe(
+ rxjs.tap(() => stepper$.next(1))
));
// feature: reveal animation
@@ -103,7 +104,7 @@ function componentStep2(render) {
stateMutation(qs($page, "style"), "textContent"),
rxjs.tap(() => animate(qs($page, "h4"), { time: 200, keyframes: slideXIn(30) })),
rxjs.delay(200),
- rxjs.mapTo([]), applyMutation(qs($page, "style"), "remove"),
+ rxjs.mapTo([]), applyMutation(qs($page, "style"), "remove")
));
// feature: telemetry popup
@@ -123,7 +124,7 @@ function componentStep2(render) {
`);
return new Promise((done) => {
modal.alert($node, {
- onQuit: done,
+ onQuit: done
});
});
});
@@ -131,12 +132,15 @@ function componentStep2(render) {
const animateOut = ($el) => {
return rxjs.pipe(
- rxjs.tap(() => animate($el, {time: 300, keyframes: [
- { transform: "translateX(0px)", opacity: "1"},
- { transform: "translateX(-30px)", opacity: "0"},
- ]})),
- rxjs.delay(200),
+ rxjs.tap(() => animate($el, {
+ time: 300,
+ keyframes: [
+ { transform: "translateX(0px)", opacity: "1" },
+ { transform: "translateX(-30px)", opacity: "0" }
+ ]
+ })),
+ rxjs.delay(200)
);
-}
+};
const css = await CSS(import.meta, "ctrl_setup.css");
diff --git a/public/pages/adminpage/decorator_admin_only.js b/public/pages/adminpage/decorator_admin_only.js
index 0845b052..aadc9745 100644
--- a/public/pages/adminpage/decorator_admin_only.js
+++ b/public/pages/adminpage/decorator_admin_only.js
@@ -7,14 +7,14 @@ import { isAdmin$ } from "./model_admin_session.js";
export default function AdminOnly(ctrlWrapped) {
return (render) => {
- const loader$ = rxjs.timer(1000).subscribe(() => render(createElement(`loading
`)));
+ const loader$ = rxjs.timer(1000).subscribe(() => render(createElement("loading
")));
onDestroy(() => loader$.unsubscribe());
effect(isAdmin$().pipe(
rxjs.map((isAdmin) => isAdmin ? ctrlWrapped : ctrlLogin),
rxjs.tap((ctrl) => ctrl(render)),
rxjs.catchError((err) => ctrlError(err)(render)),
- rxjs.tap(() => loader$.unsubscribe()),
+ rxjs.tap(() => loader$.unsubscribe())
));
- }
+ };
}
diff --git a/public/pages/adminpage/decorator_sidemenu.js b/public/pages/adminpage/decorator_sidemenu.js
index af4e7d79..2c3e5919 100644
--- a/public/pages/adminpage/decorator_sidemenu.js
+++ b/public/pages/adminpage/decorator_sidemenu.js
@@ -51,23 +51,23 @@ export default function(ctrl) {
render($page);
// feature: setup the childrens
- ctrl(($node) => qs($page, `[data-bind="admin"]`).appendChild($node));
+ ctrl(($node) => qs($page, "[data-bind=\"admin\"]").appendChild($node));
// feature: display the release version
effect(Release.get().pipe(
rxjs.map(({ version }) => version),
- stateMutation(qs($page, `[data-bind="version"]`), "textContent"),
+ stateMutation(qs($page, "[data-bind=\"version\"]"), "textContent")
));
// feature: logo serving as loading indicator
effect(Config.isSaving().pipe(
rxjs.startWith(false),
- rxjs.map((isLoading) => isLoading ?
- `` :
- `