feat: add markdown-based interactive slide carousel with fullscreen mode
This commit is contained in:
parent
9e5617274e
commit
58e897f743
|
|
@ -0,0 +1,299 @@
|
||||||
|
<script lang="ts">
|
||||||
|
let { slides = [] } = $props<{ slides: string[] }>();
|
||||||
|
|
||||||
|
let activeIndex = $state(0);
|
||||||
|
let isFullscreen = $state(false);
|
||||||
|
let carouselEl = $state<HTMLElement | null>(null);
|
||||||
|
|
||||||
|
function next() {
|
||||||
|
if (activeIndex < slides.length - 1) {
|
||||||
|
activeIndex++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function prev() {
|
||||||
|
if (activeIndex > 0) {
|
||||||
|
activeIndex--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function goTo(index: number) {
|
||||||
|
activeIndex = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleFullscreen() {
|
||||||
|
if (!carouselEl) return;
|
||||||
|
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
carouselEl.requestFullscreen().catch(err => {
|
||||||
|
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
function handleKeydown(e: KeyboardEvent) {
|
||||||
|
if (e.key === 'ArrowRight') next();
|
||||||
|
if (e.key === 'ArrowLeft') prev();
|
||||||
|
if (e.key === 'f' || e.key === 'F') toggleFullscreen();
|
||||||
|
if (e.key === 'Escape' && isFullscreen) document.exitFullscreen();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for fullscreen change events
|
||||||
|
if (typeof document !== 'undefined') {
|
||||||
|
document.addEventListener('fullscreenchange', () => {
|
||||||
|
isFullscreen = !!document.fullscreenElement;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:window onkeydown={handleKeydown} />
|
||||||
|
|
||||||
|
<div class="slide-carousel" class:is-fullscreen={isFullscreen} bind:this={carouselEl}>
|
||||||
|
<div class="slide-container">
|
||||||
|
{#each slides as slide, i}
|
||||||
|
<div class="slide" class:active={i === activeIndex}>
|
||||||
|
<div class="slide-content prose">
|
||||||
|
{@html slide}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if slides.length > 0}
|
||||||
|
<div class="slide-controls">
|
||||||
|
<div class="left-controls">
|
||||||
|
<button class="btn-nav prev" onclick={prev} disabled={activeIndex === 0} aria-label="Previous slide">
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="center-controls">
|
||||||
|
{#if slides.length > 1}
|
||||||
|
<div class="slide-dots">
|
||||||
|
{#each slides as _, i}
|
||||||
|
<button
|
||||||
|
class="dot"
|
||||||
|
class:active={i === activeIndex}
|
||||||
|
onclick={() => goTo(i)}
|
||||||
|
aria-label="Go to slide {i + 1}"
|
||||||
|
></button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-controls">
|
||||||
|
<button class="btn-fullscreen" onclick={toggleFullscreen} aria-label="Toggle fullscreen">
|
||||||
|
{#if isFullscreen}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>
|
||||||
|
{:else}
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
<button class="btn-nav next" onclick={next} disabled={activeIndex === slides.length - 1} aria-label="Next slide">
|
||||||
|
→
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slide-counter">
|
||||||
|
{activeIndex + 1} / {slides.length}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.slide-carousel {
|
||||||
|
background: #f8fafc;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-carousel.is-fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 9999;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: "stack";
|
||||||
|
flex-grow: 1;
|
||||||
|
min-height: 300px;
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide-container {
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide {
|
||||||
|
grid-area: stack;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||||
|
transform: translateX(20px);
|
||||||
|
padding: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background: inherit;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide {
|
||||||
|
padding: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-content {
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide-content {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide-content :global(h1) { font-size: 3.5rem; }
|
||||||
|
.is-fullscreen .slide-content :global(h2) { font-size: 2.5rem; }
|
||||||
|
.is-fullscreen .slide-content :global(h3) { font-size: 2rem; }
|
||||||
|
|
||||||
|
.slide-content :global(h1),
|
||||||
|
.slide-content :global(h2),
|
||||||
|
.slide-content :global(h3),
|
||||||
|
.slide-content :global(p) {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: #ffffff;
|
||||||
|
border-top: 1px solid #e2e8f0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide-controls {
|
||||||
|
padding: 1.5rem 3rem;
|
||||||
|
background: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-controls, .right-controls {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nav, .btn-fullscreen {
|
||||||
|
background: #3b82f6;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-fullscreen {
|
||||||
|
background: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nav:hover:not(:disabled), .btn-fullscreen:hover {
|
||||||
|
filter: brightness(1.1);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nav:active:not(:disabled), .btn-fullscreen:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-nav:disabled {
|
||||||
|
background: #cbd5e1;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-dots {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #cbd5e1;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s, transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot.active {
|
||||||
|
background: #3b82f6;
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-counter {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide-counter {
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.slide {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-container {
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-fullscreen .slide {
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -40,6 +40,7 @@ export interface LessonContent {
|
||||||
language: string;
|
language: string;
|
||||||
language_display_name: string;
|
language_display_name: string;
|
||||||
active_tabs: string[];
|
active_tabs: string[];
|
||||||
|
slides?: string[];
|
||||||
evaluation_config: Record<string, any>;
|
evaluation_config: Record<string, any>;
|
||||||
quiz_data?: Array<{ type: 'flashcard' | 'mcq', front?: string; back?: string; question?: string; options?: any[]; explanation?: string }>;
|
quiz_data?: Array<{ type: 'flashcard' | 'mcq', front?: string; back?: string; question?: string; options?: any[]; explanation?: string }>;
|
||||||
lesson_progress_status?: string;
|
lesson_progress_status?: string;
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,17 @@
|
||||||
import { renderCircuitEmbeds } from '$actions/renderCircuitEmbeds';
|
import { renderCircuitEmbeds } from '$actions/renderCircuitEmbeds';
|
||||||
import { renderFlowchartEmbeds } from '$actions/renderFlowchartEmbeds';
|
import { renderFlowchartEmbeds } from '$actions/renderFlowchartEmbeds';
|
||||||
import { renderMath, autoRenderMath } from '$lib/actions/renderMath';
|
import { renderMath, autoRenderMath } from '$lib/actions/renderMath';
|
||||||
import { tick } from 'svelte';
|
import { tick, mount, unmount } from 'svelte';
|
||||||
import { LessonManager } from './lesson.svelte';
|
import { LessonManager } from './lesson.svelte';
|
||||||
import { authLoggedIn } from '$stores/auth';
|
import { authLoggedIn } from '$stores/auth';
|
||||||
|
import SlideCarousel from '$components/SlideCarousel.svelte';
|
||||||
|
|
||||||
let { data: pageData } = $props();
|
let { data: pageData } = $props();
|
||||||
const mgr = new LessonManager();
|
const mgr = new LessonManager();
|
||||||
const float = createFloatingPanel();
|
const float = createFloatingPanel();
|
||||||
|
|
||||||
|
let slideComponent = $state<any>(null);
|
||||||
|
|
||||||
// Initialize manager with lesson data whenever it changes.
|
// Initialize manager with lesson data whenever it changes.
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (pageData.lesson) {
|
if (pageData.lesson) {
|
||||||
|
|
@ -33,6 +36,34 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Handle Slide Carousel mounting
|
||||||
|
$effect(() => {
|
||||||
|
const slides = mgr.data?.slides;
|
||||||
|
if (slides && slides.length > 0) {
|
||||||
|
tick().then(() => {
|
||||||
|
const mountPoint = document.getElementById('slide-mount-point');
|
||||||
|
if (mountPoint) {
|
||||||
|
// Clean up previous if exists
|
||||||
|
if (slideComponent) {
|
||||||
|
unmount(slideComponent);
|
||||||
|
slideComponent = null;
|
||||||
|
}
|
||||||
|
// Mount new carousel
|
||||||
|
slideComponent = mount(SlideCarousel, {
|
||||||
|
target: mountPoint,
|
||||||
|
props: { slides }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return () => {
|
||||||
|
if (slideComponent) {
|
||||||
|
unmount(slideComponent);
|
||||||
|
slideComponent = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
// Mobile behavior for floating panel
|
// Mobile behavior for floating panel
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (mgr.isMobile) {
|
if (mgr.isMobile) {
|
||||||
|
|
|
||||||
|
|
@ -169,6 +169,7 @@ def api_lesson(filename):
|
||||||
key_text = ""
|
key_text = ""
|
||||||
key_text_circuit = ""
|
key_text_circuit = ""
|
||||||
quiz_data = []
|
quiz_data = []
|
||||||
|
parsed_data['slides'] = []
|
||||||
# Keep lesson_html, lesson_info, etc. for reading
|
# Keep lesson_html, lesson_info, etc. for reading
|
||||||
|
|
||||||
return jsonify({
|
return jsonify({
|
||||||
|
|
@ -197,6 +198,7 @@ def api_lesson(filename):
|
||||||
'key_text_circuit': key_text_circuit,
|
'key_text_circuit': key_text_circuit,
|
||||||
'active_tabs': active_tabs,
|
'active_tabs': active_tabs,
|
||||||
'quiz_data': quiz_data,
|
'quiz_data': quiz_data,
|
||||||
|
'slides': parsed_data.get('slides', []),
|
||||||
'lesson_progress_status': lesson_progress_status,
|
'lesson_progress_status': lesson_progress_status,
|
||||||
'lesson_title': full_filename.replace('.md', '').replace('_', ' ').title(),
|
'lesson_title': full_filename.replace('.md', '').replace('_', ' ').title(),
|
||||||
'lesson_completed': lesson_completed,
|
'lesson_completed': lesson_completed,
|
||||||
|
|
|
||||||
|
|
@ -523,6 +523,32 @@ def render_markdown_content(file_path):
|
||||||
evaluation_config, lesson_content = _extract_section(
|
evaluation_config, lesson_content = _extract_section(
|
||||||
lesson_content, '---EVALUATION_CONFIG---', '---END_EVALUATION_CONFIG---')
|
lesson_content, '---EVALUATION_CONFIG---', '---END_EVALUATION_CONFIG---')
|
||||||
|
|
||||||
|
# Extract Slides
|
||||||
|
slides_raw, _ = _extract_section(lesson_content, '---slide-start---', '---slide-end---')
|
||||||
|
slides_html = []
|
||||||
|
if slides_raw:
|
||||||
|
# Replace the entire slide block with a mount point in the lesson_content
|
||||||
|
# We need to find the exact indices to replace it surgically
|
||||||
|
start_marker = '---slide-start---'
|
||||||
|
end_marker = '---slide-end---'
|
||||||
|
s_idx = lesson_content.find(start_marker)
|
||||||
|
e_idx = lesson_content.find(end_marker)
|
||||||
|
if s_idx != -1 and e_idx != -1 and e_idx > s_idx:
|
||||||
|
lesson_content = (
|
||||||
|
lesson_content[:s_idx] +
|
||||||
|
'<div id="slide-mount-point"></div>' +
|
||||||
|
lesson_content[e_idx + len(end_marker):]
|
||||||
|
)
|
||||||
|
|
||||||
|
# Parse slides
|
||||||
|
slide_parts = re.split(r'^\s*---\s*$', slides_raw, flags=re.MULTILINE)
|
||||||
|
for s in slide_parts:
|
||||||
|
if s.strip():
|
||||||
|
# Process embeds in slides too
|
||||||
|
s = _process_circuit_embeds(s)
|
||||||
|
s = _process_flowchart_embeds(s)
|
||||||
|
slides_html.append(md.markdown(s.strip(), extensions=MD_EXTENSIONS))
|
||||||
|
|
||||||
# Just use whichever initial code matched as the generic 'initial_code' for simplicity
|
# Just use whichever initial code matched as the generic 'initial_code' for simplicity
|
||||||
# if only one type exists, but return all as dictionary values.
|
# if only one type exists, but return all as dictionary values.
|
||||||
# Typically frontend uses 'initial_code' for legacy.
|
# Typically frontend uses 'initial_code' for legacy.
|
||||||
|
|
@ -572,7 +598,8 @@ def render_markdown_content(file_path):
|
||||||
'expected_wiring': expected_wiring,
|
'expected_wiring': expected_wiring,
|
||||||
'evaluation_config': evaluation_config,
|
'evaluation_config': evaluation_config,
|
||||||
'quiz_data': quiz_data,
|
'quiz_data': quiz_data,
|
||||||
'active_tabs': active_tabs
|
'active_tabs': active_tabs,
|
||||||
|
'slides': slides_html
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue