Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9df0974

Browse files
fpligerfpliger
committed
add right side nav bar for components and components details
1 parent 79c2658 commit 9df0974

File tree

5 files changed

+206
-15
lines changed

5 files changed

+206
-15
lines changed

‎pyscriptjs/src/ComponentDetailsNav.svelte

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
2+
<script lang="ts">
3+
import { mainDiv, componentsNavOpen, componentDetailsNavOpen, currentComponentDetails } from './stores';
4+
import Fa from 'svelte-fa';
5+
import { faArrowRight, faL } from '@fortawesome/free-solid-svg-icons'
6+
7+
let showMe = false;
8+
componentDetailsNavOpen.subscribe(value => {
9+
showMe = value;
10+
11+
console.log(showMe);
12+
});
13+
14+
currentComponentDetails.subscribe(value => {
15+
16+
})
17+
18+
function toggleNavBar(evt){
19+
componentDetailsNavOpen.set(!$componentDetailsNavOpen);
20+
if ($componentDetailsNavOpen == true && $componentDetailsNavOpen == $componentsNavOpen ){
21+
componentsNavOpen.set(false);
22+
}
23+
}
24+
25+
function addPyScript(evt){
26+
const newPyscript = document.createElement("py-script");
27+
newPyscript.setAttribute('auto-generate', null);
28+
$mainDiv.appendChild(newPyscript);
29+
toggleNavBar(evt);
30+
}
31+
</script>
32+
33+
<style>
34+
:global(div.slow-moves) {
35+
transition: 2s;
36+
}
37+
38+
.rightsidebar-inactive {
39+
right: -300px;
40+
transition: left 2s;
41+
}
42+
43+
.rightsidebar{
44+
width: 300px;
45+
/* transition: right 2s; */
46+
}
47+
48+
.slide-right{
49+
right: 0;
50+
transition: right 1s;
51+
}
52+
53+
</style>
54+
55+
<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 }">
56+
<div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
57+
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
58+
<Fa icon={faArrowRight} />
59+
</button>
60+
<div>
61+
<h1 class="text-lg p-2 pl-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Component Details</h1>
62+
</div>
63+
</div>
64+
<form>
65+
<table class="table-fixed">
66+
<thead>
67+
<tr>
68+
<th class="text-left">Property</th>
69+
<th class="text-right">Value</th>
70+
</tr>
71+
</thead>
72+
<tbody>
73+
74+
{#each $currentComponentDetails as attribute}
75+
<tr>
76+
<td>{attribute.key}</td>
77+
<td> <input class="text-right" placeholder={attribute.value} value="{attribute.value}"></td>
78+
</tr>
79+
{/each}
80+
81+
82+
</tbody>
83+
</table>
84+
</form>
85+
</nav>

‎pyscriptjs/src/ComponentsNav.svelte

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
2+
<script lang="ts">
3+
import { mainDiv, componentsNavOpen } from './stores';
4+
import Fa from 'svelte-fa';
5+
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
6+
7+
let showMe = false;
8+
componentsNavOpen.subscribe(value => {
9+
showMe = value;
10+
11+
console.log(showMe);
12+
});
13+
14+
function toggleNavBar(evt){
15+
componentsNavOpen.set(!$componentsNavOpen);
16+
}
17+
18+
function addPyScript(evt){
19+
const newPyscript = document.createElement("py-script");
20+
newPyscript.setAttribute('auto-generate', null);
21+
$mainDiv.appendChild(newPyscript);
22+
toggleNavBar(evt);
23+
}
24+
</script>
25+
26+
<style>
27+
:global(div.slow-moves) {
28+
transition: 2s;
29+
}
30+
31+
.rightsidebar-inactive {
32+
right: -250px;
33+
transition: left 2s;
34+
}
35+
36+
.rightsidebar{
37+
width: 250px;
38+
/* transition: right 2s; */
39+
}
40+
41+
.slide-right{
42+
right: 0;
43+
transition: right 1s;
44+
}
45+
</style>
46+
47+
<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 }">
48+
<div class="flex flex-column w-full text-lg p-4 bg-grey-lighter shadow-md">
49+
<button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
50+
<Fa icon={faArrowRight} />
51+
</button>
52+
<div>
53+
<h1 class="text-lg p-2 pl-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
54+
</div>
55+
</div>
56+
57+
<ul class="list-reset">
58+
<li class="hover:bg-teal">
59+
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
60+
<span class="fa fa-grip-horizontal"></span>
61+
REPL
62+
</a>
63+
</li>
64+
<li class="hover:bg-teal">
65+
<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}>
66+
<span class="fa fa-newspaper"></span>
67+
Script
68+
</a>
69+
</li>
70+
<li class="hover:bg-teal">
71+
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
72+
<span class="fa fa-ellipsis-h"></span>
73+
Console
74+
</a>
75+
</li>
76+
<li class="hover:bg-teal">
77+
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
78+
<span class="fa fa-envelope"></span>
79+
Div
80+
</a>
81+
</li>
82+
<li class="hover:bg-teal">
83+
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
84+
<span class="fa fa-cogs"></span>
85+
Settings
86+
</a>
87+
</li>
88+
</ul>
89+
</nav>

‎pyscriptjs/src/SideNav.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,16 @@
5151
<li class="hover:bg-teal">
5252
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
5353
<span class="fa fa-grip-horizontal"></span>
54-
REPL
54+
Load Template
5555
</a>
5656
</li>
5757
<li class="hover:bg-teal">
5858
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
5959
<span class="fa fa-newspaper"></span>
60-
Script
60+
Save Project
6161
</a>
6262
</li>
63-
<li class="hover:bg-teal">
63+
<!-- <li class="hover:bg-teal">
6464
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
6565
<span class="fa fa-ellipsis-h"></span>
6666
Console
@@ -71,7 +71,7 @@
7171
<span class="fa fa-envelope"></span>
7272
Div
7373
</a>
74-
</li>
74+
</li> -->
7575
<li class="hover:bg-teal">
7676
<a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
7777
<span class="fa fa-cogs"></span>

‎pyscriptjs/src/components/pyscript.ts

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup"
22
import { python } from "@codemirror/lang-python"
3+
// @ts-ignore
34
import { StateCommand } from '@codemirror/state';
45
import { keymap, ViewUpdate } from "@codemirror/view";
56
import { defaultKeymap } from "@codemirror/commands";
67
import { oneDarkTheme } from "@codemirror/theme-one-dark";
78

8-
9-
import { pyodideLoaded, loadedEnvironments } from '../stores';
9+
import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, currentComponentDetails } from '../stores';
1010
import { addClasses } from '../utils';
11-
import { debug } from "svelte/internal";
1211

1312
// Premise used to connect to the first available pyodide interpreter
1413
let pyodideReadyPromise;
@@ -20,6 +19,11 @@ loadedEnvironments.subscribe(value => {
2019
environments = value;
2120
});
2221

22+
let propertiesNavOpen;
23+
componentDetailsNavOpen.subscribe(value => {
24+
propertiesNavOpen = value;
25+
});
26+
2327
function createCmdHandler(el){
2428
// Creates a codemirror cmd handler that calls the el.evaluate when an event
2529
// triggers that specific cmd
@@ -52,6 +56,7 @@ export class PyScript extends HTMLElement {
5256

5357
// add an extra div where we can attach the codemirror editor
5458
this.editorNode = document.createElement('div');
59+
addClasses(this.editorNode, ["editor-box"])
5560
this.shadow.appendChild(this.wrapper);
5661
}
5762

@@ -84,13 +89,12 @@ export class PyScript extends HTMLElement {
8489
})
8590

8691
let mainDiv = document.createElement('div');
87-
addClasses(mainDiv, ["flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"])
88-
89-
mainDiv.appendChild(this.editorNode);
92+
addClasses(mainDiv, ["parentBox", "flex", "flex-col", "border-4", "border-dashed", "border-gray-200", "rounded-lg"])
93+
// add Editor to main PyScript div
9094

9195
// Butons DIV
9296
var eDiv = document.createElement('div');
93-
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(" "))
97+
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(" "))
9498
eDiv.setAttribute("role", "group");
9599

96100
// Play Button
@@ -113,6 +117,17 @@ export class PyScript extends HTMLElement {
113117
// Settings button
114118
this.btnConfig = document.createElement('button');
115119
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>';
120+
this.btnConfig.onclick = function toggleNavBar(evt){
121+
console.log('clicked');
122+
componentDetailsNavOpen.set(!propertiesNavOpen);
123+
124+
currentComponentDetails.set([
125+
{key: "auto-generate", value: true},
126+
{key:"target", value: "default"},
127+
{key: "source", value: "self"}
128+
])
129+
}
130+
116131
addClasses(this.btnConfig, buttonClasses);
117132
addClasses(this.btnConfig, ["bg-blue-500"])
118133
eDiv.appendChild(this.btnConfig);
@@ -122,8 +137,8 @@ export class PyScript extends HTMLElement {
122137
this.editorOut.classList.add("output");
123138
this.editorOut.hidden = true;
124139

125-
126140
mainDiv.appendChild(eDiv);
141+
mainDiv.appendChild(this.editorNode);
127142
mainDiv.appendChild(this.editorOut);
128143
this.appendChild(mainDiv);
129144

@@ -140,7 +155,6 @@ export class PyScript extends HTMLElement {
140155
let pyodide = await pyodideReadyPromise;
141156
// debugger
142157
try {
143-
144158
// @ts-ignore
145159
let output = pyodide.runPython(this.editor.state.doc.toString());
146160
if (output !== undefined){

‎pyscriptjs/src/stores.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const pyodideLoaded = writable({
88
premise: null
99
});
1010

11-
export const loadedEnvironments = writable({})
11+
export const loadedEnvironments = writable([{}])
1212

1313

1414
export const pyodideReadyPromise = promisable(
@@ -17,4 +17,7 @@ export const pyodideReadyPromise = promisable(
1717
);
1818

1919
export const navBarOpen = writable(false);
20-
20+
export const componentsNavOpen = writable(false);
21+
export const componentDetailsNavOpen = writable(false);
22+
export const mainDiv = writable(null);
23+
export const currentComponentDetails = writable([]);

0 commit comments

Comments
 (0)