mdv-live 0.3.7 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/static/app.js

@@ -613,6 +613,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                         </svg>
                     </button>
+                    <button class="marp-close-nav" title="Hide (N to show)">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
                 `;
                 marpit.appendChild(nav);
             }
@@ -676,17 +681,83 @@
 
             // Fullscreen toggle
             const fullscreenBtn = elements.content.querySelector('.marp-fullscreen-btn');
+            const expandIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>';
+            const shrinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4m0 5H4m5 0L4 4m11 5h5m-5 0V4m0 5l5-5M9 15v5m0-5H4m5 0l-5 5m11-5h5m-5 0v5m0-5l5 5" /></svg>';
             const toggleFullscreen = () => {
                 document.body.classList.toggle('marp-fullscreen');
+                const isFullscreen = document.body.classList.contains('marp-fullscreen');
+                if (fullscreenBtn) {
+                    fullscreenBtn.innerHTML = isFullscreen ? shrinkIcon : expandIcon;
+                    fullscreenBtn.title = isFullscreen ? 'Exit Fullscreen (Esc)' : 'Fullscreen (F)';
+                }
+                // Reset nav position when exiting fullscreen
+                const nav = elements.content.querySelector('.marp-nav');
+                if (!isFullscreen && nav) {
+                    nav.style.left = '';
+                    nav.style.top = '';
+                    nav.style.right = '';
+                    nav.style.bottom = '';
+                    nav.style.transform = '';
+                }
             };
             if (fullscreenBtn) fullscreenBtn.addEventListener('click', toggleFullscreen);
 
+            // Make nav draggable and closeable
+            const nav = elements.content.querySelector('.marp-nav');
+            if (nav) {
+                let isDragging = false;
+                let dragStartX, dragStartY, navStartX, navStartY;
+
+                nav.addEventListener('mousedown', (e) => {
+                    // Don't drag when clicking buttons or not in fullscreen
+                    if (e.target.closest('button')) return;
+                    if (!document.body.classList.contains('marp-fullscreen')) return;
+                    isDragging = true;
+                    nav.classList.add('dragging');
+                    dragStartX = e.clientX;
+                    dragStartY = e.clientY;
+                    const rect = nav.getBoundingClientRect();
+                    navStartX = rect.left;
+                    navStartY = rect.top;
+                    e.preventDefault();
+                });
+
+                document.addEventListener('mousemove', (e) => {
+                    if (!isDragging) return;
+                    const dx = e.clientX - dragStartX;
+                    const dy = e.clientY - dragStartY;
+                    const newX = Math.max(0, Math.min(window.innerWidth - nav.offsetWidth, navStartX + dx));
+                    const newY = Math.max(0, Math.min(window.innerHeight - nav.offsetHeight, navStartY + dy));
+                    nav.style.left = newX + 'px';
+                    nav.style.top = newY + 'px';
+                    nav.style.right = 'auto';
+                    nav.style.bottom = 'auto';
+                    nav.style.transform = 'none';
+                });
+
+                document.addEventListener('mouseup', () => {
+                    if (isDragging) {
+                        isDragging = false;
+                        nav.classList.remove('dragging');
+                    }
+                });
+
+                // Close button to hide nav
+                const closeBtn = nav.querySelector('.marp-close-nav');
+                if (closeBtn) {
+                    closeBtn.addEventListener('click', () => {
+                        nav.classList.add('hidden');
+                    });
+                }
+            }
+
             // Keyboard navigation
             marpKeyHandler = (e) => {
                 // Don't handle if editing or in dialog
                 if (state.isEditMode || !elements.dialogOverlay.classList.contains('hidden')) {
                     return;
                 }
+                const nav = elements.content.querySelector('.marp-nav');
                 if (e.key === 'ArrowRight' || e.key === ' ') {
                     e.preventDefault();
                     nextSlide();
@@ -696,9 +767,16 @@
                 } else if (e.key === 'f' || e.key === 'F') {
                     e.preventDefault();
                     toggleFullscreen();
-                } else if (e.key === 'Escape' && document.body.classList.contains('marp-fullscreen')) {
+                } else if (e.key === 'n' || e.key === 'N') {
                     e.preventDefault();
-                    document.body.classList.remove('marp-fullscreen');
+                    if (nav) nav.classList.toggle('hidden');
+                } else if (e.key === 'Escape') {
+                    e.preventDefault();
+                    if (document.body.classList.contains('marp-fullscreen')) {
+                        toggleFullscreen();
+                    } else if (nav && nav.classList.contains('hidden')) {
+                        nav.classList.remove('hidden');
+                    }
                 }
             };
             document.addEventListener('keydown', marpKeyHandler);

package/src/static/styles.css

@@ -875,6 +875,7 @@ body {
     border-radius: 8px;
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    user-select: none;
 }
 
 .marp-nav button {
@@ -911,6 +912,19 @@ body {
     text-align: center;
 }
 
+body.marp-fullscreen .marp-nav .slide-counter {
+    cursor: grab;
+}
+
+body.marp-fullscreen .marp-nav.dragging {
+    cursor: grabbing;
+    opacity: 0.9;
+}
+
+body.marp-fullscreen .marp-nav.dragging .slide-counter {
+    cursor: grabbing;
+}
+
 .marp-nav .keyboard-hint {
     font-size: 11px;
     color: var(--text-muted);
@@ -950,7 +964,10 @@ body.marp-fullscreen .content {
 
 body.marp-fullscreen .marp-nav {
     bottom: 32px;
-    right: 32px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    cursor: grab;
 }
 
 body.marp-fullscreen .marpit {
@@ -970,6 +987,19 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
     margin-left: 4px;
 }
 
+.marp-close-nav {
+    margin-left: 4px;
+}
+
+.marp-close-nav:hover:not(:disabled) {
+    background: var(--danger) !important;
+    border-color: var(--danger) !important;
+}
+
+.marp-nav.hidden {
+    display: none !important;
+}
+
 /* Print styles for Marp */
 @media print {
     .marp-nav { display: none !important; }