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

127
scripts/App.js
Unescape Escape View File

@ -10,10 +10,6 @@
// Open window icon (on background 'desktop')
// Close window button (on 'window' itself)
$(document).ready(function(){
let corpi = {
0: {
id:'xpub',
@ -35,18 +31,44 @@ $(document).ready(function(){
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
$(document).ready(function(){
// generate divs
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>`)
$("#icons").append(`<button onclick="$(${corpus['id']}).fadeIn()" class="icon">${corpus["glyph"]}</button>`)
$('#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>
`)
$('#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
function getWidth() {
const getWidth = () => {
return Math.max(
document.body.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
// );
// }
// let heightDrag = (getHeight())/2;
// random
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
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
$( ".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');
});
}
$('#dragZone div').click(function() { // Setup z-index handler
setZindex() {
$('#dragZone div').click(() => { // 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');
$(this).css("z-index", this.zIndex++);
});
}
// 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)
let rh = getRndInteger(heightDrag-200, heightDrag)
$( this ).css("width",rw);
$( this ).css("height",rh)
handleCursor() {
$('.draggable')
.on("mousedown", () => $('.draggable').css('cursor', 'grabbing'))
.on("mouseup mouseleave", () => $('.draggable').css('cursor', 'grab'));
}
});
resize() {
$(".resizable").resizable({ aspectRatio: true, maxHeight: 900, minHeight: 10 });
$(".resizableOriz").resizable({ aspectRatio: true, maxHeight: 500, minHeight: 10 });
}
// close window
closeBtn() {
$(".closable").click(function() {
$(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);
}
html{
}
body {
background-color: blue;
color: white;
@ -26,7 +20,7 @@ button{
display: inline-block;
padding: 3px 1em;
color: currentColor;
font-weight: var(--regular);
font-weight: var(--bold);
text-decoration: none;
margin-bottom: 4px;
background-color: rgba(0, 0, 0, 0);
@ -34,24 +28,15 @@ button{
.draggable {
position: absolute;
z-index: 2;
cursor: grab;
border: 2px white solid;
background: black;
}
.draggable p{
color: white;
}
.draggable li{
color: white;
list-style: none;
/* line-height: 7px; */
}
.draggable p,
.draggable li,
.draggable ul {
color: white;
list-style: none;
}
.draggable li::before {
@ -76,17 +61,20 @@ button{
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 38px;
}
/*
.closable button {
width: 30px;
width: 35px;
height: 30px;
} */
.hover {
font-weight: bolder;
}
.icon {
width: 70px;
height: 70px;
@ -95,5 +83,3 @@ button{
z-index: 1;
/* font-size: 50px ; */
}

Write Preview
Loading…
Cancel
Save