nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BZModalDialog

Browse Source
This commit is contained in:
STEINNI
2026-04-07 16:10:42 +00:00
parent 158e9c4044
commit 0cc03cf512
7 changed files with 156 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
buildoz.code-workspace Normal file
View File

@@ -0,0 +1,7 @@
{
"folders": [
{
"path": "."
}
]
}

31
buildoz.css
View File

@@ -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 { bz-select {
display: block; display: block;
margin: .5em 0 .5em 0; margin: .5em 0 .5em 0;

43
buildoz.js
View File

@@ -11,6 +11,48 @@
* as long as the copyright notice and license are kept. * 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 { class Buildoz extends HTMLElement {
// static is evaluated when the class is defined, therefore while buildoz.js is executing. // 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) Buildoz.define('slidepane', BZslidePane)

6
bzGraflow-editor.js
View File

@@ -106,8 +106,10 @@ window.debugEditor = this
</section> </section>
</div> </div>
` `
this.slidePane.querySelector('button[data-trigger="onExportFlow"]').addEventListener('click', this.onExportFlow.bind(this)) this.onImportFlow = this.onImportFlow.bind(this)
this.slidePane.querySelector('button[data-trigger="onImportFlow"]').addEventListener('click', 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){ refreshNodes(e){

1
bzGraflow.js
View File

@@ -762,7 +762,6 @@ class BZgraflow extends Buildoz{
y = ((maxHeight - layerHeights[idx]) / 2) + gapy y = ((maxHeight - layerHeights[idx]) / 2) + gapy
break break
} }
console.log('======>',gapy, y)
for(const nid of layer){ for(const nid of layer){
let placedY let placedY
if(!nid.startsWith('longLinkPlaceHolder_')) { if(!nid.startsWith('longLinkPlaceHolder_')) {

60
graflow_examples/etest2.html Normal file
View 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>

13
graflow_examples/test.html
View File

@@ -134,13 +134,24 @@
<tr> <tr>
<th></th> <th></th>
<th>Style</th> <th>Style</th>
<th>Import / Export</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <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>P42</td>
<td>JSON local file</td>
</tr> </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> </tbody>
</table> </table>
</body> </body>