Skip to content

Commit

Permalink
Embeddable controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanmorris
seanmorris committed Oct 22, 2024
1 parent c51e4c3 commit 03ddf9f
Show file tree
Hide file tree
Showing 16 changed files with 181 additions and 142 deletions.
35 changes: 35 additions & 0 deletions demo-web/src/Common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@ button.padded {
margin: 0.5rem;
}

[data-iframed="1"].margined {
margin: 0rem;
}

[data-iframed="1"].margined > .bevel {
padding-top: 0.8rem;
}

.button-bar {
display: flex;
Expand Down Expand Up @@ -152,3 +159,31 @@ button.square {
a, button, select, input {
cursor: pointer;
}

[data-iframed="1"] h2:first-child {
margin-top: 0em;
}

[data-iframed="1"] h2 {
margin-bottom: 0.25em;
}

[data-iframed="1"]:not(.Confirm) > .bevel {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
}

[data-iframed="1"] .bevel .frameworks {
display: flex;
flex-direction: column;
}

[data-iframed="1"] .bevel .frameworks,
[data-iframed="1"] .bevel .frameworks .row.icons {
flex: 1;
}


238 changes: 121 additions & 117 deletions demo-web/src/Embedded.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,14 @@ function Embedded() {
const persist = useRef('');
const single = useRef('');

const query = useMemo(() => new URLSearchParams(window.location.search), []);

const [exitCode, setExitCode] = useState('');
const [stdOut, setStdOut] = useState('');
const [stdErr, setStdErr] = useState('');
const [stdRet, setStdRet] = useState('');
const [overlay, setOverlay] = useState(null);
const [isIframe, setIsIframe] = useState(!!Number(query.get('iframed')));

const [running, setRunning] = useState(false);
const [displayMode, setDisplayMode] = useState('');
Expand Down Expand Up @@ -88,8 +91,6 @@ function Embedded() {
}
}, [refreshPhp]);

const query = useMemo(() => new URLSearchParams(window.location.search), []);

const singleChanged = () => setOutputMode(single.current.checked ? 'single' : 'normal');
const formatSelected = event => setDisplayMode(event.target.value);
const codeChanged = newValue => input.current = newValue;
Expand Down Expand Up @@ -332,140 +333,143 @@ function Embedded() {
editor.current.editor.setValue(await file.text(), -1);;
};

return (
<div className="Embedded" data-display-mode = {displayMode} data-output-mode = {outputMode} data-running = {running ? 1: 0}>
<div className='bevel margined column'>
<div className = "row header toolbar">
<div className = "cols">
<div className = "row start">
<a href = { process.env.PUBLIC_URL || "/" }>
<img src = "sean-icon.png" alt = "sean" />
</a>
<h1><a href = { process.env.PUBLIC_URL || "/" }>php-wasm</a></h1>
<hr />
<select data-select-demo ref = {selectDemoBox}>
<option value = "">Select a Demo</option>
<option value = "hello-world.php">Hello, World!</option>
<option value = "dynamic-extension.php">Dynamic Extension Loading</option>
<option value = "callbacks.php">Javascript Callbacks</option>
<option value = "import.php">Import Javascript Modules</option>
<option value = "curvature.php">Curvature</option>
<option value = "phpinfo.php">phpinfo();</option>
<option value = "fetch.php">Fetch</option>
<option value = "promise.php">Promise</option>
<option value = "persistent-memory.php">Persistent Memory</option>
<option value = "dom-access.php">DOM Access</option>
<option value = "goto.php">GoTo</option>
<option value = "stdio.php">StdOut, StdIn, & Return</option>
<option value = "postgres.php">PostgreSQL</option>
<option value = "sqlite.php">SQLite</option>
<option value = "sqlite-pdo.php">SQLite (PDO)</option>
<option value = "json.php">JSON</option>
<option value = "closures.php">Closures</option>
<option value = "files.php">Files</option>
<option value = "zend-benchmark.php">Zend Benchmark</option>
<option value = "drupal.php">Drupal 7</option>
</select>
<button data-load-demo onClick = {demoSelected}>load</button>
</div>
</div>
<div className = "separator"></div>
<div className = "row flex-end">
<hr />
<div className = "rows spread">
<label>
<span>text</span>
<input value = "text" type = "radio" name = "render-as" onChange = {formatSelected} ref = {textRadio} />
</label>
<label>
<span>html</span>
<input value = "html" type = "radio" name = "render-as" onChange = {formatSelected} ref = {htmlRadio} />
</label>
</div>
&nbsp;
<div className = "rows spread">
<label>
<span>Persist Memory</span>
<input type = "checkbox" id = "persist" ref = { persist } />
const topBar = (<div className = "row header toolbar">
<div className = "cols">
<div className = "row start">
{isIframe || <span className = "contents">
<a href = { process.env.PUBLIC_URL || "/" }>
<img src = "sean-icon.png" alt = "sean" />
</a>
<h1><a href = { process.env.PUBLIC_URL || "/" }>php-wasm</a></h1>
<hr />
</span>}
<select data-select-demo ref = {selectDemoBox}>
<option value = "">Select a Demo</option>
<option value = "hello-world.php">Hello, World!</option>
<option value = "dynamic-extension.php">Dynamic Extension Loading</option>
<option value = "callbacks.php">Javascript Callbacks</option>
<option value = "import.php">Import Javascript Modules</option>
<option value = "curvature.php">Curvature</option>
<option value = "phpinfo.php">phpinfo();</option>
<option value = "fetch.php">Fetch</option>
<option value = "promise.php">Promise</option>
<option value = "persistent-memory.php">Persistent Memory</option>
{isIframe || <option value = "dom-access.php">DOM Access</option>}
<option value = "goto.php">GoTo</option>
<option value = "stdio.php">StdOut, StdIn, & Return</option>
<option value = "postgres.php">PostgreSQL</option>
<option value = "sqlite.php">SQLite</option>
<option value = "sqlite-pdo.php">SQLite (PDO)</option>
<option value = "json.php">JSON</option>
<option value = "closures.php">Closures</option>
<option value = "files.php">Files</option>
<option value = "zend-benchmark.php">Zend Benchmark</option>
{isIframe || <option value = "drupal.php">Drupal 7</option>}
</select>
<button data-load-demo onClick = {demoSelected}>load</button>
</div>
</div>
<div className = "separator"></div>
<div className = "row flex-end">
<hr />
<div className = "rows spread">
<label>
<span>text</span>
<input value = "text" type = "radio" name = "render-as" onChange = {formatSelected} ref = {textRadio} />
</label>
<label>
<span>html</span>
<input value = "html" type = "radio" name = "render-as" onChange = {formatSelected} ref = {htmlRadio} />
</label>
</div>
&nbsp;
<div className = "rows spread">
<label>
<span>Persist Memory</span>
<input type = "checkbox" id = "persist" ref = { persist } />
</label>
<label>
<span>Single Expression</span>
<input type = "checkbox" id = "singleExpression" ref = { single } onChange = {singleChanged} />
</label>
</div>
<button data-run onClick = { refreshMem }><span>refresh</span></button>
<button data-run onClick = { runCode }><span>run</span></button>
</div>
</div>);

const statusBar = (<div className = "row status toolbar">
<div>
<div className = "row start" data-status>
{statusMessage}
</div>
</div>
<div>
</div>
</div>);

return (<div className="Embedded margined" data-display-mode = {displayMode} data-output-mode = {outputMode} data-running = {running ? 1: 0} data-iframed = {isIframe ? 1 : 0}>
<div className='bevel column'>
{topBar}
<div className = "row body">
<div className = "panel">
<div className = "input">
<div className = "cols">
<label tabIndex="-1">
<img src = "php.png" alt = "php" /> <span>PHP Code</span>
</label>
<label>
<span>Single Expression</span>
<input type = "checkbox" id = "singleExpression" ref = { single } onChange = {singleChanged} />
<label id = "openFile" className = "collapse"tabIndex="-1">
open file<input type = "file" accept=".php" onChange = {openFile} />
</label>
</div>
<button data-run onClick = { refreshMem }><span>refresh</span></button>
<button data-run onClick = { runCode }><span>run</span></button>
<div className = "liquid" id = "input-box"></div>
</div>
</div>

<div className = "row body">
<div className = "panel">
<div className = "input">
<div className = "cols">
<label tabIndex="-1">
<img src = "php.png" alt = "php" /> <span>PHP Code</span>
</label>
<label id = "openFile" className = "collapse"tabIndex="-1">
open file<input type = "file" accept=".php" onChange = {openFile} />
</label>
</div>
<div className = "liquid" id = "input-box"></div>
<div className = "panel">
<section id = "example-wrapper">
<div id = "example"></div>
</section>
<div id = "ret">
<div className = "cols">
<label tabIndex="-1">return</label>
</div>
</div>

<div className = "panel">
<section id = "example-wrapper">
<div id = "example"></div>
</section>
<div id = "ret">
<div className = "cols">
<label tabIndex="-1">return</label>
</div>
<div className = "stdret output liquid">
<div className = "column">
<iframe srcDoc = {stdRet} title = "output" sandbox = "allow-scripts allow-forms allow-popups" className = "scroller"></iframe>
<div className = "scroller">{stdRet}</div>
</div>
<div className = "stdret output liquid">
<div className = "column">
<iframe srcDoc = {stdRet} title = "output" sandbox = "allow-scripts allow-forms allow-popups" className = "scroller"></iframe>
<div className = "scroller">{stdRet}</div>
</div>
</div>
<div>
<div className = "cols">
<label tabIndex="-1">stdout</label>
<label id = "exit" className = "collapse" tabIndex="-1">exit code: {exitCode}<span></span></label>
</div>
<div className = "stdout output liquid">
<div className = "column">
<iframe srcDoc = {stdOut} title = "output" sandbox = "allow-scripts allow-forms allow-popups" className = "scroller"></iframe>
<div className = "scroller">{stdOut}</div>
</div>
</div>
</div>
<div>
<div className = "cols">
<label tabIndex="-1">stdout</label>
<label id = "exit" className = "collapse" tabIndex="-1">exit code: {exitCode}<span></span></label>
</div>
<div>
<div className = "cols">
<label tabIndex="-1">stderr</label>
</div>
<div className = "stderr output liquid">
<div className = "column">
<iframe srcDoc = {stdErr} title = "output" sandbox = "allow-scripts allow-forms allow-popups" className = "scroller"></iframe>
<div className = "scroller">{stdErr}</div>
</div>
<div className = "stdout output liquid">
<div className = "column">
<iframe srcDoc = {stdOut} title = "output" sandbox = "allow-scripts allow-forms allow-popups" className = "scroller"></iframe>
<div className = "scroller">{stdOut}</div>
</div>
</div>
</div>
</div>

<div className = "row status toolbar">
<div>
<div className = "row start" data-status>
{statusMessage}
<div className = "cols">
<label tabIndex="-1">stderr</label>
</div>
<div className = "stderr output liquid">
<div className = "column">
<iframe srcDoc = {stdErr} title = "output" sandbox = "allow-scripts allow-forms allow-popups" className = "scroller"></iframe>
<div className = "scroller">{stdErr}</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div className = "overlay">{overlay}</div>
{statusBar}
</div>
<div className = "overlay">{overlay}</div>
</div>
);
}

Expand Down
13 changes: 8 additions & 5 deletions demo-web/src/SelectFramework.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import drupalIcon from './drupal-icon.svg';
import codeIgniterIcon from './codeigniter-icon.svg';
import laravelIcon from './laravel-icon.svg';
import laminasIcon from './laminas-icon.svg';
import { useEffect, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import Header from './Header';
import { sendMessageFor } from 'php-cgi-wasm/msg-bus';

Expand All @@ -22,12 +22,15 @@ const sendMessage = sendMessageFor((`${window.location.origin}${process.env.PUBL

function SelectFramework() {

const query = useMemo(() => new URLSearchParams(window.location.search), []);

const [cakeInstalled, setCakeInstalled] = useState(false);
const [codeigniterInstalled, setCodeigniterInstalled] = useState(false);
const [drupalInstalled, setDrupalInstalled] = useState(false);
const [laravelInstalled, setLaravelInstalled] = useState(false);
const [laminasInstalled, setLaminasInstalled] = useState(false);
const [overlay, setOverlay] = useState(null);
const [isIframe, setIsIframe] = useState(!!Number(query.get('iframed')));

const refreshAll = () => {
sendMessage('analyzePath', ['/persist/cakephp-5']).then(about => setCakeInstalled(about.exists));
Expand Down Expand Up @@ -108,9 +111,9 @@ function SelectFramework() {
/>);

return (
<div className = "select-framework">
<div className = "select-framework" data-iframed = {isIframe ? 1 : 0}>
<div className='framework-menu bevel'>
<Header />
{isIframe || <Header />}
<div className='frameworks'>
<h2>Select a Framework:</h2>
<div className='inset row icons'>
Expand Down Expand Up @@ -195,9 +198,9 @@ function SelectFramework() {
Clear
</button>
</div>
<div className = "inset right demo-bar">
{isIframe || (<div className = "inset right demo-bar">
<span>Demo powered by React</span> <img src = {reactIcon} className='small-icon'/>
</div>
</div>)}
</div>
</div>
<div className = "overlay">{overlay}</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/404.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/php-wasm/favicon.ico"/><meta name="viewport" content="width=650,user-scalable=no"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/php-wasm/logo192.png"/><link rel="manifest" href="/php-wasm/manifest.json"/><title>php-wasm</title><script type="text/javascript" src="https://unpkg.com/curvature@0.0.68-h/dist/curvature.js"></script><script defer="defer" src="/php-wasm/static/js/main.40aa7fec.js"></script><link href="/php-wasm/static/css/main.15444b1f.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html><!--
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/php-wasm/favicon.ico"/><meta name="viewport" content="width=650,user-scalable=no"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/php-wasm/logo192.png"/><link rel="manifest" href="/php-wasm/manifest.json"/><title>php-wasm</title><script type="text/javascript" src="https://unpkg.com/curvature@0.0.68-h/dist/curvature.js"></script><script defer="defer" src="/php-wasm/static/js/main.470b598f.js"></script><link href="/php-wasm/static/css/main.4226f89c.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html><!--
sssooo+++++++///////++++//:----:::::///////:::::::///+ossssssyyyhdddddmmmmNNmo`````````````````````-
soooo+//////::::::::////:-....-----::::::----------:/+ossyyyyhdhddmmmmNNMNNNN: .
soo++//:::---------:://::-----..------.-.........--:/+ossyyhddmmddmmNNNNMMNNm. .
Expand Down
Loading

0 comments on commit 03ddf9f

Please sign in to comment.