From 4dd0fa87859e6ffa1b230eedd1388098a8ba81a1 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 17 Oct 2024 12:40:50 +0800 Subject: feat: set "sticky" as one of default layouts * move function addDraggable() into module scope * showcase in sticky layout is draggable now * add query paramerter for "use" * FIX: set initialLayout after observer is set --- src/dumbymap.mjs | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) (limited to 'src/dumbymap.mjs') diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index b612367..13f4574 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -5,7 +5,7 @@ import MarkdownItFrontMatter from 'markdown-it-front-matter' import MarkdownItInjectLinenumbers from 'markdown-it-inject-linenumbers' import * as mapclay from 'mapclay' import { replaceTextNodes, onRemove, animateRectTransition, throttle, shiftByWindow } from './utils' -import { Layout, SideBySide, Overlay } from './Layout' +import { Layout, SideBySide, Overlay, Sticky } from './Layout' import * as utils from './dumbyUtils' import * as menuItem from './MenuItem' import PlainModal from 'plain-modal' @@ -23,6 +23,7 @@ const defaultLayouts = [ new Layout({ name: 'normal' }), new SideBySide({ name: 'side-by-side' }), new Overlay({ name: 'overlay' }), + new Sticky({ name: 'sticky' }), ] /** Cache across every dumbymap generation */ @@ -169,13 +170,12 @@ export const generateMaps = (container, { /** Prepare Contaner */ container.classList.add('Dumby') delete container.dataset.layout - container.dataset.layout = initialLayout ?? defaultLayouts[0].name /** Prepare Semantic HTML part and blocks of contents inside */ const htmlHolder = container.querySelector('.SemanticHtml') ?? Array.from(container.children).find(e => e.id?.includes('main') || e.className.includes('main')) ?? Array.from(container.children).sort((a, b) => a.textContent.length < b.textContent.length).at(0) - htmlHolder.classList.add('.SemanticHtml') + htmlHolder.classList.add('SemanticHtml') const blocks = addBlocks(htmlHolder) blocks.forEach(b => { @@ -280,13 +280,7 @@ export const generateMaps = (container, { const mutation = mutations.at(-1) const target = mutation.target const focus = target.classList.contains('focus') - const shouldBeInShowcase = - focus && - showcase.checkVisibility({ - contentVisibilityAuto: true, - opacityProperty: true, - visibilityProperty: true, - }) + const shouldBeInShowcase = focus && showcase.checkVisibility() if (focus) { dumbymap.utils @@ -393,6 +387,7 @@ export const generateMaps = (container, { }) onRemove(htmlHolder, () => layoutObserver.disconnect()) + container.dataset.layout = initialLayout ?? defaultLayouts[0].name /** * afterMapRendered. callback of each map rendered -- cgit v1.2.3-70-g09d2