From 49db009cec949a1bbf8ed0502bd00412bc5bd759 Mon Sep 17 00:00:00 2001 From: funix Date: Mon, 30 Aug 2021 08:48:16 +0200 Subject: [PATCH] open w icon, random position --- index.html | 40 +++++++++++++------ scripts/App.js | 101 +++++++++++++++++++++++++++++++++++++++-------- styles/style.css | 48 +++++++++++++++++----- 3 files changed, 152 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index c5c3987..49bc104 100644 --- a/index.html +++ b/index.html @@ -1,8 +1,5 @@ - - - - + @@ -14,17 +11,38 @@ + - + + + + +

windows.open(Welcome)

-

window.open(greetings)

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.

-

window.open(interface)

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

-

window.open(xpub)

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.

+
+ + +
+

10 Sept 21

+
  • 12:00-17:00:
    • +
      XPUB Bookshop
    +
  • 12:00-14:00: XPUB3
    • +
      HAM DISTRO (online)
    +
  • 14:00-15:00:
    • +
      OUIJA SEANCE every 20 mins with Simon (online)
    +
  • 15:00-16:00: XPUB2
    • +
      Clara - Blank page syndrome (offline)
    +
  • 16:00-17:00: XPUB1
    • +
      Lingo Bingo (offline)
    +
      Civil Entertainment Sirens®
    +
  • Oh, look at the wifi: words fly around!
    • +
    + +
    + +
    diff --git a/scripts/App.js b/scripts/App.js index c466f08..47fa840 100644 --- a/scripts/App.js +++ b/scripts/App.js @@ -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: ' ', + 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.' + }, + + } + + // generate divs + + Object.values(corpi).forEach(corpus => { + $('#boxes' ).append(`

    ${corpus['title']}

    ${corpus['content']}

    `) + $("#icons").append(``) + }); + + //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("") }); // close window @@ -45,12 +114,12 @@ $(document).ready(function(){ }); // open window - $( ".draggable" ).each(function() { - let idid = $( this ).attr('id') - console.log(idid) - $("#icons").append(``) - }); - // 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(``) + // }); + + + }); diff --git a/styles/style.css b/styles/style.css index 21d2d1d..e44b36c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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); - -} -