poni
/
PNF
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

refactoring + hover on close

Browse Source
Tancre 3 years ago
parent a83c4019e7
commit a371aba532
3 changed files with 131 additions and 132 deletions
Show Stats Download Patch File Download Diff File

4
index.html
Unescape Escape View File

@ -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>

131
scripts/App.js
Unescape Escape View File

@ -10,11 +10,7 @@
// 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 = {
let corpi = {
0: { 0: {
id:'xpub', id:'xpub',
glyph: '🖨️', glyph: '🖨️',
@ -35,18 +31,44 @@ $(document).ready(function(){
title: 'let greetings', 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.' 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.'
}, },
}
} $(document).ready(function(){
// 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>`)
});
const dragResize = new DragResizeClose();
});
class DragResizeClose {
constructor() {
this.zIndex = 3;
this.drag();
this.setDraggables();
this.setZindex();
this.handleCursor();
this.closeBtn();
}
drag() {
$('.draggable').draggable({ containment: "window" }, { // Setup dragging and containment
start: (event, ui) => $(this).css("z-index", this.zIndex++) // Initialize z-index
}); });
}
setDraggables() {
//size window //size window
function getWidth() { const getWidth = () => {
return Math.max( return Math.max(
document.body.scrollWidth, document.body.scrollWidth,
document.documentElement.scrollWidth, document.documentElement.scrollWidth,
@ -56,66 +78,57 @@ $(document).ready(function(){
); );
} }
var widthDrag = (getWidth())/2; //let widthDrag = (getWidth())/2;
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
var heightDrag = (getHeight())/2;
// function getHeight() {
// return Math.max(
// document.body.scrollHeight,
// document.documentElement.scrollHeight,
// document.body.offsetHeight,
// document.documentElement.offsetHeight,
// document.documentElement.clientHeight
// );
// }
// random // let heightDrag = (getHeight())/2;
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;
// DRAG and Z-INDEX priorities handler $( ".draggable" ).each(function() {
var a = 3; let rw = getRndInteger((getWidth())/2-500,(getWidth())/2)
$( '.draggable' ).draggable({ containment: "window" },{ // Setup dragging and containment //let rh = getRndInteger(heightDrag-200, heightDrag)
start: function(event, ui) { $(this).css("z-index", a++); } // Initialize z-index for handelr $( this ).css("width",rw);
$( this ).css("height", 'auto');
}); });
}
$('#dragZone div').click(function() { // Setup z-index handler setZindex() {
$('#dragZone div').click(() => { // Setup z-index handler
$(this).addClass('top').removeClass('bottom'); $(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom'); $(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++); $(this).css("z-index", this.zIndex++);
});
// CURSOR MOUSE DOWN
$('.draggable').on("mousedown", function(){
$('.draggable').css('cursor', 'grabbing');
}).on("mouseup mouseleave", function(){
$('.draggable').css('cursor', 'grab');
}); });
}
// RESIZE with aspect ratio handleCursor() {
$( ".resizable" ).resizable({ aspectRatio:true, maxHeight:900, minHeight:200 }); $('.draggable')
$( ".resizableOriz" ).resizable({ aspectRatio:true, maxHeight:500, minHeight:200 }); .on("mousedown", () => $('.draggable').css('cursor', 'grabbing'))
.on("mouseup mouseleave", () => $('.draggable').css('cursor', 'grab'));
}
// settings draggables
$( ".draggable" ).each(function() {
let rw = getRndInteger(widthDrag-500,widthDrag)
let rh = getRndInteger(heightDrag-200, heightDrag)
$( this ).css("width",rw);
$( this ).css("height",rh)
}); resize() {
$(".resizable").resizable({ aspectRatio: true, maxHeight: 900, minHeight: 10 });
$(".resizableOriz").resizable({ aspectRatio: true, maxHeight: 500, minHeight: 10 });
}
// close window closeBtn() {
$(".closable").click(function() { $(".closable").click(function() {
$( this ).parent().fadeOut(); $(this).parent().fadeOut();
}); })
.hover(
function() { $( this ).addClass( "hover" ); },
function() { $( this ).removeClass( "hover");}
);
}
}
});

56
styles/style.css
Unescape Escape View File

@ -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 ; */
} }

Write Preview
Loading…
Cancel
Save