grgr
/
emergent-opera
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

contribution structure

Browse Source
master
km0 3 years ago
parent b8a990686d
commit 3edccdc29c
4 changed files with 225 additions and 41 deletions
Show Stats Download Patch File Download Diff File

29
atlas-map.svg
Unescape Escape View File

@ -0,0 +1,29 @@
<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="atlas-map">
<circle id="design" cx="500" cy="500" r="499.5" stroke="black"/>
<g id="act-I">
<circle id="stream_3.mp3" cx="160.5" cy="132.5" r="17.5" fill="#FF6347"/>
<circle id="stream_2.mp3" cx="153.5" cy="229.5" r="17.5" fill="#FF6347"/>
<circle id="stream_1.mp3" cx="239.5" cy="280.5" r="17.5" fill="#FF6347"/>
<circle id="stream_0.mp3" cx="152.5" cy="378.5" r="17.5" fill="#FF6347"/>
</g>
<g id="entr&#39;acte_1">
<circle id="sample4_Entracte_1.mp3" cx="342.5" cy="413.5" r="17.5" fill="#1E90FF"/>
<circle id="sample3_Entracte_1.mp3" cx="673.5" cy="491.5" r="17.5" fill="#1E90FF"/>
<circle id="sample2_Entracte_1.mp3" cx="517.5" cy="588.5" r="17.5" fill="#1E90FF"/>
<circle id="sample1_Entracte_1.mp3" cx="102.5" cy="315.5" r="17.5" fill="#1E90FF"/>
</g>
<g id="grande-finale">
<circle id="l.wav" cx="638.5" cy="623.5" r="17.5" fill="#00FF7F"/>
<circle id="i.wav" r="17.5" transform="matrix(-1 0 0 1 240.5 376.5)" fill="#00FF7F"/>
<circle id="h.wav" cx="467.5" cy="526.5" r="17.5" fill="#00FF7F"/>
<circle id="g.wav" r="17.5" transform="matrix(-1 0 0 1 411.5 279.5)" fill="#00FF7F"/>
<circle id="f.wav" cx="536.5" cy="526.5" r="17.5" fill="#00FF7F"/>
<circle id="e.wav" r="17.5" transform="matrix(-1 0 0 1 342.5 279.5)" fill="#00FF7F"/>
<circle id="d.wav" cx="536.5" cy="429.5" r="17.5" fill="#00FF7F"/>
<circle id="c.wav" r="17.5" transform="matrix(-1 0 0 1 342.5 182.5)" fill="#00FF7F"/>
<circle id="b.wav" cx="620.5" cy="396.5" r="17.5" fill="#00FF7F"/>
<circle id="a.wav" r="17.5" transform="matrix(-1 0 0 1 258.5 149.5)" fill="#00FF7F"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

33
contents.js
Unescape Escape View File

@ -1,20 +1,17 @@
const reference = document.getElementById("reference");
const contributionsList = document.getElementById("contributions");
const pagedjs = document.createElement('script')
pagedjs.src = 'https://unpkg.com/pagedjs/dist/paged.polyfill.js'
window.addEventListener('load',()=>{
fetchContents()
document.getElementsByTagName('head')[0].appendChild(pagedjs)
})
const pagedjs = document.createElement("script");
pagedjs.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
window.addEventListener("load", () => {
fetchContents();
atlasLink();
// document.getElementsByTagName("head")[0].appendChild(pagedjs);
});
function fetchContents(){
fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
function fetchContents() {
fetch("https://hub.xpub.nl/soupboat/atlas-api/contributions")
.then((response) => response.json())
.then((data) => populateContributions(data));
}
@ -36,4 +33,14 @@ function createSection(contribution) {
return section;
}
function atlasLink() {
let atlas = document.getElementById("atlas-map");
let groups = atlas.querySelectorAll("g");
for (const group of groups) {
let link = document.createElementNS("http://www.w3.org/2000/svg", "a");
link.setAttributeNS("http://www.w3.org/2000/svg", "href", "#" + group.id);
link.innerHTML = group.innerHTML;
group.innerHTML = "";
group.appendChild(link);
}
}

155
index.html
Unescape Escape View File

@ -4,18 +4,125 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="contents.js" defer></script>
<!-- <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js" defer ></script>-->
<link href="interface.css" rel="stylesheet" type="text/css" />
<script src="contents.js" defer></script>
<link href="interface.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="print.css"/>
<link rel="stylesheet" href="print.css" />
<title>Emergent Opera</title>
</head>
<body>
<div class="container">
<div class="atlas">
the atlas here
<svg
width="1000"
height="1000"
viewBox="0 0 1000 1000"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="atlas-map">
<circle id="design" cx="500" cy="500" r="499.5" stroke="black" />
<g id="act-I">
<circle
id="stream_3.mp3"
cx="160.5"
cy="132.5"
r="17.5"
fill="#FF6347"
/>
<circle
id="stream_2.mp3"
cx="153.5"
cy="229.5"
r="17.5"
fill="#FF6347"
/>
<circle
id="stream_1.mp3"
cx="239.5"
cy="280.5"
r="17.5"
fill="#FF6347"
/>
<circle
id="stream_0.mp3"
cx="152.5"
cy="378.5"
r="17.5"
fill="#FF6347"
/>
</g>
<g id="entr&#39;acte_1">
<circle
id="sample4_Entracte_1.mp3"
cx="342.5"
cy="413.5"
r="17.5"
fill="#1E90FF"
/>
<circle
id="sample3_Entracte_1.mp3"
cx="673.5"
cy="491.5"
r="17.5"
fill="#1E90FF"
/>
<circle
id="sample2_Entracte_1.mp3"
cx="517.5"
cy="588.5"
r="17.5"
fill="#1E90FF"
/>
<circle
id="sample1_Entracte_1.mp3"
cx="102.5"
cy="315.5"
r="17.5"
fill="#1E90FF"
/>
</g>
<g id="grande-finale">
<circle id="l.wav" cx="638.5" cy="623.5" r="17.5" fill="#00FF7F" />
<circle
id="i.wav"
r="17.5"
transform="matrix(-1 0 0 1 240.5 376.5)"
fill="#00FF7F"
/>
<circle id="h.wav" cx="467.5" cy="526.5" r="17.5" fill="#00FF7F" />
<circle
id="g.wav"
r="17.5"
transform="matrix(-1 0 0 1 411.5 279.5)"
fill="#00FF7F"
/>
<circle id="f.wav" cx="536.5" cy="526.5" r="17.5" fill="#00FF7F" />
<circle
id="e.wav"
r="17.5"
transform="matrix(-1 0 0 1 342.5 279.5)"
fill="#00FF7F"
/>
<circle id="d.wav" cx="536.5" cy="429.5" r="17.5" fill="#00FF7F" />
<circle
id="c.wav"
r="17.5"
transform="matrix(-1 0 0 1 342.5 182.5)"
fill="#00FF7F"
/>
<circle id="b.wav" cx="620.5" cy="396.5" r="17.5" fill="#00FF7F" />
<circle
id="a.wav"
r="17.5"
transform="matrix(-1 0 0 1 258.5 149.5)"
fill="#00FF7F"
/>
</g>
</g>
</svg>
<div class="info">
<div class="title">Title</div>
<div class="filename">Filename.mp3</div>
@ -45,23 +152,23 @@
</dl>
</header>
<!-- <section class="vocabulary"></section> -->
<section class="index">
<h2>
Index
</h2>
</section>
<div class="contributions" id="contributions"></div>
<!-- this is a reference for the js script, hidden by default with css -->
<section class="contribution" id="reference">
<div class="moment">overture</div>
<h2 class="title">Overture Atlas</h2>
<div class="author"></div>
<div class="description">description</div>
<div class="content"></div>
</section>
</div>
</div>
<section class="index">
<h2>Index</h2>
</section>
<div class="contributions" id="contributions"></div>
<!-- this is a reference for the js script, hidden by default with css -->
<section class="contribution" id="reference">
<div class="meta">
<span class="moment"></span> ~
<span class="author"></span>
</div>
<h2 class="title">Overture Atlas</h2>
<div class="description">description</div>
<div class="content"></div>
</section>
</div>
</div>
</body>
</html>

49
style.css
Unescape Escape View File

@ -9,9 +9,6 @@
}
@media screen {
body, html{
margin: 0;
@ -60,7 +57,10 @@ body, html{
border-bottom: solid 1px var(--wireframe);
}
.atlas svg {
width: 100%;
}
.moment{
text-transform: uppercase;
@ -113,4 +113,45 @@ dd {
}
}
.contribution {
padding: 16px;
border-bottom: 1px solid currentColor;
}
.contribution .title {
margin: 0;
font-size: 36px;
}
.contribution .meta {
font-size: 0.7em;
font-weight: bold;
text-transform: uppercase;
}
.contribution .description {
font-style: italic;
padding-bottom: 32px;
}
.contribution .content h3,
.contribution .content h2 {
font-size: 1rem;
}
@namespace svg url(http://www.w3.org/2000/svg);
/* Necessary to select only SVG <a> elements, and not also HTML's.
See warning below */
svg|a:link,
svg|a:visited {
cursor: pointer;
}
svg|g {
pointer-events: all;
}

Write Preview
Loading…
Cancel
Save