iticket-seatingplan-dev 1.6.0 → 1.6.2

package/dist/components/Map.js

@@ -4,13 +4,13 @@ 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 _gestureHandling2 = require("./gestureHandling");
 var _reactLeafletCustomControl = _interopRequireDefault(require("react-leaflet-custom-control"));
 var _encodedSvgs = require("./assets/encodedSvgs");
 var _utils = require("../utils");
@@ -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();
     }
@@ -377,17 +377,17 @@ function Map(_ref) {
     bounds: [[0, 0], [height * 0.03, width * 0.03]],
     zIndex: 10
   }), seats && seats.seats && seats.seats.map((s, i) => {
-    var _chosenSeat$seat;
+    var _chosenSeat$seat, _chosenSeat$seat2;
     const isIcon = (!priceSectionIds || priceSectionIds.includes(s.psId)) && (s.s === _utils.statuses.WHEELCHAIR_ACCESS || s.s === _utils.statuses.USER_PENDING && s.m);
     const seatCenter = getSeatCenterLatLng(s, isIcon);
     const seatPrices = seats.pricing.filter(price => (!priceSectionIds || priceSectionIds.includes(price.psId)) && price.psId === s.psId);
     const isSingleFlexi = seatPrices.length === 1 && !!seatPrices[0].pMax && !!seatPrices[0].pMin && seatPrices[0].pMax > seatPrices[0].pMin;
     return /*#__PURE__*/_react.default.createElement("div", {
       key: i
-    }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
+    }, (s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat = chosenSeat.seat) === null || _chosenSeat$seat === void 0 ? void 0 : _chosenSeat$seat.ssId) === s.ssId) && /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
       url: "https://iticketseatingplan.blob.core.windows.net/embed/static/media/rippleload.08e6a08dd832819226ef.gif",
       bounds: [[(s.r.includes("NORTH") ? getNorthSeatLat(s) : seatCenter.lat) - 0.11, seatCenter.lng - 0.11], [(s.r.includes("NORTH") ? getNorthSeatLat(s) : seatCenter.lat) + 0.11, seatCenter.lng + 0.11]],
-      opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat = chosenSeat.seat) === null || _chosenSeat$seat === void 0 ? void 0 : _chosenSeat$seat.ssId) === s.ssId ? 100 : 0,
+      opacity: s.loading || ticketPopupOpen && (chosenSeat === null || chosenSeat === void 0 || (_chosenSeat$seat2 = chosenSeat.seat) === null || _chosenSeat$seat2 === void 0 ? void 0 : _chosenSeat$seat2.ssId) === s.ssId ? 100 : 0,
       zIndex: 10
     }), !priceSectionIds || priceSectionIds.includes(s.psId) ? s.s === _utils.statuses.WHEELCHAIR_ACCESS ? /*#__PURE__*/_react.default.createElement(_reactLeaflet.ImageOverlay, {
       url: _encodedSvgs.wheelchairIcon,

package/dist/components/SeatingPlan.js

@@ -490,7 +490,8 @@ const SeatingPlan = _ref => {
     bounds: bounds
     // @ts-ignore
     ,
-    whenReady: setMap
+    whenReady: setMap,
+    preferCanvas: true
   }, /*#__PURE__*/_react.default.createElement(_Map.default, {
     seats: seats,
     height: height,

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/dist/utils/helpers.js

@@ -18,7 +18,8 @@ const getInitialColor = (s, price, selected) => {
   return {
     fillColor: s.s === _enums.statuses.UNSOLD ? _enums.statusColors.available : s.s === _enums.statuses.USER_PENDING ? s.bookedPrice === price ? _enums.statusColors.booked : _enums.statusColors.bookedWithDifferentPrice : _enums.statusColors.sold,
     color: "none",
-    fillOpacity: s.loading ? 0 : 1
+    fillOpacity: s.loading ? 0 : 1,
+    stroke: false
   };
 };
 exports.getInitialColor = getInitialColor;

package/package.json

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