@maplat/ui 0.10.6 → 0.11.1

package/src/maplat_control.js

@@ -1,808 +0,0 @@
-import { Control, Rotate, Zoom as BaseZoom } from "ol/control";
-import { CLASS_UNSELECTABLE, CLASS_CONTROL } from "ol/css";
-import ViewHint from "ol/ViewHint";
-import { clamp } from "ol/math";
-import { MapEvent } from "ol";
-import { addResizeListener } from "../legacy/detect-element-resize";
-import pointer from "./pointer_images";
-import { createElement } from "@maplat/core";
-
-let control_settings = {};
-const delegator = {
-  compass: "compass.png",
-  border: "border.png",
-  attr: "attr.png",
-  gps: "gps.png",
-  zoom_plus: "plus.png",
-  zoom_minus: "minus.png",
-  help: "help.png",
-  home: "home.png",
-  hide_marker: "hide_marker.png",
-  share: "share.png",
-  slider_in_help: "slider.png",
-  favicon: "favicon.png"
-};
-
-function hexRgb(hex) {
-  const ret = {};
-  if (hex.match(/^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i)) {
-    ret.red = parseInt(RegExp.$1, 16);
-    ret.green = parseInt(RegExp.$2, 16);
-    ret.blue = parseInt(RegExp.$3, 16);
-  } else if (hex.match(/^#?([0-9A-F])([0-9A-F])([0-9A-F])$/i)) {
-    ret.red = parseInt(`${RegExp.$1}${RegExp.$1}`, 16);
-    ret.green = parseInt(`${RegExp.$2}${RegExp.$2}`, 16);
-    ret.blue = parseInt(`${RegExp.$3}${RegExp.$3}`, 16);
-  }
-  return ret;
-}
-
-export function setControlSettings(options) {
-  control_settings = options;
-  Object.keys(control_settings).forEach(key => {
-    if (delegator[key]) {
-      pointer[delegator[key]] = control_settings[key];
-    }
-  });
-}
-
-/**
- * @classdesc
- * A slider type of control for zooming.
- *
- * Example:
- *
- *     map.addControl(new ol.control.SliderCommon());
- *
- * @constructor
- * @extends {ol.control.Control}
- * @param {olx.control.SliderCommonOptions=} opt_options Zoom slider options.
- * @api
- */
-export class SliderCommon extends Control {
-  constructor(opt_options) {
-    const options = opt_options ? opt_options : {};
-    const containerElement = document.createElement("div"); // eslint-disable-line no-undef
-    const render = options.render ? options.render : SliderCommon.render;
-
-    super({
-      element: containerElement,
-      render
-    });
-
-    /**
-     * The direction of the slider. Will be determined from actual display of the
-     * container and defaults to ol.control.SliderCommon.Direction_.VERTICAL.
-     *
-     * @type {ol.control.SliderCommon.Direction_}
-     * @private
-     */
-    this.direction_ = SliderCommon.Direction_.VERTICAL;
-
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this.dragging_ = undefined;
-
-    this.value_ = undefined;
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.previousX_ = undefined;
-
-    /**
-     * @type {number|undefined}
-     * @private
-     */
-    this.previousY_ = undefined;
-
-    /**
-     * The calculated thumb size (border box plus margins).  Set when initSlider_
-     * is called.
-     * @type {ol.Size}
-     * @private
-     */
-    this.thumbSize_ = null;
-
-    /**
-     * Whether the slider is initialized.
-     * @type {boolean}
-     * @private
-     */
-    this.sliderInitialized_ = false;
-
-    /**
-     * @type {number}
-     * @private
-     */
-    this.duration_ = options.duration !== undefined ? options.duration : 200;
-
-    /**
-     * @type {number}
-     * @private
-     */
-    this.reverse_ = options.reverse !== undefined ? options.reverse : false;
-
-    this.initialValue = options.initialValue;
-
-    const className =
-      options.className !== undefined ? options.className : "ol-slidercommon";
-    const thumbElement = document.createElement("button"); // eslint-disable-line no-undef
-    thumbElement.setAttribute("type", "button");
-    thumbElement.className = `${className}-thumb${CLASS_UNSELECTABLE}`;
-
-    containerElement.title = options.tipLabel;
-    containerElement.className = `${className} ${CLASS_UNSELECTABLE} ${CLASS_CONTROL}`;
-    containerElement.appendChild(thumbElement);
-
-    /**
-     * @type {ol.pointer.PointerEventHandler}
-     * @private
-     */
-    containerElement.addEventListener("pointerdown", ev => {
-      ev.stopPropagation();
-      this.handleDraggerStart_(ev);
-    });
-    containerElement.addEventListener("pointermove", ev => {
-      ev.stopPropagation();
-      this.handleDraggerDrag_(ev);
-    });
-    containerElement.addEventListener("pointerup", ev => {
-      ev.stopPropagation();
-      this.handleDraggerEnd_(ev);
-    });
-    thumbElement.addEventListener("click", ev => {
-      ev.stopPropagation();
-    });
-    containerElement.addEventListener("mouseout", ev => {
-      ev.stopPropagation();
-      this.handleDraggerEnd_(ev);
-    });
-
-    if (control_settings["slider_color"]) {
-      const rgb = hexRgb(control_settings["slider_color"]);
-      const button = this.element.querySelector("button");
-      button.addEventListener("mouseover", () => {
-        button.style.backgroundColor = `rgba(${rgb.red},${rgb.green},${rgb.blue},.7)`;
-      });
-      button.addEventListener("mouseout", () => {
-        const disable = this.element.classList.contains("disable");
-        button.style.backgroundColor = `rgba(${rgb.red},${rgb.green},${
-          rgb.blue
-        },${disable ? 0.2 : 0.5})`;
-      });
-    }
-  }
-
-  /**
-   * Update the SliderCommon element.
-   * @param {ol.MapEvent} mapEvent Map event.
-   * @this {ol.control.SliderCommon}
-   * @api
-   */
-  static render(mapEvent) {
-    if (!mapEvent.frameState) {
-      return;
-    }
-    if (!this.sliderInitialized_) {
-      this.initSlider_();
-    }
-  }
-
-  /**
-   * The enum for available directions.
-   *
-   * @enum {number}
-   * @private
-   */
-  static get Direction_() {
-    return {
-      VERTICAL: 0,
-      HORIZONTAL: 1
-    };
-  }
-
-  /**
-   * @inheritDoc
-   */
-  disposeInternal() {
-    this.dragger_.dispose();
-    super.disposeInternal();
-  }
-
-  /**
-   * @inheritDoc
-   */
-  setMap(map) {
-    super.setMap(map);
-    if (map) {
-      map.render();
-    }
-  }
-
-  /**
-   * Initializes the slider element. This will determine and set this controls
-   * direction_ and also constrain the dragging of the thumb to always be within
-   * the bounds of the container.
-   *
-   * @private
-   */
-  initSlider_() {
-    const container = this.element;
-    const containerSize = {
-      width: container.offsetWidth,
-      height: container.offsetHeight
-    };
-
-    const thumb = container.firstElementChild;
-    const computedStyle = getComputedStyle(thumb); // eslint-disable-line no-undef
-    const thumbWidth =
-      thumb.offsetWidth +
-      parseFloat(computedStyle["marginRight"]) +
-      parseFloat(computedStyle["marginLeft"]);
-    const thumbHeight =
-      thumb.offsetHeight +
-      parseFloat(computedStyle["marginTop"]) +
-      parseFloat(computedStyle["marginBottom"]);
-    this.thumbSize_ = [thumbWidth, thumbHeight];
-
-    if (containerSize.width > containerSize.height) {
-      this.direction_ = SliderCommon.Direction_.HORIZONTAL;
-    } else {
-      this.direction_ = SliderCommon.Direction_.VERTICAL;
-    }
-    this.setValue(this.initialValue || 0);
-    const self = this;
-    addResizeListener(container, () => {
-      self.setValue(self.value_);
-    });
-
-    this.sliderInitialized_ = true;
-  }
-
-  widthLimit_(_event) {
-    const container = this.element;
-    return container.offsetWidth - this.thumbSize_[0];
-  }
-
-  heightLimit_(_event) {
-    const container = this.element;
-    return container.offsetHeight - this.thumbSize_[1];
-  }
-
-  /**
-   * @param {Event} event The browser event to handle.
-   * @private
-   */
-  handleContainerClick_(event) {
-    const relativePosition = this.getRelativePosition_(
-      event.offsetX - this.thumbSize_[0] / 2,
-      event.offsetY - this.thumbSize_[1] / 2
-    );
-
-    this.setThumbPosition_(relativePosition);
-  }
-
-  /**
-   * Handle dragger start events.
-   * @param {ol.pointer.PointerEvent} event The drag event.
-   * @private
-   */
-  handleDraggerStart_(event) {
-    if (
-      !this.dragging_ &&
-      event.target === this.element.firstElementChild &&
-      !this.element.classList.contains("disable")
-    ) {
-      this.getMap().getView().setHint(ViewHint.INTERACTING, 1);
-      this.previousX_ = event.clientX;
-      this.previousY_ = event.clientY;
-      this.dragging_ = true;
-    }
-  }
-
-  /**
-   * Handle dragger drag events.
-   *
-   * @param {ol.pointer.PointerEvent|Event} event The drag event.
-   * @private
-   */
-  handleDraggerDrag_(event) {
-    if (this.dragging_) {
-      const element = this.element.firstElementChild;
-      const deltaX =
-        event.clientX -
-        this.previousX_ +
-        (parseFloat(element.style.left, 10) || 0);
-      const deltaY =
-        event.clientY -
-        this.previousY_ +
-        (parseFloat(element.style.top, 10) || 0);
-      const relativePosition = this.getRelativePosition_(deltaX, deltaY);
-      this.setThumbPosition_(relativePosition);
-      this.previousX_ = event.clientX;
-      this.previousY_ = event.clientY;
-    }
-  }
-
-  /**
-   * Handle dragger end events.
-   * @param {ol.pointer.PointerEvent|Event} event The drag event.
-   * @private
-   */
-  handleDraggerEnd_(_event) {
-    if (this.dragging_) {
-      const view = this.getMap().getView();
-      view.setHint(ViewHint.INTERACTING, -1);
-
-      this.dragging_ = false;
-      this.previousX_ = undefined;
-      this.previousY_ = undefined;
-    }
-  }
-
-  /**
-   * Positions the thumb inside its container according to the given resolution.
-   *
-   * @param {number} res The res.
-   * @private
-   */
-  setThumbPosition_(res) {
-    const thumb = this.element.firstElementChild;
-
-    if (this.direction_ == SliderCommon.Direction_.HORIZONTAL) {
-      thumb.style.left = `${this.widthLimit_() * res}px`;
-    } else {
-      thumb.style.top = `${this.heightLimit_() * res}px`;
-    }
-    this.value_ = this.reverse_ ? 1 - res : res;
-    this.set("slidervalue", this.value_);
-  }
-
-  /**
-   * Calculates the relative position of the thumb given x and y offsets.  The
-   * relative position scales from 0 to 1.  The x and y offsets are assumed to be
-   * in pixel units within the dragger limits.
-   *
-   * @param {number} x Pixel position relative to the left of the slider.
-   * @param {number} y Pixel position relative to the top of the slider.
-   * @return {number} The relative position of the thumb.
-   * @private
-   */
-  getRelativePosition_(x, y) {
-    let amount;
-    if (this.direction_ === SliderCommon.Direction_.HORIZONTAL) {
-      amount = x / this.widthLimit_();
-    } else {
-      amount = y / this.heightLimit_();
-    }
-    return clamp(amount, 0, 1);
-  }
-
-  setValue(res) {
-    res = this.reverse_ ? 1 - res : res;
-    this.setThumbPosition_(res);
-  }
-
-  setEnable(cond) {
-    const elem = this.element;
-    if (cond) {
-      elem.classList.remove("disable");
-    } else {
-      elem.classList.add("disable");
-    }
-    if (control_settings["slider_color"]) {
-      const rgb = hexRgb(control_settings["slider_color"]);
-      elem.querySelector("button").style.backgroundColor = `rgba(${rgb.red},${
-        rgb.green
-      },${rgb.blue},${cond ? 0.5 : 0.2})`;
-    }
-  }
-}
-
-export class CustomControl extends Control {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    const element = document.createElement("div"); // eslint-disable-line no-undef
-
-    super({
-      element,
-      target: options.target,
-      render: options.render
-    });
-
-    const button = document.createElement("button"); // eslint-disable-line no-undef
-    button.setAttribute("type", "button");
-    button.title = options.tipLabel;
-    const span = document.createElement("span"); // eslint-disable-line no-undef
-    span.innerHTML = options.character;
-    button.appendChild(span);
-    let timer;
-    let touchstart;
-    const self = this;
-
-    button.addEventListener("click", e => {
-      e.stopPropagation();
-    });
-    button.addEventListener(
-      "mouseup",
-      e => {
-        if (!touchstart) {
-          if (timer) {
-            if (options.long_callback) {
-              clearTimeout(timer); // eslint-disable-line no-undef
-            }
-            timer = null;
-            options.callback.apply(self);
-          }
-        }
-        e.stopPropagation();
-      },
-      false
-    );
-    button.addEventListener(
-      "mousemove",
-      e => {
-        e.stopPropagation();
-      },
-      false
-    );
-    button.addEventListener(
-      "mousedown",
-      e => {
-        if (!touchstart) {
-          if (options.long_callback) {
-            timer = setTimeout(() => {
-              // eslint-disable-line no-undef
-              timer = null;
-              options.long_callback.apply(self);
-            }, 1500);
-          } else {
-            timer = true;
-          }
-        }
-        e.stopPropagation();
-      },
-      false
-    );
-    button.addEventListener(
-      "touchstart",
-      e => {
-        touchstart = true;
-        if (options.long_callback) {
-          timer = setTimeout(() => {
-            // eslint-disable-line no-undef
-            timer = null;
-            options.long_callback.apply(self);
-          }, 1500);
-        } else {
-          timer = true;
-        }
-        e.stopPropagation();
-      },
-      false
-    );
-    button.addEventListener(
-      "touchend",
-      e => {
-        if (timer) {
-          if (options.long_callback) {
-            clearTimeout(timer); // eslint-disable-line no-undef
-          }
-          timer = null;
-          options.callback.apply(self);
-        }
-        e.stopPropagation();
-      },
-      false
-    );
-    button.addEventListener(
-      "mouseout",
-      e => {
-        if (options.long_callback) {
-          clearTimeout(timer); // eslint-disable-line no-undef
-        }
-        timer = null;
-        e.stopPropagation();
-      },
-      false
-    );
-    button.addEventListener(
-      "dblclick",
-      e => {
-        e.preventDefault();
-      },
-      false
-    );
-
-    element.className = `${options.cls} ol-unselectable ol-control`;
-    element.appendChild(button);
-  }
-}
-
-export class GoHome extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["home"]
-      ? `<img src="${control_settings["home"]}">`
-      : '<i class="fa fa-home fa-lg"></i>';
-    options.cls = "home";
-    options.callback = function () {
-      const source = this.getMap().getLayers().item(0).getSource();
-      source.goHome();
-    };
-    super(options);
-    if (control_settings["home"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class SetGPS extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["gps"]
-      ? `<img src="${control_settings["gps"]}">`
-      : '<i class="fa fa-crosshairs fa-lg"></i>';
-    options.cls = "gps";
-    options.render = function (mapEvent) {
-      const frameState = mapEvent.frameState;
-      if (!frameState) {
-        return;
-      }
-      const map = this.getMap();
-      if (map.geolocation) {
-        const tracking = map.geolocation.getTracking();
-        const receiving = this.element.classList.contains("disable");
-        if (receiving && !tracking) {
-          this.element.classList.remove("disable");
-        } else if (!receiving && tracking) {
-          this.element.classList.add("disable");
-        }
-      }
-    };
-
-    options.callback = function () {
-      const receiving = this.element.classList.contains("disable");
-      const map = this.getMap();
-
-      map.handleGPS(!receiving);
-      if (receiving) {
-        this.element.classList.remove("disable");
-      } else {
-        this.element.classList.add("disable");
-      }
-    };
-
-    super(options);
-    if (control_settings["gps"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class CompassRotate extends Rotate {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.autoHide = false;
-    const span = document.createElement("span"); // eslint-disable-line no-undef
-    span.innerHTML = control_settings["compass"]
-      ? `<img src="${control_settings["compass"]}">`
-      : '<i class="fa fa-compass fa-lg ol-compass-fa"></i>';
-    options.label = span;
-    options.render = function (mapEvent) {
-      const frameState = mapEvent.frameState;
-      if (!frameState) {
-        return;
-      }
-      const view = this.getMap().getView();
-      const rotation = frameState.viewState.rotation;
-      const center = view.getCenter();
-      const zoom = view.getDecimalZoom();
-      if (
-        rotation != this.rotation_ ||
-        center[0] != this.center_[0] ||
-        center[1] != this.center_[1] ||
-        zoom != this.zoom_
-      ) {
-        if (!this.getMap().northUp) {
-          const contains = this.element.classList.contains("disable");
-          if (!contains && rotation === 0) {
-            this.element.classList.add("disable");
-          } else if (contains && rotation !== 0) {
-            this.element.classList.remove("disable");
-          }
-        }
-        const self = this;
-        const layer = this.getMap().getLayers().item(0);
-        const source = layer.getSource
-          ? layer.getSource()
-          : layer.getLayers().item(0).getSource();
-        if (!source) {
-          const transform = "rotate(0rad)";
-          self.label_.style.msTransform = transform;
-          self.label_.style.webkitTransform = transform;
-          self.label_.style.transform = transform;
-          return;
-        }
-        source.viewpoint2MercsAsync().then(mercs => {
-          const direction = source.mercs2MercViewpoint(mercs)[2];
-          const transform = `rotate(${direction}rad)`;
-          self.label_.style.msTransform = transform;
-          self.label_.style.webkitTransform = transform;
-          self.label_.style.transform = transform;
-          if (this.getMap().northUp) {
-            console.log(direction);
-            const contains = self.element.classList.contains("disable");
-            if (!contains && Math.abs(direction) < 0.1) {
-              self.element.classList.add("disable");
-            } else if (contains && Math.abs(direction) >= 0.1) {
-              self.element.classList.remove("disable");
-            }
-          }
-        });
-      }
-      this.rotation_ = rotation;
-      this.center_ = center;
-      this.zoom_ = zoom;
-    };
-    super(options);
-    if (control_settings["compass"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-    this.center_ = [];
-    this.zoom_ = undefined;
-    this.callResetNorth_ = () => {
-      const layer = this.getMap().getLayers().item(0);
-      const source = layer.getSource
-        ? layer.getSource()
-        : layer.getLayers().item(0).getSource();
-      source.resetCirculation();
-    };
-  }
-}
-
-export class Share extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["share"]
-      ? `<img src="${control_settings["share"]}">`
-      : '<i class="fa fa-share-alt-square fa-lg"></i>';
-    options.cls = "ol-share";
-    options.callback = function () {
-      const map = this.getMap();
-      map.dispatchEvent(
-        new MapEvent("click_control", map, { control: "share" })
-      );
-    };
-
-    super(options);
-    if (control_settings["share"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class Border extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["border"]
-      ? `<img src="${control_settings["border"]}">`
-      : '<i class="fa fa-clone fa-lg"></i>';
-    options.cls = "ol-border";
-    options.callback = function () {
-      const map = this.getMap();
-      map.dispatchEvent(
-        new MapEvent("click_control", map, { control: "border" })
-      );
-    };
-
-    super(options);
-    if (control_settings["border"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class Maplat extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["help"]
-      ? `<img src="${control_settings["help"]}">`
-      : '<i class="fa fa-question-circle fa-lg"></i>';
-    options.cls = "ol-maplat";
-    options.callback = function () {
-      const map = this.getMap();
-      map.dispatchEvent(
-        new MapEvent("click_control", map, { control: "help" })
-      );
-    };
-
-    super(options);
-    if (control_settings["help"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class Copyright extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["attr"]
-      ? `<img src="${control_settings["attr"]}">`
-      : '<i class="fa fa-info-circle fa-lg"></i>';
-    options.cls = "ol-copyright";
-    options.callback = function () {
-      const map = this.getMap();
-      map.dispatchEvent(
-        new MapEvent("click_control", map, { control: "copyright" })
-      );
-    };
-
-    super(options);
-    if (control_settings["attr"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class HideMarker extends CustomControl {
-  constructor(optOptions) {
-    const options = optOptions || {};
-    options.character = control_settings["hide_marker"]
-      ? `<img src="${control_settings["hide_marker"]}">`
-      : '<i class="fa fa-map-marker fa-lg"></i>';
-    options.cls = "ol-hide-marker";
-    options.callback = function () {
-      const map = this.getMap();
-      map.dispatchEvent(
-        new MapEvent("click_control", map, { control: "hideMarker" })
-      );
-    };
-    options.long_callback = function () {
-      const map = this.getMap();
-      map.dispatchEvent(
-        new MapEvent("click_control", map, { control: "hideLayer" })
-      );
-    };
-
-    super(options);
-    if (control_settings["hide_marker"]) {
-      const button = this.element.querySelector("button");
-      button.style.backgroundColor = "rgba(0,0,0,0)";
-    }
-  }
-}
-
-export class Zoom extends BaseZoom {
-  constructor(options = {}) {
-    if (control_settings["zoom_plus"]) {
-      options.zoomInLabel = createElement(
-        `<img src="${control_settings["zoom_plus"]}">`
-      )[0];
-    }
-    if (control_settings["zoom_minus"]) {
-      options.zoomOutLabel = createElement(
-        `<img src="${control_settings["zoom_minus"]}">`
-      )[0];
-    }
-
-    super(options);
-    if (control_settings["compass"]) {
-      const buttons = this.element.querySelectorAll("button");
-      buttons.forEach(button => {
-        button.style.backgroundColor = "rgba(0,0,0,0)";
-      });
-    }
-  }
-}