Skip to content

Commit b89a482

Browse files
langsamulangsamu
committed
Add example code
1 parent 32a868b commit b89a482

File tree

16 files changed

+6648
-1
lines changed

16 files changed

+6648
-1
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@
88

99
## Repo structure
1010
- [Demo app](./demo)
11-
- [NPM package](./package)
11+
- [NPM package](./package)
12+
- [Examples](./examples)

‎examples/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# SPARQL Blockly examples
2+
3+
## How to run
4+
1. Execute `npm start` on the command line in this folder.
5+
2. Navigate to [localhost:8080](http://127.0.0.1:8080/) in a browser
6+
7+
## Examples
8+
- [Browser: Basic](./browser-basic/index.html)
9+
- [Browser: SPARQL from blocks](./browser-sparql-from-blocks/index.html)
10+
- [Browser: Blocks from SPARQL](./browser-blocks-from-sparql/index.html)
11+
- [TypeScript](./typescript/src/index.ts)

‎examples/browser-basic/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
5+
<script src="https://unpkg.com/sparql-blockly/sparql-blockly.min.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
height: 100vh;
10+
}
11+
</style>
12+
<script>
13+
window.addEventListener("load", initialiseBlockly)
14+
15+
async function initialiseBlockly() {
16+
const toolbox = await getToolboxData()
17+
const options = { toolbox, sounds: false }
18+
const container = document.body
19+
20+
Blockly.inject(container, options)
21+
}
22+
23+
async function getToolboxData() {
24+
const response = await fetch("../toolbox.xml")
25+
return await response.text()
26+
}
27+
</script>
28+
</head>
29+
<body>
30+
</body>
31+
</html>

‎examples/browser-blocks-from-sparql/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
5+
<script src="https://unpkg.com/sparql-blockly/sparql-blockly.min.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
height: 100vh;
10+
display: flex;
11+
flex-direction: column
12+
}
13+
14+
textarea {
15+
height: 10em;
16+
padding: 20px;
17+
}
18+
19+
span {
20+
font-family: monospace;
21+
max-height: 5em;
22+
overflow: auto;
23+
}
24+
25+
section {
26+
flex-grow: 1;
27+
}
28+
</style>
29+
<script>
30+
window.addEventListener("load", initialise)
31+
32+
function initialise() {
33+
initialiseBlockly()
34+
35+
const textarea = document.querySelector("textarea")
36+
textarea.addEventListener("input", textareaInput)
37+
}
38+
39+
function initialiseBlockly() {
40+
const options = { readOnly: true, sounds: false }
41+
const container = document.querySelector("section")
42+
43+
Blockly.inject(container, options)
44+
}
45+
46+
function textareaInput(e) {
47+
const parseError = document.querySelector("span")
48+
parseError.innerText = ""
49+
50+
const sparql = e.target.value
51+
52+
if (sparql) {
53+
try {
54+
const blocklyDom = SparqlBlockly.sparqlToBlockly(sparql)
55+
const workspace = Blockly.getMainWorkspace()
56+
57+
workspace.clear()
58+
59+
Blockly.Xml.domToWorkspace(blocklyDom, workspace)
60+
}
61+
catch (ex) {
62+
parseError.innerText = ex.message
63+
}
64+
}
65+
}
66+
</script>
67+
</head>
68+
<body>
69+
<textarea placeholder="Type SPARQL code here to generate Blockly blocks below."></textarea>
70+
<span></span>
71+
<section></section>
72+
</body>
73+
</html>

‎examples/browser-sparql-from-blocks/index.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="https://unpkg.com/blockly/blockly.min.js"></script>
5+
<script src="https://unpkg.com/sparql-blockly/sparql-blockly.min.js"></script>
6+
<style>
7+
body {
8+
margin: 0;
9+
height: 100vh;
10+
display: flex;
11+
flex-direction: column
12+
}
13+
14+
textarea {
15+
height: 10em;
16+
padding: 20px;
17+
}
18+
19+
section {
20+
flex-grow: 1;
21+
}
22+
</style>
23+
<script>
24+
window.addEventListener("load", initialiseBlockly)
25+
26+
async function initialiseBlockly() {
27+
const toolbox = await getToolboxData()
28+
const options = { toolbox, sounds: false }
29+
const container = document.querySelector("section")
30+
31+
const workspace = Blockly.inject(container, options)
32+
33+
workspace.addChangeListener(blocklyChanged)
34+
}
35+
36+
function blocklyChanged(e) {
37+
switch (e.type) {
38+
case Blockly.Events.CHANGE:
39+
case Blockly.Events.DELETE:
40+
case Blockly.Events.MOVE:
41+
generateCode()
42+
}
43+
}
44+
45+
function generateCode() {
46+
const workspace = Blockly.getMainWorkspace()
47+
48+
populateTextarea("")
49+
50+
for (const block of workspace.getTopBlocks(false)) {
51+
switch (block.type) {
52+
case "sparql11_query":
53+
case "sparql11_update":
54+
populateTextarea(SparqlBlockly.blocklyToSparql(block))
55+
}
56+
}
57+
}
58+
59+
function populateTextarea(sparql) {
60+
document.querySelector("textarea").value = sparql
61+
}
62+
63+
async function getToolboxData() {
64+
const response = await fetch("../toolbox.xml")
65+
return await response.text()
66+
}
67+
</script>
68+
</head>
69+
<body>
70+
<textarea placeholder="Interact with Blockly canvas below to generate SPARQL code here." readonly></textarea>
71+
<section></section>
72+
</body>
73+
</html>

‎examples/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>SPARQL Blockly examples</title>
5+
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
6+
<style>
7+
:root {
8+
--pm: 20px;
9+
}
10+
11+
html {
12+
font-family: sans-serif;
13+
}
14+
15+
body {
16+
margin: unset;
17+
display: flex;
18+
flex-direction: column;
19+
height: 100vh;
20+
}
21+
22+
h1 {
23+
margin: var(--pm);
24+
margin-bottom: unset;
25+
flex-grow: 0;
26+
}
27+
28+
aside {
29+
margin: var(--pm);
30+
}
31+
32+
ul {
33+
margin: var(--pm);
34+
padding: unset;
35+
display: flex;
36+
list-style-type: none;
37+
flex-wrap: wrap;
38+
}
39+
40+
li {
41+
margin-inline-end: var(--pm)
42+
}
43+
44+
iframe {
45+
flex-grow: 1;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<h1>SPARQL Blockly examples</h1>
51+
<nav>
52+
<aside><small>Links open below. SHIFT/CTRL+click to open in new window/tab.</small></aside>
53+
<ul>
54+
<li><a href="browser-basic" target="example">Browser: Basic</a></li>
55+
<li><a href="browser-sparql-from-blocks" target="example">Browser: SPARQL from blocks</a></li>
56+
<li><a href="browser-blocks-from-sparql" target="example">Browser: Blocks from SPARQL</a></li>
57+
<li><a href="typescript" target="example">TypeScript</a></li>
58+
</ul>
59+
</nav>
60+
<iframe name="example"></iframe>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)