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

open w icon, random position

Browse Source
master
funix 3 years ago
parent 0d25d1163e
commit 49db009cec
3 changed files with 152 additions and 37 deletions
Show Stats Download Patch File Download Diff File

40
index.html
Unescape Escape View File

@ -1,8 +1,5 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
@ -14,17 +11,38 @@
<script src="./scripts/jquery-ui/jquery-ui.min.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>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- BASE -->
<!-- <div class="ui-widget-content draggable resizable closable" id=" "><h1>var xpub</h1><p></p></div> -->
<h1>windows.open(Welcome)</h1>
<div class="ui-widget-content draggable resizable closable" id="greetings"><h1>window.open(greetings)</h1><p>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.</p></div>
<div class="ui-widget-content draggable resizable closable" id="interface"><h1>window.open(interface)</h1><p>
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.</p></div>
<div class="ui-widget-content draggable resizable closable" id="xpub"><h1>window.open(xpub)</h1><p>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.</p></div>
<div id="boxes">
<div class="ui-widget-content draggable resizable closable" style="max-width: 250px; height: 1400px;" id="program">
<h1>10 Sept 21</h1>
<li>12:00-17:00:</li>
<ul>XPUB Bookshop</ul>
<li>12:00-14:00: XPUB3</li>
<ul>HAM DISTRO (online)</ul>
<li>14:00-15:00:</li>
<ul>OUIJA SEANCE every 20 mins with Simon (online)</ul>
<li>15:00-16:00: XPUB2</li>
<ul>Clara - Blank page syndrome (offline)</ul>
<li>16:00-17:00: XPUB1 </li>
<ul>Lingo Bingo (offline)</ul>
<ul>Civil Entertainment Sirens® </ul>
<li>Oh, look at the wifi: words fly around!</li>
</div>
</div>
<div id="icons"></div>

101
scripts/App.js
Unescape Escape View File

@ -1,4 +1,78 @@
// TODO
// Reolace glyph
// DONE
// Open window icon (on background 'desktop')
// Close window button (on 'window' itself)
$(document).ready(function(){
let corpi = {
0: {
id:'xpub',
glyph: ' &#xf1c0;',
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: ' &#xf1c0;',
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: ' &#xf1c0;',
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
Object.values(corpi).forEach(corpus => {
$('#boxes' ).append(`<div class="ui-widget-content draggable resizable closable" id="${corpus['id']}"><h1>${corpus['title']}</h1><p>${corpus['content']}</p><button>X</button></div>`)
$("#icons").append(`<button onclick="$(${corpus['id']}).fadeIn()" class="icon">${corpus["glyph"]}</button>`)
});
//size window
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(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
var heightDrag = (getHeight())/2;
// 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
@ -23,20 +97,15 @@ $(document).ready(function(){
$( ".resizableOriz" ).resizable({ aspectRatio:true, maxHeight:500, minHeight:200 });
// size random of draggables
// settings draggables
$( ".draggable" ).each(function() {
let rw = Math.floor(Math.random() * 500) + 300;
let rh = Math.floor(Math.random() * 400) + 200;
console.log(rw,rh)
let rw = getRndInteger(widthDrag-500,widthDrag)
let rh = getRndInteger(heightDrag-200, heightDrag)
$( this ).css("width",rw);
$( this ).css("height",rh)
$( this ).append("<button>X</button>")
});
// close window
@ -45,12 +114,12 @@ $(document).ready(function(){
});
// open window
$( ".draggable" ).each(function() {
let idid = $( this ).attr('id')
console.log(idid)
$("#icons").append(`<button onclick="$(${idid}).fadeIn()" class="icon"></button>`)
});
// TODOS
// Open window icon (on background 'desktop')
// Close window button (on 'window' itself)
// $( ".draggable" ).each(function() {
// let idid = $( this ).attr('id')
// // console.log(idid)
// $("#icons").append(`<button onclick="$(${idid}).fadeIn()" class="icon">${corpusglyph[idid]}</button>`)
// });
});

48
styles/style.css
Unescape Escape View File

@ -3,6 +3,8 @@
src: url(../fonts/AC1-SemiLightDots.ttf);
}
html{
}
@ -10,12 +12,24 @@ html{
body{
background-color: blue;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
h1{
font-family: points;
font-size: 60px;
color: white;
}
button{
user-select: none;
display: inline-block;
padding: 3px 1em;
color: currentColor;
font-weight: var(--regular);
text-decoration: none;
margin-bottom: 4px;
background-color: rgba(0,0,0,0);
}
.draggable {
@ -26,6 +40,24 @@ h1{
background: black
}
.draggable p{
color: white;
}
.draggable li{
color: white;
list-style: none;
/* line-height: 7px; */
}
.draggable ul{
color: white;
}
.draggable li::before{
content: "💾 ";
}
.resizable {
width: 350px;
height: 650px;
@ -41,15 +73,16 @@ h1{
}
.closable{
position: fixed;
top: 0;
right: 0;
}
.closable button{
width: 30px;
height: 30px;
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
right: 0;
}
@ -58,13 +91,8 @@ h1{
width: 50px;
height: 50px;
border: white solid 2px;
/* position: absolute; */
margin: 2%;
z-index: 1;
}
.icon button{
background-color: rgba(0,0,0,0);
}

Write Preview
Loading…
Cancel
Save