first final version with fpk and masterframe
This commit is contained in:
parent
4706498199
commit
6400fefaa1
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 554 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 777 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 483 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
|
@ -24,6 +24,10 @@ body {
|
|||
width: 45%;
|
||||
}
|
||||
|
||||
#fpk.side {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#left.side .frame {
|
||||
background-size:contain;
|
||||
background-position: center;
|
||||
|
|
@ -36,6 +40,12 @@ body {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#fpk.side .frame {
|
||||
background-size:contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TITLE</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="js/index.js"></script>
|
||||
<div id="fpk" class="side">
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
121
js/index.js
121
js/index.js
|
|
@ -1,19 +1,23 @@
|
|||
MAX_IMG_NUMBER = 7
|
||||
ASSET_PATH = "\"assets/frame1/"
|
||||
ASSET_SUFFIX = ".JPG\""
|
||||
ASSET_SUFFIX = ".JPG"
|
||||
SET_COOKIE = false
|
||||
|
||||
var frames = [
|
||||
{
|
||||
DOMElement : "",
|
||||
DOMElement : null,
|
||||
IMGCounter : 0,
|
||||
ASSET_FOLDER : "assets/frame1/",
|
||||
},
|
||||
{
|
||||
DOMElement : "",
|
||||
DOMElement : null,
|
||||
IMGCounter : 0,
|
||||
ASSET_FOLDER : "assets/frame2/",
|
||||
},
|
||||
{
|
||||
DOMElement : "",
|
||||
DOMElement : null,
|
||||
IMGCounter : 0,
|
||||
ASSET_FOLDER : "assets/fpk2/",
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -22,53 +26,132 @@ FOOBAR = ""
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
frames[0].DOMElement = document.querySelector("#left.side .frame")
|
||||
frames[1].DOMElement = document.querySelector("#right.side .frame")
|
||||
|
||||
frames[2].DOMElement = document.querySelector("#fpk.side .frame")
|
||||
|
||||
frames.forEach(function(val, i) {
|
||||
if (frames[i].DOMElement != "") {
|
||||
if (frames[i].DOMElement != null) {
|
||||
nextImage(frames[i])
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
old_cookies = document.cookie
|
||||
setInterval(function() {
|
||||
var new_cookies = document.cookie
|
||||
if (old_cookies != new_cookies && !SET_COOKIE) {
|
||||
var cookie = new_cookies
|
||||
var deviderPos = cookie.indexOf("=")
|
||||
var name = deviderPos > -1 ? cookie.substr(0, deviderPos) : cookie;
|
||||
var value = cookie.substr(deviderPos + 1, cookie.length)
|
||||
|
||||
if (name != "") {
|
||||
console.log("processing remote keypress: " + value )
|
||||
processKeypress(value)
|
||||
cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
|
||||
}
|
||||
document.cookie = cookie
|
||||
old_cookies = new_cookies
|
||||
} else {
|
||||
SET_COOKIE = false
|
||||
}
|
||||
}, 10)
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
function deleteAllCookies() {
|
||||
var cookies = document.cookie.split(";");
|
||||
|
||||
for (var i = 0; i < cookies.length; i++) {
|
||||
var cookie = cookies[i];
|
||||
var eqPos = cookie.indexOf("=");
|
||||
var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
|
||||
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keypress", function(keyEvent) {
|
||||
switch (keyEvent.key) {
|
||||
processKeypress(keyEvent.key)
|
||||
}, false);
|
||||
|
||||
function processKeypress(keypress) {
|
||||
switch (keypress) {
|
||||
case "q":
|
||||
targetFrame = frames[0]
|
||||
prevImage(targetFrame)
|
||||
if (targetFrame.DOMElement != null) {
|
||||
prevImage(targetFrame)
|
||||
SET_COOKIE = false
|
||||
} else {
|
||||
console.log("frame not available, setting cookie")
|
||||
document.cookie = "key="+keypress
|
||||
SET_COOKIE = true
|
||||
}
|
||||
break;
|
||||
case "w":
|
||||
targetFrame = frames[0]
|
||||
nextImage(targetFrame)
|
||||
if (targetFrame.DOMElement != null) {
|
||||
nextImage(targetFrame)
|
||||
SET_COOKIE = false
|
||||
} else {
|
||||
console.log("frame not available, setting cookie")
|
||||
document.cookie = "key="+keypress
|
||||
SET_COOKIE = true
|
||||
}
|
||||
break;
|
||||
case "a":
|
||||
targetFrame = frames[1]
|
||||
prevImage(targetFrame)
|
||||
if (targetFrame.DOMElement != null) {
|
||||
prevImage(targetFrame)
|
||||
SET_COOKIE = false
|
||||
} else {
|
||||
console.log("frame not available, setting cookie")
|
||||
document.cookie = "key="+keypress
|
||||
SET_COOKIE = true
|
||||
}
|
||||
break;
|
||||
case "s":
|
||||
targetFrame = frames[1]
|
||||
nextImage(targetFrame)
|
||||
if (targetFrame.DOMElement != null) {
|
||||
nextImage(targetFrame)
|
||||
SET_COOKIE = false
|
||||
} else {
|
||||
console.log("frame not available, setting cookie")
|
||||
document.cookie = "key="+keypress
|
||||
SET_COOKIE = true
|
||||
}
|
||||
break;
|
||||
case "y":
|
||||
targetFrame = frames[2]
|
||||
prevImage(targetFrame)
|
||||
if (targetFrame.DOMElement != null) {
|
||||
prevImage(targetFrame)
|
||||
SET_COOKIE = false
|
||||
} else {
|
||||
console.log("frame not available, setting cookie")
|
||||
document.cookie = "key="+keypress
|
||||
SET_COOKIE = true
|
||||
}
|
||||
break;
|
||||
case "x":
|
||||
targetFrame = frames[2]
|
||||
nextImage(targetFrame)
|
||||
if (targetFrame.DOMElement != null) {
|
||||
nextImage(targetFrame)
|
||||
SET_COOKIE = false
|
||||
} else {
|
||||
console.log("frame not available, setting cookie")
|
||||
document.cookie = "key="+keypress
|
||||
SET_COOKIE = true
|
||||
}
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
function nextImage(targetFrame) {
|
||||
console.log(targetFrame)
|
||||
if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
|
||||
targetFrame.IMGCounter = 0
|
||||
} else {
|
||||
targetFrame.IMGCounter++
|
||||
}
|
||||
|
||||
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
|
||||
setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
|
||||
}
|
||||
|
||||
function prevImage(targetFrame) {
|
||||
|
|
@ -78,9 +161,9 @@ function prevImage(targetFrame) {
|
|||
targetFrame.IMGCounter--
|
||||
}
|
||||
|
||||
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
|
||||
setFrameImage(targetFrame.DOMElement, "\"" + targetFrame.ASSET_FOLDER + targetFrame.IMGCounter + ASSET_SUFFIX + "\"")
|
||||
}
|
||||
|
||||
function setFrameImage(frame, imgPath) {
|
||||
frame.style.backgroundImage = "url(" + imgPath + ")"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue