-
Notifications
You must be signed in to change notification settings - Fork 0
/
edirom-windows-sample-actions.html
127 lines (101 loc) · 8.96 KB
/
edirom-windows-sample-actions.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
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Component Tester</title>
<!-- CUSTOM: Insert script for the web component here -->
<!-- <script src="path/to/web-component.js"></script> -->
<script src="edirom-window/edirom-windows.js"></script>
<script src="edirom-audio-player/edirom-audio-player.js"></script>
<script src="edirom-image-viewer/edirom-image-viewer.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
//Getting the web component name
const webComponentName = document.querySelector('#web-component-container').firstElementChild.tagName.toLowerCase();
//Resizing the web component
const container = document.querySelector('#web-component-container');
const wc = document.getElementsByTagName(webComponentName)[0];
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const {width, height} = entry.contentRect;
wc.setAttribute('width', width+'px');
wc.setAttribute('height', height+'px');
}
});
resizeObserver.observe(container);
// get HTML targets
const textarea = document.querySelector('#wc-custom-event-listeners textarea');
const wcAttributeSetters = document.querySelector('#wc-attribute-setters');
// listen to event changes and provide setters for attributes of web component
wc.getAttributeNames().forEach(attribute => {
// Adding event listeners for changes in the web component
wc.addEventListener('communicate-'+attribute+'-update', (e) => {
textarea.textContent += 'Event "communicate-'+attribute+'-update"; '+attribute+'="'+e.detail[attribute]+'"\n';
textarea.scrollTop = textarea.scrollHeight;
});
// Creating setters for the web component attribute values
const setter = document.createElement('div');
setter.setAttribute('class', 'setter');
setter.innerHTML = `<span>${attribute}: </span>`;
setter.innerHTML += `<form action="javascript:document.querySelector('${webComponentName}').setAttribute('${attribute}', document.getElementById('input-${attribute}').value);"><input type="text" name="${attribute}" id="input-${attribute}" value="${wc.getAttribute(attribute)}"><input type="submit" value="Set"></form>`;
wcAttributeSetters.appendChild(setter);
});
});
class windows {
static add(windowsJSON) {
document.querySelector('edirom-windows').setAttribute('add', JSON.stringify(windowsJSON));
}
static set(windowsJSON) {
document.querySelector('edirom-windows').setAttribute('set', JSON.stringify(windowsJSON));
}
}
const audioPlayerWindowJSON_1 = [{"html":"<edirom-audio-player tracks=\'[{"title": "To be free", "composer": "Composer 1", "work": "Own work", "src": "https://upload.wikimedia.org/wikipedia/commons/1/12/03may2020-tobefree.mp3", "type": "audio/mpeg"}]\' track=\'0\' state=\'pause\' start=\'0.0\' end=\'\' playbackrate=\'1.0\' playbackmode=\'repeat\' displaymode=\'controls-lg\'></edirom-audio-player>"}];
const audioPlayerWindowJSON_2 = [{"html":"<edirom-audio-player tracks='[ {"title": "Mercy", "composer": "Vernon Maytone", "work": "Brotheration Reggae 2015", "src": "https://pixabay.com/de/music/download/id-140277.mp3", "type": "audio/mpeg"}, {"title": "Walk Good", "composer": "Daddy Roy", "work": "Brotheration Records 2016", "src": "https://pixabay.com/de/music/download/id-140285.mp3", "type": "audio/mpeg"}, {"title": "To be free", "composer": "Composer 1", "work": "Own work", "src": "https://upload.wikimedia.org/wikipedia/commons/1/12/03may2020-tobefree.mp3", "type": "audio/mpeg"}, {"title": "A Tale of Distant Lands", "composer": "Robert Schumann", "work": "Own work", "src": "https://upload.wikimedia.org/wikipedia/commons/e/ec/A_Tale_of_Distant_Lands.mp3", "type": "audio/mpeg"}, {"title": "Funky Souls", "composer": "Amarià", "work": "Soundcloud: Funky Souls (2019)", "src": "https://upload.wikimedia.org/wikipedia/commons/2/2e/Amari%C3%A0_-_Funky_Souls_%282019%29.mp3", "type": "audio/mpeg"}]' height='500px' width='500px' state='pause' track='0' start='0.0' end='' playbackrate='1.0' playbackmode='repeat' displaymode='controls-lg'></edirom-audio-player>"}];
const imageViewerWindowJSON_1 = [{"html":"<edirom-openseadragon clicktozoom='false' shownavigator='' showzoomcontrol='' showhomecontrol='' showfullpagecontrol='' showsequencecontrol='' preserveviewport='true' visibilityratio='1' minzoomlevel='1' maxzoomlevel='1' shownavigationcontrol='false' sequencemode='true' tilesources='["https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000001.jp2/info.json", "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000002.jp2/info.json", "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000003.jp2/info.json", "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000004.jp2/info.json", "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000005.jp2/info.json", "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000006.jp2/info.json", "https://libimages1.princeton.edu/loris/pudl0001%2F4609321%2Fs42%2F00000007.jp2/info.json"]'></edirom-openseadragon>"}];
</script>
<style>
h2 {
font-size: 1em;
}
#wc-attribute-setters, #wc-custom-event-listeners {
max-width: 90%;
}
.setter {
display: inline-block;
margin: 0 20px 20px 0;
}
.setter span {
font-size: 0.9em;
font-family: Arial;
color: #333;
}
form {
display: inline-block;
}
</style>
</head>
<body>
<h2>Web Component Event Listeners</h2>
<div id="wc-custom-event-listeners">
<textarea rows="4" cols="50" readonly></textarea>
</div>
<h2>Web Component Attribute Setters</h2>
<div id="wc-attribute-setters"></div>
<h2>Sample Actions</h2>
<button onclick="document.querySelector('edirom-windows').setAttribute('add', '[{"title": "New Window", "html": "New window content"}]')">Add simple window</button>
<button onclick="document.querySelector('edirom-windows').setAttribute('add', '[{"title": "Window 1", "html": "First new window"}, {"title": "Window 2", "html": "Second new window"}]')">Add two windows</button>
<button onclick="document.querySelector('edirom-windows').setAttribute('add', '[{"title": "Klarinettenquintett", "url": "https://klarinettenquintett.weber-gesamtausgabe.de/index.html"}]')">Add window with URL</button>
<button onclick="document.querySelector('edirom-windows').setAttribute('add', '[{"url": "https://www.reger-werkausgabe.de/"}, {"url": "https://edition.freischuetz-digital.de/", "x": "200px", "y": "100px"}, {"url": "https://klarinettenquintett.weber-gesamtausgabe.de/index.html", "x": "400px", "y": "200px"}]')">Add three Ediroms</button>
<button onclick="windows.add(audioPlayerWindowJSON_1)">Add edirom audio player (one track)</button>
<button onclick="windows.add(audioPlayerWindowJSON_2)">Add edirom audio player (five tracks)</button>
<button onclick="windows.add(imageViewerWindowJSON_1)">Add edirom image viewer (openseadragon)</button>
<button onclick="windows.set([])">Reset</button>
<hr/>
<div id="web-component-container">
<!-- CUSTOM: Insert custom element for the web component here -->
<!-- <web-component-custom-element attribute1="value1" attribute2="value2"></web-component-custom-element> -->
<edirom-windows set="" add="" remove="" update="" arrange=""></edirom-windows>
</div>
</body>
</html>