zev/modulearn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed console.logs, changed dark mode hover color, made progress bar wider

Browse Source
This commit is contained in:
zevav
2020-10-02 22:47:37 +02:00
parent 373065dc43
commit 49aa57019f
2 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modulearn/src/App.svelte
View File

@@ -13,7 +13,6 @@
interval = setInterval(() => { interval = setInterval(() => {
const pos = video.position() const pos = video.position()
const newModule = getModule(pos) const newModule = getModule(pos)
if (!pos) return console.log('no pos')
position.update(() => pos) position.update(() => pos)
if (newModule && !$currentModule if (newModule && !$currentModule
|| newModule && $currentModule && newModule.name !== $currentModule.name) || newModule && $currentModule && newModule.name !== $currentModule.name)
@@ -36,7 +35,6 @@
const onRepositionInModule = event => { const onRepositionInModule = event => {
const { percentage } = event.detail const { percentage } = event.detail
const pos = $currentModule.start + ($currentModule.duration * percentage / 100) const pos = $currentModule.start + ($currentModule.duration * percentage / 100)
console.log(pos)
jumpTo(pos) jumpTo(pos)
} }

40
modulearn/src/Module.svelte
View File

@@ -2,13 +2,13 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { currentModule, position } from "./stores" import { currentModule, position } from "./stores"
const dispatch = createEventDispatcher()
export let module export let module
let progressBar
const dispatch = createEventDispatcher()
const progressWidth = 240
const getProgress = pos => (pos - module.start) / module.duration * 100 const getProgress = pos => (pos - module.start) / module.duration * 100
let selected; let progress; let klass; let selected; let progress; let klass; let progressBar
$: selected = $currentModule && $currentModule.name === module.name $: selected = $currentModule && $currentModule.name === module.name
$: if (selected) { $: if (selected) {
@@ -17,34 +17,30 @@
} else { } else {
progress = null; progress = null;
klass = "" klass = ""
} }
const progressClick = e => { const progressClick = e => {
// https://stackoverflow.com/a/28311723/4386191 // https://stackoverflow.com/a/28311723/4386191
const max = 160
const pos = e.pageX - progressBar.offsetLeft const pos = e.pageX - progressBar.offsetLeft
let dual = Math.round(pos / max * 100) let dual = Math.round(pos / progressWidth * 100)
if (dual > 100) dual = 100;
if (dual > 100) {
console.log(dual)
dual = 100;
}
dispatch("repositionInModule", {percentage: dual}) dispatch("repositionInModule", {percentage: dual})
}
}
</script> </script>
<div on:click={() => dispatch("selectModule", { module })} > <div on:click={() => dispatch("selectModule", { module })} >
<span class="{klass}">I want to {module.outcome}.</span> <span class="{klass}">I want to {module.outcome}.</span>
{#if progress} {#if progress}
<progress bind:this={progressBar} on:click={progressClick} value={progress} max=100>Hi</progress> <progress
bind:this={progressBar}
on:click={progressClick}
value={progress}
max=100>
</progress>
{/if} {/if}
</div> </div>
<style> <style>
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
span.current { background-color: yellow;} span.current { background-color: yellow;}
@@ -54,11 +50,15 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
span.current { background-color: blue; } span.current { background-color: blue; }
span:hover { span:hover {
background-color: lavender; background-color: purple;
color: #222;
} }
} }
progress {
width: 240px;
height: 1.2em;
}
div { padding: .3em; } div { padding: .3em; }
span { span {
cursor: pointer; cursor: pointer;