Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-24 17:22:34 +01:00
Code Issues Projects Releases Wiki Activity

chore (cleanup): public frontend repo

Browse source
This commit is contained in:
Mickael Kerjean 2023-07-23 00:29:43 +10:00
parent 47fff70701
commit c5828eb3de
5 changed files with 110 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
public/lib/animate/animation.js
View file

@ -1,110 +0,0 @@
const sleep = (t) => new Promise((done) => setTimeout(done, t));
export async function requestAnimation() {
return new Promise((done) => requestAnimationFrame(done));
}
export async function enterAnimation($node, timeout) {
$node.classList.remove("leave", "leave-active", "enter", "enter-active");
await requestAnimation();
$node.classList.add("enter");
await requestAnimation();
$node.classList.add("enter-active")
await sleep(timeout);
$node.classList.remove("enter", "enter-active");
}
export async function leaveAnimation($node, timeout) {
$node.classList.remove("leave", "leave-active", "enter", "enter-active");
await requestAnimation();
$node.classList.add("leave");
await requestAnimation();
$node.classList.add("leave-active")
await sleep(timeout);
}
export function slideXIn(size) {
return function (querySelector, t){
return `
${querySelector}.enter {
opacity: 0;
transform: translateX(${size}px);
}
${querySelector}.enter.enter-active {
opacity: 1;
transform: translateX(0);
transition: all ${t}ms ease;
}`;
}
}
export function slideYIn(size) {
return function (querySelector, t){
return `
${querySelector}.enter {
opacity: 0;
transform: translateY(${size}px);
}
${querySelector}.enter.enter-active {
opacity: 1;
transform: translateY(0);
transition: all ${t}ms ease;
}`;
}
}
export function slideXOut(size) {
return function (querySelector, t){
return `
${querySelector}.leave {
opacity: 1;
transform: translateX(0);
}
${querySelector}.leave.leave-active {
opacity: 0;
transform: translateX(${size}px);
transition: all ${t}ms ease;
}`;
}
}
export function slideYOut(size) {
return function (querySelector, t){
return `
${querySelector}.leave {
opacity: 1;
transform: translateY(0);
}
${querySelector}.leave.leave-active {
opacity: 0;
transform: translateY(${size}px);
transition: all ${t}ms ease;
}`;
}
}
export function opacityIn() {
return function (querySelector, t){
return `
${querySelector}.enter {
opacity: 0;
}
${querySelector}.enter.enter-active {
opacity: 1;
transition: opacity ${t}ms ease;
}`;
}
}
export function opacityOut() {
return function (querySelector, t){
return `
${querySelector}.leave {
opacity: 1;
}
${querySelector}.leave.leave-active {
opacity: 0;
transition: opacity ${t}ms ease;
}`;
}
}

63
public/lib/animate/index.js
View file

@ -1,15 +1,5 @@
import { onDestroy, createElement } from "../skeleton/index.js";
import rxjs from "../rxjs/index.js";
import {
requestAnimation, enterAnimation, leaveAnimation,
slideXIn, opacityOut,
} from "./animation.js";
export {
slideXIn, slideXOut,
slideYIn, slideYOut,
opacityIn, opacityOut
} from "./animation.js";
export function transition($node, opts = {}) {
const {
@ -33,3 +23,56 @@ export function transition($node, opts = {}) {
return $node;
}
const sleep = (t) => new Promise((done) => setTimeout(done, t));
function requestAnimation() {
return new Promise((done) => requestAnimationFrame(done));
}
async function enterAnimation($node, timeout) {
$node.classList.remove("leave", "leave-active", "enter", "enter-active");
await requestAnimation();
$node.classList.add("enter");
await requestAnimation();
$node.classList.add("enter-active")
await sleep(timeout);
$node.classList.remove("enter", "enter-active");
}
async function leaveAnimation($node, timeout) {
$node.classList.remove("leave", "leave-active", "enter", "enter-active");
await requestAnimation();
$node.classList.add("leave");
await requestAnimation();
$node.classList.add("leave-active")
await sleep(timeout);
}
export function slideXIn(size) {
return function (querySelector, t){
return `
${querySelector}.enter {
opacity: 0;
transform: translateX(${size}px);
}
${querySelector}.enter.enter-active {
opacity: 1;
transform: translateX(0);
transition: all ${t}ms ease;
}`;
}
}
export function opacityOut() {
return function (querySelector, t){
return `
${querySelector}.leave {
opacity: 1;
}
${querySelector}.leave.leave-active {
opacity: 0;
transition: opacity ${t}ms ease;
}`;
}
}

24
public/pages/adminpage/decorator_sidemenu.js
View file

@ -1,9 +1,13 @@
import { createElement } from "../../../lib/skeleton/index.js";
import rxjs, { effect, stateMutation } from "../../../lib/rxjs/index.js";
import { qs } from "../../lib/dom/index.js";
import CSSLoader from "../../helpers/css.js";
import Release from "./model_release.js";
import Config from "./model_config.js";
import "../../components/icon.js";
export default function(ctrl) {
return (render) => {
@ -15,9 +19,7 @@ export default function(ctrl) {
<svg class="arrow_left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="m 16,7.16 -4.58,4.59 4.58,4.59 -1.41,1.41 -6,-6 6,-6 z"/>
</svg>
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M330 202a81 79 0 00-162 0 81 79 0 000 158 81 79 0 000-158m81 79a81 79 0 1181 79H168" fill="none" stroke="currentColor" stroke-width="35px"/>
</svg>
<span data-bind="logo"></span>
</a>
<h2>Admin console</h2>
<ul>
@ -33,14 +35,26 @@ export default function(ctrl) {
`);
render($page);
const $content = $page.querySelector(`[data-bind="admin"]`)
ctrl(($node) => $content.appendChild($node));
// feature: setup the childrens
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"),
));
// feature: logo serving as loading indicator
effect(Config.isSaving().pipe(
rxjs.startWith(false),
rxjs.map((isLoading) => isLoading ?
`<component-icon name="loading"></component-icon>` :
`<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M330 202a81 79 0 00-162 0 81 79 0 000 158 81 79 0 000-158m81 79a81 79 0 1181 79H168" fill="none" stroke="currentColor" stroke-width="35px"/>
</svg>`),
stateMutation(qs($page, `[data-bind="logo"]`), "innerHTML"),
));
return (route) => $content.innerHTML = `<div>loading "${route}"</div>`;
};
}

31
public/pages/adminpage/model_admin_session.js
View file

@ -5,25 +5,38 @@ window.rxjs = rxjs;
class AdminSessionManager {
constructor() {
this.session = new rxjs.ReplaySubject(1);
ajax(API_SERVER + "/admin/api/session").subscribe(
() => this.session.next({ isAdmin: true }),
() => this.session.next({ isAdmin: false }),
);
this.session = new rxjs.BehaviorSubject({ isAdmin: false });
this.session$ = this.session.pipe(rxjs.shareReplay(1));
// ajax(API_SERVER + "/admin/api/session").subscribe(() => {
// // TODO: setup session
// });
}
state() {
return this.session.asObservable().pipe(rxjs.delay(100));
return rxjs.merge(
this.session$,
rxjs.interval(5000).pipe(
// rxjs.delay(1000),
// rxjs.mergeMap(() => ajax(API_SERVER + "/admin/api/session").pipe(
// // todo: get the result and process it
// rxjs.catchError(() => this.session),
// )),
),
).pipe(
rxjs.mapTo({ isAdmin: true }), // TODO: remove this
rxjs.distinctUntilChanged(),
logger(),
)
}
startSession() {
return rxjs.pipe(
rxjs.delay(1000),
rxjs.tap(() => this.session.next({ isAdmin: true })),
rxjs.mapTo({ ok: true }),
rxjs.tap(({ ok }) => ok && this.session.next({ isAdmin: true })),
);
}
}
export default new AdminSessionManager();

16
public/pages/adminpage/model_config.js Normal file
View file

@ -0,0 +1,16 @@
import rxjs, { ajax } from "../../lib/rxjs/index.js";
class ConfigManager {
constructor() {
this.isSaving$ = new rxjs.BehaviorSubject(true)
setInterval(() => {
this.isSaving$.next(!this.isSaving$.value)
}, 5000);
}
isSaving() {
return this.isSaving$.asObservable();
}
}
export default new ConfigManager();