Route User Interface

.github/workflows/python-publish.yml

@@ -4,9 +4,10 @@
 name: Upload Python Package
 
 on:
-  release:
-    types: [created]
-
+  push:
+    # Publish `master` as Docker `latest` image.
+    branches:
+      - ui
 jobs:
   deploy:
 
@@ -21,12 +22,13 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: '14'
+        node-version: '16'
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip
         pip install setuptools wheel twine
         npm install 
+        npm install -g rollup
         rollup -c
     - name: Build and publish
       env:

src/common.ts

@@ -0,0 +1,107 @@
+import tippy, {animateFill} from "tippy.js";
+// import 'tippy.js/dist/tippy.css'; // optional for styling
+// import 'tippy.js/dist/backdrop.css';
+import 'tippy.js/animations/shift-away.css';
+import 'tippy.js/themes/light.css';
+import Partition from "./Partition.svelte";
+import {writable} from "svelte/store";
+import Pop from "./Pop.svelte";
+import {check_outros, group_outros, transition_out} from "svelte/internal";
+
+export let partition = writable(null);
+
+export function archivePre(node, combine) {
+    let off;
+    let detail;
+    let partition;
+    tippy(node, {
+        // content: `1313`,
+        arrow: false,
+        trigger: 'click',
+        allowHTML: true,
+        theme: 'light',
+        placement: 'bottom-start',
+        animateFill: true,
+        plugins: [animateFill],
+        inertia: true,
+        interactive: true,
+        onCreate(instance) {
+
+            partition = new Partition({
+                target: <Element>instance.popper.firstChild.lastChild,
+                props: {
+                    current: combine.current,
+                    currentChildren: combine.currentChildren
+                }
+            });
+            off = partition.$on('tid', event => {
+                combine.callback(event.detail.tid, event.detail.parent, event.detail.children);
+                instance.hide();
+                console.log(event);
+                detail = event.detail;
+            });
+        },
+        onShown(instance) {
+            // @ts-ignore
+            instance.popper.firstChild.lastChild.firstChild.firstChild.scrollTo({
+                top: detail?.scroll[0]?.offsetTop - 3,
+                // left: 100,
+                behavior: 'smooth'
+            });
+            // @ts-ignore
+            instance.popper.firstChild.lastChild.firstChild.lastChild.scrollTo({
+                top: detail?.scroll[1]?.offsetTop - 8,
+                // left: 100,
+                behavior: 'smooth'
+            });
+            // console.log(instance.popper.firstChild.lastChild.firstChild.firstChild.scrollTop);
+        },
+        onDestroy(instance) {
+            off();
+        },
+    });
+    return {
+        update(combine) {
+            // partition = newDuration;
+            partition.$set({
+                current: combine.current,
+                currentChildren: combine.currentChildren
+            });
+        },
+    };
+}
+
+const notificationHistory = [];
+export const notifyHistory = writable(notificationHistory);
+
+export function createPop(msg, duration = 3000, mode = 'Error') {
+    notificationHistory.push({
+        type: mode,
+        msg: msg,
+        date: new Date(),
+    });
+    notifyHistory.set(notificationHistory);
+    const pop = new Pop({
+        target: document.querySelector('#alerts'),
+        intro: true,
+        props: {
+            msg: msg,
+            mode: mode
+        }
+    });
+    setTimeout(() => outroAndDestroy(pop), duration);
+}
+
+
+// Workaround for https://github.com/sveltejs/svelte/issues/4056
+const outroAndDestroy = (instance) => {
+    if (instance.$$.fragment && instance.$$.fragment.o) {
+        group_outros();
+        transition_out(instance.$$.fragment, 0, 0, () => {
+            instance.$destroy();
+        });
+        check_outros();
+    } else {
+        instance.$destroy();
+    }
+};

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

src/main.ts

@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+    target: document.body,
+    props: {
+        name: 'world'
+    }
+});
+
+export default app;

src/store.ts

@@ -0,0 +1,30 @@
+import { writable } from "svelte/store";
+import { crossfade, fly } from "svelte/transition";
+
+
+export const isLogin = writable(true);
+export const template = writable({});
+
+export const currentTemplate = writable({
+    current: '',
+    selectedTemplate: {
+        title: '',
+        files: [],
+        copyright: 1,
+        source: "",
+        tid: 0,
+        description: "",
+        dynamic: "",
+        tags: '',
+        videos: [],
+        changed: false
+    }
+});
+
+export const [send, receive] = crossfade({
+    duration: 800,
+    fallback: (node, params) => {
+        return fly(node, { x: 200, delay: 500 });
+    },
+});
+