mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
add right side nav bar for components and components details
This commit is contained in:
Fabio Pliger
85
pyscriptjs/src/ComponentDetailsNav.svelte
Normal file
85
pyscriptjs/src/ComponentDetailsNav.svelte
Normal file
@@ -0,0 +1,85 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { mainDiv, componentsNavOpen, componentDetailsNavOpen, currentComponentDetails } from './stores';
|
||||
import Fa from 'svelte-fa';
|
||||
import { faArrowRight, faL } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
let showMe = false;
|
||||
componentDetailsNavOpen.subscribe(value => {
|
||||
showMe = value;
|
||||
|
||||
console.log(showMe);
|
||||
});
|
||||
|
||||
currentComponentDetails.subscribe(value => {
|
||||
|
||||
})
|
||||
|
||||
function toggleNavBar(evt){
|
||||
componentDetailsNavOpen.set(!$componentDetailsNavOpen);
|
||||
if ($componentDetailsNavOpen == true && $componentDetailsNavOpen == $componentsNavOpen ){
|
||||
componentsNavOpen.set(false);
|
||||
}
|
||||
}
|
||||
|
||||
function addPyScript(evt){
|
||||
const newPyscript = document.createElement("py-script");
|
||||
newPyscript.setAttribute('auto-generate', null);
|
||||
$mainDiv.appendChild(newPyscript);
|
||||
toggleNavBar(evt);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(div.slow-moves) {
|
||||
transition: 2s;
|
||||
}
|
||||
|
||||
.rightsidebar-inactive {
|
||||
right: -300px;
|
||||
transition: left 2s;
|
||||
}
|
||||
|
||||
.rightsidebar{
|
||||
width: 300px;
|
||||
/* transition: right 2s; */
|
||||
}
|
||||
|
||||
.slide-right{
|
||||
right: 0;
|
||||
transition: right 1s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<nav id="component-detail-bar" class="absolute z-10 h-full mb-6 pin-y bg-white shadow-md rightsidebar" class:rightsidebar-inactive="{ !showMe }" class:slide-right="{ showMe }">
|
||||
<div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
|
||||
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
|
||||
<Fa icon={faArrowRight} />
|
||||
</button>
|
||||
<div>
|
||||
<h1 class="text-lg p-2 pl-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Component Details</h1>
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<table class="table-fixed">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Property</th>
|
||||
<th class="text-right">Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{#each $currentComponentDetails as attribute}
|
||||
<tr>
|
||||
<td>{attribute.key}</td>
|
||||
<td> <input class="text-right" placeholder={attribute.value} value="{attribute.value}"></td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</nav>
|
||||
89
pyscriptjs/src/ComponentsNav.svelte
Normal file
89
pyscriptjs/src/ComponentsNav.svelte
Normal file
@@ -0,0 +1,89 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { mainDiv, componentsNavOpen } from './stores';
|
||||
import Fa from 'svelte-fa';
|
||||
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
let showMe = false;
|
||||
componentsNavOpen.subscribe(value => {
|
||||
showMe = value;
|
||||
|
||||
console.log(showMe);
|
||||
});
|
||||
|
||||
function toggleNavBar(evt){
|
||||
componentsNavOpen.set(!$componentsNavOpen);
|
||||
}
|
||||
|
||||
function addPyScript(evt){
|
||||
const newPyscript = document.createElement("py-script");
|
||||
newPyscript.setAttribute('auto-generate', null);
|
||||
$mainDiv.appendChild(newPyscript);
|
||||
toggleNavBar(evt);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(div.slow-moves) {
|
||||
transition: 2s;
|
||||
}
|
||||
|
||||
.rightsidebar-inactive {
|
||||
right: -250px;
|
||||
transition: left 2s;
|
||||
}
|
||||
|
||||
.rightsidebar{
|
||||
width: 250px;
|
||||
/* transition: right 2s; */
|
||||
}
|
||||
|
||||
.slide-right{
|
||||
right: 0;
|
||||
transition: right 1s;
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav id="rightsidebar" class="absolute z-10 h-full mb-6 pin-y bg-white shadow-md rightsidebar" class:rightsidebar-inactive="{ !showMe }" class:slide-right="{ showMe }">
|
||||
<div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
|
||||
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
|
||||
<Fa icon={faArrowRight} />
|
||||
</button>
|
||||
<div>
|
||||
<h1 class="text-lg p-2 pl-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="list-reset">
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-grip-horizontal"></span>
|
||||
REPL
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline" on:click={addPyScript}>
|
||||
<span class="fa fa-newspaper"></span>
|
||||
Script
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-ellipsis-h"></span>
|
||||
Console
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-envelope"></span>
|
||||
Div
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-cogs"></span>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@@ -51,16 +51,16 @@
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-grip-horizontal"></span>
|
||||
REPL
|
||||
Load Template
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-newspaper"></span>
|
||||
Script
|
||||
Save Project
|
||||
</a>
|
||||
</li>
|
||||
<li class="hover:bg-teal">
|
||||
<!-- <li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-ellipsis-h"></span>
|
||||
Console
|
||||
@@ -71,7 +71,7 @@
|
||||
<span class="fa fa-envelope"></span>
|
||||
Div
|
||||
</a>
|
||||
</li>
|
||||
</li> -->
|
||||
<li class="hover:bg-teal">
|
||||
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
|
||||
<span class="fa fa-cogs"></span>
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
|
||||
import { python } from "@codemirror/lang-python"
|
||||
// @ts-ignore
|
||||
import { StateCommand } from '@codemirror/state';
|
||||
import { keymap, ViewUpdate } from "@codemirror/view";
|
||||
import { defaultKeymap } from "@codemirror/commands";
|
||||
import { oneDarkTheme } from "@codemirror/theme-one-dark";
|
||||
|
||||
|
||||
import { pyodideLoaded, loadedEnvironments } from '../stores';
|
||||
import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, currentComponentDetails } from '../stores';
|
||||
import { addClasses } from '../utils';
|
||||
import { debug } from "svelte/internal";
|
||||
|
||||
// Premise used to connect to the first available pyodide interpreter
|
||||
let pyodideReadyPromise;
|
||||
@@ -20,6 +19,11 @@ loadedEnvironments.subscribe(value => {
|
||||
environments = value;
|
||||
});
|
||||
|
||||
let propertiesNavOpen;
|
||||
componentDetailsNavOpen.subscribe(value => {
|
||||
propertiesNavOpen = value;
|
||||
});
|
||||
|
||||
function createCmdHandler(el){
|
||||
// Creates a codemirror cmd handler that calls the el.evaluate when an event
|
||||
// triggers that specific cmd
|
||||
@@ -52,6 +56,7 @@ export class PyScript extends HTMLElement {
|
||||
|
||||
// add an extra div where we can attach the codemirror editor
|
||||
this.editorNode = document.createElement('div');
|
||||
addClasses(this.editorNode, ["editor-box"])
|
||||
this.shadow.appendChild(this.wrapper);
|
||||
}
|
||||
|
||||
@@ -84,13 +89,12 @@ export class PyScript extends HTMLElement {
|
||||
})
|
||||
|
||||
let mainDiv = document.createElement('div');
|
||||
addClasses(mainDiv, ["flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"])
|
||||
|
||||
mainDiv.appendChild(this.editorNode);
|
||||
addClasses(mainDiv, ["parentBox", "flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"])
|
||||
// add Editor to main PyScript div
|
||||
|
||||
// Butons DIV
|
||||
var eDiv = document.createElement('div');
|
||||
addClasses(eDiv, "flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
|
||||
addClasses(eDiv, "buttons-box relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
|
||||
eDiv.setAttribute("role", "group");
|
||||
|
||||
// Play Button
|
||||
@@ -113,6 +117,17 @@ export class PyScript extends HTMLElement {
|
||||
// Settings button
|
||||
this.btnConfig = document.createElement('button');
|
||||
this.btnConfig.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 512 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(256 256)" transform-origin="128 0"><g transform="translate(0,0) scale(1,1)"><path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" fill="currentColor" transform="translate(-256 -256)"></path></g></g></svg>';
|
||||
this.btnConfig.onclick = function toggleNavBar(evt){
|
||||
console.log('clicked');
|
||||
componentDetailsNavOpen.set(!propertiesNavOpen);
|
||||
|
||||
currentComponentDetails.set([
|
||||
{key: "auto-generate", value: true},
|
||||
{key:"target", value: "default"},
|
||||
{key: "source", value: "self"}
|
||||
])
|
||||
}
|
||||
|
||||
addClasses(this.btnConfig, buttonClasses);
|
||||
addClasses(this.btnConfig, ["bg-blue-500"])
|
||||
eDiv.appendChild(this.btnConfig);
|
||||
@@ -122,8 +137,8 @@ export class PyScript extends HTMLElement {
|
||||
this.editorOut.classList.add("output");
|
||||
this.editorOut.hidden = true;
|
||||
|
||||
|
||||
mainDiv.appendChild(eDiv);
|
||||
mainDiv.appendChild(this.editorNode);
|
||||
mainDiv.appendChild(this.editorOut);
|
||||
this.appendChild(mainDiv);
|
||||
|
||||
@@ -140,7 +155,6 @@ export class PyScript extends HTMLElement {
|
||||
let pyodide = await pyodideReadyPromise;
|
||||
// debugger
|
||||
try {
|
||||
|
||||
// @ts-ignore
|
||||
let output = pyodide.runPython(this.editor.state.doc.toString());
|
||||
if (output !== undefined){
|
||||
|
||||
@@ -8,7 +8,7 @@ export const pyodideLoaded = writable({
|
||||
premise: null
|
||||
});
|
||||
|
||||
export const loadedEnvironments = writable({})
|
||||
export const loadedEnvironments = writable([{}])
|
||||
|
||||
|
||||
export const pyodideReadyPromise = promisable(
|
||||
@@ -17,4 +17,7 @@ export const pyodideReadyPromise = promisable(
|
||||
);
|
||||
|
||||
export const navBarOpen = writable(false);
|
||||
|
||||
export const componentsNavOpen = writable(false);
|
||||
export const componentDetailsNavOpen = writable(false);
|
||||
export const mainDiv = writable(null);
|
||||
export const currentComponentDetails = writable([]);
|
||||
Reference in New Issue
Block a user