Add example code

langsamu · Apr 11, 2021 · b89a482 · b89a482
1 parent 32a868b
commit b89a482
Show file tree

Hide file tree

Showing 16 changed files with 6,648 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -8,4 +8,5 @@
 
 ## Repo structure
 - [Demo app](./demo)
-- [NPM package](./package)
+- [NPM package](./package)
+- [Examples](./examples)
diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,11 @@
+# SPARQL Blockly examples
+
+## How to run
+1. Execute `npm start` on the command line in this folder.
+2. Navigate to [localhost:8080](http://127.0.0.1:8080/) in a browser
+
+## Examples
+- [Browser: Basic](./browser-basic/index.html)
+- [Browser: SPARQL from blocks](./browser-sparql-from-blocks/index.html)
+- [Browser: Blocks from SPARQL](./browser-blocks-from-sparql/index.html)
+- [TypeScript](./typescript/src/index.ts)
diff --git a/examples/browser-basic/index.html b/examples/browser-basic/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
+    <script src="https://unpkg.com/sparql-blockly/sparql-blockly.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+        }
+    </style>
+    <script>
+        window.addEventListener("load", initialiseBlockly)
+
+        async function initialiseBlockly() {
+            const toolbox = await getToolboxData()
+            const options = { toolbox, sounds: false }
+            const container = document.body
+
+            Blockly.inject(container, options)
+        }
+
+        async function getToolboxData() {
+            const response = await fetch("../toolbox.xml")
+            return await response.text()
+        }
+    </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/browser-blocks-from-sparql/index.html b/examples/browser-blocks-from-sparql/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
+    <script src="https://unpkg.com/sparql-blockly/sparql-blockly.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            flex-direction: column
+        }
+
+        textarea {
+            height: 10em;
+            padding: 20px;
+        }
+
+        span {
+            font-family: monospace;
+            max-height: 5em;
+            overflow: auto;
+        }
+
+        section {
+            flex-grow: 1;
+        }
+    </style>
+    <script>
+        window.addEventListener("load", initialise)
+
+        function initialise() {
+            initialiseBlockly()
+
+            const textarea = document.querySelector("textarea")
+            textarea.addEventListener("input", textareaInput)
+        }
+
+        function initialiseBlockly() {
+            const options = { readOnly: true, sounds: false }
+            const container = document.querySelector("section")
+
+            Blockly.inject(container, options)
+        }
+
+        function textareaInput(e) {
+            const parseError = document.querySelector("span")
+            parseError.innerText = ""
+
+            const sparql = e.target.value
+
+            if (sparql) {
+                try {
+                    const blocklyDom = SparqlBlockly.sparqlToBlockly(sparql)
+                    const workspace = Blockly.getMainWorkspace()
+
+                    workspace.clear()
+
+                    Blockly.Xml.domToWorkspace(blocklyDom, workspace)
+                }
+                catch (ex) {
+                    parseError.innerText = ex.message
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <textarea placeholder="Type SPARQL code here to generate Blockly blocks below."></textarea>
+    <span></span>
+    <section></section>
+</body>
+</html>
diff --git a/examples/browser-sparql-from-blocks/index.html b/examples/browser-sparql-from-blocks/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="https://unpkg.com/blockly/blockly.min.js"></script>
+    <script src="https://unpkg.com/sparql-blockly/sparql-blockly.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            flex-direction: column
+        }
+
+        textarea {
+            height: 10em;
+            padding: 20px;
+        }
+
+        section {
+            flex-grow: 1;
+        }
+    </style>
+    <script>
+        window.addEventListener("load", initialiseBlockly)
+
+        async function initialiseBlockly() {
+            const toolbox = await getToolboxData()
+            const options = { toolbox, sounds: false }
+            const container = document.querySelector("section")
+
+            const workspace = Blockly.inject(container, options)
+
+            workspace.addChangeListener(blocklyChanged)
+        }
+
+        function blocklyChanged(e) {
+            switch (e.type) {
+                case Blockly.Events.CHANGE:
+                case Blockly.Events.DELETE:
+                case Blockly.Events.MOVE:
+                    generateCode()
+            }
+        }
+
+        function generateCode() {
+            const workspace = Blockly.getMainWorkspace()
+
+            populateTextarea("")
+
+            for (const block of workspace.getTopBlocks(false)) {
+                switch (block.type) {
+                    case "sparql11_query":
+                    case "sparql11_update":
+                        populateTextarea(SparqlBlockly.blocklyToSparql(block))
+                }
+            }
+        }
+
+        function populateTextarea(sparql) {
+            document.querySelector("textarea").value = sparql
+        }
+
+        async function getToolboxData() {
+            const response = await fetch("../toolbox.xml")
+            return await response.text()
+        }
+    </script>
+</head>
+<body>
+    <textarea placeholder="Interact with Blockly canvas below to generate SPARQL code here." readonly></textarea>
+    <section></section>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SPARQL Blockly examples</title>
+    <meta name="viewport" content="width = device-width, initial-scale = 1.0" />
+    <style>
+        :root {
+            --pm: 20px;
+        }
+
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            margin: unset;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+
+        h1 {
+            margin: var(--pm);
+            margin-bottom: unset;
+            flex-grow: 0;
+        }
+
+        aside {
+            margin: var(--pm);
+        }
+
+        ul {
+            margin: var(--pm);
+            padding: unset;
+            display: flex;
+            list-style-type: none;
+            flex-wrap: wrap;
+        }
+
+        li {
+            margin-inline-end: var(--pm)
+        }
+
+        iframe {
+            flex-grow: 1;
+        }
+    </style>
+</head>
+<body>
+    <h1>SPARQL Blockly examples</h1>
+    <nav>
+        <aside><small>Links open below. SHIFT/CTRL+click to open in new window/tab.</small></aside>
+        <ul>
+            <li><a href="browser-basic" target="example">Browser: Basic</a></li>
+            <li><a href="browser-sparql-from-blocks" target="example">Browser: SPARQL from blocks</a></li>
+            <li><a href="browser-blocks-from-sparql" target="example">Browser: Blocks from SPARQL</a></li>
+            <li><a href="typescript" target="example">TypeScript</a></li>
+        </ul>
+    </nav>
+    <iframe name="example"></iframe>
+</body>
+</html>