Skip to content

Commit 4ce5567

Browse files
langsamulangsamu
committed
Migrate to autonomous custom elements
Because Safari doesn't support customised built-in elements. Now tested on Edge 80, Firefox 63, Chrome 54, Opera 41 and Safari 10.
1 parent e6ee616 commit 4ce5567

File tree

9 files changed

+135
-106
lines changed

9 files changed

+135
-106
lines changed

‎demo/src/AppMain.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { BlocklySection } from "./BlocklySection"
2-
import { SparqlTextarea } from "./SparqlTextarea"
1+
import { BlocklyCanvas } from "./BlocklyCanvas"
2+
import { SparqlEditor } from "./SparqlEditor"
33

44
export class AppMain extends HTMLElement {
5-
private get sparql(): SparqlTextarea {
6-
return this.querySelector("[is = sparql-textarea]")
5+
private get sparql(): SparqlEditor {
6+
return this.querySelector("sparql-editor")
77
}
88

9-
private get blockly(): BlocklySection {
10-
return this.querySelector("[is = blockly-section]")
9+
private get blockly(): BlocklyCanvas {
10+
return this.querySelector("blockly-canvas")
1111
}
1212

1313
private async connectedCallback() {

demo/src/BlocklySection.ts renamed to demo/src/BlocklyCanvas.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as Blockly from "blockly"
22
import * as SparqlBlockly from "sparql-blockly"
33

4-
export class BlocklySection extends HTMLElement {
4+
export class BlocklyCanvas extends HTMLElement {
55
private typing = false
66

77
private async getToolboxData(): Promise<string> {

demo/src/SparqlTextarea.ts renamed to demo/src/SparqlEditor.ts

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
11
import * as SparqlJS from "sparqljs"
22
import * as SparqlBlockly from "sparql-blockly"
33

4-
export class SparqlTextarea extends HTMLTextAreaElement {
4+
export class SparqlEditor extends HTMLElement {
55
private async connectedCallback() {
6-
this.addEventListener("input", this.input)
6+
this.editorElement.addEventListener("input", this.input.bind(this))
77
}
88

9-
private get errorElement(): HTMLTextAreaElement {
10-
return document.getElementById(this.getAttribute("error-element")) as HTMLTextAreaElement
9+
private get editorElement(): HTMLTextAreaElement {
10+
return this.querySelector("textarea") as HTMLTextAreaElement
11+
}
12+
13+
private get errorElement(): HTMLSpanElement {
14+
return this.querySelector("span") as HTMLSpanElement
1115
}
1216

1317
private set error(value: string) {
14-
this.errorElement.value = value
18+
this.errorElement.innerText = value
1519
}
1620

1721
public get value() {
18-
return super.value
22+
return this.editorElement.value
1923
}
2024

2125
public set value(value: string) {
22-
super.value = value
26+
this.editorElement.value = value
2327
this.validate()
24-
//this.input()
2528
}
2629

2730
public setAndNotify(value: string) {
28-
super.value = value
31+
this.editorElement.value = value
2932
this.input()
3033
}
3134

‎demo/src/index.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
// TODO: sparqljs prefixes bnode with "e_" `select * {_:x ?p ?o}`
2-
31
import { AppMain } from "./AppMain"
4-
import { BlocklySection } from "./BlocklySection"
5-
import { SparqlTextarea } from "./SparqlTextarea"
2+
import { BlocklyCanvas } from "./BlocklyCanvas"
3+
import { SparqlEditor } from "./SparqlEditor"
64

7-
customElements.define("app-main", AppMain, { extends: "main" })
8-
customElements.define("blockly-section", BlocklySection, { extends: "section" })
9-
customElements.define("sparql-textarea", SparqlTextarea, { extends: "textarea" })
5+
customElements.define("app-main", AppMain)
6+
customElements.define("blockly-canvas", BlocklyCanvas)
7+
customElements.define("sparql-editor", SparqlEditor)

‎demo/wwwroot/index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>SPARQL Blockly</title>
55
<meta charset="utf-8" />
6-
<meta name="viewport" content="width = device-width" />
6+
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
77
<meta name="description" content="A SPARQL builder and visualiser using Blockly" />
88

99
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
@@ -32,7 +32,7 @@
3232
"url": ["https://twitter.com/langsamu", "https://github.com/langsamu/", "https://www.linkedin.com/in/langsamu/"]
3333
},
3434
"license": "https://github.com/langsamu/sparql-blockly/blob/main/LICENSE",
35-
"browserRequirements": "Requires JavaScript.",
35+
"browserRequirements": "Requires JavaScript. Requires Edge ^80, Firefox ^63, Chrome ^54, Opera ^41 or Safari ^10",
3636
"operatingSystem": "All",
3737
"softwareVersion": "0.0.4-5",
3838
"screenshot": "https://repository-images.githubusercontent.com/353815277/9e561900-93ad-11eb-8794-0b1b1645e92c",
@@ -46,12 +46,13 @@
4646
<script src="app.js" defer></script>
4747
</head>
4848
<body>
49-
<main is="app-main">
50-
<section id="input">
51-
<textarea error-element="error" is="sparql-textarea"></textarea>
52-
<textarea id="error"></textarea>
53-
</section>
54-
<section toolbox-data="toolbox.xml" is="blockly-section"></section>
55-
</main>
49+
<app-main>
50+
<sparql-editor>
51+
<label for="sparql" hidden>SPARQL editor</label>
52+
<textarea placeholder="Write SPARQL here" name="sparql"></textarea>
53+
<span></span>
54+
</sparql-editor>
55+
<blockly-canvas toolbox-data="toolbox.xml"></blockly-canvas>
56+
</app-main>
5657
</body>
5758
</html>

‎demo/wwwroot/style.css‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,72 @@
11
@media screen and (min-height : 800px) {
2-
[is = sparql-textarea] {
2+
sparql-editor textarea {
33
height: 200px
44
}
55

6-
[is = sparql-textarea] + textarea {
7-
height: 80px
8-
}
6+
sparql-editor span {
7+
height: 80px
8+
}
99
}
1010

1111
@media screen and (max-height : 800px) {
12-
[is = sparql-textarea] {
12+
sparql-editor textarea {
1313
height: 100px
1414
}
1515

16-
[is = sparql-textarea] + textarea {
17-
height: 50px
18-
}
16+
sparql-editor span {
17+
height: 50px
18+
}
1919
}
2020

2121
body {
2222
margin: 0;
2323
min-width: 320px;
2424
}
2525

26-
[is = app-main] {
26+
app-main {
2727
height: 100vh;
2828
display: flex;
2929
flex-direction: column;
3030
}
3131

32-
[is = blockly-section] {
33-
flex-grow: 1;
34-
min-height: 300px;
35-
}
32+
app-main blockly-canvas {
33+
flex-grow: 1;
34+
min-height: 300px;
35+
}
3636

37-
#input {
38-
flex-grow: 0;
39-
display: flex;
40-
flex-direction: column;
41-
margin: 10px;
42-
}
37+
app-main blockly-canvas div.injectionDiv {
38+
min-width: 300px;
39+
min-height: 300px;
40+
}
4341

44-
[is = sparql-textarea] + textarea {
45-
display: none;
46-
border-top: none
47-
}
42+
app-main sparql-editor {
43+
flex-grow: 0;
44+
display: flex;
45+
flex-direction: column;
46+
margin: 10px;
47+
}
4848

49-
[is = sparql-textarea].valid {
50-
background-color: #eeffee
51-
}
49+
app-main sparql-editor textarea:placeholder-shown {
50+
text-align: center;
51+
font-size: 250%;
52+
}
5253

53-
[is = sparql-textarea].invalid + textarea {
54-
display: initial
55-
}
54+
app-main sparql-editor span {
55+
font-family: monospace;
56+
display: none;
57+
border: 1px solid;
58+
border-top: none;
59+
overflow: auto;
60+
}
5661

57-
[is = sparql-textarea].invalid {
58-
background-color: #ffeeee
59-
}
62+
app-main sparql-editor.valid textarea {
63+
background-color: #eeffee;
64+
}
65+
66+
app-main sparql-editor.invalid textarea {
67+
background-color: #ffeeee;
68+
}
69+
70+
app-main sparql-editor.invalid span {
71+
display: initial;
72+
}

‎docs/app.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>SPARQL Blockly</title>
55
<meta charset="utf-8" />
6-
<meta name="viewport" content="width = device-width" />
6+
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
77
<meta name="description" content="A SPARQL builder and visualiser using Blockly" />
88

99
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
@@ -32,7 +32,7 @@
3232
"url": ["https://twitter.com/langsamu", "https://github.com/langsamu/", "https://www.linkedin.com/in/langsamu/"]
3333
},
3434
"license": "https://github.com/langsamu/sparql-blockly/blob/main/LICENSE",
35-
"browserRequirements": "Requires JavaScript.",
35+
"browserRequirements": "Requires JavaScript. Requires Edge ^80, Firefox ^63, Chrome ^54, Opera ^41 or Safari ^10",
3636
"operatingSystem": "All",
3737
"softwareVersion": "0.0.4-5",
3838
"screenshot": "https://repository-images.githubusercontent.com/353815277/9e561900-93ad-11eb-8794-0b1b1645e92c",
@@ -46,12 +46,13 @@
4646
<script src="app.js" defer></script>
4747
</head>
4848
<body>
49-
<main is="app-main">
50-
<section id="input">
51-
<textarea error-element="error" is="sparql-textarea"></textarea>
52-
<textarea id="error"></textarea>
53-
</section>
54-
<section toolbox-data="toolbox.xml" is="blockly-section"></section>
55-
</main>
49+
<app-main>
50+
<sparql-editor>
51+
<label for="sparql" hidden>SPARQL editor</label>
52+
<textarea placeholder="Write SPARQL here" name="sparql"></textarea>
53+
<span></span>
54+
</sparql-editor>
55+
<blockly-canvas toolbox-data="toolbox.xml"></blockly-canvas>
56+
</app-main>
5657
</body>
5758
</html>

‎docs/style.css‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,72 @@
11
@media screen and (min-height : 800px) {
2-
[is = sparql-textarea] {
2+
sparql-editor textarea {
33
height: 200px
44
}
55

6-
[is = sparql-textarea] + textarea {
7-
height: 80px
8-
}
6+
sparql-editor span {
7+
height: 80px
8+
}
99
}
1010

1111
@media screen and (max-height : 800px) {
12-
[is = sparql-textarea] {
12+
sparql-editor textarea {
1313
height: 100px
1414
}
1515

16-
[is = sparql-textarea] + textarea {
17-
height: 50px
18-
}
16+
sparql-editor span {
17+
height: 50px
18+
}
1919
}
2020

2121
body {
2222
margin: 0;
2323
min-width: 320px;
2424
}
2525

26-
[is = app-main] {
26+
app-main {
2727
height: 100vh;
2828
display: flex;
2929
flex-direction: column;
3030
}
3131

32-
[is = blockly-section] {
33-
flex-grow: 1;
34-
min-height: 300px;
35-
}
32+
app-main blockly-canvas {
33+
flex-grow: 1;
34+
min-height: 300px;
35+
}
3636

37-
#input {
38-
flex-grow: 0;
39-
display: flex;
40-
flex-direction: column;
41-
margin: 10px;
42-
}
37+
app-main blockly-canvas div.injectionDiv {
38+
min-width: 300px;
39+
min-height: 300px;
40+
}
4341

44-
[is = sparql-textarea] + textarea {
45-
display: none;
46-
border-top: none
47-
}
42+
app-main sparql-editor {
43+
flex-grow: 0;
44+
display: flex;
45+
flex-direction: column;
46+
margin: 10px;
47+
}
4848

49-
[is = sparql-textarea].valid {
50-
background-color: #eeffee
51-
}
49+
app-main sparql-editor textarea:placeholder-shown {
50+
text-align: center;
51+
font-size: 250%;
52+
}
5253

53-
[is = sparql-textarea].invalid + textarea {
54-
display: initial
55-
}
54+
app-main sparql-editor span {
55+
font-family: monospace;
56+
display: none;
57+
border: 1px solid;
58+
border-top: none;
59+
overflow: auto;
60+
}
5661

57-
[is = sparql-textarea].invalid {
58-
background-color: #ffeeee
59-
}
62+
app-main sparql-editor.valid textarea {
63+
background-color: #eeffee;
64+
}
65+
66+
app-main sparql-editor.invalid textarea {
67+
background-color: #ffeeee;
68+
}
69+
70+
app-main sparql-editor.invalid span {
71+
display: initial;
72+
}

0 commit comments

Comments
 (0)