alfred/cityuni-webserver
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add JS based theme toggling.
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Captain ALM 2022-07-30 16:19:45 +01:00
parent 27ae3e3fed
commit fbc6b3ed6a
Signed by: alfred
GPG Key ID: 4E4ADD02609997B1
2 changed files with 47 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.go.html
View File

@ -4,6 +4,8 @@
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Captain ALM's City University Portfolio">
<meta name="keywords" content="CaptainALM Captain_ALM Captain ALM portfolio Alfred Manville projects programming hacking cracking">
<title>City University Portfolio</title>
<link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/>
{{ if .Light }}
@ -11,6 +13,8 @@
{{ else }}
<link id="style-theme" rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
{{ end }}
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script type="application/javascript">
const TheParameters = "{{ .Parameters }}"
const CssLightURL = "{{ .Data.CSSLightURL }}"
@ -25,13 +29,13 @@
<header class="header">
{{ if .Light }}
<a href="?light" class="home-button no-dec" title="Home" id="logo"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="&#8962;"></div></a>
<a href="?{{ .Parameters }}" class="home-button no-dec" title="Switch to Dark Mode" id="theme"><div><img src="{{ .Data.MoonImageLocation }}" width="64px" alt='{{ "{" }}'></div></a>
<a href="?{{ .Parameters }}" class="home-button no-dec" title="Switch to Dark Mode" id="theme"><div><img id="theme-img" src="{{ .Data.MoonImageLocation }}" width="64px" alt='{{ "{" }}'></div></a>
{{ else }}
<a href="?" class="home-button no-dec" title="Home" id="logo"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="&#8962;"></div></a>
{{ if eq .Parameters "" }}
<a href="?light" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
<a href="?light" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img id="theme-img" src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
{{ else }}
<a href="?light&{{ .Parameters }}" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
<a href="?light&{{ .Parameters }}" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img id="theme-img" src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
{{ end }}
{{ end }}
<input class="sort-menu" type="checkbox" id="sort-menu"/>
@ -127,7 +131,7 @@
{{ $c = $.CounterPlusPlus }}
<div id="entry-{{ $c }}">
<script type="application/javascript">
EntryData[{{ $c }}] = CreateEntry("{{ .Name }}", "{{ .VideoLocation }}", "{{ .VideoContentType }}", "{{ .GetStartDateHTML }}", "{{ .GetEndDateHTML }}", "{{ .GetInt64Duration }}")
CreateEntry({{ $c }}, "{{ .Name }}", "{{ .VideoLocation }}", "{{ .VideoContentType }}", "{{ .GetStartDateHTML }}", "{{ .GetEndDateHTML }}", {{ .GetInt64Duration }})
</script>
<div class="item-table flex-col">
<div class="item-heading">

44
index.js
View File

@ -3,14 +3,15 @@ This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
const EntryData = []
function CreateEntry(name, videourl, videotype, start, end, duration) {
return {
SetupJSTheme()
function CreateEntry(id, name, videourl, videotype, start, end, duration) {
EntryData[id] = {
name: name,
videourl: videourl,
videotype: videotype,
start: Date.parse(start),
end: Date.parse(end),
duration : duration
duration : parseInt(duration, 10)
};
}
function CreateVideoPlaceholder(id) {
@ -44,7 +45,40 @@ function ActivateVideo(id) {
vid.appendChild(vids)
vid.appendChild(vida)
holder.appendChild(vid)
if (vid.play) {
vid.play()
if (vid.play) {vid.play();}
}
function SetupJSTheme() {
let th = document.getElementById("theme")
th.href = "#"
if (document.addEventListener) {
th.addEventListener("click", ToggleTheme)
} else {
th.setAttribute("onclick", "ToggleTheme();")
th.onclick = ToggleTheme
}
}
function ToggleTheme() {
let th = document.getElementById("theme")
let thimg = document.getElementById("theme-img")
let thsty = document.getElementById("style-theme")
let logo = document.getElementById("logo")
if (document.getElementById("so-theme")) {
thimg.src = SunImageURL
thimg.alt = "()"
th.title = "Switch to Light Mode"
document.getElementById("so-form").removeChild(document.getElementById("so-theme"))
logo.href = "?"
thsty.src = CssDarkURL
} else {
thimg.src = MoonImageURL
thimg.alt = "{"
th.title = "Switch to Dark Mode"
let thi = document.createElement("input")
thi.name = "light"
thi.type = "hidden"
thi.id = "so-theme"
document.getElementById("so-form").appendChild(thi)
logo.href = "?light"
thsty.src = CssLightURL
}
}