chore: improved token check on plugin load, improved typings

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;
+};

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 () => {

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;

src/settings/plugin-settings.types.ts

@@ -17,3 +17,13 @@ export const DEFAULT_SETTINGS: Partial<LocationPluginSettings> = {
 	mapZoom: '15',
 	reverseOrder: false,
 };
+
+export type LocationBlockConfiguration = {
+	latitude?: string;
+	longitude?: string;
+	searchQuery?: string;
+	makiIcon?: string;
+	markerUrl?: string;
+	style?: string;
+	zoom?: string;
+};