OEKZident.de/ovdashboard
2
0
Fork 0
Code Releases 1 Packages Activity

better marquee duration formula

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-13 02:24:23 +00:00
parent 1b6b421c57
commit 26e8b41830
2 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/src/App.vue
View file

@ -4,7 +4,11 @@
<TitleBar :title="title_html" /> <TitleBar :title="title_html" />
<Dashboard :message="message_html" /> <Dashboard :message="message_html" />
</v-main> </v-main>
<TickerBar v-if="ticker_html !== ''" :content="ticker_html" /> <TickerBar
v-if="ticker_html !== ''"
:content="ticker_html"
color="primary"
/>
</v-app> </v-app>
</template> </template>

32
ui/src/components/TickerBar.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<v-footer :color="color" :dark="is_dark" fixed> <v-footer :color="color" :dark="is_dark" fixed>
<span class="text-h6" :style="{ 'animation-duration': marqueeDuration }"> <span ref="marquee" class="text-h6">
<div v-html="content" /> <div ref="content" v-html="content" />
</span> </span>
</v-footer> </v-footer>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
import Color from "color"; import Color from "color";
@Component @Component
@ -18,11 +18,17 @@ export default class TickerBar extends Vue {
@Prop({ default: "primary" }) @Prop({ default: "primary" })
private readonly color!: string; private readonly color!: string;
@Ref("content")
private readonly _content!: HTMLDivElement;
@Ref("marquee")
private readonly _marquee!: HTMLSpanElement;
private get is_dark(): boolean { private get is_dark(): boolean {
return this.footerColor.isDark(); return this.footer_color.isDark();
} }
private get footerColor(): Color { private get footer_color(): Color {
// try getting from vuetify theme // try getting from vuetify theme
let color = this.$vuetify.theme.themes.light[this.color]; let color = this.$vuetify.theme.themes.light[this.color];
@ -34,10 +40,18 @@ export default class TickerBar extends Vue {
return Color(this.color); return Color(this.color);
} }
private get marqueeDuration(): string { @Watch("content", { immediate: true })
// 10 seconds + another second per 7 chars private set_marquee_duration(): void {
let dv = this.content ? Math.round(this.content.length / 7) : 0; this.$nextTick((): void => {
return 10 + dv + "s"; const width = parseFloat(
window.getComputedStyle(this._content).getPropertyValue("width")
);
// 10 seconds + another second per 40px
const duration = 10 + Math.round(width / 40);
this._marquee.style.setProperty("animation-duration", duration + "s");
});
} }
} }
</script> </script>