@kizmann/pico-js 1.0.13 → 2.0.0

package/src/{library/map.js → wip/Map.js}

@@ -1,10 +1,10 @@
-import { Obj, Arr, Any, Dom, Event, UUID } from "../index.js";
+import { go, Obj, Arr, Mix, Dom, Event, Hash } from "#src/index.esm.js";
 
 /**
  * @const {object} google
  */
 
-export default class Map
+export class PicoMap
 {
     map = null;
 
@@ -24,9 +24,17 @@ export default class Map
 
     static closeInfoWindows = true;
 
+    /**
+     * Create map instance
+     *
+     * @example new Map("#map", { lat: 0, lng: 0 })
+     *
+     * @param {any} el Target element
+     * @param {any} [options] Map options
+     */
     constructor(el, options = {})
     {
-        if ( ! window.google ) {
+        if ( ! globalThis.google ) {
             throw new Error('Google Maps is required for pi.Map');
         }
 
@@ -39,9 +47,17 @@ export default class Map
         options = Obj.assign({ gestureHandling: 'cooperative', scrollwheel: null, zoom: 12, center },
             Obj.except(options, ['lat', 'lng']));
 
-        this.map = new window.google.maps.Map(Dom.find(el).get(0), options)
+        this.map = new globalThis.google.maps.Map(Dom.find(el).get(0), options)
     }
 
+    /**
+     * Set global map style
+     *
+     * @example Map.setMapStyle(style)
+     *
+     * @param {Array<any>} [style] Style array
+     * @returns {this} Current class
+     */
     static setMapStyle(style = [])
     {
         Map.mapStyle = style;
@@ -49,9 +65,19 @@ export default class Map
         return this;
     }
 
+    /**
+     * Set marker style
+     *
+     * @example Map.setMarkerStyle("default", { default: "icon.png" })
+     *
+     * @param {string} key Style key
+     * @param {any} [style] Style options
+     * @param {any} [extra] Extra options
+     * @returns {this} Current class
+     */
     static setMarkerStyle(key, style = {}, extra = {})
     {
-        if ( ! window.google ) {
+        if ( ! globalThis.google ) {
             throw new Error('Google Maps is required for pi.Map');
         }
 
@@ -70,13 +96,13 @@ export default class Map
         let final = {};
 
         // Marker size
-        let size = new window.google.maps.Size(style.width, style.height);
+        let size = new globalThis.google.maps.Size(style.width, style.height);
 
         // Point position
-        let origin = new window.google.maps.Point(0, 0);
+        let origin = new globalThis.google.maps.Point(0, 0);
 
         // Point position
-        let anchor = new window.google.maps.Point(style.width / 2, style.height);
+        let anchor = new globalThis.google.maps.Point(style.width / 2, style.height);
 
         final.default = {
             url: style.default, size: size, origin: origin, anchor: anchor, scaledSize: size
@@ -107,13 +133,23 @@ export default class Map
         return this;
     }
 
+    /**
+     * Cluster map markers
+     *
+     * @example map.clusterMarkers()
+     *
+     * @param {any} [options] Cluster options
+     * @param {any} [filter] Marker filter
+     * @param {boolean} [allowCreate] Create cluster
+     * @returns {void} No return value
+     */
     clusterMarkers(options = {}, filter = null, allowCreate = true)
     {
         if ( ! this.cluster && ! allowCreate ) {
             return;
         }
 
-        if ( typeof window.MarkerClusterer === "undefined" ) {
+        if ( typeof globalThis.MarkerClusterer === "undefined" ) {
             return console.error('Google Maps Cluster library not laoded!');
         }
 
@@ -125,7 +161,7 @@ export default class Map
             this.cluster.clearMarkers();
         }
 
-        if ( Any.isFunction(filter) ) {
+        if ( Mix.isFunction(filter) ) {
             this.clusterFilter = filter;
         }
 
@@ -133,26 +169,35 @@ export default class Map
 
             let visible = this.getMarkerVisibility(item.key);
 
-            if ( ! Any.isFunction(this.clusterFilter) ) {
+            if ( ! Mix.isFunction(this.clusterFilter) ) {
                 return visible;
             }
 
             return visible && this.clusterFilter.call(this, item);
         });
 
-        this.cluster = new window.MarkerClusterer(this.map, Arr.each(markers, (item) => item.marker),
+        this.cluster = new globalThis.MarkerClusterer(this.map, Arr.each(markers, (item) => item.marker),
             this.clusterOptions = options);
     }
 
+    /**
+     * Apply style to marker
+     *
+     * @example map.styleMarker("m1", "hover")
+     *
+     * @param {string} key Marker key
+     * @param {any} [type] Style type
+     * @returns {void} No return value
+     */
     styleMarker(key, type = null)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
-        if ( Any.isEmpty(type) ) {
+        if ( Mix.isEmpty(type) ) {
             type = this.getInfoVisibility(key) ? 'active' : 'default';
         }
 
@@ -163,38 +208,72 @@ export default class Map
         item.marker.setIcon(Obj.get(Map.markerStyles, [item.style, type]));
     }
 
+    /**
+     * Get marker by key
+     *
+     * @example map.getMarker("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {any} Marker object
+     */
     getMarker(key)
     {
         return Obj.get(this.markers, key);
     }
 
+    /**
+     * Check if marker is visible
+     *
+     * @example map.getMarkerVisibility("m1") // => true
+     *
+     * @param {string} key Marker key
+     * @param {boolean} [fallback] Fallback value
+     * @returns {boolean} Visibility state
+     */
     getMarkerVisibility(key, fallback = false)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return fallback;
         }
 
         return item.marker.getVisible();
     }
 
+    /**
+     * Get marker position
+     *
+     * @example map.getMarkerPositon("m1") // => LatLng
+     *
+     * @param {string} key Marker key
+     * @param {any} [fallback] Fallback value
+     * @returns {any} Position object
+     */
     getMarkerPositon(key, fallback = null)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return fallback;
         }
 
         return item.marker.getPosition();
     }
 
+    /**
+     * Toggle marker visibility
+     *
+     * @example map.toggleMarker("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {boolean|void} Visibility state
+     */
     toggleMarker(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
@@ -205,11 +284,19 @@ export default class Map
         return this.showMarker(key);
     }
 
+    /**
+     * Show marker on map
+     *
+     * @example map.showMarker("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {boolean|void} Previous state
+     */
     showMarker(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
@@ -222,11 +309,19 @@ export default class Map
         return hidden;
     }
 
+    /**
+     * Hide marker on map
+     *
+     * @example map.hideMarker("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {boolean|void} Previous state
+     */
     hideMarker(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
@@ -241,11 +336,19 @@ export default class Map
         return visible;
     }
 
+    /**
+     * Marker hover enter
+     *
+     * @example map.enterMarker("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {this|void} Current instance
+     */
     enterMarker(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
@@ -260,11 +363,19 @@ export default class Map
         return this;
     }
 
+    /**
+     * Marker hover leave
+     *
+     * @example map.leaveMarker("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {this|void} Current instance
+     */
     leaveMarker(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
@@ -279,22 +390,39 @@ export default class Map
         return this;
     }
 
+    /**
+     * Check if info is open
+     *
+     * @example map.getInfoVisibility("m1") // => true
+     *
+     * @param {string} key Marker key
+     * @param {boolean} [fallback] Fallback value
+     * @returns {boolean} Visibility state
+     */
     getInfoVisibility(key, fallback = false)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) || ! Obj.has(item, 'info') ) {
+        if ( Mix.isEmpty(item) || ! Obj.has(item, 'info') ) {
             return fallback;
         }
 
         return !! item.info.getMap();
     }
 
+    /**
+     * Toggle info window
+     *
+     * @example map.toggleInfo("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {boolean|void} Visibility state
+     */
     toggleInfo(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
@@ -305,11 +433,19 @@ export default class Map
         return this.openInfo(key);
     }
 
+    /**
+     * Open info window
+     *
+     * @example map.openInfo("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {boolean|void} Previous state
+     */
     openInfo(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`InfoWindow "${key}" not found`);
         }
 
@@ -320,14 +456,14 @@ export default class Map
         let hidden = ! item.info.getMap();
 
         if ( Map.closeInfoWindows ) {
-            Obj.each(Any.keys(this.markers), this.closeInfo.bind(this));
+            Obj.each(Mix.keys(this.markers), this.closeInfo.bind(this));
         }
 
         if ( hidden ) {
             item.info.open(this.map, item.marker);
         }
 
-        if ( Any.isFunction(item.onOpen) ) {
+        if ( Mix.isFunction(item.onOpen) ) {
             item.onOpen(item);
         }
 
@@ -336,11 +472,19 @@ export default class Map
         return hidden;
     }
 
+    /**
+     * Close info window
+     *
+     * @example map.closeInfo("m1")
+     *
+     * @param {string} key Marker key
+     * @returns {boolean|void} Previous state
+     */
     closeInfo(key)
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`InfoWindow "${key}" not found`);
         }
 
@@ -354,7 +498,7 @@ export default class Map
             item.info.close();
         }
 
-        if ( Any.isFunction(item.onClose) ) {
+        if ( Mix.isFunction(item.onClose) ) {
             item.onClose(item);
         }
 
@@ -363,10 +507,19 @@ export default class Map
         return visible;
     }
 
+    /**
+     * Create map marker
+     *
+     * @example map.createMarker("m1", { lat: 0, lng: 0 })
+     *
+     * @param {any} [key] Marker key
+     * @param {any} [options] Marker options
+     * @returns {any} Marker object
+     */
     createMarker(key = null, options = {})
     {
-        if ( Any.isEmpty(key) ) {
-            key = UUID();
+        if ( Mix.isEmpty(key) ) {
+            key = Hash.uuid();
         }
 
         let item = { key };
@@ -391,7 +544,7 @@ export default class Map
             item.style = options.style;
         }
 
-        item.marker = new window.google.maps.Marker(options);
+        item.marker = new globalThis.google.maps.Marker(options);
 
         if ( !options.visible ) {
             item.marker.setVisible(false);
@@ -422,7 +575,7 @@ export default class Map
         // Add marker default style
         item.marker.addListener('mouseout', () => this.leaveMarker(key));
 
-        item.info = new window.google.maps.InfoWindow({
+        item.info = new globalThis.google.maps.InfoWindow({
             content: '<div class="gw-i-html">' + Obj.get(options, 'html') + '</div>'
         });
 
@@ -437,17 +590,35 @@ export default class Map
         return Obj.get(this.markers, key);
     }
 
+    /**
+     * Set marker position
+     *
+     * @example map.setMarkerPosition("m1", { lat: 0, lng: 0 })
+     *
+     * @param {string} key Marker key
+     * @param {any} [options] Position options
+     * @returns {void} No return value
+     */
     setMarkerPosition(key, options = {})
     {
         let item = Obj.get(this.markers, key);
 
-        if ( Any.isEmpty(item) ) {
+        if ( Mix.isEmpty(item) ) {
             return console.error(`Marker "${key}" not found`);
         }
 
         item.marker.setPosition(options);
     }
 
+    /**
+     * Set marker by address
+     *
+     * @example map.setMarkerByAddress("m1", "Address")
+     *
+     * @param {string} key Marker key
+     * @param {any} address Search address
+     * @returns {Promise<any>} Response promise
+     */
     setMarkerByAddress(key, address)
     {
         return this.getLocationByAddress(address, (res) => {
@@ -455,9 +626,18 @@ export default class Map
         });
     }
 
+    /**
+     * Get location by address
+     *
+     * @example map.getLocationByAddress("Address")
+     *
+     * @param {any} address Search address
+     * @param {function} [callback] Success callback
+     * @returns {Promise<any>} Response promise
+     */
     getLocationByAddress(address, callback = null)
     {
-        let geocoderService = new window.google.maps.Geocoder();
+        let geocoderService = new globalThis.google.maps.Geocoder();
 
         let geocoderPromise = (resolve, reject) => {
 
@@ -480,16 +660,24 @@ export default class Map
         return new Promise(geocoderPromise);
     }
 
+    /**
+     * Show markers on map
+     *
+     * @example map.showMarkers()
+     *
+     * @param {any} [filter] Marker filter
+     * @returns {this} Current instance
+     */
     showMarkers(filter = null)
     {
         let markers = this.markers;
 
-        if ( ! Any.isEmpty(filter) ) {
+        if ( ! Mix.isEmpty(filter) ) {
             markers = Obj.filter(this.markers, filter);
         }
 
         if ( Map.hideMarkers ) {
-            Obj.each(Any.keys(this.markers), this.hideMarker.bind(this));
+            Obj.each(Mix.keys(this.markers), this.hideMarker.bind(this));
         }
 
         Obj.each(markers, (item) => this.showMarker(item.key));
@@ -499,15 +687,23 @@ export default class Map
         return this;
     }
 
+    /**
+     * Get marker boundary
+     *
+     * @example map.getMarkerBoundry() // => LatLngBounds
+     *
+     * @param {any} [filter] Marker filter
+     * @returns {any} Boundary object
+     */
     getMarkerBoundry(filter = null)
     {
         let markers = this.markers;
 
-        if ( ! Any.isEmpty(filter) ) {
+        if ( ! Mix.isEmpty(filter) ) {
             markers = Obj.filter(this.markers, filter);
         }
 
-        let boundry = new window.google.maps.LatLngBounds();
+        let boundry = new globalThis.google.maps.LatLngBounds();
 
         Obj.each(markers, (item) => {
             if ( item.marker.getVisible() ) {
@@ -518,6 +714,16 @@ export default class Map
         return boundry;
     }
 
+    /**
+     * Focus markers on map
+     *
+     * @example map.focusMarkers()
+     *
+     * @param {any} [filter] Marker filter
+     * @param {number} [maxZoom] Max zoom level
+     * @param {number} [boundSpace] Viewport space
+     * @returns {this} Current instance
+     */
     focusMarkers(filter = null, maxZoom = 14, boundSpace = 15)
     {
         let boundry = this.getMarkerBoundry(filter);
@@ -535,13 +741,21 @@ export default class Map
         return this;
     }
 
+    /**
+     * Render directions on map
+     *
+     * @example map.renderDirections({ origin: "A", destination: "B" })
+     *
+     * @param {any} options Render options
+     * @returns {Promise<any>} Response promise
+     */
     renderDirections(options)
     {
         // Get directions service
-        let directionsService = new window.google.maps.DirectionsService();
+        let directionsService = new globalThis.google.maps.DirectionsService();
 
         // Get directions renderer
-        let directionsRenderer = new window.google.maps.DirectionsRenderer();
+        let directionsRenderer = new globalThis.google.maps.DirectionsRenderer();
 
         if ( ! Obj.has(options, 'map') ) {
             options.map = this.map;
@@ -582,3 +796,5 @@ export default class Map
     }
 
 }
+
+export default PicoMap;