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

refactoring + hover on close

Browse Source
master
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>

127
scripts/App.js
Unescape Escape View File

@ -10,10 +10,6 @@
// 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',
@ -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.'
}, },
} }
// generate divs $(document).ready(function(){
// 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() { // function getHeight() {
return Math.max( // return Math.max(
document.body.scrollHeight, // document.body.scrollHeight,
document.documentElement.scrollHeight, // document.documentElement.scrollHeight,
document.body.offsetHeight, // document.body.offsetHeight,
document.documentElement.offsetHeight, // document.documentElement.offsetHeight,
document.documentElement.clientHeight // document.documentElement.clientHeight
); // );
} // }
var heightDrag = (getHeight())/2;
// let heightDrag = (getHeight())/2;
// random const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;
function getRndInteger(min, max) {
return 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");}
);
}
}
});

36
styles/style.css
Unescape Escape View File

@ -3,12 +3,6 @@
src: url(../fonts/AC1-SemiLightDots.ttf); src: url(../fonts/AC1-SemiLightDots.ttf);
} }
html{
}
body { body {
background-color: blue; background-color: blue;
color: white; color: white;
@ -26,7 +20,7 @@ button{
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);
@ -34,24 +28,15 @@ button{
.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 li{
color: white;
list-style: none;
/* line-height: 7px; */
}
.draggable ul { .draggable ul {
color: white; color: white;
list-style: none;
} }
.draggable li::before { .draggable li::before {
@ -76,17 +61,20 @@ button{
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
cursor: pointer;
width: 38px;
} }
/*
.closable button { .closable button {
width: 30px; width: 35px;
height: 30px; height: 30px;
} */
.hover {
font-weight: bolder;
} }
.icon { .icon {
width: 70px; width: 70px;
height: 70px; height: 70px;
@ -95,5 +83,3 @@ button{
z-index: 1; z-index: 1;
/* font-size: 50px ; */ /* font-size: 50px ; */
} }

Write Preview
Loading…
Cancel
Save