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

Ability to load external CSS in Web Component.

parent cf935d10
......@@ -18,6 +18,9 @@
name="Studio Clock"
logo="https://o94.at/themes/custom/radio_orange/logo1.png"
logosize="180px"
api="http://localhost:3333/api/v1/" />
api="http://localhost:3333/api/v1/"
css="http://localhost:3333/css/aura.css">
</aura-clock>
</body>
</html>
<svelte:options tag="aura-clock"/>
<main bind:this={rootElement}></main>
<script>
import { onMount } from 'svelte';
export let css = "";
export let api = "http://localhost:3333/api/v1";
export let name = "Studio Clock";
export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
......@@ -9,7 +11,7 @@
let time = new Date();
let queryCurrent = "/clock";
let rootElement;
let data;
let currentTrack = null;
let timeLeft;
......@@ -34,7 +36,6 @@
data = null;
data = fetchApi(queryCurrent);
}
}, 1000);
return () => {
......@@ -42,7 +43,6 @@
};
});
async function fetchApi(query) {
let response;
let data;
......@@ -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) {
currentTrack = info;
......@@ -155,7 +161,13 @@
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>
......@@ -416,8 +428,7 @@
<span class="sr-only">Loading...</span>
</div>
{:then value}
{setCurrentTrack(value)}
<!-- <h2>&#9654; Playing</h2> -->
{initComponent(value)}
{#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