From 64f3ccf09e739c7ec6ac2a2453e2043e28ddb8ae Mon Sep 17 00:00:00 2001 From: Tancre Date: Mon, 30 Aug 2021 17:33:03 +0200 Subject: [PATCH] a bit of order + icons with zindex handler --- index.html | 10 ++- scripts/App.js | 122 ++----------------------------------- scripts/DragResizeClose.js | 83 +++++++++++++++++++++++++ scripts/Windows.js | 22 +++++++ styles/style.css | 9 ++- 5 files changed, 122 insertions(+), 124 deletions(-) create mode 100644 scripts/DragResizeClose.js create mode 100644 scripts/Windows.js diff --git a/index.html b/index.html index 7d91364..ed4bfe4 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@ + + @@ -18,8 +20,8 @@ -

windows.open(Welcome)

+
@@ -37,15 +39,11 @@
  • Oh, look at the wifi: words fly around!
    • - +
    - - -
    - \ No newline at end of file diff --git a/scripts/App.js b/scripts/App.js index 2888b8b..d662f00 100644 --- a/scripts/App.js +++ b/scripts/App.js @@ -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(){ `) - $('#icons').append(``) + $('#icons').append(``) }); // 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; \ No newline at end of file diff --git a/scripts/DragResizeClose.js b/scripts/DragResizeClose.js new file mode 100644 index 0000000..8824988 --- /dev/null +++ b/scripts/DragResizeClose.js @@ -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");} + ); + } +} \ No newline at end of file diff --git a/scripts/Windows.js b/scripts/Windows.js new file mode 100644 index 0000000..2955c79 --- /dev/null +++ b/scripts/Windows.js @@ -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.' + }, +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index a8d9084..df5dc7a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -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; +}