Tooloop/Tooloop-Packages
2
0
Fork 0
mirror of https://github.com/Tooloop/Tooloop-Packages.git synced 2026-04-27 20:41:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

organize files, parse description from markdown, video handling

Browse Source
This commit is contained in:
Daniel Stock
2024-02-19 16:36:55 +01:00
parent adf5e42828
commit 73e4ea148c
8 changed files with 95 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
onboarding/package/assets/data/styles.css → onboarding/package/assets/data/css/styles.css
View File
onboarding/package/assets/data/index.html
+8 -13
View File
@@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Tooloop OS</title> <title>Welcome to Tooloop OS</title>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="css/styles.css">
</head> </head>
<body> <body>
@@ -15,15 +15,12 @@
<template id="slide-template"> <template id="slide-template">
<div class="slide"> <div class="slide">
<section class="image"></section> <section class="image"></section>
<section class="description"> <section class="description"></section>
<h1></h1>
<p></p>
</section>
</div> </div>
</template> </template>
<nav> <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" <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" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
stroke-linejoin="miter"> stroke-linejoin="miter">
@@ -32,7 +29,7 @@
</svg> </svg>
</button> </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" <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" height="24" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="miter"
stroke-linejoin="miter"> stroke-linejoin="miter">
@@ -43,8 +40,7 @@
<button class="close-button" onclick="window.close();"> <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" <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" viewBox="0 0 24 24" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round">
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M18 6l-12 12" /> <path d="M18 6l-12 12" />
<path d="M6 6l12 12" /> <path d="M6 6l12 12" />
@@ -52,13 +48,12 @@
</button> </button>
</nav> </nav>
<script src="js/marked.min.js"></script>
<script src="slides/slides.js"></script> <script src="slides/slides.js"></script>
<script src="Slider.js"></script> <script src="js/Slider.js"></script>
<script> <script>
var slider = new Slider("#slider", "#slide-template", slides, 12000); var slider = new Slider("#slider", "#slide-template", slides, 8000);
// var scale = document.querySelector("html").clientWidth > 1920 ? 2.0 : 1.0;
// document.querySelector(':root').style.setProperty("--scale", scale);
</script> </script>
</body> </body>
onboarding/package/assets/data/Slider.js → onboarding/package/assets/data/js/Slider.js
+55 -23
View File
@@ -1,13 +1,15 @@
class Slider { class Slider {
element; imageTypes = ["png", "gif", "webp", "jpg"];
slides; videoTypes = ["mp4", "webm"];
template;
data; data;
element;
template;
slides = [];
activeSlide = 0; activeSlide = 0;
slideDuration; slideDuration;
autoplayInterval; slideTimeout;
ip;
constructor(element, template, data, slideDuration = 10000) { constructor(element, template, data, slideDuration = 10000) {
this.element = document.querySelector(element); this.element = document.querySelector(element);
@@ -19,21 +21,17 @@ class Slider {
// append slides // append slides
for (let i = 0; i < this.data.length; i++) { for (let i = 0; i < this.data.length; i++) {
let slide = this.template.content.cloneNode(true); let slide = this.template.content.cloneNode(true);
let type = this.data[i].image.split('.').pop().toLowerCase(); let type = this.getType(i);
switch (type) { switch (type) {
// image // image
case "png": case "image":
case "jpg":
case "webp":
case "gif":
let img = document.createElement("img"); let img = document.createElement("img");
img.src = this.data[i].image; img.src = "./slides/" + this.data[i].image;
slide.querySelector(".image").appendChild(img); slide.querySelector(".image").appendChild(img);
break; break;
case "mp4": case "video":
case "webm":
let video = document.createElement("video"); let video = document.createElement("video");
video.autoplay = true; video.autoplay = true;
video.loop = true; video.loop = true;
@@ -49,42 +47,76 @@ class Slider {
// texts // texts
let hasText = this.data[i].title || this.data[i].description; let hasText = this.data[i].title || this.data[i].description;
if (hasText) { if (hasText) {
let title = slide.querySelector(".description h1"); // let title = slide.querySelector(".description h1");
let description = slide.querySelector(".description p"); // 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; title.textContent = this.data[i].title;
description.textContent = this.data[i].description; description.prepend(title);
} }
// slide // slide
let newslide = this.element.appendChild(slide); this.element.appendChild(slide);
let slideNode = document.querySelector(element + " .slide:last-child"); let slideNode = document.querySelector(element + " .slide:last-child");
slideNode.id = "slide-" + i; slideNode.id = "slide-" + i;
slideNode.classList.toggle("no-text", !hasText); slideNode.classList.toggle("no-text", !hasText);
this.slides.push(slideNode);
} }
// observe scroll position // observe scroll position
this.element.onscroll = e => this.onScroll(e); this.element.onscroll = e => this.onScroll(e);
// start auto play // start auto play
this.autoplayInterval = setInterval(() => { this.next(); }, this.slideDuration); this.start();
} }
onScroll(e) { onScroll(e) {
this.activeSlide = Math.round(e.target.scrollLeft / 640); this.activeSlide = Math.round(e.target.scrollLeft / 800);
} }
next() { 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; 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() { previous() {
let targetSlide = this.activeSlide <= 0 ? (this.data.length - 1) : this.activeSlide - 1 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() { start(timeout = this.slideDuration) {
clearInterval(this.autoplayInterval); 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;
} }
} }
onboarding/package/assets/data/js/marked.min.js
Vendored
+6
View File
File diff suppressed because one or more lines are too long
onboarding/package/assets/data/slides/Hello World.mp4
LFS
BIN
View File
Binary file not shown.
onboarding/package/assets/data/slides/Tooloop Greeter Intro.mp4
LFS
BIN
View File
Binary file not shown.
onboarding/package/assets/data/slides/placeholder-16x9.png
LFS
BIN
View File
Binary file not shown.
onboarding/package/assets/data/slides/slides.js
+20 -6
View File
@@ -1,8 +1,22 @@
var slides = [ 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: "Hello World.mp4",
{ image: "../../../../../gpu-benchmark/media/glmark2-jellyfish.jpg", title: "Menu", description: "Lorem ipsum dolor hit me. Mommy says knock you out." }, title: "",
{ image: "../../../../../gpu-benchmark/media/glmark2-refract.jpg", title: "Control Center", description: "Lorem ipsum dolor hit me. Mommy says knock you out." }, description: ""
{ 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: "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).`
},
] ]