initial commit

This commit is contained in:
sqozz 2016-10-04 20:41:50 +02:00
commit 4706498199
22 changed files with 200 additions and 0 deletions

BIN
assets/frame1/0.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 434 KiB

BIN
assets/frame1/1.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 KiB

BIN
assets/frame1/2.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 KiB

BIN
assets/frame1/3.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 777 KiB

BIN
assets/frame1/4.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

BIN
assets/frame1/5.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

BIN
assets/frame1/6.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 483 KiB

BIN
assets/frame1/7.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
assets/frame2/0.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

BIN
assets/frame2/1.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

BIN
assets/frame2/2.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 MiB

BIN
assets/frame2/3.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 266 KiB

BIN
assets/frame2/4.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
assets/frame2/5.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 563 KiB

BIN
assets/frame2/6.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 624 KiB

BIN
assets/frame2/7.JPG Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 386 KiB

BIN
css/.index.css.swp Normal file

Binary file not shown.

42
css/index.css Normal file
View File

@ -0,0 +1,42 @@
html, body {
height: 100%;
margin: 0px;
overflow: hidden;
}
body {
display: flex;
background-color: black;
}
.side {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#left.side {
width: 55%;
}
#right.side {
width: 45%;
}
#left.side .frame {
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
#right.side .frame {
background-size:contain;
background-position: center;
background-repeat: no-repeat;
}
.frame {
width: 100%;
height: 100%;
}

17
index.html Normal file
View File

@ -0,0 +1,17 @@
<!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="left" class="side">
<div class="frame"></div>
</div><!--
--><div id="right" class="side">
<div class="frame"></div>
</div>
</body>
</html>

BIN
js/.index.js.swp Normal file

Binary file not shown.

86
js/index.js Normal file
View File

@ -0,0 +1,86 @@
MAX_IMG_NUMBER = 7
ASSET_PATH = "\"assets/frame1/"
ASSET_SUFFIX = ".JPG\""
var frames = [
{
DOMElement : "",
IMGCounter : 0,
},
{
DOMElement : "",
IMGCounter : 0,
},
{
DOMElement : "",
IMGCounter : 0,
}
]
FOOBAR = ""
document.addEventListener('DOMContentLoaded', function() {
frames[0].DOMElement = document.querySelector("#left.side .frame")
frames[1].DOMElement = document.querySelector("#right.side .frame")
frames.forEach(function(val, i) {
if (frames[i].DOMElement != "") {
nextImage(frames[i])
}
});
}, false);
document.addEventListener("keypress", function(keyEvent) {
switch (keyEvent.key) {
case "q":
targetFrame = frames[0]
prevImage(targetFrame)
break;
case "w":
targetFrame = frames[0]
nextImage(targetFrame)
break;
case "a":
targetFrame = frames[1]
prevImage(targetFrame)
break;
case "s":
targetFrame = frames[1]
nextImage(targetFrame)
break;
case "y":
targetFrame = frames[2]
prevImage(targetFrame)
break;
case "x":
targetFrame = frames[2]
nextImage(targetFrame)
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)
}
function prevImage(targetFrame) {
if (targetFrame.IMGCounter <= 0) {
targetFrame.IMGCounter = MAX_IMG_NUMBER
} else {
targetFrame.IMGCounter--
}
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
}
function setFrameImage(frame, imgPath) {
frame.style.backgroundImage = "url(" + imgPath + ")"
}

55
test.html Normal file
View File

@ -0,0 +1,55 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
<div id=d="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>u"left" class="side">
<div class="frame"></div>
</div><!--
--><div id="right" class="side">
<div class="frame"></div>
</div>
</html>