From 904ff5b4b5010715f4acd84ae6b9c97efed00b02 Mon Sep 17 00:00:00 2001 From: Aaron Czichon Date: Fri, 20 Sep 2024 13:11:43 -0600 Subject: [PATCH] chore: improved token check on plugin load, improved typings --- src/functions/map.func.ts | 40 +++++++++++++------- src/main.ts | 8 ++-- src/processors/process-code.func.ts | 54 +++++++++++---------------- src/settings/plugin-settings.types.ts | 10 +++++ 4 files changed, 63 insertions(+), 49 deletions(-) diff --git a/src/functions/map.func.ts b/src/functions/map.func.ts index d26db5f..5b969b4 100644 --- a/src/functions/map.func.ts +++ b/src/functions/map.func.ts @@ -1,9 +1,13 @@ -import { LocationPluginSettings } from '../settings/plugin-settings.types'; +import { Notice } from 'obsidian'; +import { + LocationBlockConfiguration, + LocationPluginSettings, +} from '../settings/plugin-settings.types'; export const getMarkerUrl = ( - codeMarker: string, - makiIcon: string, settings: LocationPluginSettings, + codeMarker?: string, + makiIcon?: string, ) => { // If a marker URL is set in code block use it if (codeMarker) return `url-${encodeURIComponent(codeMarker)}`; @@ -27,22 +31,30 @@ export const getMarkerUrl = ( */ export const getStaticMapImageUrl = ( settings: LocationPluginSettings, - latitude: string = '', - longitude: string = '', - codeMarker: string = '', - makiIcon: string = '', - style: string = '', - zoom: string = '', + config: LocationBlockConfiguration, ): string => { - const markerUrl = getMarkerUrl(codeMarker, makiIcon, settings); + const markerUrl = getMarkerUrl(settings, config.markerUrl, config.makiIcon); - if (codeMarker && makiIcon) { + if (config.markerUrl && config.makiIcon) { throw 'Both marker URL and Maki icon are set. Setting both is not a valid combination.'; } - const mapStyle = style || settings.mapStyle; - const mapZoom = zoom || settings.mapZoom; - const imageUrl = `https://api.mapbox.com/styles/v1/mapbox/${mapStyle}/static/${markerUrl}(${longitude},${latitude})/${longitude},${latitude},${mapZoom}/800x400?access_token=${settings.mapboxToken}`; + const mapStyle = config.style || settings.mapStyle; + const mapZoom = config.zoom || settings.mapZoom; + const imageUrl = `https://api.mapbox.com/styles/v1/mapbox/${mapStyle}/static/${markerUrl}(${config.longitude},${config.latitude})/${config.longitude},${config.latitude},${mapZoom}/800x400?access_token=${settings.mapboxToken}`; return imageUrl; }; + +/** + * Checks if mapbox token is available and shows a notice if not. + * @param settings object of location plugin settings + * @returns true if a valid mapbox token is configured, false otherwise + */ +export const hasMapboxToken = (settings: LocationPluginSettings) => { + if (!settings.mapboxToken) { + new Notice('Mapbox access token is not set. Please set it in the plugin settings.', 5000); + return false; + } + return true; +}; diff --git a/src/main.ts b/src/main.ts index 111bf96..d1e72b6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,16 +8,18 @@ export default class MapboxPlugin extends Plugin { settings: LocationPluginSettings; async onload() { - // Load the settings initially + // Load the settings initially and check if this is a new version of the plugin. await this.loadSettings(); + await checkVersionUpdate(this); + // Register the processors for the given code blocks. + // Code blocks are used in this plugin to render the maps. this.registerMarkdownCodeBlockProcessor('location', (source: string, el: HTMLElement) => processLocationCodeBlock(source, el, this.settings), ); + // Adding the UI settings tab to the Obsidian preferences. this.addSettingTab(new LocationSettingTab(this.app, this)); - - await checkVersionUpdate(this); } public loadSettings = async () => { diff --git a/src/processors/process-code.func.ts b/src/processors/process-code.func.ts index 2226fcb..89569be 100644 --- a/src/processors/process-code.func.ts +++ b/src/processors/process-code.func.ts @@ -1,7 +1,10 @@ import { Notice } from 'obsidian'; -import { getStaticMapImageUrl } from '../functions/map.func'; +import { getStaticMapImageUrl, hasMapboxToken } from '../functions/map.func'; import { processLocationSearch } from '../functions/process-location-search.func'; -import { LocationPluginSettings } from '../settings/plugin-settings.types'; +import { + LocationBlockConfiguration, + LocationPluginSettings, +} from '../settings/plugin-settings.types'; export const processLocationCodeBlock = async ( source: string, @@ -10,11 +13,9 @@ export const processLocationCodeBlock = async ( ) => { try { const extractedData = processCodeBlock(source); - let mapboxAccessToken = settings.mapboxToken; - if (!mapboxAccessToken) { - new Notice('Mapbox access token is not set. Please set it in the plugin settings.', 5000); - return; - } + + // If no Mapbox token is set, we don't need to process the code block. + if (!hasMapboxToken(settings)) return; if (!extractedData.searchQuery && (!extractedData.latitude || !extractedData.longitude)) { new Notice( @@ -25,26 +26,24 @@ export const processLocationCodeBlock = async ( } // check if being run as a search then retrieve and render the image - let lat = extractedData.latitude; - let long = extractedData.longitude; let address = ''; if (extractedData.searchQuery) { const [latitude, longitude, fullAddress] = await processLocationSearch( extractedData.searchQuery, - mapboxAccessToken, + settings.mapboxToken, ); - lat = latitude.toString(); - long = longitude.toString(); + extractedData.latitude = latitude.toString(); + extractedData.longitude = longitude.toString(); address = fullAddress; } // if we need to flip the order of the coordinates // then we need to do it before rendering the image if (settings.reverseOrder) { - const temp = lat; - lat = long; - long = temp; + const temp = extractedData.latitude; + extractedData.latitude = extractedData.longitude; + extractedData.longitude = temp; } - addStaticImageToContainer(settings, extractedData, el, lat, long); + addStaticImageToContainer(settings, extractedData, el); if (!extractedData.searchQuery) return; // if a search query was used, render the address as text @@ -77,34 +76,25 @@ export const processCodeBlock = (source: string) => { latitude = latLong ? latLong[0] : latitude; longitude = latLong ? latLong[1] : longitude; - return { + const config: LocationBlockConfiguration = { latitude, longitude, markerUrl, - makiIcon, - mapStyle, - mapZoom, + style: mapStyle, + zoom: mapZoom, searchQuery, + makiIcon, }; + return config; }; const addStaticImageToContainer = ( settings: LocationPluginSettings, - extractedData: any, + extractedData: LocationBlockConfiguration, el: HTMLElement, - latitude?: string, - longitude?: string, ) => { try { - const imageUrl = getStaticMapImageUrl( - settings, - latitude, - longitude, - extractedData.markerUrl, - extractedData.makiIcon, - extractedData.mapStyle, - extractedData.mapZoom, - ); + const imageUrl = getStaticMapImageUrl(settings, extractedData); const imageElement = document.createElement('img'); imageElement.src = imageUrl; diff --git a/src/settings/plugin-settings.types.ts b/src/settings/plugin-settings.types.ts index c24baae..71eb983 100644 --- a/src/settings/plugin-settings.types.ts +++ b/src/settings/plugin-settings.types.ts @@ -17,3 +17,13 @@ export const DEFAULT_SETTINGS: Partial = { mapZoom: '15', reverseOrder: false, }; + +export type LocationBlockConfiguration = { + latitude?: string; + longitude?: string; + searchQuery?: string; + makiIcon?: string; + markerUrl?: string; + style?: string; + zoom?: string; +};