jgerstbe/webframe
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[U] reset interval on next/prev button click

Browse source
This commit is contained in:
Jan 2020-07-20 12:42:08 +02:00
parent 1481678dac
commit 5b7485cbe9
3 changed files with 67 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public/app.js
View file

@ -4,7 +4,7 @@ new Vue({
files: [], files: [],
index: 0, index: 0,
interval: null, interval: null,
carouselTimeout: 100, carouselTimeout: 20000,
carouselActive: true carouselActive: true
}, },
methods: { methods: {
@ -14,9 +14,10 @@ new Vue({
} else { } else {
this.index = 0; this.index = 0;
} }
if (!this.carouselActive) { },
this.startCarousel(); nextClick: function () {
} this.next();
this.startCarousel();
}, },
prev: function () { prev: function () {
if (this.index - 1 >= 0) { if (this.index - 1 >= 0) {
@ -24,9 +25,10 @@ new Vue({
} else { } else {
this.index = this.files.length - 1; this.index = this.files.length - 1;
} }
if (!this.carouselActive) { },
this.startCarousel(); prevClick: function () {
} this.next();
this.startCarousel();
}, },
loadData: function () { loadData: function () {
fetch('api/files').then(response => response.json()).then( fetch('api/files').then(response => response.json()).then(

91
public/index.css
View file

@ -1,51 +1,56 @@
#app, #app div { body {
display: flex; margin: 0;
height: 100%; }
width: 100%;
}
#app img { #app,
width: 100%; #app div {
height: auto; display: flex;
z-index: 0; height: 100%;
align-self: center; width: 100%;
} }
#app video { #app img {
height: 100vh; width: 100%;
margin: 0 auto; height: auto;
display: block; max-height: 100%;
} z-index: 0;
align-self: center;
}
#app .floatBtn { #app video {
display: block; height: 100%;
width: 40px; margin: 0 auto;
height: 32px; display: block;
border-radius: 50%; }
background-color: rgba(0,0,0,.3);
color: white;
z-index: 10;
position: absolute;
top: 50vh;
text-align: center;
padding-top: 8px;
}
#app .floatBtn.left { #app .floatBtn {
left: 10px; display: block;
} width: 40px;
height: 32px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .3);
color: white;
z-index: 10;
position: absolute;
top: 50vh;
text-align: center;
padding-top: 8px;
}
#app .floatBtn.right { #app .floatBtn.left {
right: 10px; left: 10px;
} }
#app .floatBtn.bottom { #app .floatBtn.right {
left: 49%; right: 10px;
top: 90%; }
}
#app .empty { #app .floatBtn.bottom {
text-align: center; left: 49%;
margin-top: 48vh; top: 90%;
} }
#app .empty {
text-align: center;
margin-top: 48vh;
}

4
public/index.html
View file

@ -10,10 +10,10 @@
<body> <body>
<div id="app"> <div id="app">
<div v-if="files && files.length > 0"> <div v-if="files && files.length > 0">
<div class="floatBtn left" v-on:click="prev()"> <div class="floatBtn left" v-on:click="prevClick()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg>
</div> </div>
<div class="floatBtn right" v-on:click="next()"> <div class="floatBtn right" v-on:click="nextClick()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg>
</div> </div>
<div class="floatBtn bottom" v-on:click="toggleCarousel()"> <div class="floatBtn bottom" v-on:click="toggleCarousel()">