From 1caf56dc0a2bbf4bb484fe4f312b5229a63aace3 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Wed, 16 Oct 2024 16:57:47 +0800 Subject: feat: add simple script to test mapclay * add more options for generateMaps for general purposes * add rollup config for adding script into addon --- addon/index.mjs | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 addon/index.mjs (limited to 'addon/index.mjs') diff --git a/addon/index.mjs b/addon/index.mjs new file mode 100644 index 0000000..323edf1 --- /dev/null +++ b/addon/index.mjs @@ -0,0 +1,17 @@ +const { Leaflet } = window.mapclay.renderers +const simpleRender = window.mapclay.renderWith(config => ({ + use: 'Leaflet', + width: '100%', + height: '200px', + XYZ: 'https://tile.openstreetmap.jp/styles/osm-bright/512/{z}/{x}/{y}.png', + ...config, + aliases: { + use: { Leaflet }, + ...(config.aliases ?? {}), + }, +})) + +window.generateMaps(document.querySelector('main') ?? document.body, { + initialLayout: '', + render: simpleRender, +}) -- cgit v1.2.3-70-g09d2 From 5502bf29bdbaa054a96794ddf93ab8cf0bcc2f77 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 17 Oct 2024 10:19:46 +0800 Subject: fix: CRS for addon --- addon/index.mjs | 1 + addon/manifest.json | 5 +++-- src/dumbymap.mjs | 7 +++---- 3 files changed, 7 insertions(+), 6 deletions(-) (limited to 'addon/index.mjs') diff --git a/addon/index.mjs b/addon/index.mjs index 323edf1..2494ec4 100644 --- a/addon/index.mjs +++ b/addon/index.mjs @@ -12,6 +12,7 @@ const simpleRender = window.mapclay.renderWith(config => ({ })) window.generateMaps(document.querySelector('main') ?? document.body, { + crs: url.searchParams.get('crs') ?? 'EPSG:4326', initialLayout: '', render: simpleRender, }) diff --git a/addon/manifest.json b/addon/manifest.json index e97ae50..2d7b1ed 100644 --- a/addon/manifest.json +++ b/addon/manifest.json @@ -12,7 +12,7 @@ "content_scripts": [ { "matches": [ - "*://*.mozilla.org/*", + "*://developer.mozilla.org/*", "*://hackmd.io/*", "*://*.ptt.cc/*" ], @@ -29,6 +29,7 @@ "permissions": [ "activeTab", "tabs", - "scripting" + "scripting", + "https://epsg.io/*" ] } diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 55d29d3..cbd44b2 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -241,10 +241,10 @@ export const generateMaps = (container, { register(proj4) fromEPSGCode(crs).then(() => resolve()) }) - const addGeoSchemeByText = new Promise(resolve => { + const addGeoSchemeByText = (async () => { const coordPatterns = /(-?\d+\.?\d*)([,\x2F\uFF0C])(-?\d+\.?\d*)/ const re = new RegExp(coordPatterns, 'g') - htmlHolder.querySelectorAll('p') + htmlHolder.querySelectorAll('.dumby-block') .forEach(p => { replaceTextNodes(p, re, match => { const a = document.createElement('a') @@ -253,8 +253,7 @@ export const generateMaps = (container, { return a }) }) - resolve() - }) + })() Promise.all([setCRS, addGeoSchemeByText]).then(() => { Array.from(container.querySelectorAll(geoLinkSelector)) -- cgit v1.2.3-70-g09d2 From 62b7af8ce0ccbad26cd00be24cc2cf1e817b8581 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 17 Oct 2024 10:26:52 +0800 Subject: feat: more precise way to get htmlHolder and blocks --- addon/index.mjs | 25 ++++++++++++++++++++++++- src/dumbymap.mjs | 5 ++++- 2 files changed, 28 insertions(+), 2 deletions(-) (limited to 'addon/index.mjs') diff --git a/addon/index.mjs b/addon/index.mjs index 2494ec4..7f33fc5 100644 --- a/addon/index.mjs +++ b/addon/index.mjs @@ -1,4 +1,26 @@ -const { Leaflet } = window.mapclay.renderers +const url = new URL(window.location) +if (url.host === 'www.ptt.cc') { + const content = document.querySelector('#main-content') + Array.from(content.childNodes) + .filter(n => !(n instanceof window.HTMLElement)) + .forEach(text => { + const span = document.createElement('span') + span.innerText = text.textContent + text.replaceWith(span) + }) +} + +const blockSelectors = { + 'developer.mozilla': '.section-content', + 'hackmd.io': '#doc > *', + 'www.ptt.cc': '#main-content > span', +} +const blockSelector = blockSelectors[url.host] + +const addBlocks = blockSelector + ? root => Array.from(root.querySelectorAll(blockSelector)) + : undefined + const simpleRender = window.mapclay.renderWith(config => ({ use: 'Leaflet', width: '100%', @@ -13,6 +35,7 @@ const simpleRender = window.mapclay.renderWith(config => ({ window.generateMaps(document.querySelector('main') ?? document.body, { crs: url.searchParams.get('crs') ?? 'EPSG:4326', + addBlocks, initialLayout: '', render: simpleRender, }) diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index cbd44b2..94fcc1d 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -171,8 +171,11 @@ export const generateMaps = (container, { container.dataset.layout = initialLayout ?? defaultLayouts[0].name /** Prepare Semantic HTML part and blocks of contents inside */ - const htmlHolder = container.querySelector('.SemanticHtml, :has(article, section)') ?? container.firstElementChild + 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') + const blocks = addBlocks(htmlHolder) blocks.forEach(b => { b.classList.add('dumby-block') -- cgit v1.2.3-70-g09d2 From e4f01ea8f7817fa738ea9012fa217a2b9eca88aa Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 17 Oct 2024 10:27:25 +0800 Subject: feat: add other default renderers --- addon/index.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'addon/index.mjs') diff --git a/addon/index.mjs b/addon/index.mjs index 7f33fc5..092adc4 100644 --- a/addon/index.mjs +++ b/addon/index.mjs @@ -28,7 +28,7 @@ const simpleRender = window.mapclay.renderWith(config => ({ XYZ: 'https://tile.openstreetmap.jp/styles/osm-bright/512/{z}/{x}/{y}.png', ...config, aliases: { - use: { Leaflet }, + use: window.mapclay.renderers, ...(config.aliases ?? {}), }, })) -- cgit v1.2.3-70-g09d2 From 337a562ee8c9e2531a1a6799acaa66567ad7ef12 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Thu, 17 Oct 2024 10:28:32 +0800 Subject: feat: option "autoMap" in case no valid render target in Semantic HTML --- addon/index.mjs | 1 + src/dumbymap.mjs | 14 ++++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) (limited to 'addon/index.mjs') diff --git a/addon/index.mjs b/addon/index.mjs index 092adc4..b5d71ba 100644 --- a/addon/index.mjs +++ b/addon/index.mjs @@ -38,4 +38,5 @@ window.generateMaps(document.querySelector('main') ?? document.body, { addBlocks, initialLayout: '', render: simpleRender, + autoMap: true, }) diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 94fcc1d..706e874 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -14,7 +14,7 @@ import { register, fromEPSGCode } from 'ol/proj/proj4' import LeaderLine from 'leader-line' /** CSS Selector for main components */ -const mapBlockSelector = 'pre:has(.language-map)' +const mapBlockSelector = 'pre:has(.language-map), .mapclay-container' const docLinkSelector = 'a[href^="#"][title^="=>"]' const geoLinkSelector = 'a[href^="geo:"]' @@ -163,6 +163,7 @@ export const generateMaps = (container, { delay, renderCallback, addBlocks = defaultBlocks, + autoMap = false, render = defaultRender, } = {}) => { /** Prepare Contaner */ @@ -457,11 +458,12 @@ export const generateMaps = (container, { const elementsWithMapConfig = Array.from( container.querySelectorAll(mapBlockSelector) ?? [], ) - if (elementsWithMapConfig.length === 0) { - const map = document.createElement('pre') - map.textContent = '#Created by DumbyMap' - htmlHolder.insertBefore(map, htmlHolder.firstElementChild) - elementsWithMapConfig.push(map) + if (autoMap && elementsWithMapConfig.length === 0) { + const mapContainer = document.createElement('pre') + mapContainer.className = 'mapclay-container' + mapContainer.textContent = '#Created by DumbyMap' + htmlHolder.insertBefore(mapContainer, htmlHolder.firstElementChild) + elementsWithMapConfig.push(mapContainer) } /** Render each taget element for maps */ -- cgit v1.2.3-70-g09d2