Merge pull request #13 from UVLabs/development

chore: syncing v1.3.2

.distignore

@@ -1,15 +1,23 @@
 composer.json
 composer.lock
-todo.txt
-artifact
-dist
-bin
+package.json
+package-lock.json
+node_modules
+.vscode
+.parcel-cache
 .git
 .DS_Store
 .distignore
 .distignore-github-lite
 .gitignore
+todo.txt
+artifact
+dist
+bin
 phpcs.xml
 lpac.zip
 logs
-.vscode
+assets/public/js/maps/*.js
+assets/pro/public/js/maps/*.js
+assets/public/js/maps/build/*.map
+assets/pro/public/js/maps/build/*.map

.distignore-github-lite

@@ -5,4 +5,7 @@ dist
 .DS_Store
 lpac.zip
 logs
-.vscode
+.vscode
+.parcel-cache
+node_modules
+assets/public/js/maps/build

.gitignore

@@ -5,4 +5,8 @@ dist
 artifact
 lpac.zip
 logs
-.vscode
+.vscode
+node_modules
+.parcel-cache
+assets/public/js/maps/build/
+assets/pro/public/js/maps/build/

assets/admin/css/lpac-admin.css

@@ -0,0 +1,10 @@
+/**
+ * All of the CSS for your admin-specific functionality should be
+ * included in this file.
+ */
+ .post-type-shop_order .lpac-map .gm-style-iw-d p{
+	font-size: 1.2em;
+	font-weight: 800;
+	margin: 5px;
+	text-align: center;
+ }

assets/admin/js/order-map.js

@@ -0,0 +1,49 @@
+var map_id = '';
+
+if (typeof lpac_pro_js !== 'undefined') {
+	map_id = lpac_pro_js.map_id;
+}
+
+function lpacSetupShopOrderMap() {
+
+	/**
+	 * This variable is defined in lpac_output_custom_order_details_metabox().
+	 * 
+	 * It does not exist when in cases where lat and long might not be present for an order.
+	 */
+	if (typeof (locationDetails) === 'undefined' || locationDetails === null) {
+		return;
+	}
+
+	const map = new google.maps.Map(
+		document.querySelector(".lpac-map"),
+		{
+			center: { lat: locationDetails.latitude, lng: locationDetails.longitude },
+			zoom: 16,
+			streetViewControl: false,
+			clickableIcons: false,
+			backgroundColor: '#eee', //loading background color
+			mapId: map_id,
+		}
+	);
+
+	const latlng = {
+		lat: locationDetails.latitude,
+		lng: locationDetails.longitude,
+	};
+
+	const marker = new google.maps.Marker(
+		{
+			position: latlng,
+			map: map,
+			cursor: 'default'
+		}
+	);
+
+	const infowindow = new google.maps.InfoWindow();
+	infowindow.setContent(`<p> ${locationDetails.shipping_address_1} <br/> ${locationDetails.shipping_address_2} </p>`);
+	infowindow.open(map, marker);
+
+}
+
+lpacSetupShopOrderMap();

assets/public/css/lpac-public.css

@@ -0,0 +1,58 @@
+/**
+ * All of the CSS for your public-facing functionality should be
+ * included in this file.
+ */
+
+ .lpac-map{
+	 height: 400px;
+	 /* width: 100%; */
+ }
+
+ #lpac-find-location-btn{
+	 margin: 20px 0;
+ }
+
+ .hidden{
+	 display: none;
+ }
+
+ #lpac-map-instructions{
+	font-size: 12px;
+	margin: 10px;
+	text-align: center;
+ }
+
+ #lpac-find-location-btn-wrapper{
+	 display: flex;
+	 justify-content: center;
+ }
+
+ #lpac-saved-addresses{
+	 text-align: center;
+ }
+
+ .lpac-map-controls #lpac-saved-addresses{
+	margin: 20px 0;
+ }
+
+ .lpac-map-controls #lpac-saved-addresses ul{
+	list-style-type: none;
+	padding: 0;
+ }
+
+ .lpac-map-controls #lpac-saved-addresses ul li{
+	display: inline-block;
+	margin: 10px 10px 0 0;
+ }
+
+ /* Google maps info window */
+ .woocommerce-page .lpac-map .gm-style-iw-d p{
+	font-size: 1.2em;
+	margin-bottom: 0;
+
+ }
+ .woocommerce-view-order .lpac-map .gm-style-iw-d p, .woocommerce-order-received .lpac-map .gm-style-iw-d p{
+	font-weight: 800;
+	text-align: center;
+ }
+

includes/public/js/lpac-public.js → assets/public/js/lpac-public.js

@@ -33,35 +33,6 @@
 
 		function(){
 
-			var map_div   = document.querySelector( '#lpac-map-container' );
-			var map_shown = document.querySelector( '#lpac_is_map_shown' );
-			var map_present = true;
-			var map_visibility = '';
-
-			if( typeof( map_shown ) === 'undefined' || map_shown === null ){
-				console.log('LPAC: map_shown object not present, skipping...');
-				return;
-			}
-
-			/**
-			 * Detect if map is present and the display property
-			 */
-			if( typeof( map_div ) === 'undefined' || map_div === null ){
-				map_present = false;
-			}else{
-				map_visibility = map_div.style.display;
-			}
-
-			if ( map_present === false || map_visibility === 'none' ) {
-
-				if ( map_shown ) {
-					map_shown.value = 0
-				}
-
-			} else {
-				map_shown.value = 1
-			}
-
 		}
 	);
 

assets/public/js/maps/base-map.js

@@ -0,0 +1,45 @@
+let map_id = '';
+
+if (typeof lpac_pro_js !== 'undefined') {
+	map_id = lpac_pro_js.map_id;
+}
+
+/**
+ * Global map_options variable is set in Lpac\Views\Frontend::lpac_expose_map_settings_js
+ */
+if (typeof (map_options) !== 'undefined' && map_options !== null) {
+
+	/**
+	* <Global Settings>
+	*/
+	const map = new google.maps.Map(
+		document.querySelector(".lpac-map"),
+		{
+			center: { lat: map_options.lpac_map_default_latitude, lng: map_options.lpac_map_default_longitude },
+			zoom: map_options.lpac_map_zoom_level,
+			streetViewControl: false,
+			clickableIcons: map_options.lpac_map_clickable_icons,
+			backgroundColor: map_options.lpac_map_background_color, //loading background color
+			mapId: map_id,
+		}
+	);
+
+	/* Globally scoped so that only one marker can be added to map. */
+	const marker = new google.maps.Marker(
+		{
+			draggable: true,
+			map: map,
+		}
+	);
+
+	/* Globally scoped so that only one info window can be added to map. */
+	const infowindow = new google.maps.InfoWindow();
+
+	/* We need to set these variables to the window object or else parcel will break our script when transpiling */
+	window.lpac_map = map;
+	window.lpac_marker = marker;
+	window.lpac_infowindow = infowindow;
+
+} else {
+	console.log('LPAC: map_options object not present, skipping...')
+}