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

[A] Settings to refresh images, set carouselTimeout

Browse source
This commit is contained in:
Jan 2020-08-18 00:22:14 +02:00
parent 5f0518d599
commit 2fd0758bae
3 changed files with 40 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/app.js
View file

@ -75,6 +75,7 @@ new Vue({
this.carouselActive = true; this.carouselActive = true;
clearInterval(this.interval); clearInterval(this.interval);
this.interval = setInterval(this.next, time); this.interval = setInterval(this.next, time);
localStorage.setItem('wf-carouselTimeout', time);
}, },
stopCarousel: function () { stopCarousel: function () {
this.carouselActive = false; this.carouselActive = false;
@ -160,5 +161,9 @@ new Vue({
this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500); this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500);
}, 0); }, 0);
}); });
if (Number(localStorage.getItem('wf-carouselTimeout'))) {
this.carouselTimeout = Number(localStorage.getItem('wf-carouselTimeout'));
this.startCarousel();
}
} }
}) })

16
public/index.css
View file

@ -149,6 +149,8 @@ body {
#app .fullScreenMenu .container ul { #app .fullScreenMenu .container ul {
list-style-type: none; list-style-type: none;
width: 80%; width: 80%;
margin: 0 auto;
padding: 0;
} }
#app .fullScreenMenu .container li { #app .fullScreenMenu .container li {
@ -164,3 +166,17 @@ body {
width: auto; width: auto;
margin: 0; margin: 0;
} }
#app .fullScreenMenu .container p.pRow {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px auto;
width: 80%;
}
#app input {
padding: 4px;
border-radius: 10px;
border: 1px solid lightgrey;
}

19
public/index.html
View file

@ -56,6 +56,25 @@
</span> </span>
</li> </li>
</ul> </ul>
<h3 style="text-align: center;">Settings</h3>
<p class="pRow">
<label for="carouselTimeout">carouselTimeout</label>
<input type="number" name="carouselTimeout" v-model="carouselTimeout">
<span style="display:flex;">
<span class="btn" title="reset" v-on:click="carouselTimeout=20000;startCarousel()" style="margin-right: 5px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.1459 11.0499L12.9716 9.05752L15.3462 8.84977C14.4471 7.98322 13.2242 7.4503 11.8769 7.4503C9.11547 7.4503 6.87689 9.68888 6.87689 12.4503C6.87689 15.2117 9.11547 17.4503 11.8769 17.4503C13.6977 17.4503 15.2911 16.4771 16.1654 15.0224L18.1682 15.5231C17.0301 17.8487 14.6405 19.4503 11.8769 19.4503C8.0109 19.4503 4.87689 16.3163 4.87689 12.4503C4.87689 8.58431 8.0109 5.4503 11.8769 5.4503C13.8233 5.4503 15.5842 6.24474 16.853 7.52706L16.6078 4.72412L18.6002 4.5498L19.1231 10.527L13.1459 11.0499Z" fill="currentColor"/></svg>
</span>
<span class="btn" title="apply" v-on:click="startCarousel()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z" fill="currentColor"/></svg>
</span>
</span>
</p>
<p class="pRow">
Imagelist
<span class="btn" title="refresh" v-on:click="loadData()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.56079 10.6418L6.35394 3.94971L8.25402 5.84979C11.7312 3.6588 16.3814 4.07764 19.41 7.1063L17.9958 8.52052C15.7536 6.27827 12.3686 5.87519 9.71551 7.31128L11.2529 8.84869L4.56079 10.6418Z" fill="currentColor"/> <path d="M19.4392 13.3581L17.646 20.0502L15.7459 18.1501C12.2688 20.3411 7.61857 19.9223 4.58991 16.8936L6.00413 15.4794C8.24638 17.7217 11.6313 18.1247 14.2844 16.6887L12.747 15.1512L19.4392 13.3581Z" fill="currentColor"/></svg>
</span>
</p>
</div> </div>
</div> </div>
<!-- touch canvas --> <!-- touch canvas -->