From 71319d09690196c5a6ce7be667bbcb77d7ebed2d Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Tue, 10 May 2022 16:00:25 -0500 Subject: [PATCH] add app loading splash screen and AppConfig (#279) * add PyLoader class * create global loader during app creation time and remove it when pyscript loading operations are done * make the loader global and open/close when apps is starting. Also add concept of app config so users can set if they want to autoclose the loader of handle it themselves * add pyconfig file * auto add global config if there's no config set in the page * remove changes to simple_clock example --- pyscriptjs/examples/simple_clock.html | 2 + pyscriptjs/src/App.svelte | 65 ++++++++++++++++++++++++++- pyscriptjs/src/components/pyconfig.ts | 55 +++++++++++++++++++++++ pyscriptjs/src/components/pyloader.ts | 38 ++++++++++++++++ pyscriptjs/src/main.ts | 18 ++++++++ pyscriptjs/src/stores.ts | 2 + 6 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 pyscriptjs/src/components/pyconfig.ts create mode 100644 pyscriptjs/src/components/pyloader.ts diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html index 8077a73c..4747e889 100644 --- a/pyscriptjs/examples/simple_clock.html +++ b/pyscriptjs/examples/simple_clock.html @@ -21,6 +21,8 @@
+# demonstrates how use the global PyScript pyscript_loader +# to send operation log messages to it import utils utils.now() diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte index c9f80c8d..6ad7e96a 100644 --- a/pyscriptjs/src/App.svelte +++ b/pyscriptjs/src/App.svelte @@ -1,11 +1,29 @@ + + diff --git a/pyscriptjs/src/components/pyconfig.ts b/pyscriptjs/src/components/pyconfig.ts new file mode 100644 index 00000000..6b928d89 --- /dev/null +++ b/pyscriptjs/src/components/pyconfig.ts @@ -0,0 +1,55 @@ +import * as jsyaml from 'js-yaml'; +import { BaseEvalElement } from './base'; +import { appConfig } from '../stores'; + +let appConfig_; + +appConfig.subscribe(value => { + appConfig_ = value; +}); + +export type AppConfig = { + autoclose_loader: boolean; + name?: string; + version?: string; + }; + +export class PyConfig extends BaseEvalElement { + shadow: ShadowRoot; + wrapper: HTMLElement; + theme: string; + widths: Array; + label: string; + mount_name: string; + details: HTMLElement; + operation: HTMLElement; + code: string; + values: AppConfig; + constructor() { + super(); + } + + connectedCallback() { + this.code = this.innerHTML; + this.innerHTML = ''; + + this.values = jsyaml.load(this.code); + if (this.values === undefined){ + this.values = { + autoclose_loader: true, + }; + } + appConfig.set(this.values); + console.log("config set", this.values); + } + + log(msg: string){ + const newLog = document.createElement('p'); + newLog.innerText = msg; + this.details.appendChild(newLog); + } + + close() { + this.remove(); + } +} diff --git a/pyscriptjs/src/components/pyloader.ts b/pyscriptjs/src/components/pyloader.ts new file mode 100644 index 00000000..7fef7f62 --- /dev/null +++ b/pyscriptjs/src/components/pyloader.ts @@ -0,0 +1,38 @@ +import { BaseEvalElement } from './base'; + +export class PyLoader extends BaseEvalElement { + shadow: ShadowRoot; + wrapper: HTMLElement; + theme: string; + widths: Array; + label: string; + mount_name: string; + details: HTMLElement; + operation: HTMLElement; + constructor() { + super(); + } + + connectedCallback() { + this.innerHTML = `
+ +
+
+
+
+
`; + this.mount_name = this.id.split('-').join('_'); + this.operation = document.getElementById('pyscript-operation'); + this.details = document.getElementById('pyscript-operation-details'); + } + + log(msg: string){ + const newLog = document.createElement('p'); + newLog.innerText = msg; + this.details.appendChild(newLog); + } + + close() { + this.remove(); + } +} diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts index 9f8badf4..d04778b6 100644 --- a/pyscriptjs/src/main.ts +++ b/pyscriptjs/src/main.ts @@ -8,6 +8,9 @@ import { PyButton } from './components/pybutton'; import { PyTitle } from './components/pytitle'; import { PyInputBox } from './components/pyinputbox'; import { PyWidget } from './components/base'; +import { PyLoader } from './components/pyloader'; +import { globalLoader } from './stores'; +import { PyConfig } from './components/pyconfig'; const xPyScript = customElements.define('py-script', PyScript); const xPyRepl = customElements.define('py-repl', PyRepl); @@ -17,6 +20,21 @@ const xPyButton = customElements.define('py-button', PyButton); const xPyTitle = customElements.define('py-title', PyTitle); const xPyInputBox = customElements.define('py-inputbox', PyInputBox); const xPyWidget = customElements.define('py-register-widget', PyWidget); +const xPyLoader = customElements.define('py-loader', PyLoader); +const xPyConfig = customElements.define('py-config', PyConfig); + + +// As first thing, loop for application configs +const config = document.querySelector('py-config'); +if (!config){ + const loader = document.createElement('py-config'); + document.body.append(loader); +} + +// add loader to the page body +const loader = document.createElement('py-loader'); +document.body.append(loader); +globalLoader.set(loader); const app = new App({ target: document.body, diff --git a/pyscriptjs/src/stores.ts b/pyscriptjs/src/stores.ts index 094be993..b3c6cfbc 100644 --- a/pyscriptjs/src/stores.ts +++ b/pyscriptjs/src/stores.ts @@ -20,6 +20,8 @@ export const mode = writable(DEFAULT_MODE); export const scriptsQueue = writable([]); export const initializers = writable([]); export const postInitializers = writable([]); +export const globalLoader = writable(); +export const appConfig = writable(); let scriptsQueue_: PyScript[] = []; let initializers_: Initializer[] = [];