refactoring + hover on close

master
Tancre 3 years ago
parent a83c4019e7
commit a371aba532

@ -23,8 +23,7 @@
<div id="boxes"> <div id="boxes">
<div id="program" class="ui-widget-content draggable resizable" style="max-width: 250px; height: 1400px;">
<div class="ui-widget-content draggable resizable closable" style="max-width: 250px; height: 1400px;" id="program">
<h1>10 Sept 21</h1> <h1>10 Sept 21</h1>
<li>12:00-17:00:</li> <li>12:00-17:00:</li>
<ul>XPUB Bookshop</ul> <ul>XPUB Bookshop</ul>
@ -38,6 +37,7 @@
<ul>Lingo Bingo (offline)</ul> <ul>Lingo Bingo (offline)</ul>
<ul>Civil Entertainment Sirens® </ul> <ul>Civil Entertainment Sirens® </ul>
<li>Oh, look at the wifi: words fly around!</li> <li>Oh, look at the wifi: words fly around!</li>
</div> </div>
</div> </div>

@ -10,112 +10,125 @@
// Open window icon (on background 'desktop') // Open window icon (on background 'desktop')
// Close window button (on 'window' itself) // Close window button (on 'window' itself)
$(document).ready(function(){ let corpi = {
0: {
id:'xpub',
glyph: '🖨️',
let corpi = { title: 'var xpub',
0: { content: 'window.open() at PNF will be an interface for our XPUB program to speak/communicate to/with the public inside and outside of the physical space. We adjust, using windows in the street and in the browser in order to be able to communicate. This frames it as a "discursive/dialogical interface" through which attitudes, perspectives, backgrounds and situations are explored together in a program consisting of: presentations, workshops, publication launches, conversations and performances; both online and offline.'
id:'xpub', },
glyph: '🖨️',
title: 'var xpub', 1: {
content: 'window.open() at PNF will be an interface for our XPUB program to speak/communicate to/with the public inside and outside of the physical space. We adjust, using windows in the street and in the browser in order to be able to communicate. This frames it as a "discursive/dialogical interface" through which attitudes, perspectives, backgrounds and situations are explored together in a program consisting of: presentations, workshops, publication launches, conversations and performances; both online and offline.' id:'interface',
}, glyph: '📀',
title: 'const interface',
1: { content: 'A window is a framing device, an interface through which we can look inside, to spaces where small groups meet, and outside to the world beyond. Screens and windows delineate boundaries between public and private. Working with(in) a limitation, a frame(work), a situation, a context means adjusting our work to the state of affairs; it changes our way of thinking/framing it. We adjust, in order to be able to communicate within a temporary window of time, reframing our intentions and seeking opportunities to share some real-time realness.'
id:'interface', },
glyph: '📀',
title: 'const interface', 2: {
content: 'A window is a framing device, an interface through which we can look inside, to spaces where small groups meet, and outside to the world beyond. Screens and windows delineate boundaries between public and private. Working with(in) a limitation, a frame(work), a situation, a context means adjusting our work to the state of affairs; it changes our way of thinking/framing it. We adjust, in order to be able to communicate within a temporary window of time, reframing our intentions and seeking opportunities to share some real-time realness.' id:'greetings',
}, glyph: '📌',
title: 'let greetings',
content: 'We are pleased to invite you to window.open(), a day-long festival, held by students and alumni of the Master of Experimental Publishing (XPUB) at Page Not Found.'
},
}
2: { $(document).ready(function(){
id:'greetings',
glyph: '📌',
title: 'let greetings',
content: 'We are pleased to invite you to window.open(), a day-long festival, held by students and alumni of the Master of Experimental Publishing (XPUB) at Page Not Found.'
},
}
// generate divs // generate divs
Object.values(corpi).forEach(corpus => { Object.values(corpi).forEach(corpus => {
$('#boxes' ).append(`<div class="ui-widget-content draggable resizable" id="${corpus['id']}"><h1>${corpus['title']}</h1><p>${corpus['content']}</p><button class="closable">X</button></div>`) $('#boxes' ).append(`
$("#icons").append(`<button onclick="$(${corpus['id']}).fadeIn()" class="icon">${corpus["glyph"]}</button>`) <div class="ui-widget-content draggable resizable" id="${corpus['id']}">
<h1>${corpus['title']}</h1>
<p>${corpus['content']}</p>
<button class="closable">X</button>
</div>
`)
$('#icons').append(`<button onclick="$(${corpus['id']}).fadeIn()" class="icon">${corpus["glyph"]}</button>`)
}); });
//size window const dragResize = new DragResizeClose();
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
var widthDrag = (getWidth())/2;
function getHeight() { });
return Math.max( class DragResizeClose {
document.body.scrollHeight, constructor() {
document.documentElement.scrollHeight, this.zIndex = 3;
document.body.offsetHeight, this.drag();
document.documentElement.offsetHeight, this.setDraggables();
document.documentElement.clientHeight this.setZindex();
); this.handleCursor();
this.closeBtn();
} }
var heightDrag = (getHeight())/2; drag() {
$('.draggable').draggable({ containment: "window" }, { // Setup dragging and containment
start: (event, ui) => $(this).css("z-index", this.zIndex++) // Initialize z-index
// random });
function getRndInteger(min, max) { }
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
// DRAG and Z-INDEX priorities handler
var a = 3;
$( '.draggable' ).draggable({ containment: "window" },{ // Setup dragging and containment
start: function(event, ui) { $(this).css("z-index", a++); } // Initialize z-index for handelr
});
$('#dragZone div').click(function() { // Setup z-index handler
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
// CURSOR MOUSE DOWN
$('.draggable').on("mousedown", function(){
$('.draggable').css('cursor', 'grabbing');
}).on("mouseup mouseleave", function(){
$('.draggable').css('cursor', 'grab');
});
// RESIZE with aspect ratio
$( ".resizable" ).resizable({ aspectRatio:true, maxHeight:900, minHeight:200 });
$( ".resizableOriz" ).resizable({ aspectRatio:true, maxHeight:500, minHeight:200 });
// settings draggables
$( ".draggable" ).each(function() {
let rw = getRndInteger(widthDrag-500,widthDrag) setDraggables() {
let rh = getRndInteger(heightDrag-200, heightDrag) //size window
const getWidth = () => {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
//let widthDrag = (getWidth())/2;
// function getHeight() {
// return Math.max(
// document.body.scrollHeight,
// document.documentElement.scrollHeight,
// document.body.offsetHeight,
// document.documentElement.offsetHeight,
// document.documentElement.clientHeight
// );
// }
// let heightDrag = (getHeight())/2;
const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;
$( ".draggable" ).each(function() {
let rw = getRndInteger((getWidth())/2-500,(getWidth())/2)
//let rh = getRndInteger(heightDrag-200, heightDrag)
$( this ).css("width",rw);
$( this ).css("height", 'auto');
});
}
$( this ).css("width",rw); setZindex() {
$( this ).css("height",rh) $('#dragZone div').click(() => { // Setup z-index handler
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", this.zIndex++);
});
}
}); handleCursor() {
$('.draggable')
.on("mousedown", () => $('.draggable').css('cursor', 'grabbing'))
.on("mouseup mouseleave", () => $('.draggable').css('cursor', 'grab'));
}
// close window resize() {
$(".closable").click(function() { $(".resizable").resizable({ aspectRatio: true, maxHeight: 900, minHeight: 10 });
$( this ).parent().fadeOut(); $(".resizableOriz").resizable({ aspectRatio: true, maxHeight: 500, minHeight: 10 });
}); }
closeBtn() {
$(".closable").click(function() {
$(this).parent().fadeOut();
})
.hover(
function() { $( this ).addClass( "hover" ); },
function() { $( this ).removeClass( "hover");}
);
}
}
});

@ -3,58 +3,43 @@
src: url(../fonts/AC1-SemiLightDots.ttf); src: url(../fonts/AC1-SemiLightDots.ttf);
} }
body {
html{
}
body{
background-color: blue; background-color: blue;
color: white; color: white;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
h1{ h1 {
font-family: points; font-family: points;
font-size: 60px; font-size: 60px;
color: white; color: white;
} }
button{ button {
user-select: none; user-select: none;
display: inline-block; display: inline-block;
padding: 3px 1em; padding: 3px 1em;
color: currentColor; color: currentColor;
font-weight: var(--regular); font-weight: var(--bold);
text-decoration: none; text-decoration: none;
margin-bottom: 4px; margin-bottom: 4px;
background-color: rgba(0,0,0,0); background-color: rgba(0, 0, 0, 0);
} }
.draggable { .draggable {
position: absolute; position: absolute;
z-index: 2;
cursor: grab;
border: 2px white solid; border: 2px white solid;
background: black; background: black;
} }
.draggable p{ .draggable p,
color: white; .draggable li,
} .draggable ul {
.draggable li{
color: white; color: white;
list-style: none; list-style: none;
/* line-height: 7px; */
} }
.draggable ul{ .draggable li::before {
color: white;
}
.draggable li::before{
content: "💾 "; content: "💾 ";
} }
@ -64,30 +49,33 @@ button{
padding: 0.5em 1.5em; padding: 0.5em 1.5em;
} }
.resizable p{ .resizable p {
font-size: 18px; font-size: 18px;
} }
.resizable h1{ .resizable h1 {
font-size: 35px; font-size: 35px;
} }
.closable{ .closable {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
cursor: pointer;
width: 38px;
} }
.closable button{ /*
width: 30px; .closable button {
width: 35px;
height: 30px; height: 30px;
} */
.hover {
font-weight: bolder;
} }
.icon {
.icon{
width: 70px; width: 70px;
height: 70px; height: 70px;
border: white solid 2px; border: white solid 2px;
@ -95,5 +83,3 @@ button{
z-index: 1; z-index: 1;
/* font-size: 50px ; */ /* font-size: 50px ; */
} }

Loading…
Cancel
Save