CruisersWiki:TOl3-popup.js

From CruisersWiki

// https://github.com/walkermatt/ol-popup (function (root, factory) {

 if(typeof define === "function" && define.amd) {
   define(["openlayers"], factory);
 } else if(typeof module === "object" && module.exports) {
   module.exports = factory(require("openlayers"));
 } else {
   root.LayerSwitcher = factory(root.ol);
 }

}(this, function(ol) {

   /**
   * OpenLayers 3 Popup Overlay.
   * See [the examples](./examples) for usage. Styling can be done via CSS.
   * @constructor
   * @extends {ol.Overlay}
   * @param {Object} opt_options Overlay options
   */
   ol.Overlay.Popup = function(opt_options) {

       var options = opt_options || {};

       if (options.autoPan === undefined) {
           options.autoPan = true;
       }

       if (options.autoPanAnimation === undefined) {
           options.autoPanAnimation = {
               duration: 250
           };
       }

       this.container = document.createElement('div');
       this.container.className = 'ol-popup';

       this.closer = document.createElement('a');
       this.closer.className = 'ol-popup-closer';
       this.closer.href = '#';
       this.container.appendChild(this.closer);

       var that = this;
       this.closer.addEventListener('click', function(evt) {
           that.container.style.display = 'none';
           that.closer.blur();
           evt.preventDefault();
       }, false);

       this.content = document.createElement('div');
       this.content.className = 'ol-popup-content';
       this.container.appendChild(this.content);

       // Apply workaround to enable scrolling of content div on touch devices
       ol.Overlay.Popup.enableTouchScroll_(this.content);

       options.element = this.container;
       ol.Overlay.call(this, options);

   };

   ol.inherits(ol.Overlay.Popup, ol.Overlay);

   /**
   * Show the popup.
   * @param {ol.Coordinate} coord Where to anchor the popup.
   * @param {String|HTMLElement} html String or element of HTML to display within the popup.
   */
   ol.Overlay.Popup.prototype.show = function(coord, html) {
       if (html instanceof HTMLElement) {
           this.content.innerHTML = "";
           this.content.appendChild(html);
       } else {
           this.content.innerHTML = html;
       }
       this.container.style.display = 'block';
       this.content.scrollTop = 0;
       this.setPosition(coord);
       return this;
   };

   /**
   * @private
   * @desc Determine if the current browser supports touch events. Adapted from
   * https://gist.github.com/chrismbarr/4107472
   */
   ol.Overlay.Popup.isTouchDevice_ = function() {
       try {
           document.createEvent("TouchEvent");
           return true;
       } catch(e) {
           return false;
       }
   };

   /**
   * @private
   * @desc Apply workaround to enable scrolling of overflowing content within an
   * element. Adapted from https://gist.github.com/chrismbarr/4107472
   */
   ol.Overlay.Popup.enableTouchScroll_ = function(elm) {
       if(ol.Overlay.Popup.isTouchDevice_()){
           var scrollStartPos = 0;
           elm.addEventListener("touchstart", function(event) {
               scrollStartPos = this.scrollTop + event.touches[0].pageY;
           }, false);
           elm.addEventListener("touchmove", function(event) {
               this.scrollTop = scrollStartPos - event.touches[0].pageY;
           }, false);
       }
   };

   /**
   * Hide the popup.
   */
   ol.Overlay.Popup.prototype.hide = function() {
       this.container.style.display = 'none';
       return this;
   };

   /**
   * Indicates if the popup is in open state
   */
   ol.Overlay.Popup.prototype.isOpened = function() {
       return this.container.style.display == 'block';
   };

   var Popup = ol.Overlay.Popup;
   return Popup;

}));