forked from alpheios-project/arethusa-demo-client
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (113 loc) · 4.79 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<script type="module">
import './alpheios-messaging.js'
let service
let config
function init() {
setTreebankUrl();
config = { name: 'treebank', targetIframeID: 'alpheios-treebank-frame', targetURL: getServiceTargetUrl(), commModes: [WindowIframeDestination.commModes.SEND] }
service = new MessagingService("treebank-service", new WindowIframeDestination(config))
}
function setTreebankUrl() {
var url = document.querySelector("#treebank-url").value
document.querySelector("#alpheios-treebank-frame").setAttribute('src', url);
}
function getServiceTargetUrl() {
var url = document.querySelector("#treebank-url").value
var origin = new URL(url).origin;
return origin;
}
document.addEventListener('DOMContentLoaded', () => {
init();
})
let sendRequest = async function (requestBody) {
const responseMessage = await service.sendRequestTo(config.name, new RequestMessage(requestBody))
document.querySelector("#serviceResponse").value = JSON.stringify(responseMessage.body);
}
document.querySelector("#get-morph").addEventListener("click", () => {
const requestBody = {
getMorph: {
sentenceId: document.querySelector("#sentenceId").value,
wordId: document.querySelector("#wordId").value
}
}
sendRequest(requestBody)
})
document.querySelector("#treebank-url").addEventListener("change", () => {
init();
})
document.querySelector("#refresh").addEventListener("click", () => {
document.querySelector("#alpheios-treebank-frame").style = "display:block;";
//sendRequest( { refreshView: {} } )
})
document.querySelector("#next-chunk").addEventListener("click", () => {
sendRequest( { nextSentence: {} } )
})
document.querySelector("#prev-chunk").addEventListener("click", () => {
sendRequest( { prevSentence: {} } )
})
document.querySelector("#toggle").addEventListener("click", () => {
document.querySelector("#alpheios-treebank-frame").style = "display:none;";
})
document.querySelector("#goto-ref").addEventListener("click", () => {
let wordIds = document.querySelectorAll(".refWordId")
let reqWordIds = []
wordIds.forEach( (w) => { if (w.value) { reqWordIds.push(w.value) } } )
const requestBody = {
gotoSentence: {
sentenceId: document.querySelector("#refSentenceId").value,
wordIds: reqWordIds
}
}
sendRequest(requestBody)
})
document.querySelector("#find-word").addEventListener("click", () => {
const requestBody = {
findWord: {
sentenceId: document.querySelector("#findIn").value,
word: document.querySelector("#refWord").value,
prefix: document.querySelector("#refPrefix").value,
suffix: document.querySelector("#refSuffix").value
}
}
sendRequest(requestBody)
})
</script>
</head>
<body>
<p>This is a sample Arethusa API Client. It calls the API via the Perseus Template Template Treebank Service.</p>
<p>
<label for="#treebank=url">Treebank Template URL:
<input id="treebank-url" type="text" size="100" value="https://alpheios-project.github.io/treebank-template/embed/on-the-murder-of-eratosthenes-1-50/1">
</label>
</p>
<p>
<button id="get-morph">Get Morph:</button>
<label for="#sentenceID">Sentence: <input type="text" id="sentenceId"></label>
<label for="#wordId"><input type="text" id="wordId"></label>
</p>
<p><button id="toggle">Toggle</button></p>
<p><button id="refresh">Refresh</button></p>
<p><button id="next-chunk">Next Chunk</button></p>
<p><button id="prev-chunk">Prev Chunk</button></p>
<p>
<button id="goto-ref">Goto Ref:</button>
<label for="#refSentenceId">Sentence: <input type="text" id="refSentenceId"></label>
<label>Word: <input type="text" class="refWordId"></label>
<label>Word: <input type="text" class="refWordId"></label>
</p>
<p>
<button id="find-word">Find Word:</button>
<label for="#findIn">In Sentence: <input type="text" id="findIn"></label>
<label for="#refWord">Word: <input type="text" id="refWord"></label>
<label for="#refPrefix">Prefix: <input type="text" id="refPrefix"></label>
<label for="#refSuffix">Suffix: <input type="text" id="refSuffix"></label>
</p>
<p>
<label for="#serviceResponse">Service Response:</label><textarea id="serviceResponse" cols="100" rows="5"></textarea>
</p>
<iframe id="alpheios-treebank-frame" src="" width="600px" height="100%">
</iframe>
</body>
</html>