alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #45 from pyscript/css-repl

Browse Source 
Css for Repl
This commit is contained in:
Princiya Marina Sequeira
2022-04-28 19:03:46 +02:00
committed by GitHub
parent 631eb8170e 8b7c397c2a
commit b207db97c2
5 changed files with 65 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pyscriptjs/examples/repl.css Normal file
View File

@@ -0,0 +1,16 @@
#output > div {
font-family: 'monospace';
background-color: #e5e5e5;
border: 1px solid lightgray;
border-top: 0;
font-size: 0.875rem;
padding: 0.5rem;
}
#output > div:first-child {
border-top: 1px solid lightgray;
}
#output > div:nth-child(even) {
border: 0;
}

5
pyscriptjs/examples/repl2.html
View File

@@ -8,6 +8,7 @@
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="../build/pyscript.css" />
<link rel="stylesheet" href="repl.css" />
<script defer src="../build/pyscript.js"></script>
</head>
@@ -24,9 +25,9 @@
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
<div id="output"></div>
<div id="output" class="p-4"></div>
</py-box>
<footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-gree-500 fixed inset-x-0 bottom-0 p-4 hidden">
<footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-green-500 fixed inset-x-0 bottom-0 p-4 hidden">
</footer>
</body>
</html>

10
pyscriptjs/src/App.svelte
View File

@@ -1,13 +1,3 @@
<style>
:global(div.buttons-box) {
margin-top: -25px;
}
:global(.parentBox:hover .buttons-box) {
visibility: visible;
}
</style>
<script lang="ts">
import Tailwind from './Tailwind.svelte';
import { loadInterpreter } from './interpreter';

6
pyscriptjs/src/components/base.ts
View File

@@ -1,5 +1,5 @@
import { componentDetailsNavOpen, loadedEnvironments, mode, pyodideLoaded } from '../stores';
import { guidGenerator } from '../utils';
import { guidGenerator, addClasses } from '../utils';
// Premise used to connect to the first available pyodide interpreter
let pyodideReadyPromise;
let environments;
@@ -144,7 +144,9 @@ export class BaseEvalElement extends HTMLElement {
Element = pyodide.globals.get('Element');
}
const out = Element(this.errorElement.id);
out.write.callKwargs(err, { append: true });
addClasses(this.errorElement, ['bg-red-200', 'p-2']);
out.write.callKwargs(err, { append : true});
this.errorElement.hidden = false;
this.errorElement.style.display = 'block';
}

121
pyscriptjs/src/components/pyrepl.ts
View File

@@ -50,7 +50,7 @@ export class PyRepl extends BaseEvalElement {
// add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div');
addClasses(this.editorNode, ['editor-box']);
addClasses(this.editorNode, ["editor-box", "border", "border-gray-300"]);
this.shadow.appendChild(this.wrapper);
}
@@ -64,102 +64,65 @@ export class PyRepl extends BaseEvalElement {
languageConf.of(python()),
keymap.of([
...defaultKeymap,
{ key: 'Ctrl-Enter', run: createCmdHandler(this) },
{ key: 'Shift-Enter', run: createCmdHandler(this) },
]),
// Event listener function that is called every time an user types something on this editor
// EditorView.updateListener.of((v:ViewUpdate) => {
// if (v.docChanged) {
// console.log(v.changes);
// }
// })
{ key: "Ctrl-Enter", run: createCmdHandler(this) },
{ key: "Shift-Enter", run: createCmdHandler(this) }
])
];
const customTheme = EditorView.theme({
'&.cm-focused .cm-editor': { outline: '0px' },
'.cm-scroller': { lineHeight: 2.5 },
'.cm-activeLine': { backgroundColor: '#fff' },
'.cm-content': { padding: 0, backgroundColor: '#f5f5f5' },
'&.cm-focused .cm-content': { border: '1px solid #1876d2' }
});
if (!this.hasAttribute('theme')) {
this.theme = this.getAttribute('theme');
if (this.theme == 'dark') {
extensions.push(oneDarkTheme);
}
this.theme = this.getAttribute('theme');
if (this.theme == 'dark'){
extensions.push(oneDarkTheme);
}
extensions.push(customTheme);
}
const startState = EditorState.create({
doc: this.code.trim(),
extensions: extensions,
doc: this.code.trim(),
extensions: extensions
});
this.editor = new EditorView({
state: startState,
parent: this.editorNode,
state: startState,
parent: this.editorNode
});
const mainDiv = document.createElement('div');
addClasses(mainDiv, [
'parentBox',
'group',
'flex',
'flex-col',
'mt-2',
'border-2',
'border-gray-200',
'rounded-lg',
'mx-8',
]);
// add Editor to main PyScript div
addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8", "relative"])
// add Editor to main PyScript div
mainDiv.appendChild(this.editorNode);
// Butons DIV
const eDiv = document.createElement('div');
addClasses(
eDiv,
'buttons-box opacity-0 group-hover:opacity-100 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');
addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative right-0 -top-4 z-10 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
this.btnRun = document.createElement('button');
this.btnRun.innerHTML =
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
const buttonClasses = ['mr-2', 'block', 'py-2', 'px-4', 'rounded-full'];
this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
const buttonClasses = ["mr-2", "block"];
addClasses(this.btnRun, buttonClasses);
addClasses(this.btnRun, ['bg-green-500']);
eDiv.appendChild(this.btnRun);
this.btnRun.onclick = wrap(this);
function wrap(el: any) {
async function evaluatePython() {
await el.evaluate();
}
return evaluatePython;
function wrap(el: any){
function evaluatePython() {
el.evaluate();
}
return evaluatePython;
}
// 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: 'output', value: 'default' },
{ key: 'source', value: 'self' },
{ key: 'output-mode', value: 'clear' },
]);
};
addClasses(this.btnConfig, buttonClasses);
addClasses(this.btnConfig, ['bg-blue-500']);
eDiv.appendChild(this.btnConfig);
mainDiv.appendChild(eDiv);
mainDiv.appendChild(this.editorNode);
if (!this.id) {
console.log(
'WARNING: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won\'t work otherwise!',
@@ -188,7 +151,7 @@ export class PyRepl extends BaseEvalElement {
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
this.outputElement = document.createElement('div');
this.outputElement.classList.add('output');
this.outputElement.classList.add('output', 'font-mono', 'ml-8', 'text-sm');
this.outputElement.hidden = true;
this.outputElement.id = this.id + '-' + this.getAttribute('exec-id');
@@ -208,7 +171,7 @@ export class PyRepl extends BaseEvalElement {
console.log('connected');
}
addToOutput(s: string) {
addToOutput(s: string): void {
this.outputElement.innerHTML += '<div>' + s + '</div>';
this.outputElement.hidden = false;
}