Skip to content

Commit 833d439

Browse files
b4rtazb4rtaz
committed
vanilla js demo.
1 parent e796e7d commit 833d439

File tree

8 files changed

+156
-74
lines changed

8 files changed

+156
-74
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ Powerful workflow editor builder for sequential workflows. Written in TypeScript
1515
* [🛠 Playground](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/playground.html)
1616
* [📖 Editors](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/editors.html)
1717
* [🎯 Placement Restrictions](https://nocode-js.github.io/sequential-workflow-editor/webpack-app/public/placement-restrictions.html)
18+
* [🚢 Vanilla JS](https://nocode-js.github.io/sequential-workflow-editor/vanilla-js-app/vanilla-js.html)
1819

1920
Pro:
2021

‎demos/vanilla-js-app/assets/favicon.ico

1.63 KB
Binary file not shown.

‎demos/vanilla-js-app/assets/lib.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* global location, document */
2+
3+
function isTestEnv() {
4+
const hostname = location.hostname.toLowerCase();
5+
return hostname === 'localhost' || hostname === '127.0.0.1' || hostname.startsWith('192.168.');
6+
}
7+
8+
function embedScript(url) {
9+
document.write(`<script src="${url}"></script>`);
10+
}
11+
12+
function embedStylesheet(url) {
13+
document.write(`<link href="${url}" rel="stylesheet">`);
14+
}
15+
16+
const modelBaseUrl = isTestEnv() ? '../../model' : '//cdn.jsdelivr.net/npm/[email protected]';
17+
const editorBaseUrl = isTestEnv() ? '../../editor' : '//cdn.jsdelivr.net/npm/[email protected]';
18+
19+
embedScript(`${modelBaseUrl}/dist/index.umd.js`);
20+
embedScript(`${editorBaseUrl}/dist/index.umd.js`);
21+
embedStylesheet(`${editorBaseUrl}/css/editor.css`);

‎demos/vanilla-js-app/assets/vanilla-js.js

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* global window, document, sequentialWorkflowEditorModel, sequentialWorkflowEditor, sequentialWorkflowDesigner */
2+
3+
const nextId = sequentialWorkflowDesigner.Uid.next;
4+
5+
const rootModel = sequentialWorkflowEditorModel.createRootModel(model => {
6+
model.property('host').value(sequentialWorkflowEditorModel.createStringValueModel({}));
7+
});
8+
9+
const sendEmailModel = sequentialWorkflowEditorModel.createStepModel('sendEmail', 'task', step => {
10+
step.property('to').value(sequentialWorkflowEditorModel.createStringValueModel({}));
11+
step.property('ssl').value(sequentialWorkflowEditorModel.createBooleanValueModel({}));
12+
});
13+
14+
const sqlQueryModel = sequentialWorkflowEditorModel.createStepModel('sqlQuery', 'task', step => {
15+
step.property('query').value(
16+
sequentialWorkflowEditorModel.createStringValueModel({
17+
defaultValue: 'SELECT * FROM table'
18+
})
19+
);
20+
});
21+
22+
const definitionModel = sequentialWorkflowEditorModel.createDefinitionModel(model => {
23+
model.valueTypes(['string']);
24+
model.root(rootModel);
25+
model.steps([sendEmailModel, sqlQueryModel]);
26+
});
27+
28+
const editorProvider = sequentialWorkflowEditor.EditorProvider.create(definitionModel, {
29+
uidGenerator: nextId
30+
});
31+
32+
const startDefinition = {
33+
properties: {
34+
host: '127.0.0.1'
35+
},
36+
sequence: [
37+
{
38+
id: nextId(),
39+
name: 'Send Email',
40+
type: 'sendEmail',
41+
componentType: 'task',
42+
properties: {
43+
to: '[email protected]',
44+
ssl: false
45+
}
46+
}
47+
]
48+
};
49+
50+
function load() {
51+
const placeholder = document.getElementById('placeholder');
52+
53+
sequentialWorkflowDesigner.Designer.create(placeholder, startDefinition, {
54+
toolbox: {
55+
groups: editorProvider.getToolboxGroups(),
56+
labelProvider: editorProvider.createStepLabelProvider()
57+
},
58+
controlBar: true,
59+
steps: {},
60+
editors: {
61+
rootEditorProvider: editorProvider.createRootEditorProvider(),
62+
stepEditorProvider: editorProvider.createStepEditorProvider()
63+
},
64+
validator: {
65+
step: editorProvider.createStepValidator(),
66+
root: editorProvider.createRootValidator()
67+
}
68+
});
69+
}
70+
71+
window.addEventListener('load', load, false);

‎demos/vanilla-js-app/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "vanilla-js-app-demo",
3+
"author": "b4rtaz",
4+
"license": "MIT",
5+
"private": true,
6+
"version": "1.0.0",
7+
"scripts": {
8+
"build": "echo Skipped",
9+
"eslint": "echo Skipped",
10+
"test:single": "echo Skipped",
11+
"prettier": "prettier --check ./*.html ./assets/*.js",
12+
"prettier:fix": "prettier --write ./*.html ./assets/*.js"
13+
},
14+
"devDependencies": {
15+
"prettier": "^2.8.7"
16+
}
17+
}

‎demos/vanilla-js-app/umd-example.html

Lines changed: 0 additions & 74 deletions
This file was deleted.

‎demos/vanilla-js-app/vanilla-js.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>🚢 Vanilla JS - Sequential Workflow Editor</title>
6+
<link rel="icon" href="./assets/favicon.ico" />
7+
<style>
8+
body {
9+
font: 14px/1.5 Arial, Tahoma, Serif;
10+
}
11+
a {
12+
color: navy;
13+
text-decoration: underline;
14+
}
15+
a:hover {
16+
text-decoration: none;
17+
}
18+
#placeholder {
19+
display: block;
20+
border: 1px solid #ccc;
21+
padding: 10px;
22+
height: 50vh;
23+
}
24+
</style>
25+
26+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer.css" rel="stylesheet" />
27+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/designer-light.css" rel="stylesheet" />
28+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
29+
30+
<script src="./assets/lib.js"></script>
31+
<script src="./assets/vanilla-js.js"></script>
32+
</head>
33+
<body>
34+
<h1>🚢 Vanilla JS - Sequential Workflow Editor</h1>
35+
36+
<p>
37+
This demo shows basic usage of
38+
<a href="https://github.com/nocode-js/sequential-workflow-editor" target="_blank">Sequential Workflow Editor</a>
39+
with <a href="https://github.com/nocode-js/sequential-workflow-designer" target="_blank">Sequential Workflow Designer</a>
40+
in a vanilla JavaScript application.
41+
</p>
42+
43+
<div id="placeholder"></div>
44+
</body>
45+
</html>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"workspaces": [
1313
"model",
1414
"editor",
15+
"demos/vanilla-js-app",
1516
"demos/webpack-app"
1617
],
1718
"devDependencies": {

0 commit comments

Comments
 (0)