add current location widget

altrpnjs/app/altrp-templates/styles/elements/map.css

@@ -108,4 +108,8 @@
 
 .altrp-map__container {
     background-color: #dddddd;
+}
+
+.altrp-location__container {
+    background-color: #dddddd;
 }

altrpnjs/helpers/const/DEFAULT_REACT_ELEMENTS.ts

@@ -32,6 +32,7 @@ const DEFAULT_REACT_ELEMENTS = [
   'carousel',
   'map',
   'map_builder',
+  'location',
   'menu',
   'pie-diagram',
   'line-diagram',

altrpnjs/helpers/widgets-renders/renderLocation.ts

@@ -0,0 +1,47 @@
+import objectToStylesString from "../objectToStylesString"
+import getResponsiveSetting from "../getResponsiveSetting"
+//@ts-ignore
+export default function renderLocation(settings, device, context) {
+  const height = getResponsiveSetting(settings, 'style_height', device, {size: 400, unit: 'px'})
+  const margin = getResponsiveSetting(settings, 'style_margin', device, {top: 0, bottom: 0, left: 0, right: 0, unit: 'px'})
+
+  const styles = {
+    height: height.size + height.unit,
+    marginTop: margin?.top + margin?.unit,
+    marginBottom: margin?.bottom + margin?.unit,
+    marginLeft: margin?.left + margin?.unit,
+    marginRight: margin?.right + margin?.unit,
+    pointerEvents: 'auto',
+  }
+
+  return `
+    <div class="altrp-location" style="${objectToStylesString(styles)}">
+      <div class="altrp-location__container leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" style="height: ${styles.height};">
+        <div class="leaflet-control-container">
+          <div class="leaflet-top leaflet-left">
+            <div class="leaflet-control-zoom leaflet-bar leaflet-control">
+              <a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">
+                −
+              </a>
+            </div>
+            <div class="leaflet-draw leaflet-control"></div>
+          </div>
+          <div class="leaflet-top leaflet-right"></div>
+          <div class="leaflet-bottom leaflet-left"></div>
+          <div class="leaflet-bottom leaflet-right">
+            <div class="leaflet-control-attribution leaflet-control">
+              <a href="https://leafletjs.com" title="A JS library for interactive maps">
+                Leaflet
+              </a>
+              | ©
+              <a href="http://osm.org/copyright">
+                OpenStreetMap
+              </a>
+              contributors
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+}

altrpnjs/start/view.ts

@@ -11,6 +11,7 @@ import renderInputAccept from '../helpers/widgets-renders/renderInputAccept';
 import renderInputHidden from '../helpers/widgets-renders/renderInputHidden';
 import renderInputFile from '../helpers/widgets-renders/renderInputFile';
 import renderMap from '../helpers/widgets-renders/renderMap';
+import renderLocation from '../helpers/widgets-renders/renderLocation';
 import renderHeadingTypeAnimating from '../helpers/widgets-renders/renderHeadingTypeAnimating';
 import renderImageLightbox from '../helpers/widgets-renders/renderImageLightbox';
 import renderTree from '../helpers/widgets-renders/renderTree';
@@ -119,6 +120,7 @@ View.global('renderInputHidden', renderInputHidden)
 View.global('renderInputFile', renderInputFile)
 View.global('renderInputPagination', renderInputPagination)
 View.global('renderMap', renderMap)
+View.global('renderLocation', renderLocation)
 View.global('renderHeadingTypeAnimating', renderHeadingTypeAnimating)
 View.global('renderImageLightbox', renderImageLightbox)
 View.global('renderTree', renderTree)

app/Helpers/functions.php

@@ -1050,6 +1050,7 @@ function _extractElementsNames( $element,  &$elementNames, $only_react_elements
     'map',
     'text',
     'map_builder',
+    'location',
     'menu',
     'pie-diagram',
     'line-diagram',

resources/modules/editor/src/js/classes/elements/Location.js

@@ -0,0 +1,107 @@
+import BaseElement from "./BaseElement";
+import LocationIcon from "../../../svgs/location.svg";
+import { advancedTabControllers } from "../../decorators/register-controllers";
+import {
+  CONTROLLER_SWITCHER,
+  CONTROLLER_NUMBER,
+  CONTROLLER_DIMENSIONS,
+  CONTROLLER_SLIDER,
+  CONTROLLER_EVENT_HANDLER,
+  TAB_CONTENT,
+  TAB_STYLE,
+} from "../modules/ControllersManager";
+
+class Location extends BaseElement {
+  static getName() {
+    return "location";
+  }
+
+  static getTitle() {
+    return "Location";
+  }
+
+  static getIconComponent() {
+    return LocationIcon;
+  }
+
+  static getType() {
+    return "widget";
+  }
+
+  static getGroup() {
+    return "Advanced";
+  }
+
+  _registerControls() {
+    if (this.controllersRegistered) {
+      return;
+    }
+
+    this.startControlSection("content_section", {
+      tab: TAB_CONTENT,
+      label: "Content",
+    });
+
+    this.addControl("canvas", {
+      type: CONTROLLER_SWITCHER,
+      label: "Canvas",
+      default: true,
+      locked: true,
+    });
+
+    this.addControl("zoom", {
+      type: CONTROLLER_NUMBER,
+      label: "Zoom",
+      default: 6,
+      locked: true,
+    });
+
+    this.addControl("handler", {
+      type: CONTROLLER_EVENT_HANDLER,
+      label: "Event handler",
+      default: {
+        evt: "",
+        params: "",
+      },
+      locked: true,
+    });
+
+    this.endControlSection();
+
+    this.startControlSection("style", {
+      tab: TAB_STYLE,
+      label: "Size",
+    });
+
+    this.addControl("style_height", {
+      type: CONTROLLER_SLIDER,
+      label: "height",
+      default: {
+        size: 400,
+        unit: "px",
+      },
+      units: ["px", "%", "vh"],
+      max: 1000,
+      min: 0,
+      locked: true,
+    });
+
+    this.addControl("style_margin", {
+      type: CONTROLLER_DIMENSIONS,
+      label: "Margin",
+      default: {
+        top: 10,
+        right: 10,
+        bottom: 10,
+        left: 10,
+        unit: "px",
+        bind: true,
+      },
+      units: ["px", "%", "vh"],
+      locked: true,
+    });
+
+    advancedTabControllers(this);
+  }
+}
+export default Location;

resources/modules/editor/src/js/components/ElementWrapper.js

@@ -36,6 +36,7 @@ import { getPostsStyles } from "../../../../front-app/src/js/components/helpers/
 import FormComponent from "./widgets/styled-components/FormComponent";
 import MapComponent from "./widgets/styled-components/MapComponent";
 import MapConstructorComponent from "./widgets/styled-components/MapConstructorComponent";
+import LocationComponent from "./widgets/styled-components/LocationComponent";
 import AdvancedComponent from "./widgets/styled-components/AdvancedComponent";
 import {
   getEditor,
@@ -326,6 +327,9 @@ const ElementWrapperGlobalStyles = window.createGlobalStyle`${({
     case "map_builder":
       styles += `.${prefix}${elementId} {${MapConstructorComponent(settings)}}`;
       break;
+    case "location":
+      styles += `.${prefix}${elementId} {${LocationComponent(settings)}}`;
+      break;
     case "scheduler":
       styles += `.${prefix}${elementId} {${getSchedulerStyles(settings, elementId)}}`;
       break;

resources/modules/editor/src/js/components/altrp-location/AltrpLocation.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import LocationDesigner from "./LocationDesigner";
+
+function AltrpLocation({ element, settings, classes }) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentPosition, setCurrentPosition] = useState({ latitude: 0, longitude: 0 });
+  const {
+    canvas,
+    style_height = {},
+    style_margin = {}
+  } = settings;
+
+  useEffect(() => {
+    if (window) {
+      window.navigator.geolocation.getCurrentPosition(pos => {
+        setCurrentPosition({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude
+        });
+        setIsLoading(false);
+      })
+    }
+  }, [window]);
+
+  return (
+    <LocationDesigner
+      classes={classes}
+      element={element}
+      isTransformLatLng={true}
+      style={{
+        pointerEvents: window.altrpHelpers.isEditor() ? "none" : "auto",
+        height: (style_height.size + style_height.unit) || "200px",
+        marginTop: (style_margin.top + style_margin.unit) || "10px",
+        marginBottom: (style_margin.bottom + style_margin.unit) || "10px",
+        marginLeft: (style_margin.left + style_margin.unit) || "10px",
+        marginRight: (style_margin.right + style_margin.unit) || "10px"
+      }}
+      isLoading={isLoading}
+      settings={settings}
+      preferCanvas={canvas}
+      zoom={+element.getLockedSettings("zoom")}
+      center={[currentPosition.latitude, currentPosition.longitude]}
+    />
+  );
+}
+
+export default AltrpLocation;

resources/modules/editor/src/js/components/altrp-location/DivIcon.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { divIcon } from "leaflet/src/layer/marker/DivIcon";
+import MemoHomeIcon from "./Icons/HomeIcon";
+import MemoMarkerIcon from "./Icons/MarkerIcon";
+import MemoGoogleMarkerIcon from "./Icons/GoogleMarkerIcon";
+
+export const iconTypes = {
+  Marker: MemoMarkerIcon,
+  GoogleMarker: MemoGoogleMarkerIcon,
+  Home: MemoHomeIcon,
+};
+
+export const customIcon = (
+  name = "GoogleMarker",
+  color = "#3388ff",
+  size = [36, 36]
+) => {
+  const Icon = iconTypes[name] ?? iconTypes.GoogleMarker;
+
+  const html = renderToStaticMarkup(
+    <Icon fill={color} width={size[0]} height={size[1]} />
+  );
+
+  return new divIcon({ html });
+};

resources/modules/editor/src/js/components/altrp-location/Icons/GoogleMarkerIcon.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+function GoogleMarkerIcon(props) {
+  return (
+    <svg height="1em" version="1.1" width="1em" {...props}>
+      <g transform="translate(0 -1028.4)">
+        <path d="m12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z" fill="#e74c3c" transform="translate(0 1028.4)" /><path d="m12 3c-2.7614 0-5 2.2386-5 5 0 2.761 2.2386 5 5 5 2.761 0 5-2.239 5-5 0-2.7614-2.239-5-5-5zm0 2c1.657 0 3 1.3431 3 3s-1.343 3-3 3-3-1.3431-3-3 1.343-3 3-3z" fill="#c0392b" transform="translate(0 1028.4)" />
+      </g>
+    </svg>
+  );
+}
+
+const MemoGoogleMarkerIcon = React.memo(GoogleMarkerIcon);
+export default MemoGoogleMarkerIcon;

resources/modules/editor/src/js/components/altrp-location/Icons/HomeIcon.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+function HomeIcon(props) {
+  return (
+    <svg viewBox="0 0 512 512" width="1em" height="1em" {...props}>
+      <path d="M471.982 417.008Q472 416.5 472 416a32.036 32.036 0 00-32-32V236l28.8-21.6a8 8 0 00-.08-12.859L400 151.322V64a8 8 0 008-8V24a8 8 0 00-8-8h-80a8 8 0 00-8 8v32a8 8 0 008 8v28.861l-59.28-43.32a8 8 0 00-9.44 0l-208 152a8 8 0 00-.08 12.859L72 236v148a32.036 32.036 0 00-32 32q0 .5.018 1.008A32 32 0 0048 480h416a32 32 0 007.982-62.992zM328 32h64v16h-64zm8 72V64h48v75.63L335.243 104zm-80-38.092l194.555 142.176-18.628 13.971L260.706 97.53a8 8 0 00-9.412 0L80.073 222.055l-18.628-13.971zM32 448a16.019 16.019 0 0115.76-16h.019c.409.057.818.106 1.235.133a8 8 0 008.023-10.716A15.727 15.727 0 0156 416a16.019 16.019 0 0116-16v64H48a16.019 16.019 0 01-16-16zm344 16h-96V288h96zm16 0V280a8 8 0 00-8-8H272a8 8 0 00-8 8v184H88V236.074l168-122.182 168 122.182V464zm72 0h-24v-64a16.019 16.019 0 0116 16 15.727 15.727 0 01-1.037 5.421 8 8 0 008.023 10.716c.417-.027.826-.076 1.235-.133h.019a16 16 0 01-.24 32z" />
+      <path d="M224 272h-96a8 8 0 00-8 8v112a8 8 0 008 8h96a8 8 0 008-8V280a8 8 0 00-8-8zm-8 56h-32v-40h32zm-48-40v40h-32v-40zm-32 56h32v40h-32zm48 40v-40h32v40z" />
+      <circle cx={304} cy={368} r={8} transform="rotate(-67.5 304 368)" />
+    </svg>
+  );
+}
+
+const MemoHomeIcon = React.memo(HomeIcon);
+export default MemoHomeIcon;

resources/modules/editor/src/js/components/altrp-location/Icons/MarkerIcon.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+function MarkerIcon(props) {
+  return (
+    <svg height="1em" viewBox="0 0 511.999 511.999" width="1em" {...props}>
+      <path
+        d="M256 511.999a15.001 15.001 0 01-12.72-7.05l-73.972-118.353C98.5 353.119 53 281.565 53 203 53 91.065 144.065 0 256 0s203 91.065 203 203c0 78.565-45.501 150.119-116.309 183.596l-73.972 118.353a15.001 15.001 0 01-12.719 7.05z"
+        fill="#fdbf00"
+      />
+      <path
+        d="M256 0c-.001 0-.001 0 0 0v511.999c5.172 0 9.979-2.665 12.72-7.05l73.972-118.353C413.499 353.119 459 281.565 459 203 459 91.065 367.934 0 256 0z"
+        fill="#ff8856"
+      />
+      <path
+        d="M256.5 344.73c-77.875 0-141.23-63.356-141.23-141.23S178.625 62.27 256.5 62.27s141.23 63.356 141.23 141.23-63.355 141.23-141.23 141.23z"
+        fill="#fff4f4"
+      />
+      <path
+        d="M256.5 282c-33.115 0-60.056-26.941-60.056-60.056 0-17.118 12.55-41.082 23.077-58.171 5.292-8.591 11.038-16.987 16.18-23.64C242.548 131.272 248.047 125 256.5 125s13.952 6.272 20.799 15.133c5.142 6.653 10.888 15.049 16.18 23.64 10.527 17.089 23.077 41.054 23.077 58.171C316.555 255.059 289.615 282 256.5 282z"
+        fill="#ff435b"
+      />
+      <path
+        d="M256.5 62.269c-.167 0-.333.006-.5.006v282.448c.167.001.333.006.5.006 77.875 0 141.23-63.356 141.23-141.23S334.375 62.269 256.5 62.269z"
+        fill="#f6efea"
+      />
+      <path
+        d="M293.478 163.772c-5.292-8.591-11.038-16.987-16.18-23.64-6.847-8.861-12.346-15.133-20.799-15.133-.17 0-.332.018-.5.023v156.965c.167.001.333.013.5.013 33.115 0 60.056-26.941 60.056-60.056 0-17.118-12.55-41.082-23.077-58.172z"
+        fill="#cc2e43"
+      />
+    </svg>
+  );
+}
+
+const MemoMarkerIcon = React.memo(MarkerIcon);
+export default MemoMarkerIcon;

resources/modules/editor/src/js/components/altrp-location/Loader.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Spinner from "react-bootstrap/Spinner";
+
+function Loader() {
+  return (
+    <div className="altrp-location__preloader">
+      <Spinner animation="border" role="status">
+        <span className="sr-only">Loading...</span>
+      </Spinner>
+    </div>
+  );
+}
+
+export default Loader;