Commit 083f8013 authored by david's avatar david
Browse files

Ability to load external CSS in Web Component.

parent cf935d10
...@@ -18,6 +18,9 @@ ...@@ -18,6 +18,9 @@
name="Studio Clock" name="Studio Clock"
logo="https://o94.at/themes/custom/radio_orange/logo1.png" logo="https://o94.at/themes/custom/radio_orange/logo1.png"
logosize="180px" logosize="180px"
api="http://localhost:3333/api/v1/" /> api="http://localhost:3333/api/v1/"
css="http://localhost:3333/css/aura.css">
</aura-clock>
</body> </body>
</html> </html>
<svelte:options tag="aura-clock"/> <svelte:options tag="aura-clock"/>
<main bind:this={rootElement}></main>
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let css = "";
export let api = "http://localhost:3333/api/v1"; export let api = "http://localhost:3333/api/v1";
export let name = "Studio Clock"; export let name = "Studio Clock";
export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png"; export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
...@@ -9,7 +11,7 @@ ...@@ -9,7 +11,7 @@
let time = new Date(); let time = new Date();
let queryCurrent = "/clock"; let queryCurrent = "/clock";
let rootElement;
let data; let data;
let currentTrack = null; let currentTrack = null;
let timeLeft; let timeLeft;
...@@ -34,7 +36,6 @@ ...@@ -34,7 +36,6 @@
data = null; data = null;
data = fetchApi(queryCurrent); data = fetchApi(queryCurrent);
} }
}, 1000); }, 1000);
return () => { return () => {
...@@ -42,7 +43,6 @@ ...@@ -42,7 +43,6 @@
}; };
}); });
async function fetchApi(query) { async function fetchApi(query) {
let response; let response;
let data; let data;
...@@ -68,7 +68,13 @@ ...@@ -68,7 +68,13 @@
} }
} }
function setCurrentTrack(info) { function initComponent(info) {
/* Load external CSS */
if (css != null)
loadExternalCss(rootElement, css);
/* Set currently loaded data */
if (currentTrack == null && info != null && info.track != null) { if (currentTrack == null && info != null && info.track != null) {
currentTrack = info; currentTrack = info;
...@@ -155,7 +161,13 @@ ...@@ -155,7 +161,13 @@
return false; return false;
} }
function loadExternalCss(root, file) {
let element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", file);
root.appendChild(element);
}
</script> </script>
...@@ -416,8 +428,7 @@ ...@@ -416,8 +428,7 @@
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
{:then value} {:then value}
{setCurrentTrack(value)} {initComponent(value)}
<!-- <h2>&#9654; Playing</h2> -->
{#if value.current.show} {#if value.current.show}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment