mirror of
https://github.com/Tooloop/Tooloop-Packages.git
synced 2026-04-27 20:41:37 +02:00
organize files, parse description from markdown, video handling
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Welcome to Tooloop OS</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -15,15 +15,12 @@
|
||||
<template id="slide-template">
|
||||
<div class="slide">
|
||||
<section class="image"></section>
|
||||
<section class="description">
|
||||
<h1></h1>
|
||||
<p></p>
|
||||
</section>
|
||||
<section class="description"></section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<nav>
|
||||
<button class="slide-button previous" onclick="slider.previous(); slider.stop();">
|
||||
<button class="slide-button previous" onclick="slider.previous();">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24"
|
||||
height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
|
||||
stroke-linejoin="miter">
|
||||
@@ -32,7 +29,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="slide-button next" onclick="slider.next(); slider.stop();">
|
||||
<button class="slide-button next" onclick="slider.next();">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24"
|
||||
height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
|
||||
stroke-linejoin="miter">
|
||||
@@ -43,8 +40,7 @@
|
||||
|
||||
<button class="close-button" onclick="window.close();">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24"
|
||||
viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M18 6l-12 12" />
|
||||
<path d="M6 6l12 12" />
|
||||
@@ -52,13 +48,12 @@
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<script src="js/marked.min.js"></script>
|
||||
<script src="slides/slides.js"></script>
|
||||
<script src="Slider.js"></script>
|
||||
<script src="js/Slider.js"></script>
|
||||
|
||||
<script>
|
||||
var slider = new Slider("#slider", "#slide-template", slides, 12000);
|
||||
// var scale = document.querySelector("html").clientWidth > 1920 ? 2.0 : 1.0;
|
||||
// document.querySelector(':root').style.setProperty("--scale", scale);
|
||||
var slider = new Slider("#slider", "#slide-template", slides, 8000);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
+55
-23
@@ -1,13 +1,15 @@
|
||||
class Slider {
|
||||
|
||||
element;
|
||||
slides;
|
||||
template;
|
||||
imageTypes = ["png", "gif", "webp", "jpg"];
|
||||
videoTypes = ["mp4", "webm"];
|
||||
|
||||
data;
|
||||
element;
|
||||
template;
|
||||
slides = [];
|
||||
activeSlide = 0;
|
||||
slideDuration;
|
||||
autoplayInterval;
|
||||
ip;
|
||||
slideTimeout;
|
||||
|
||||
constructor(element, template, data, slideDuration = 10000) {
|
||||
this.element = document.querySelector(element);
|
||||
@@ -19,21 +21,17 @@ class Slider {
|
||||
// append slides
|
||||
for (let i = 0; i < this.data.length; i++) {
|
||||
let slide = this.template.content.cloneNode(true);
|
||||
let type = this.data[i].image.split('.').pop().toLowerCase();
|
||||
let type = this.getType(i);
|
||||
|
||||
switch (type) {
|
||||
// image
|
||||
case "png":
|
||||
case "jpg":
|
||||
case "webp":
|
||||
case "gif":
|
||||
case "image":
|
||||
let img = document.createElement("img");
|
||||
img.src = this.data[i].image;
|
||||
img.src = "./slides/" + this.data[i].image;
|
||||
slide.querySelector(".image").appendChild(img);
|
||||
break;
|
||||
|
||||
case "mp4":
|
||||
case "webm":
|
||||
case "video":
|
||||
let video = document.createElement("video");
|
||||
video.autoplay = true;
|
||||
video.loop = true;
|
||||
@@ -49,42 +47,76 @@ class Slider {
|
||||
// texts
|
||||
let hasText = this.data[i].title || this.data[i].description;
|
||||
if (hasText) {
|
||||
let title = slide.querySelector(".description h1");
|
||||
let description = slide.querySelector(".description p");
|
||||
// let title = slide.querySelector(".description h1");
|
||||
// title.textContent = this.data[i].title;
|
||||
let description = slide.querySelector(".description");
|
||||
description.innerHTML = marked.parse(this.data[i].description);
|
||||
|
||||
let title = document.createElement("h1");
|
||||
title.textContent = this.data[i].title;
|
||||
description.textContent = this.data[i].description;
|
||||
description.prepend(title);
|
||||
}
|
||||
|
||||
// slide
|
||||
let newslide = this.element.appendChild(slide);
|
||||
this.element.appendChild(slide);
|
||||
|
||||
let slideNode = document.querySelector(element + " .slide:last-child");
|
||||
slideNode.id = "slide-" + i;
|
||||
slideNode.classList.toggle("no-text", !hasText);
|
||||
this.slides.push(slideNode);
|
||||
}
|
||||
|
||||
// observe scroll position
|
||||
this.element.onscroll = e => this.onScroll(e);
|
||||
|
||||
// start auto play
|
||||
this.autoplayInterval = setInterval(() => { this.next(); }, this.slideDuration);
|
||||
this.start();
|
||||
}
|
||||
|
||||
onScroll(e) {
|
||||
this.activeSlide = Math.round(e.target.scrollLeft / 640);
|
||||
this.activeSlide = Math.round(e.target.scrollLeft / 800);
|
||||
}
|
||||
|
||||
next() {
|
||||
// stop old video
|
||||
if (this.getType(this.activeSlide) == "video") {
|
||||
this.slides[this.activeSlide].querySelector("video").pause();
|
||||
}
|
||||
|
||||
// scroll to next slide
|
||||
let targetSlide = this.activeSlide >= (this.data.length - 1) ? 0 : this.activeSlide + 1;
|
||||
this.element.scrollTo(targetSlide * 640, 0);
|
||||
this.element.scrollTo(targetSlide * 800, 0);
|
||||
|
||||
// start new video and timeout
|
||||
if (this.getType(targetSlide) == "video") {
|
||||
let video = this.slides[targetSlide].querySelector("video");
|
||||
video.currentTime = 0
|
||||
video.play();
|
||||
}
|
||||
|
||||
this.start();
|
||||
|
||||
}
|
||||
|
||||
previous() {
|
||||
let targetSlide = this.activeSlide <= 0 ? (this.data.length - 1) : this.activeSlide - 1
|
||||
this.element.scrollTo(targetSlide * 640, 0);
|
||||
this.element.scrollTo(targetSlide * 800, 0);
|
||||
|
||||
this.start();
|
||||
}
|
||||
|
||||
stop() {
|
||||
clearInterval(this.autoplayInterval);
|
||||
start(timeout = this.slideDuration) {
|
||||
clearTimeout(this.slideTimeout);
|
||||
this.slideTimeout = setTimeout(() => { this.next(); }, timeout);
|
||||
}
|
||||
|
||||
getType(slideIndex) {
|
||||
let type = this.data[slideIndex].image.split('.').pop().toLowerCase();
|
||||
|
||||
if (this.imageTypes.includes(type)) return "image";
|
||||
if (this.videoTypes.includes(type)) return "video";
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,8 +1,22 @@
|
||||
var slides = [
|
||||
{ image: "../../../../../media-player/package/assets/data/Tooloop Greeter Intro.mp4", title: "", description: "" },
|
||||
{ image: "../../../../../gpu-benchmark/media/glmark2-buffer.jpg", title: "Desktop", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
|
||||
{ image: "../../../../../gpu-benchmark/media/glmark2-jellyfish.jpg", title: "Menu", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
|
||||
{ image: "../../../../../gpu-benchmark/media/glmark2-refract.jpg", title: "Control Center", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
|
||||
{ image: "../../../../../gpu-benchmark/media/glmark2-shadow.jpg", title: "Files", description: "Lorem ipsum dolor hit me. Mommy says knock you out." },
|
||||
{ image: "../../../../../gpu-benchmark/media/glmark2-thumbnail.jpg", title: "Remote control", description: "Lorem ipsum dolor hit me. Mommy says knock you out." }
|
||||
{
|
||||
image: "Hello World.mp4",
|
||||
title: "",
|
||||
description: ""
|
||||
},
|
||||
{
|
||||
image: "placeholder-16x9.png",
|
||||
title: "Mouse cursor",
|
||||
description: `Your mouse cursor is hidden. It will show up if you move it. Click on the desktop to access the _menu_.`
|
||||
},
|
||||
{
|
||||
image: "placeholder-16x9.png",
|
||||
title: "Network access",
|
||||
description: `Tooloop Boxes can be managed over the network. Just type the IP-address of this box into your browser.`
|
||||
},
|
||||
{
|
||||
image: "placeholder-16x9.png",
|
||||
title: "Documentation",
|
||||
description: `You can find manuals and information at [tooloop-os.org](https://tooloop-os.org).`
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user