BZModalDialog
This commit is contained in:
STEINNI
7
buildoz.code-workspace
Normal file
7
buildoz.code-workspace
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
]
|
||||
}
|
||||
31
buildoz.css
31
buildoz.css
@@ -1,3 +1,34 @@
|
||||
dialog.bz-modal-dialog{
|
||||
padding: 0;
|
||||
border: 2px solid #050;
|
||||
border-radius: 5px;
|
||||
min-width: 15em;
|
||||
}
|
||||
|
||||
dialog.bz-modal-dialog header{
|
||||
background: #050;
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
dialog.bz-modal-dialog section{
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
dialog.bz-modal-dialog footer{
|
||||
border-top: 1px solid #CCC;
|
||||
padding: .5em;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-gap: 2em;
|
||||
}
|
||||
|
||||
dialog.bz-modal-dialog footer button{
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
bz-select {
|
||||
display: block;
|
||||
margin: .5em 0 .5em 0;
|
||||
|
||||
43
buildoz.js
43
buildoz.js
@@ -11,6 +11,48 @@
|
||||
* as long as the copyright notice and license are kept.
|
||||
*/
|
||||
|
||||
function BZModalDialog(title, message) {
|
||||
const getFields = (dlg) => {
|
||||
const form = dlg.querySelector('form')
|
||||
if (!form) return {}
|
||||
const fd = new FormData(form)
|
||||
const out = {}
|
||||
for (const [key, value] of fd.entries()) {
|
||||
if (Object.prototype.hasOwnProperty.call(out, key)) {
|
||||
out[key] = Array.isArray(out[key]) ? [...out[key], value] : [out[key], value]
|
||||
} else {
|
||||
out[key] = value
|
||||
}
|
||||
}
|
||||
return out
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
const dlg = document.createElement('dialog')
|
||||
dlg.classList.add('bz-modal-dialog')
|
||||
dlg.innerHTML = `
|
||||
<form method="dialog">
|
||||
<header>${title}</header>
|
||||
<section>${message}</section>
|
||||
<footer>
|
||||
<button value="cancel">Cancel</button>
|
||||
<button value="ok">OK</button>
|
||||
</footer>
|
||||
</form>
|
||||
`
|
||||
dlg.addEventListener('close', () => {
|
||||
const ok = dlg.returnValue.toLowerCase() === 'ok'
|
||||
if(ok) {
|
||||
resolve(getFields(dlg))
|
||||
} else {
|
||||
resolve(ok)
|
||||
}
|
||||
dlg.remove()
|
||||
})
|
||||
document.body.appendChild(dlg)
|
||||
dlg.showModal()
|
||||
})
|
||||
}
|
||||
|
||||
class Buildoz extends HTMLElement {
|
||||
|
||||
// static is evaluated when the class is defined, therefore while buildoz.js is executing.
|
||||
@@ -386,4 +428,3 @@ class BZslidePane extends Buildoz {
|
||||
}
|
||||
}
|
||||
Buildoz.define('slidepane', BZslidePane)
|
||||
|
||||
|
||||
@@ -106,8 +106,10 @@ window.debugEditor = this
|
||||
</section>
|
||||
</div>
|
||||
`
|
||||
this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', this.onExportFlow.bind(this))
|
||||
this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', this.onImportFlow.bind(this))
|
||||
this.onImportFlow = this.onImportFlow.bind(this)
|
||||
this.onExportFlow = this.onExportFlow.bind(this)
|
||||
this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', (e) => this.onExportFlow(e)) // indirect so override works !
|
||||
this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', (e) => this.onImportFlow(e))// indirect so override works !
|
||||
}
|
||||
|
||||
refreshNodes(e){
|
||||
|
||||
@@ -762,7 +762,6 @@ class BZgraflow extends Buildoz{
|
||||
y = ((maxHeight - layerHeights[idx]) / 2) + gapy
|
||||
break
|
||||
}
|
||||
console.log('======>',gapy, y)
|
||||
for(const nid of layer){
|
||||
let placedY
|
||||
if(!nid.startsWith('longLinkPlaceHolder_')) {
|
||||
|
||||
60
graflow_examples/etest2.html
Normal file
60
graflow_examples/etest2.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>graflow</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
|
||||
<link type="text/css" rel="stylesheet" href="../buildoz.css">
|
||||
<script src="../buildoz.js"></script>
|
||||
<script src="../bzGraflow.js"></script>
|
||||
<script src="../bzGraflow-editor.js"></script>
|
||||
<style>
|
||||
@font-face { /*FF does not indirectly load if inside a shawdow-dom */
|
||||
font-family: 'glyphs';
|
||||
src: url('/assets/styles/fonts/glyphs.eot');
|
||||
src: url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
|
||||
url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
|
||||
url('/assets/styles/fonts/glyphs.woff') format('woff'),
|
||||
url('/assets/styles/fonts/glyphs.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
body{
|
||||
display: grid;
|
||||
grid-gap: 5px;
|
||||
background:#888;
|
||||
font-size: 16px;
|
||||
}
|
||||
bz-graflow{
|
||||
border: 2px solid black;
|
||||
}
|
||||
bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 60vh; background:black; }
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load',()=>{
|
||||
const editor = document.querySelector('bz-grafloweditor')
|
||||
editor.onImportFlow = async (e) => {
|
||||
const fileList = ['testFlow1', 'testFlow2', 'testFlow3']
|
||||
const result = await BZModalDialog('Select your flow...', `
|
||||
Available flows:
|
||||
<select name="flow" style="min-width: 10em;justify-self: center;">
|
||||
${fileList.map(file => `<option value="${file}">${file}</option>`).join('')}
|
||||
</select>
|
||||
`)
|
||||
console.log('result', result)
|
||||
}
|
||||
editor.onExportFlow = (e) => {
|
||||
console.log('onExportFlow')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<bz-grafloweditor nodes="./nodesLib/nodesTest1.html" >
|
||||
</bz-grafloweditor>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -134,13 +134,24 @@
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Style</th>
|
||||
<th>Import / Export</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a target="etest1" href="./etest1.html">Editor test</a></td>
|
||||
<td><a target="etest1" href="./etest1.html">Editor test 1</a></td>
|
||||
<td>P42</td>
|
||||
<td>JSON local file</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a target="etest2" href="./etest2.html">Editor test 2</a></td>
|
||||
<td>EIC</td>
|
||||
<td>API to MySQL</tr>
|
||||
</tr>
|
||||
<!-- <tr>
|
||||
<td><a target="etest3" href="./etest3.html">Editor test 3</a></td>
|
||||
<td>16 ports</td>
|
||||
</tr> -->
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user