iticket-seatingplan-dev 1.6.1 → 1.6.3

package/dist/components/Control.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _leaflet = _interopRequireDefault(require("leaflet"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right"
+};
+const Control = props => {
+  var _props$container;
+  const [portalRoot, setPortalRoot] = _react.default.useState(document.createElement("div"));
+  const positionClass = props.position && POSITION_CLASSES[props.position] || POSITION_CLASSES.topright;
+  const controlContainerRef = /*#__PURE__*/_react.default.createRef();
+  const map = (0, _reactLeaflet.useMap)();
+
+  /**
+   * Whenever the control container ref is created,
+   * Ensure the click / scroll propagation is removed
+   * This way click/scroll events do not bubble down to the map
+   */
+  _react.default.useEffect(() => {
+    if (controlContainerRef.current !== null) {
+      _leaflet.default.DomEvent.disableClickPropagation(controlContainerRef.current);
+      _leaflet.default.DomEvent.disableScrollPropagation(controlContainerRef.current);
+    }
+  }, [controlContainerRef]);
+
+  /**
+   * Whenever the position is changed, go ahead and get the container of the map and the first
+   * instance of the position class in that map container
+   * Fixes #17
+   */
+  _react.default.useEffect(() => {
+    const mapContainer = map.getContainer();
+    const targetDiv = mapContainer.getElementsByClassName(positionClass);
+    setPortalRoot(targetDiv[0]);
+  }, [positionClass]);
+
+  /**
+   * Whenever the portal root is complete,
+   * append or prepend the control container to the portal root
+   */
+  _react.default.useEffect(() => {
+    if (portalRoot !== null) {
+      if (props.prepend !== undefined && props.prepend === true) {
+        portalRoot.prepend(controlContainerRef.current);
+      } else {
+        portalRoot.append(controlContainerRef.current);
+      }
+    }
+  }, [portalRoot, props.prepend, controlContainerRef]);
+
+  /**
+   * Concatenate the props.container className to the class of the control div
+   */
+  const className = (((_props$container = props.container) === null || _props$container === void 0 || (_props$container = _props$container.className) === null || _props$container === void 0 ? void 0 : _props$container.concat(" ")) || "") + "leaflet-control";
+
+  /**
+   * Render
+   */
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, props.container, {
+    ref: controlContainerRef,
+    className: className
+  }), props.children);
+};
+var _default = exports.default = Control;

package/dist/components/Map.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Map;
-require("leaflet-gesture-handling/dist/leaflet-gesture-handling.css");
+require("./styles/gestureHandling.css");
 require("leaflet-draw/dist/leaflet.draw.css");
 var _react = _interopRequireWildcard(require("react"));
 var _reactLeaflet = require("react-leaflet");
 var L = _interopRequireWildcard(require("leaflet"));
 var _reactLeafletDraw = require("react-leaflet-draw");
-var _leafletGestureHandling2 = require("leaflet-gesture-handling");
-var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
+var _gestureHandling2 = require("./gestureHandling");
+var _Control = _interopRequireDefault(require("./Control"));
 var _encodedSvgs = require("./assets/encodedSvgs");
 var _utils = require("../utils");
 var _PriceButton = _interopRequireDefault(require("./PriceButton"));
@@ -183,7 +183,7 @@ function Map(_ref) {
   // to allow users to scroll past the map when it's not full screen.
   (0, _react.useEffect)(() => {
     if (!isFullScreen) {
-      map.addHandler("gestureHandling", _leafletGestureHandling2.GestureHandling);
+      map.addHandler("gestureHandling", _gestureHandling2.GestureHandling);
       // @ts-ignore
       map.gestureHandling.enable();
     }
@@ -195,7 +195,7 @@ function Map(_ref) {
       map.dragging.disable();
     }
   }, [mode, map]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Control.default, {
     position: "bottomright"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "legendBox"
@@ -236,7 +236,7 @@ function Map(_ref) {
     src: _encodedSvgs.userIcon,
     width: 15,
     height: 15
-  }), /*#__PURE__*/_react.default.createElement("p", null, "membership seats"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  }), /*#__PURE__*/_react.default.createElement("p", null, "membership seats"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)))), /*#__PURE__*/_react.default.createElement(_Control.default, {
     position: "topleft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "extra-controls"
@@ -266,7 +266,7 @@ function Map(_ref) {
     style: {
       height: "17px"
     }
-  })))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  })))), /*#__PURE__*/_react.default.createElement(_Control.default, {
     position: "topleft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "extra-controls full-screen-control"
@@ -281,7 +281,7 @@ function Map(_ref) {
     style: {
       height: "24px"
     }
-  })))), canMultiSelect && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  })))), canMultiSelect && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Control.default, {
     position: "bottomleft"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "extra-controls multi-select-control"
@@ -361,7 +361,7 @@ function Map(_ref) {
     onMounted: drawInstance => {
       drawRef.current = drawInstance;
     }
-  }))), /*#__PURE__*/_react.default.createElement(_reactLeafletCustomControl.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_Control.default, {
     position: "topright"
   }, /*#__PURE__*/_react.default.createElement("button", {
     title: "Close full screen",

package/dist/components/gestureHandling.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GestureHandling = void 0;
+var L = _interopRequireWildcard(require("leaflet"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * * Leaflet Gesture Handling **
+ * * Version 1.1.8
+ */
+
+const LanguageContent = {
+  en: {
+    touch: "Use two fingers to move the map",
+    scroll: "Use ctrl + scroll to zoom the map",
+    scrollMac: "Use \u2318 + scroll to zoom the map"
+  }
+};
+L.Map.mergeOptions({
+  gestureHandlingOptions: {
+    text: {},
+    duration: 500
+  }
+});
+var draggingMap = false;
+var GestureHandling = exports.GestureHandling = L.Handler.extend({
+  addHooks: function addHooks() {
+    this._handleTouch = this._handleTouch.bind(this);
+    this._setupPluginOptions();
+    this._setLanguageContent();
+    this._disableInteractions();
+
+    //Uses native event listeners instead of L.DomEvent due to issues with Android touch events
+    //turning into pointer events
+    this._map._container.addEventListener("touchstart", this._handleTouch);
+    this._map._container.addEventListener("touchmove", this._handleTouch);
+    this._map._container.addEventListener("touchend", this._handleTouch);
+    this._map._container.addEventListener("touchcancel", this._handleTouch);
+    this._map._container.addEventListener("click", this._handleTouch);
+    L.DomEvent.on(this._map._container, "wheel", this._handleScroll, this);
+    L.DomEvent.on(this._map, "mouseover", this._handleMouseOver, this);
+    // removed this as it's triggering on canvas points
+    // L.DomEvent.on(this._map, "mouseout", this._handleMouseOut, this);
+
+    // Listen to these events so will not disable dragging if the user moves the mouse out the boundary of the map container whilst actively dragging the map.
+    L.DomEvent.on(this._map, "movestart", this._handleDragging, this);
+    L.DomEvent.on(this._map, "move", this._handleDragging, this);
+    L.DomEvent.on(this._map, "moveend", this._handleDragging, this);
+  },
+  removeHooks: function removeHooks() {
+    this._enableInteractions();
+    this._map._container.removeEventListener("touchstart", this._handleTouch);
+    this._map._container.removeEventListener("touchmove", this._handleTouch);
+    this._map._container.removeEventListener("touchend", this._handleTouch);
+    this._map._container.removeEventListener("touchcancel", this._handleTouch);
+    this._map._container.removeEventListener("click", this._handleTouch);
+    L.DomEvent.off(this._map._container, "wheel", this._handleScroll, this);
+    L.DomEvent.off(this._map, "mouseover", this._handleMouseOver, this);
+    L.DomEvent.off(this._map, "mouseout", this._handleMouseOut, this);
+    L.DomEvent.off(this._map, "movestart", this._handleDragging, this);
+    L.DomEvent.off(this._map, "move", this._handleDragging, this);
+    L.DomEvent.off(this._map, "moveend", this._handleDragging, this);
+  },
+  _handleDragging: function _handleDragging(e) {
+    if (e.type == "movestart" || e.type == "move") {
+      draggingMap = true;
+    } else if (e.type == "moveend") {
+      draggingMap = false;
+    }
+  },
+  _disableInteractions: function _disableInteractions() {
+    this._map.dragging.disable();
+    this._map.scrollWheelZoom.disable();
+    if (this._map.tap) {
+      this._map.tap.disable();
+    }
+  },
+  _enableInteractions: function _enableInteractions() {
+    this._map.dragging.enable();
+    this._map.scrollWheelZoom.enable();
+    if (this._map.tap) {
+      this._map.tap.enable();
+    }
+  },
+  _setupPluginOptions: function _setupPluginOptions() {
+    //For backwards compatibility, merge gestureHandlingText into the new options object
+    if (this._map.options.gestureHandlingText) {
+      this._map.options.gestureHandlingOptions.text = this._map.options.gestureHandlingText;
+    }
+  },
+  _setLanguageContent: function _setLanguageContent() {
+    var languageContent;
+    //If user has supplied custom language, use that
+    if (this._map.options.gestureHandlingOptions && this._map.options.gestureHandlingOptions.text && this._map.options.gestureHandlingOptions.text.touch && this._map.options.gestureHandlingOptions.text.scroll && this._map.options.gestureHandlingOptions.text.scrollMac) {
+      languageContent = this._map.options.gestureHandlingOptions.text;
+    } else {
+      //Otherwise auto set it from the language files
+
+      //Determine their language e.g fr or en-US
+      // var lang = this._getUserLanguage();
+      var lang = "en";
+
+      //If we couldn't find it default to en
+      // if (!lang) {
+      //   lang = "en";
+      // }
+
+      //Lookup the appropriate language content
+      if (LanguageContent[lang]) {
+        languageContent = LanguageContent[lang];
+      }
+
+      //If no result, try searching by the first part only. e.g en-US just use en.
+      if (!languageContent && lang.indexOf("-") !== -1) {
+        lang = lang.split("-")[0];
+        languageContent = LanguageContent[lang];
+      }
+      if (!languageContent) {
+        // If still nothing, default to English
+        // console.log("No lang found for", lang);
+        lang = "en";
+        languageContent = LanguageContent[lang];
+      }
+    }
+
+    //TEST
+    // languageContent = LanguageContent["bg"];
+
+    //Check if they're on a mac for display of command instead of ctrl
+    var mac = false;
+    if (navigator.platform.toUpperCase().indexOf("MAC") >= 0) {
+      mac = true;
+    }
+    var scrollContent = languageContent.scroll;
+    if (mac) {
+      scrollContent = languageContent.scrollMac;
+    }
+    this._map._container.setAttribute("data-gesture-handling-touch-content", languageContent.touch);
+    this._map._container.setAttribute("data-gesture-handling-scroll-content", scrollContent);
+  },
+  _getUserLanguage: function _getUserLanguage() {
+    var lang = navigator.languages ? navigator.languages[0] : navigator.language;
+    return lang;
+  },
+  _handleTouch: function _handleTouch(e) {
+    //Disregard touch events on the minimap if present
+    var ignoreList = ["leaflet-control-minimap", "leaflet-interactive", "leaflet-popup-content", "leaflet-popup-content-wrapper", "leaflet-popup-close-button", "leaflet-control-zoom-in", "leaflet-control-zoom-out"];
+    var ignoreElement = false;
+    for (var i = 0; i < ignoreList.length; i++) {
+      if (L.DomUtil.hasClass(e.target, ignoreList[i])) {
+        ignoreElement = true;
+      }
+    }
+    if (ignoreElement) {
+      if (L.DomUtil.hasClass(e.target, "leaflet-interactive") && e.type === "touchmove" && e.touches.length === 1) {
+        L.DomUtil.addClass(this._map._container, "leaflet-gesture-handling-touch-warning");
+        this._disableInteractions();
+      } else {
+        L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-touch-warning");
+      }
+      return;
+    }
+    // screenLog(e.type+' '+e.touches.length);
+    if (e.type !== "touchmove" && e.type !== "touchstart") {
+      L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-touch-warning");
+      return;
+    }
+    if (e.touches.length === 1) {
+      // added condition for touchmove, because the overlay appearing when you only clicked is annoying.
+      if (e.type === "touchmove") {
+        L.DomUtil.addClass(this._map._container, "leaflet-gesture-handling-touch-warning");
+        this._disableInteractions();
+      }
+    } else {
+      e.preventDefault();
+      this._enableInteractions();
+      L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-touch-warning");
+    }
+  },
+  _isScrolling: false,
+  _handleScroll: function _handleScroll(e) {
+    if (e.metaKey || e.ctrlKey) {
+      e.preventDefault();
+      L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-scroll-warning");
+      this._map.scrollWheelZoom.enable();
+    } else {
+      L.DomUtil.addClass(this._map._container, "leaflet-gesture-handling-scroll-warning");
+      this._map.scrollWheelZoom.disable();
+      clearTimeout(this._isScrolling);
+
+      // Set a timeout to run after scrolling ends
+      this._isScrolling = setTimeout(function () {
+        // Run the callback
+        var warnings = document.getElementsByClassName("leaflet-gesture-handling-scroll-warning");
+        for (var i = 0; i < warnings.length; i++) {
+          L.DomUtil.removeClass(warnings[i], "leaflet-gesture-handling-scroll-warning");
+        }
+      }, this._map.options.gestureHandlingOptions.duration);
+    }
+  },
+  _handleMouseOver: function _handleMouseOver(e) {
+    this._enableInteractions();
+  },
+  _handleMouseOut: function _handleMouseOut(e) {
+    if (!draggingMap) {
+      this._disableInteractions();
+    }
+  }
+});
+L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
+var _default = exports.default = GestureHandling;

package/dist/components/styles/gestureHandling.css

@@ -0,0 +1,40 @@
+@keyframes leaflet-gestures-fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.leaflet-container::after {
+  animation: leaflet-gestures-fadein 0.8s backwards;
+  color: #fff;
+  font-family: "Roboto", Arial, sans-serif;
+  font-size: 22px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 461;
+  pointer-events: none;
+}
+
+.leaflet-gesture-handling-touch-warning::after,
+.leaflet-gesture-handling-scroll-warning::after {
+  animation: leaflet-gestures-fadein 0.8s forwards;
+}
+
+.leaflet-gesture-handling-touch-warning::after {
+  content: attr(data-gesture-handling-touch-content);
+}
+
+.leaflet-gesture-handling-scroll-warning::after {
+  content: attr(data-gesture-handling-scroll-content);
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "iticket-seatingplan-dev",
   "description": "Seating plan with FLEXi pricing",
   "author": "gedwyne",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "private": false,
   "keywords": [
     "iticket",