Fix lint

Add template popup and sidebar result options
Update css (vars, hover)
Clean and re-order functions
Fix provider no dependency
Fix marker svg color on all providers

config/stylelint.config.js

@@ -5,21 +5,15 @@ module.exports = {
 		'declaration-colon-newline-after': null,
 		'value-list-comma-newline-after': null,
 		'custom-property-pattern': [
-			'([a-z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)?$',
+			'^sl(-[a-zA-Z]+)?$',
 			{
-				message: 'Expected custom property name to be FUN-case'
+				message: 'Expected custom property name to be FUN-case with prefix "sl-"'
 			}
 		],
 		'selector-class-pattern': [
-			'^([a-z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)?$',
+			'^sl(-[a-zA-Z0-9]+)?$',
 			{
-				message: 'Expected class selector to be FUN-case'
-			}
-		],
-		'selector-id-pattern': [
-			'^([a-z][a-zA-Z0-9]*)(-[a-z][a-zA-Z0-9]+)?$',
-			{
-				message: 'Expected id selector to be FUN-case'
+				message: 'Expected class selector to be FUN-case with prefix "sl-"'
 			}
 		]
 	}

examples/google-maps/config.js

@@ -21,6 +21,14 @@ const myStorelocator = new Storelocator({
 		provider: 'mapbox',
 		token: credentials.MAPBOX_TOKEN
 	},
+	// templates: {
+	// 	popup: ({ feature }) => {
+	// 		return `${feature.properties.title}`
+	// 	},
+	// 	sidebarResult: ({ feature }) => {
+	// 		return `${feature.properties.title}`
+	// 	}
+	// },
 	onReady: (map) => {
 		console.log('onReady', map)
 	}

package.json

@@ -19,15 +19,12 @@
 	"homepage": "https://storelocatorjs.github.io",
 	"bugs": "https://github.com/yoriiis/storelocatorjs/issues",
 	"repository": "https://github.com/yoriiis/storelocatorjs.git",
+	"license": "TODO",
 	"author": "Joris DANIEL",
 	"main": "dist/storelocator.js",
 	"files": [
 		"./src"
 	],
-	"browserslist": [
-		"defaults",
-		"not ie 11"
-	],
 	"scripts": {
 		"build": "rm -rf ./dist/ && rollup --config ./config/rollup.config.js --environment ENV:production",
 		"build:example": "rm -rf ./examples/dist/ && npm run credentials && webpack --mode=production --config=./examples/webpack.config.js",
@@ -36,6 +33,10 @@
 		"start:example": "rm -rf ./examples/dist/ && npm run credentials && webpack serve --mode=development --config=./examples/webpack.config.js",
 		"test": "echo \"No test specified\" && exit 0"
 	},
+	"browserslist": [
+		"defaults",
+		"not ie 11"
+	],
 	"prettier": "./config/prettier.config.js",
 	"dependencies": {
 		"leaflet": "^1.9.3",
@@ -48,7 +49,7 @@
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/preset-env": "^7.21.4",
 		"@babel/preset-react": "^7.22.5",
-		"@csstools/postcss-global-data": "^2.0.0",
+		"@csstools/postcss-global-data": "^2.0.1",
 		"@rollup/plugin-alias": "^5.0.0",
 		"@rollup/plugin-buble": "^0.21.3",
 		"@rollup/plugin-commonjs": "^25.0.3",

src/components/autocomplete/autocomplete.css

@@ -21,9 +21,17 @@
 				margin-bottom: 5px;
 				cursor: pointer;
 			}
+		}
+	}
+}
 
-			&:hover {
-				background-color: rgba(60, 64, 67, 4%);
+@media (hover: hover) {
+	.sl {
+		&-autocomplete {
+			&-item {
+				&:hover {
+					background-color: rgba(60 64 67 / 4%);
+				}
 			}
 		}
 	}

src/components/autocomplete/autocomplete.js

@@ -32,32 +32,34 @@ export default class Autocomplete {
 
 	onClickOnAutocomplete(e) {
 		const target = e.target
-		const isAutocompleteItem = validateTarget({
+		const isAutocompleteResult = validateTarget({
 			target,
 			selectorString: '.sl-autocomplete-item',
 			nodeName: 'div'
 		})
 
-		if (isAutocompleteItem) {
-			this.map.elements.autocomplete.classList.remove('sl-active')
-			this.map.elements.autocomplete.replaceChildren()
-			this.map.userPositionChecked = false
-
-			this.map.triggerRequest({
-				lat: parseFloat(target.getAttribute('data-lat')),
-				lng: parseFloat(target.getAttribute('data-lng'))
-			})
+		if (isAutocompleteResult) {
+			this.onClickOnAutocompleteResult()
 		}
 	}
 
+	onClickOnAutocompleteResult() {
+		this.map.elements.autocomplete.classList.remove('sl-active')
+		this.map.elements.autocomplete.replaceChildren()
+		this.map.userPositionChecked = false
+
+		this.map.requestStores({
+			lat: parseFloat(target.getAttribute('data-lat')),
+			lng: parseFloat(target.getAttribute('data-lng'))
+		})
+	}
+
 	onKeyupOnInputSearch(e) {
 		e.preventDefault()
 
 		if (e.target.value !== '') {
 			window.clearTimeout(this.timerAutocomplete)
-			this.timerAutocomplete = window.setTimeout(() => {
-				this.onFormSearchSubmit()
-			}, 200)
+			this.timerAutocomplete = window.setTimeout(() => this.onFormSearchSubmit(), 200)
 		}
 	}
 

src/components/loader/loader.css

@@ -23,14 +23,14 @@
 		--color2: #fc3;
 		--color3: #ea4c89;
 
-		transition: transform 150ms ease-in-out, opacity 150ms ease-in;
+		transition: transform var(--sl-transition), opacity var(--sl-transition);
 		display: block;
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 4px;
-		z-index: 10;
+		z-index: 500;
 		opacity: 0;
 
 		&.sl-active {

src/components/map/map.css

@@ -31,23 +31,21 @@
 		}
 
 		&.sl-error {
+			cursor: not-allowed;
+
 			svg {
 				opacity: 0.2;
 			}
 		}
 
 		&.sl-active svg {
-			fill: var(--sl-blue);
+			fill: var(--sl-markerGeolocationColor);
 		}
 	}
 
 	&-marker {
 		width: 20px;
 		height: 20px;
-
-		&.sl-marker-geolocation {
-			--sl-marker-fill: var(--sl-blue);
-		}
 	}
 }
 

src/components/map/templates/map.js

@@ -1,15 +1,12 @@
 import TemplateSidebar from 'components/sidebar/templates/sidebar'
+import locationSvg from 'shared/assets/svgs/location.svg'
 
 export default function TemplateMap() {
 	return `
 		<div class="storelocator">
 			${TemplateSidebar()}
 			<div id="sl-map" class="sl-map sl-active"></div>
-            <button class="sl-geolocButton">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                    <path d="M176 256c0-44.2 35.8-80 80-80s80 35.8 80 80-35.8 80-80 80-80-35.8-80-80zM256 0c17.7 0 32 14.33 32 32v34.65C368.4 80.14 431.9 143.6 445.3 224H480c17.7 0 32 14.3 32 32s-14.3 32-32 32h-34.7c-13.4 80.4-76.9 143.9-157.3 157.3V480c0 17.7-14.3 32-32 32s-32-14.3-32-32v-34.7C143.6 431.9 80.14 368.4 66.65 288H32c-17.67 0-32-14.3-32-32s14.33-32 32-32h34.65C80.14 143.6 143.6 80.14 224 66.65V32c0-17.67 14.3-32 32-32zM128 256c0 70.7 57.3 128 128 128s128-57.3 128-128-57.3-128-128-128-128 57.3-128 128z" />
-                </svg>
-            </button>
+            <button class="sl-geolocButton">${locationSvg}</button>
 		</div>
 	`
 }

src/components/nav/nav.css

@@ -19,7 +19,7 @@
 			width: 100%;
 			height: 100%;
 			position: relative;
-			color: var(--grey);
+			color: var(--sl-colorSecondary);
 			border: 0;
 			appearance: none;
 			font-size: 16px;
@@ -33,7 +33,7 @@
 			width: 50%;
 			height: 100%;
 			list-style-type: none;
-			border-bottom: 1px solid var(--grey);
+			border-bottom: 1px solid var(--sl-colorSecondary);
 
 			&.sl-active {
 				border-bottom: 2px solid #000;

src/components/popup/templates/popup.js

@@ -5,7 +5,7 @@ export default function TemplatePopup({ feature }) {
                 ${feature.properties.title}
             </span>
             <span class="sl-popup-address">
-                ${feature.properties?.address} ${feature.properties?.zipcode} $
+                ${feature.properties?.address} ${feature.properties?.zipcode}
                 ${feature.properties?.city}
             </span>
             <a class="sl-popup-phone" href="tel:${feature.properties.phone}">

src/components/sidebar/sidebar.css

@@ -30,7 +30,7 @@
 			padding: 20px;
 			font-size: 13px;
 			line-height: 20px;
-			color: var(--grey);
+			color: var(--sl-colorSecondary);
 			font-style: italic;
 		}
 	}
@@ -40,11 +40,11 @@
 	.sl {
 		&-sidebar {
 			position: absolute;
-			top: var(--offsetSidebar);
-			left: var(--offsetSidebar);
-			width: var(--widthFormSearch);
+			top: 15px;
+			left: 15px;
+			width: 350px;
 			height: auto;
-			max-height: calc(100% - calc(var(--offsetSidebar) * 2));
+			max-height: calc(100% - calc(15px * 2));
 			border-radius: 10px;
 			background-color: #fff;
 			box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0 rgb(0 0 0 / 2%);

src/core/css/vars.css

@@ -1,15 +1,8 @@
-:root {
-	--offsetSidebar: 15px;
-	--breakpointModile: 767px;
-	--widthFormSearch: 350px;
-	--heightFormSearch: 161px;
-	--colorDetailStore: #000;
-	--colorMobileNav: #b9b8b8;
-	--grey: #b9b8b8;
-
+.storelocator {
+	--sl-markerSearchColor: #107a8b;
+	--sl-markerGeolocationColor: #1da1f2;
+	--sl-colorSecondary: #b9b8b8;
 	--sl-transition: 0.25s ease;
-
-	--sl-blue: #1da1f2;
 }
 
 @custom-media --media-tablet only screen and (min-width: 750px);