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

a bit of order + icons with zindex handler

Browse Source
master
Tancre 3 years ago
parent 72db5bef40
commit 64f3ccf09e
5 changed files with 122 additions and 124 deletions
Show Stats Download Patch File Download Diff File

10
index.html
Unescape Escape View File

@ -9,6 +9,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./scripts/jquery-3.5.0.min.js"></script>
<script src="./scripts/jquery-ui/jquery-ui.min.js"></script>
<script src="./scripts/Windows.js"></script>
<script src="./scripts/DragResizeClose.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="./styles/style.css">
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
@ -18,8 +20,8 @@
<!-- BASE -->
<!-- <div class="ui-widget-content draggable resizable closable" id=" "><h1>var xpub</h1><p></p></div> -->
<h1>windows.open(Welcome)</h1>
<div id="icons"></div>
<div id="dragZone" class="dragzone">
@ -37,15 +39,11 @@
<ul>Lingo Bingo (offline)</ul>
<ul>Civil Entertainment Sirens® </ul>
<li>Oh, look at the wifi: words fly around!</li>
<br>
</div>
</div>
<div id="icons"></div>
<script src="./scripts/App.js"></script>
</body>
</html>

122
scripts/App.js
Unescape Escape View File

@ -1,3 +1,5 @@
/////////////////////////////////////////////////////
// TODO
// glyphs
// what buttons where
@ -9,28 +11,9 @@
// Close window button (on 'window' itself)
// random position
let corpi = {
0: {
id:'xpub',
glyph: '🖨️',
title: 'var xpub',
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.'
},
1: {
id:'interface',
glyph: '📀',
title: 'const interface',
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.'
},
//////////////////////////////////////////////////////
2: {
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.'
},
}
let zIndex = 3;
$(document).ready(function(){
@ -44,103 +27,10 @@ $(document).ready(function(){
<button class="closable">X</button>
</div>
`)
$('#icons').append(`<button onclick="$(${corpus['id']}).fadeIn()" class="icon">${corpus["glyph"]}</button>`)
$('#icons').append(`<button onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" class="icon">${corpus["glyph"]}</button>`)
});
// Start mouse UI
const dragResize = new DragResizeClose();
const dragResize = new DragResizeClose(zIndex);
});
class DragResizeClose {
constructor() {
this.drag();
this.setDraggables();
this.setZindex();
this.handleCursor();
this.closeBtn();
}
drag() {
$('.draggable').draggable({ containment: "window" });
}
setDraggables() {
//size window
const getWidth = () => {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
$( ".draggable" ).each(function() {
let rw = getRndInteger((getWidth())/2-500,(getWidth())/2)
//let rh = getRndInteger(heightDrag-200, heightDrag)
//setDimension
$(this).css("width",rw);
$(this).css("height", 'auto');
//setPosition
let w = window.innerWidth;
let h = window.innerHeight;
if (this.id != 'program'){
let wBox = $(this).css('width');
let hBox = $(this).css('height');
let rX = randomCorrectedHeight(h, hBox);
let rY = randomCorrectedWidth(w, wBox);
$(this).css("top", rX);
$(this).css("left", rY);
} else {
$(this).css("top", '20px');
$(this).css("right", '20px');
}
});
}
setZindex() {
let zIndex = 3;
$('#dragZone div').mousedown(function() { // Setup z-index handler
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", zIndex++);
});
}
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 });
}
closeBtn() {
$(".closable").click(function() {
$(this).parent().fadeOut();
})
.hover(
function() { $( this ).addClass( "hover" ); },
function() { $( this ).removeClass( "hover");}
);
}
}
const randomCorrectedWidth = (sizeWindow, sizeBox) => {
var corrected = sizeWindow - parseInt(sizeBox);
return Math.floor(Math.random() * corrected)
}
const randomCorrectedHeight = (sizeWindow, sizeBox) => {
var corrected = sizeWindow - parseInt(sizeBox);
return getRndInteger(105, corrected)
}
const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;

83
scripts/DragResizeClose.js
Unescape Escape View File

@ -0,0 +1,83 @@
class DragResizeClose {
constructor(zIndex) {
this.zIndex = zIndex;
this.drag();
this.setDraggables();
this.setZindex();
this.handleCursor();
this.closeBtn();
}
drag() {
$('.draggable').draggable({ containment: "window" });
}
setDraggables() {
const w = window.innerWidth;
const h = window.innerHeight;
const randomCorrectedWidth = (sizeWindow, sizeBox) => {
const corrected = sizeWindow - parseInt(sizeBox);
return Math.floor(Math.random() * corrected)
}
const randomCorrectedHeight = (sizeWindow, sizeBox) => {
const corrected = sizeWindow - parseInt(sizeBox);
return getRndInteger(105, corrected)
}
const getRndInteger = (min, max) => Math.floor(Math.random() * (max - min + 1) ) + min;
$( ".draggable" ).each(function() {
const rw = getRndInteger(w/2-500, w/2)
//setDimension
$(this).css("width",rw);
$(this).css("height", 'auto');
//setPosition
if (this.id != 'program'){
const wBox = $(this).css('width');
const hBox = $(this).css('height');
const rX = randomCorrectedHeight(h, hBox);
const rY = randomCorrectedWidth(w, wBox);
$(this).css("top", rX);
$(this).css("left", rY);
} else {
$(this).css("top", '20px');
$(this).css("right", '20px');
}
});
}
setZindex() {
let thatZindex = this.zIndex;
$('#dragZone div').mousedown(function() { // Setup z-index handler
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", thatZindex++);
});
}
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 });
}
closeBtn() {
$(".closable").click(function() {
$(this).parent().fadeOut();
})
.hover(
function() { $( this ).addClass( "hover" ); },
function() { $( this ).removeClass( "hover");}
);
}
}

22
scripts/Windows.js
Unescape Escape View File

@ -0,0 +1,22 @@
const corpi = {
0: {
id:'xpub',
glyph: '🖨️',
title: 'var xpub',
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.'
},
1: {
id:'interface',
glyph: '📀',
title: 'const interface',
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.'
},
2: {
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.'
},
}

9
styles/style.css
Unescape Escape View File

@ -78,8 +78,13 @@ button {
.icon {
width: 70px;
height: 70px;
border: white solid 2px;
margin: 2%;
border: none;
z-index: 1;
font-size: 30px;
cursor: pointer;
/* font-size: 50px ; */
}
.icon:hover {
font-size: 35px;
}

Write Preview
Loading…
Cancel
Save