You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
/////////////////////////////////////////////////////
|
|
|
|
|
|
|
|
// TODO
|
|
|
|
// glyphs
|
|
|
|
// what buttons where
|
|
|
|
// colophone
|
|
|
|
// a bit more interface
|
|
|
|
|
|
|
|
// DONE
|
|
|
|
// Open window icon (on background 'desktop')
|
|
|
|
// Close window button (on 'window' itself)
|
|
|
|
// random position
|
|
|
|
|
|
|
|
//////////////////////////////////////////////////////
|
|
|
|
|
|
|
|
let zIndex = 3;
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
|
|
// Generate divs
|
|
|
|
Object.values(corpi).forEach(corpus => {
|
|
|
|
|
|
|
|
$('#dragZone' ).append(`
|
|
|
|
<div id="${corpus['id']}" class="corpi ui-widget-content draggable" >
|
|
|
|
<h1>${corpus["glyph"]} ${corpus['title']}</h1>
|
|
|
|
<p>${corpus['content']}</p>
|
|
|
|
<button class="closable">X</button>
|
|
|
|
</div>
|
|
|
|
`)
|
|
|
|
$('#icons').append(`
|
|
|
|
<div class="iconContainer">
|
|
|
|
<a href="#${corpus['id']}" class="innerLink">
|
|
|
|
<p><button class="icon" onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" >${corpus["glyph"]}</button></p>
|
|
|
|
<span class="textIcon">${corpus['title']}</span>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
`)
|
|
|
|
});
|
|
|
|
|
|
|
|
// Start mouse UI
|
|
|
|
const dragResize = new DragResizeClose(zIndex);
|
|
|
|
$('#greetings').fadeIn()
|
|
|
|
});
|
|
|
|
|
|
|
|
|