From 0e71173f670279b3ff109b47d3970d414db3b999 Mon Sep 17 00:00:00 2001 From: Jonatas Walker Date: Thu, 5 Apr 2018 11:41:48 -0300 Subject: [PATCH 1/2] Release v3.2.0 --- dist/ol-contextmenu-debug.js | 1464 +++++++++++++++++----------------- dist/ol-contextmenu.css | 7 +- dist/ol-contextmenu.js | 6 +- dist/ol-contextmenu.min.css | 6 +- 4 files changed, 727 insertions(+), 756 deletions(-) diff --git a/dist/ol-contextmenu-debug.js b/dist/ol-contextmenu-debug.js index eef1ef8..2bad0db 100644 --- a/dist/ol-contextmenu-debug.js +++ b/dist/ol-contextmenu-debug.js @@ -1,854 +1,826 @@ /*! - * ol-contextmenu - v3.1.0 + * ol-contextmenu - v3.2.0 * Custom Context Menu for Openlayers * https://github.com/jonataswalker/ol-contextmenu - * Built: Sat Nov 18 2017 09:49:39 GMT-0200 (-02) + * Built: Thu Apr 05 2018 11:39:12 GMT-0300 (-03) */ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('openlayers')) : - typeof define === 'function' && define.amd ? define(['openlayers'], factory) : - (global.ContextMenu = factory(global.ol)); -}(this, (function (ol) { 'use strict'; - -ol = ol && ol.hasOwnProperty('default') ? ol['default'] : ol; - -var namespace = "ol-ctx-menu"; -var container_class = "-container"; -var separator_class = "-separator"; -var submenu_class = "-submenu"; -var hidden_class = "-hidden"; -var icon_class = "-icon"; -var zoom_in_class = "-zoom-in"; -var zoom_out_class = "-zoom-out"; -var ol_unselectable_class = "ol-unselectable"; -var vars = { - namespace: namespace, - container_class: container_class, - separator_class: separator_class, - submenu_class: submenu_class, - hidden_class: hidden_class, - icon_class: icon_class, - zoom_in_class: zoom_in_class, - zoom_out_class: zoom_out_class, - ol_unselectable_class: ol_unselectable_class -}; - -var _VARS_ = Object.freeze({ - namespace: namespace, - container_class: container_class, - separator_class: separator_class, - submenu_class: submenu_class, - hidden_class: hidden_class, - icon_class: icon_class, - zoom_in_class: zoom_in_class, - zoom_out_class: zoom_out_class, - ol_unselectable_class: ol_unselectable_class, - default: vars -}); - -const VARS = _VARS_; - -const EVENT_TYPE = { - /** - * Triggered before context menu is openned. - */ - BEFOREOPEN: 'beforeopen', - /** - * Triggered when context menu is openned. - */ - OPEN: 'open', - /** - * Triggered when context menu is closed. - */ - CLOSE: 'close', - /** - * Internal. Triggered when a menu entry is added. - */ - ADD_MENU_ENTRY: 'add-menu-entry', - /** - * Internal. - */ - CONTEXTMENU: 'contextmenu', - /** - * Internal. - */ - HOVER: 'mouseover' -}; - -/** - * DOM Elements classname - */ -const CLASSNAME = { - container : VARS.namespace + VARS.container_class, - separator : VARS.namespace + VARS.separator_class, - submenu : VARS.namespace + VARS.submenu_class, - hidden : VARS.namespace + VARS.hidden_class, - icon : VARS.namespace + VARS.icon_class, - zoomIn : VARS.namespace + VARS.zoom_in_class, - zoomOut : VARS.namespace + VARS.zoom_out_class, - OL_unselectable : VARS.ol_unselectable_class -}; - - -const DEFAULT_OPTIONS = { - width: 150, - scrollAt: 4, - eventType: EVENT_TYPE.CONTEXTMENU, - defaultItems: true -}; - -const DEFAULT_ITEMS = [ - { - text: 'Zoom In', - classname: ((CLASSNAME.zoomIn) + " " + (CLASSNAME.icon)), - callback: function (obj, map) { - const view = map.getView(); - view.animate({ - zoom: +view.getZoom() + 1, - duration: 700, - center: obj.coordinate - }); - } - }, - { - text: 'Zoom Out', - classname: ((CLASSNAME.zoomOut) + " " + (CLASSNAME.icon)), - callback: function (obj, map) { - const view = map.getView(); - view.animate({ - zoom: +view.getZoom() - 1, - duration: 700, - center: obj.coordinate - }); - } - } -]; - -/** - * Overwrites obj1's values with obj2's and adds - * obj2's if non existent in obj1 - * @returns obj3 a new object based on obj1 and obj2 - */ -function mergeOptions(obj1, obj2) { - let obj3 = {}; - for (let attr1 in obj1) { obj3[attr1] = obj1[attr1]; } - for (let attr2 in obj2) { obj3[attr2] = obj2[attr2]; } - return obj3; -} - -function assert(condition, message) { - if ( message === void 0 ) message = 'Assertion failed'; - - if (!condition) { - if (typeof Error !== 'undefined') { throw new Error(message); } - throw message; // Fallback - } -} - -/** - * Does str contain test? - * @param {String} str_test - * @param {String} str - * @returns Boolean - */ -function contains(str_test, str) { - return !!~str.indexOf(str_test); -} - -function getUniqueId() { - return '_' + Math.random().toString(36).substr(2, 9); -} - -function isDefAndNotNull(val) { - // Note that undefined == null. - return val != null; // eslint-disable-line no-eq-null -} - + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('ol/control/control')) : + typeof define === 'function' && define.amd ? define(['ol/control/control'], factory) : + (global.ContextMenu = factory(global.ol.control.Control)); +}(this, (function (Control) { 'use strict'; + + Control = Control && Control.hasOwnProperty('default') ? Control['default'] : Control; + + var namespace = "ol-ctx-menu"; + var container_class = "-container"; + var separator_class = "-separator"; + var submenu_class = "-submenu"; + var hidden_class = "-hidden"; + var icon_class = "-icon"; + var zoom_in_class = "-zoom-in"; + var zoom_out_class = "-zoom-out"; + var ol_unselectable_class = "ol-unselectable"; + var vars = { + namespace: namespace, + container_class: container_class, + separator_class: separator_class, + submenu_class: submenu_class, + hidden_class: hidden_class, + icon_class: icon_class, + zoom_in_class: zoom_in_class, + zoom_out_class: zoom_out_class, + ol_unselectable_class: ol_unselectable_class + }; + var _VARS_ = /*#__PURE__*/Object.freeze({ + namespace: namespace, + container_class: container_class, + separator_class: separator_class, + submenu_class: submenu_class, + hidden_class: hidden_class, + icon_class: icon_class, + zoom_in_class: zoom_in_class, + zoom_out_class: zoom_out_class, + ol_unselectable_class: ol_unselectable_class, + default: vars + }); + const VARS = _VARS_; + + const EVENT_TYPE = { + /** + * Triggered before context menu is openned. + */ + BEFOREOPEN: 'beforeopen', + /** + * Triggered when context menu is openned. + */ + OPEN: 'open', + /** + * Triggered when context menu is closed. + */ + CLOSE: 'close', + /** + * Internal. Triggered when a menu entry is added. + */ + ADD_MENU_ENTRY: 'add-menu-entry', + /** + * Internal. + */ + CONTEXTMENU: 'contextmenu', + /** + * Internal. + */ + HOVER: 'mouseover' + }; + /** + * DOM Elements classname + */ + const CLASSNAME = { + container : VARS.namespace + VARS.container_class, + separator : VARS.namespace + VARS.separator_class, + submenu : VARS.namespace + VARS.submenu_class, + hidden : VARS.namespace + VARS.hidden_class, + icon : VARS.namespace + VARS.icon_class, + zoomIn : VARS.namespace + VARS.zoom_in_class, + zoomOut : VARS.namespace + VARS.zoom_out_class, + OL_unselectable : VARS.ol_unselectable_class + }; + const DEFAULT_OPTIONS = { + width: 150, + scrollAt: 4, + eventType: EVENT_TYPE.CONTEXTMENU, + defaultItems: true + }; -function isNumeric(str) { - return /^\d+$/.test(str); -} + const DEFAULT_ITEMS = [ + { + text: 'Zoom In', + classname: ((CLASSNAME.zoomIn) + " " + (CLASSNAME.icon)), + callback: function (obj, map) { + const view = map.getView(); + view.animate({ + zoom: +view.getZoom() + 1, + duration: 700, + center: obj.coordinate + }); + } + }, + { + text: 'Zoom Out', + classname: ((CLASSNAME.zoomOut) + " " + (CLASSNAME.icon)), + callback: function (obj, map) { + const view = map.getView(); + view.animate({ + zoom: +view.getZoom() - 1, + duration: 700, + center: obj.coordinate + }); + } + } + ]; -/** - * @param {Element|Array} element DOM node or array of nodes. - * @param {String|Array} classname Class or array of classes. - * For example: 'class1 class2' or ['class1', 'class2'] - * @param {Number|undefined} timeout Timeout to remove a class. - */ -function addClass(element, classname, timeout) { - if (Array.isArray(element)) { - element.forEach(function (each) { return addClass(each, classname); }); - return; + /** + * Overwrites obj1's values with obj2's and adds + * obj2's if non existent in obj1 + * @returns obj3 a new object based on obj1 and obj2 + */ + function mergeOptions(obj1, obj2) { + let obj3 = {}; + for (let attr1 in obj1) { obj3[attr1] = obj1[attr1]; } + for (let attr2 in obj2) { obj3[attr2] = obj2[attr2]; } + return obj3; } - const array = (Array.isArray(classname)) - ? classname - : classname.split(/\s+/); - let i = array.length; + function assert(condition, message) { + if ( message === void 0 ) message = 'Assertion failed'; - while (i--) { - if (!hasClass(element, array[i])) { - _addClass(element, array[i], timeout); + if (!condition) { + if (typeof Error !== 'undefined') { throw new Error(message); } + throw message; // Fallback } } -} -/** - * @param {Element|Array} element DOM node or array of nodes. - * @param {String|Array} classname Class or array of classes. - * For example: 'class1 class2' or ['class1', 'class2'] - * @param {Number|undefined} timeout Timeout to add a class. - */ -function removeClass(element, classname, timeout) { - if (Array.isArray(element)) { - element.forEach(function (each) { return removeClass(each, classname, timeout); }); - return; + /** + * Does str contain test? + * @param {String} str_test + * @param {String} str + * @returns Boolean + */ + function contains(str_test, str) { + return !!~str.indexOf(str_test); } - const array = (Array.isArray(classname)) - ? classname - : classname.split(/\s+/); - let i = array.length; + function getUniqueId() { + return '_' + Math.random().toString(36).substr(2, 9); + } - while (i--) { - if (hasClass(element, array[i])) { - _removeClass(element, array[i], timeout); - } + function isDefAndNotNull(val) { + // Note that undefined == null. + return val != null; // eslint-disable-line no-eq-null } -} + function isNumeric(str) { + return /^\d+$/.test(str); + } -/** - * @param {Element} element DOM node. - * @param {String} classname Classname. - * @return {Boolean} - */ -function hasClass(element, c) { - // use native if available - return element.classList - ? element.classList.contains(c) - : classRegex(c).test(element.className); -} - -/** - * @param {Element|Array} element DOM node or array of nodes. - * @param {String} classname Classe. - */ + /** + * @param {Element|Array} element DOM node or array of nodes. + * @param {String|Array} classname Class or array of classes. + * For example: 'class1 class2' or ['class1', 'class2'] + * @param {Number|undefined} timeout Timeout to remove a class. + */ + function addClass(element, classname, timeout) { + if (Array.isArray(element)) { + element.forEach(function (each) { return addClass(each, classname); }); + return; + } + const array = (Array.isArray(classname)) + ? classname + : classname.split(/\s+/); + let i = array.length; -/** - * Abstraction to querySelectorAll for increased - * performance and greater usability - * @param {String} selector - * @param {Element} context (optional) - * @param {Boolean} find_all (optional) - * @return (find_all) {Element} : {Array} - */ -function find(selector, context, find_all) { - if ( context === void 0 ) context = window.document; - - let simpleRe = /^(#?[\w-]+|\.[\w-.]+)$/, - periodRe = /\./g, - slice = Array.prototype.slice, - matches = []; - - // Redirect call to the more performant function - // if it's a simple selector and return an array - // for easier usage - if (simpleRe.test(selector)) { - switch (selector[0]) { - case '#': - matches = [$(selector.substr(1))]; - break; - case '.': - matches = slice.call(context.getElementsByClassName( - selector.substr(1).replace(periodRe, ' '))); - break; - default: - matches = slice.call(context.getElementsByTagName(selector)); + while (i--) { + if (!hasClass(element, array[i])) { + _addClass(element, array[i], timeout); + } } - } else { - // If not a simple selector, query the DOM as usual - // and return an array for easier usage - matches = slice.call(context.querySelectorAll(selector)); } - return (find_all) ? matches : matches[0]; -} - -function $(id) { - id = (id[0] === '#') ? id.substr(1, id.length) : id; - return document.getElementById(id); -} - - - -function offset(element) { - const rect = element.getBoundingClientRect(); - const docEl = document.documentElement; - return { - left: rect.left + window.pageXOffset - docEl.clientLeft, - top: rect.top + window.pageYOffset - docEl.clientTop, - width: element.offsetWidth, - height: element.offsetHeight - }; -} - -function getViewportSize() { - return { - w: window.innerWidth || document.documentElement.clientWidth, - h: window.innerHeight || document.documentElement.clientHeight - }; -} - - - - - - - + /** + * @param {Element|Array} element DOM node or array of nodes. + * @param {String|Array} classname Class or array of classes. + * For example: 'class1 class2' or ['class1', 'class2'] + * @param {Number|undefined} timeout Timeout to add a class. + */ + function removeClass(element, classname, timeout) { + if (Array.isArray(element)) { + element.forEach(function (each) { return removeClass(each, classname, timeout); }); + return; + } + const array = (Array.isArray(classname)) + ? classname + : classname.split(/\s+/); + let i = array.length; -function createFragment(html) { - let frag = document.createDocumentFragment(), - temp = document.createElement('div'); - temp.innerHTML = html; - while (temp.firstChild) { - frag.appendChild(temp.firstChild); + while (i--) { + if (hasClass(element, array[i])) { + _removeClass(element, array[i], timeout); + } + } } - return frag; -} - - - - + /** + * @param {Element} element DOM node. + * @param {String} classname Classname. + * @return {Boolean} + */ + function hasClass(element, c) { + // use native if available + return element.classList + ? element.classList.contains(c) + : classRegex(c).test(element.className); + } -function classRegex(classname) { - return new RegExp(("(^|\\s+) " + classname + " (\\s+|$)")); -} + /** + * Abstraction to querySelectorAll for increased + * performance and greater usability + * @param {String} selector + * @param {Element} context (optional) + * @param {Boolean} find_all (optional) + * @return (find_all) {Element} : {Array} + */ + function find(selector, context, find_all) { + if ( context === void 0 ) context = window.document; + + let simpleRe = /^(#?[\w-]+|\.[\w-.]+)$/, + periodRe = /\./g, + slice = Array.prototype.slice, + matches = []; + + // Redirect call to the more performant function + // if it's a simple selector and return an array + // for easier usage + if (simpleRe.test(selector)) { + switch (selector[0]) { + case '#': + matches = [$(selector.substr(1))]; + break; + case '.': + matches = slice.call(context.getElementsByClassName( + selector.substr(1).replace(periodRe, ' '))); + break; + default: + matches = slice.call(context.getElementsByTagName(selector)); + } + } else { + // If not a simple selector, query the DOM as usual + // and return an array for easier usage + matches = slice.call(context.querySelectorAll(selector)); + } -function _addClass(el, klass, timeout) { - // use native if available - if (el.classList) { - el.classList.add(klass); - } else { - el.className = (el.className + ' ' + klass).trim(); + return (find_all) ? matches : matches[0]; } - if (timeout && isNumeric(timeout)) { - window.setTimeout(function () { return _removeClass(el, klass); }, timeout); + function $(id) { + id = (id[0] === '#') ? id.substr(1, id.length) : id; + return document.getElementById(id); } -} -function _removeClass(el, klass, timeout) { - if (el.classList) { - el.classList.remove(klass); - } else { - el.className = (el.className.replace(classRegex(klass), ' ')).trim(); - } - if (timeout && isNumeric(timeout)) { - window.setTimeout(function () { return _addClass(el, klass); }, timeout); + function offset(element) { + const rect = element.getBoundingClientRect(); + const docEl = document.documentElement; + return { + left: rect.left + window.pageXOffset - docEl.clientLeft, + top: rect.top + window.pageYOffset - docEl.clientTop, + width: element.offsetWidth, + height: element.offsetHeight + }; } -} -/** - * @class Internal - */ -var Internal = function Internal(base) { - /** - * @type {ol.control.Control} - */ - this.Base = base; - /** - * @type {ol.Map} - */ - this.map = undefined; - /** - * @type {Element} - */ - this.viewport = undefined; - /** - * @type {ol.Coordinate} - */ - this.coordinateClicked = undefined; - /** - * @type {ol.Pixel} - */ - this.pixelClicked = undefined; - /** - * @type {Number} - */ - this.lineHeight = 0; - /** - * @type {Object} - */ - this.items = {}; - /** - * @type {Boolean} - */ - this.opened = false; - /** - * @type {Object} - */ - this.submenu = { - left: base.options.width - 15 + 'px', - lastLeft: '' // string + px - }; - /** - * @type {Function} - */ - this.eventHandler = this.handleEvent.bind(this); - return this; -}; - -Internal.prototype.init = function init (map) { - this.map = map; - this.viewport = map.getViewport(); - this.setListeners(); - this.Base.Html.createMenu(); - - this.lineHeight = this.getItemsLength() > 0 - ? this.Base.container.offsetHeight / this.getItemsLength() - : this.Base.Html.cloneAndGetLineHeight(); -}; - -Internal.prototype.getItemsLength = function getItemsLength () { - var this$1 = this; - - let count = 0; - Object.keys(this.items).forEach(function (k) { - if (this$1.items[k].submenu || this$1.items[k].separator) { return; } - count++; - }); - return count; -}; - -Internal.prototype.getPixelClicked = function getPixelClicked () { - return this.pixelClicked; -}; - -Internal.prototype.getCoordinateClicked = function getCoordinateClicked () { - return this.coordinateClicked; -}; - -Internal.prototype.positionContainer = function positionContainer (pixel) { - var this$1 = this; - - const container = this.Base.container; - const mapSize = this.map.getSize(); - // how much (width) space left over - const space_left_h = mapSize[1] - pixel[1]; - // how much (height) space left over - const space_left_w = mapSize[0] - pixel[0]; - - const menuSize = { - w: container.offsetWidth, - // a cheap way to recalculate container height - // since offsetHeight is like cached - h: Math.round(this.lineHeight * this.getItemsLength()) - }; - // submenus - const subs = find(("li." + (CLASSNAME.submenu) + ">div"), container, true); - - if (space_left_w >= menuSize.w) { - container.style.right = 'auto'; - container.style.left = (pixel[0] + 5) + "px"; - } else { - container.style.left = 'auto'; - container.style.right = '15px'; + function getViewportSize() { + return { + w: window.innerWidth || document.documentElement.clientWidth, + h: window.innerHeight || document.documentElement.clientHeight + }; } - // set top or bottom - if (space_left_h >= menuSize.h) { - container.style.bottom = 'auto'; - container.style.top = (pixel[1] - 10) + "px"; - } else { - container.style.top = 'auto'; - container.style.bottom = 0; + + function createFragment(html) { + let frag = document.createDocumentFragment(), + temp = document.createElement('div'); + temp.innerHTML = html; + while (temp.firstChild) { + frag.appendChild(temp.firstChild); + } + return frag; } - removeClass(container, CLASSNAME.hidden); + function classRegex(classname) { + return new RegExp(("(^|\\s+) " + classname + " (\\s+|$)")); + } - if (subs.length) { - if (space_left_w < (menuSize.w * 2)) { - // no space (at right) for submenu - // position them at left - this.submenu.lastLeft = "-" + (menuSize.w) + "px"; + function _addClass(el, klass, timeout) { + // use native if available + if (el.classList) { + el.classList.add(klass); } else { - this.submenu.lastLeft = this.submenu.left; + el.className = (el.className + ' ' + klass).trim(); } - subs.forEach(function (sub) { - // is there enough space for submenu height? - const viewport = getViewportSize(); - const sub_offset = offset(sub); - const sub_height = sub_offset.height; - let sub_top = space_left_h - sub_height; - - if (sub_top < 0) { - sub_top = sub_height - (viewport.h - sub_offset.top); - sub.style.top = "-" + sub_top + "px"; - } - sub.style.left = this$1.submenu.lastLeft; - }); - } -}; -Internal.prototype.openMenu = function openMenu (pixel, coordinate) { - this.Base.dispatchEvent({ - type: EVENT_TYPE.OPEN, - pixel: pixel, - coordinate: coordinate - }); - this.opened = true; - this.positionContainer(pixel); -}; - -Internal.prototype.closeMenu = function closeMenu () { - this.opened = false; - addClass(this.Base.container, CLASSNAME.hidden); - this.Base.dispatchEvent({ - type: EVENT_TYPE.CLOSE - }); -}; + if (timeout && isNumeric(timeout)) { + window.setTimeout(function () { return _removeClass(el, klass); }, timeout); + } + } -Internal.prototype.setListeners = function setListeners () { - this.viewport.addEventListener( - this.Base.options.eventType, this.eventHandler, false); -}; + function _removeClass(el, klass, timeout) { + if (el.classList) { + el.classList.remove(klass); + } else { + el.className = (el.className.replace(classRegex(klass), ' ')).trim(); + } + if (timeout && isNumeric(timeout)) { + window.setTimeout(function () { return _addClass(el, klass); }, timeout); + } + } -Internal.prototype.removeListeners = function removeListeners () { - this.viewport.removeEventListener( - this.Base.options.eventType, this.eventHandler, false); -}; + /** + * @class Internal + */ + var Internal = function Internal(base) { + /** + * @type {ol.control.Control} + */ + this.Base = base; + /** + * @type {ol.Map} + */ + this.map = undefined; + /** + * @type {Element} + */ + this.viewport = undefined; + /** + * @type {ol.Coordinate} + */ + this.coordinateClicked = undefined; + /** + * @type {ol.Pixel} + */ + this.pixelClicked = undefined; + /** + * @type {Number} + */ + this.lineHeight = 0; + /** + * @type {Object} + */ + this.items = {}; + /** + * @type {Boolean} + */ + this.opened = false; + /** + * @type {Object} + */ + this.submenu = { + left: base.options.width - 15 + 'px', + lastLeft: '' // string + px + }; + /** + * @type {Function} + */ + this.eventHandler = this.handleEvent.bind(this); + return this; + }; -Internal.prototype.handleEvent = function handleEvent (evt) { - const this_ = this; + Internal.prototype.init = function init (map) { + this.map = map; + this.viewport = map.getViewport(); + this.setListeners(); + this.Base.Html.createMenu(); - this.coordinateClicked = this.map.getEventCoordinate(evt); - this.pixelClicked = this.map.getEventPixel(evt); + this.lineHeight = this.getItemsLength() > 0 + ? this.Base.container.offsetHeight / this.getItemsLength() + : this.Base.Html.cloneAndGetLineHeight(); + }; - this.Base.dispatchEvent({ - type: EVENT_TYPE.BEFOREOPEN, - pixel: this.pixelClicked, - coordinate: this.coordinateClicked - }); + Internal.prototype.getItemsLength = function getItemsLength () { + var this$1 = this; - if (this.Base.disabled) { return; } + let count = 0; + Object.keys(this.items).forEach(function (k) { + if (this$1.items[k].submenu || this$1.items[k].separator) { return; } + count++; + }); + return count; + }; - if (this.Base.options.eventType === EVENT_TYPE.CONTEXTMENU) { - // don't be intrusive with other event types - evt.stopPropagation(); - evt.preventDefault(); - } + Internal.prototype.getPixelClicked = function getPixelClicked () { + return this.pixelClicked; + }; - this.openMenu(this.pixelClicked, this.coordinateClicked); + Internal.prototype.getCoordinateClicked = function getCoordinateClicked () { + return this.coordinateClicked; + }; - //one-time fire - evt.target.addEventListener('mousedown', { - handleEvent: function (e) { - this_.closeMenu(); - evt.target.removeEventListener(e.type, this, false); + Internal.prototype.positionContainer = function positionContainer (pixel) { + var this$1 = this; + + const container = this.Base.container; + const mapSize = this.map.getSize(); + // how much (width) space left over + const space_left_h = mapSize[1] - pixel[1]; + // how much (height) space left over + const space_left_w = mapSize[0] - pixel[0]; + + const menuSize = { + w: container.offsetWidth, + // a cheap way to recalculate container height + // since offsetHeight is like cached + h: Math.round(this.lineHeight * this.getItemsLength()) + }; + // submenus + const subs = find(("li." + (CLASSNAME.submenu) + ">div"), container, true); + + if (space_left_w >= menuSize.w) { + container.style.right = 'auto'; + container.style.left = (pixel[0] + 5) + "px"; + } else { + container.style.left = 'auto'; + container.style.right = '15px'; } - }, false); -}; - -Internal.prototype.setItemListener = function setItemListener (li, index) { - const this_ = this; - if (li && typeof this.items[index].callback === 'function') { - (function (callback) { - li.addEventListener('click', function (evt) { - evt.preventDefault(); - const obj = { - coordinate: this_.getCoordinateClicked(), - data: this_.items[index].data || null - }; - this_.closeMenu(); - callback(obj, this_.map); - }, false); - })(this.items[index].callback); - } -}; - -/** - * @class Html - */ -var Html = function Html(base) { - this.Base = base; - this.Base.container = this.container = this.createContainer(); - return this; -}; - -Html.prototype.createContainer = function createContainer (hidden) { - const container = document.createElement('div'); - const ul = document.createElement('ul'); - const klasses =[CLASSNAME.container, CLASSNAME.OL_unselectable]; - - hidden && klasses.push(CLASSNAME.hidden); - container.className = klasses.join(' '); - container.style.width = parseInt(this.Base.options.width, 10) + 'px'; - container.appendChild(ul); - return container; -}; - -Html.prototype.createMenu = function createMenu () { - let items = []; - - if ('items' in this.Base.options) { - items = this.Base.options.defaultItems - ? this.Base.options.items.concat(DEFAULT_ITEMS) - : this.Base.options.items; - } else if (this.Base.options.defaultItems) { - items = DEFAULT_ITEMS; - } - // no item - if (items.length === 0) { return false; } - // create entries - items.forEach(this.addMenuEntry, this); -}; - -Html.prototype.addMenuEntry = function addMenuEntry (item) { - var this$1 = this; - - if (item.items && Array.isArray(item.items)) { - // submenu - only a second level - item.classname = item.classname || ''; - if (!contains(CLASSNAME.submenu, item.classname)) { - item.classname = item.classname.length - ? ' ' + CLASSNAME.submenu - : CLASSNAME.submenu; + // set top or bottom + if (space_left_h >= menuSize.h) { + container.style.bottom = 'auto'; + container.style.top = (pixel[1] - 10) + "px"; + } else { + container.style.top = 'auto'; + container.style.bottom = 0; } - let li = this.generateHtmlAndPublish(this.container, item); - let sub = this.createContainer(); - sub.style.left = this.Base.Internal.submenu.lastLeft || - this.Base.Internal.submenu.left; - li.appendChild(sub); + removeClass(container, CLASSNAME.hidden); - item.items.forEach(function (each) { - this$1.generateHtmlAndPublish(sub, each, true); - }); - } else { - this.generateHtmlAndPublish(this.container, item); - } -}; - -Html.prototype.generateHtmlAndPublish = function generateHtmlAndPublish (parent, item, submenu) { - let html, frag, element, separator = false; - const index = getUniqueId(); - - // separator - if (typeof item === 'string' && item.trim() === '-') { - html = [ - '
  • ', - '
    • ' - ].join(''); - frag = createFragment(html); - // http://stackoverflow.com/a/13347298/4640499 - element = [].slice.call(frag.childNodes, 0)[0]; - parent.firstChild.appendChild(frag); - // to exclude from lineHeight calculation - separator = true; - } else { - item.classname = item.classname || ''; - html = '' + item.text + ''; - frag = createFragment(html); - element = document.createElement('li'); - - if (item.icon) { - if (item.classname === '') { - item.classname = CLASSNAME.icon; - } else if (item.classname.indexOf(CLASSNAME.icon) === -1) { - item.classname += ' ' + CLASSNAME.icon; + if (subs.length) { + if (space_left_w < (menuSize.w * 2)) { + // no space (at right) for submenu + // position them at left + this.submenu.lastLeft = "-" + (menuSize.w) + "px"; + } else { + this.submenu.lastLeft = this.submenu.left; } - element.setAttribute('style', ("background-image:url(" + (item.icon) + ")")); + subs.forEach(function (sub) { + // is there enough space for submenu height? + const viewport = getViewportSize(); + const sub_offset = offset(sub); + const sub_height = sub_offset.height; + let sub_top = space_left_h - sub_height; + + if (sub_top < 0) { + sub_top = sub_height - (viewport.h - sub_offset.top); + sub.style.top = "-" + sub_top + "px"; + } + sub.style.left = this$1.submenu.lastLeft; + }); } + }; - element.id = index; - element.className = item.classname; - element.appendChild(frag); - parent.firstChild.appendChild(element); - } + Internal.prototype.openMenu = function openMenu (pixel, coordinate) { + this.Base.dispatchEvent({ + type: EVENT_TYPE.OPEN, + pixel: pixel, + coordinate: coordinate + }); + this.opened = true; + this.positionContainer(pixel); + }; - this.Base.Internal.items[index] = { - id: index, - submenu: submenu || 0, - separator: separator, - callback: item.callback, - data: item.data || null + Internal.prototype.closeMenu = function closeMenu () { + this.opened = false; + addClass(this.Base.container, CLASSNAME.hidden); + this.Base.dispatchEvent({ + type: EVENT_TYPE.CLOSE + }); }; - this.Base.Internal.setItemListener(element, index); - return element; -}; - -Html.prototype.removeMenuEntry = function removeMenuEntry (index) { - const element = find('#' + index, this.container.firstChild); - element && this.container.firstChild.removeChild(element); - delete this.Base.Internal.items[index]; -}; - -Html.prototype.cloneAndGetLineHeight = function cloneAndGetLineHeight () { - // for some reason I have to calculate with 2 items - const cloned = this.container.cloneNode(); - const frag = createFragment('Foo'); - const frag2 = createFragment('Foo'); - const element = document.createElement('li'); - const element2 = document.createElement('li'); - - element.appendChild(frag); - element2.appendChild(frag2); - cloned.appendChild(element); - cloned.appendChild(element2); - - this.container.parentNode.appendChild(cloned); - const height = cloned.offsetHeight / 2; - this.container.parentNode.removeChild(cloned); - return height; -}; - -/** - * @class Base - * @extends {ol.control.Control} - */ -var Base = (function (superclass) { - function Base(opt_options) { - if ( opt_options === void 0 ) opt_options = {}; - assert( - typeof opt_options == 'object', - '@param `opt_options` should be object type!' - ); + Internal.prototype.setListeners = function setListeners () { + this.viewport.addEventListener( + this.Base.options.eventType, this.eventHandler, false); + }; - this.options = mergeOptions(DEFAULT_OPTIONS, opt_options); - this.disabled = false; + Internal.prototype.removeListeners = function removeListeners () { + this.viewport.removeEventListener( + this.Base.options.eventType, this.eventHandler, false); + }; - this.Internal = new Internal(this); - this.Html = new Html(this); + Internal.prototype.handleEvent = function handleEvent (evt) { + const this_ = this; - superclass.call(this, { element: this.container }); - } + this.coordinateClicked = this.map.getEventCoordinate(evt); + this.pixelClicked = this.map.getEventPixel(evt); - if ( superclass ) Base.__proto__ = superclass; - Base.prototype = Object.create( superclass && superclass.prototype ); - Base.prototype.constructor = Base; + this.Base.dispatchEvent({ + type: EVENT_TYPE.BEFOREOPEN, + pixel: this.pixelClicked, + coordinate: this.coordinateClicked + }); - /** - * Remove all elements from the menu. - */ - Base.prototype.clear = function clear () { - Object.keys(this.Internal.items) - .forEach(this.Html.removeMenuEntry, this.Html); - }; + if (this.Base.disabled) { return; } - /** - * Close the menu programmatically. - */ - Base.prototype.close = function close () { - this.Internal.closeMenu(); - }; + if (this.Base.options.eventType === EVENT_TYPE.CONTEXTMENU) { + // don't be intrusive with other event types + evt.stopPropagation(); + evt.preventDefault(); + } - /** - * Enable menu - */ - Base.prototype.enable = function enable () { - this.disabled = false; - }; + this.openMenu(this.pixelClicked, this.coordinateClicked); - /** - * Disable menu - */ - Base.prototype.disable = function disable () { - this.disabled = true; + //one-time fire + evt.target.addEventListener('mousedown', { + handleEvent: function (e) { + this_.closeMenu(); + evt.target.removeEventListener(e.type, this, false); + } + }, false); }; - /** - * @return {Array} Returns default items - */ - Base.prototype.getDefaultItems = function getDefaultItems () { - return DEFAULT_ITEMS; + Internal.prototype.setItemListener = function setItemListener (li, index) { + const this_ = this; + if (li && typeof this.items[index].callback === 'function') { + (function (callback) { + li.addEventListener('click', function (evt) { + evt.preventDefault(); + const obj = { + coordinate: this_.getCoordinateClicked(), + data: this_.items[index].data || null + }; + this_.closeMenu(); + callback(obj, this_.map); + }, false); + })(this.items[index].callback); + } }; /** - * @return {Number} Returns how many items + * @class Html */ - Base.prototype.countItems = function countItems () { - return Object.keys(this.Internal.items).length; + var Html = function Html(base) { + this.Base = base; + this.Base.container = this.container = this.createContainer(); + return this; }; - /** - * Add items to the menu. This pushes each item in the provided array - * to the end of the menu. - * @param {Array} arr Array. - */ - Base.prototype.extend = function extend (arr) { - assert(Array.isArray(arr), '@param `arr` should be an Array.'); - arr.forEach(this.push, this); + Html.prototype.createContainer = function createContainer (hidden) { + const container = document.createElement('div'); + const ul = document.createElement('ul'); + const klasses =[CLASSNAME.container, CLASSNAME.OL_unselectable]; + + hidden && klasses.push(CLASSNAME.hidden); + container.className = klasses.join(' '); + container.style.width = parseInt(this.Base.options.width, 10) + 'px'; + container.appendChild(ul); + return container; }; - Base.prototype.isOpen = function isOpen () { - return this.Internal.opened; + Html.prototype.createMenu = function createMenu () { + let items = []; + + if ('items' in this.Base.options) { + items = this.Base.options.defaultItems + ? this.Base.options.items.concat(DEFAULT_ITEMS) + : this.Base.options.items; + } else if (this.Base.options.defaultItems) { + items = DEFAULT_ITEMS; + } + // no item + if (items.length === 0) { return false; } + // create entries + items.forEach(this.addMenuEntry, this); }; - /** - * Update the menu's position. - */ - Base.prototype.updatePosition = function updatePosition (pixel) { - assert(Array.isArray(pixel), '@param `pixel` should be an Array.'); + Html.prototype.addMenuEntry = function addMenuEntry (item) { + var this$1 = this; + + if (item.items && Array.isArray(item.items)) { + // submenu - only a second level + item.classname = item.classname || ''; + if (!contains(CLASSNAME.submenu, item.classname)) { + item.classname = item.classname.length + ? ' ' + CLASSNAME.submenu + : CLASSNAME.submenu; + } - if (this.isOpen()) { - this.Internal.positionContainer(pixel); + let li = this.generateHtmlAndPublish(this.container, item); + let sub = this.createContainer(); + sub.style.left = this.Base.Internal.submenu.lastLeft || + this.Base.Internal.submenu.left; + li.appendChild(sub); + + item.items.forEach(function (each) { + this$1.generateHtmlAndPublish(sub, each, true); + }); + } else { + this.generateHtmlAndPublish(this.container, item); } }; - /** - * Remove the last item of the menu. - */ - Base.prototype.pop = function pop () { - const keys = Object.keys(this.Internal.items); - this.Html.removeMenuEntry(keys[keys.length - 1]); + Html.prototype.generateHtmlAndPublish = function generateHtmlAndPublish (parent, item, submenu) { + let html, frag, element, separator = false; + const index = getUniqueId(); + + // separator + if (typeof item === 'string' && item.trim() === '-') { + html = [ + '
  • ', + '
    • ' + ].join(''); + frag = createFragment(html); + // http://stackoverflow.com/a/13347298/4640499 + element = [].slice.call(frag.childNodes, 0)[0]; + parent.firstChild.appendChild(frag); + // to exclude from lineHeight calculation + separator = true; + } else { + item.classname = item.classname || ''; + html = '' + item.text + ''; + frag = createFragment(html); + element = document.createElement('li'); + + if (item.icon) { + if (item.classname === '') { + item.classname = CLASSNAME.icon; + } else if (item.classname.indexOf(CLASSNAME.icon) === -1) { + item.classname += ' ' + CLASSNAME.icon; + } + element.setAttribute('style', ("background-image:url(" + (item.icon) + ")")); + } + + element.id = index; + element.className = item.classname; + element.appendChild(frag); + parent.firstChild.appendChild(element); + } + + this.Base.Internal.items[index] = { + id: index, + submenu: submenu || 0, + separator: separator, + callback: item.callback, + data: item.data || null + }; + this.Base.Internal.setItemListener(element, index); + return element; }; - /** - * Insert the provided item at the end of the menu. - * @param {Object|String} item Item. - */ - Base.prototype.push = function push (item) { - assert(isDefAndNotNull(item), '@param `item` must be informed.'); - this.Html.addMenuEntry(item); + Html.prototype.removeMenuEntry = function removeMenuEntry (index) { + const element = find('#' + index, this.container.firstChild); + element && this.container.firstChild.removeChild(element); + delete this.Base.Internal.items[index]; }; - /** - * Remove the first item of the menu. - */ - Base.prototype.shift = function shift () { - this.Html.removeMenuEntry(Object.keys(this.Internal.items)[0]); + Html.prototype.cloneAndGetLineHeight = function cloneAndGetLineHeight () { + // for some reason I have to calculate with 2 items + const cloned = this.container.cloneNode(); + const frag = createFragment('Foo'); + const frag2 = createFragment('Foo'); + const element = document.createElement('li'); + const element2 = document.createElement('li'); + + element.appendChild(frag); + element2.appendChild(frag2); + cloned.appendChild(element); + cloned.appendChild(element2); + + this.container.parentNode.appendChild(cloned); + const height = cloned.offsetHeight / 2; + this.container.parentNode.removeChild(cloned); + return height; }; /** - * Not supposed to be used on app. + * @class Base + * @extends {ol.control.Control} */ - Base.prototype.setMap = function setMap (map) { + var Base = (function (Control$$1) { + function Base(opt_options) { + if ( opt_options === void 0 ) opt_options = {}; - ol.control.Control.prototype.setMap.call(this, map); + assert( + typeof opt_options == 'object', + '@param `opt_options` should be object type!' + ); - if (map) { - // let's start since now we have the map - this.Internal.init(map, this); - } else { - // I'm removed from the map - remove listeners - this.Internal.removeListeners(); + this.options = mergeOptions(DEFAULT_OPTIONS, opt_options); + this.disabled = false; + + this.Internal = new Internal(this); + this.Html = new Html(this); + + Control$$1.call(this, { element: this.container }); } - }; - return Base; -}(ol.control.Control)); + if ( Control$$1 ) Base.__proto__ = Control$$1; + Base.prototype = Object.create( Control$$1 && Control$$1.prototype ); + Base.prototype.constructor = Base; + + /** + * Remove all elements from the menu. + */ + Base.prototype.clear = function clear () { + Object.keys(this.Internal.items) + .forEach(this.Html.removeMenuEntry, this.Html); + }; + + /** + * Close the menu programmatically. + */ + Base.prototype.close = function close () { + this.Internal.closeMenu(); + }; + + /** + * Enable menu + */ + Base.prototype.enable = function enable () { + this.disabled = false; + }; + + /** + * Disable menu + */ + Base.prototype.disable = function disable () { + this.disabled = true; + }; + + /** + * @return {Array} Returns default items + */ + Base.prototype.getDefaultItems = function getDefaultItems () { + return DEFAULT_ITEMS; + }; + + /** + * @return {Number} Returns how many items + */ + Base.prototype.countItems = function countItems () { + return Object.keys(this.Internal.items).length; + }; + + /** + * Add items to the menu. This pushes each item in the provided array + * to the end of the menu. + * @param {Array} arr Array. + */ + Base.prototype.extend = function extend (arr) { + assert(Array.isArray(arr), '@param `arr` should be an Array.'); + arr.forEach(this.push, this); + }; + + Base.prototype.isOpen = function isOpen () { + return this.Internal.opened; + }; + + /** + * Update the menu's position. + */ + Base.prototype.updatePosition = function updatePosition (pixel) { + assert(Array.isArray(pixel), '@param `pixel` should be an Array.'); + + if (this.isOpen()) { + this.Internal.positionContainer(pixel); + } + }; + + /** + * Remove the last item of the menu. + */ + Base.prototype.pop = function pop () { + const keys = Object.keys(this.Internal.items); + this.Html.removeMenuEntry(keys[keys.length - 1]); + }; + + /** + * Insert the provided item at the end of the menu. + * @param {Object|String} item Item. + */ + Base.prototype.push = function push (item) { + assert(isDefAndNotNull(item), '@param `item` must be informed.'); + this.Html.addMenuEntry(item); + }; + + /** + * Remove the first item of the menu. + */ + Base.prototype.shift = function shift () { + this.Html.removeMenuEntry(Object.keys(this.Internal.items)[0]); + }; + + /** + * Not supposed to be used on app. + */ + Base.prototype.setMap = function setMap (map) { + + Control$$1.prototype.setMap.call(this, map); + + if (map) { + // let's start since now we have the map + this.Internal.init(map, this); + } else { + // I'm removed from the map - remove listeners + this.Internal.removeListeners(); + } + }; + + return Base; + }(Control)); -return Base; + return Base; }))); diff --git a/dist/ol-contextmenu.css b/dist/ol-contextmenu.css index 1feaab4..8add2d7 100644 --- a/dist/ol-contextmenu.css +++ b/dist/ol-contextmenu.css @@ -1,8 +1,8 @@ /*! - * ol-contextmenu - v3.1.0 + * ol-contextmenu - v3.2.0 * Custom Context Menu for Openlayers * https://github.com/jonataswalker/ol-contextmenu - * Built: Sat Nov 18 2017 09:49:41 GMT-0200 (-02) + * Built: Thu Apr 05 2018 11:39:14 GMT-0300 (-03) */ .ol-ctx-menu-container { position: absolute; @@ -61,8 +61,7 @@ height: 0.6em; border-right: 0.3em solid #222; border-top: 0.3em solid #222; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); } + transform: rotate(45deg); } .ol-ctx-menu-container li.ol-ctx-menu-submenu:hover::after { border-color: #eee; } .ol-ctx-menu-container li.ol-ctx-menu-separator { diff --git a/dist/ol-contextmenu.js b/dist/ol-contextmenu.js index 8007e9e..3b41d2c 100644 --- a/dist/ol-contextmenu.js +++ b/dist/ol-contextmenu.js @@ -1,7 +1,7 @@ /*! - * ol-contextmenu - v3.1.0 + * ol-contextmenu - v3.2.0 * Custom Context Menu for Openlayers * https://github.com/jonataswalker/ol-contextmenu - * Built: Sat Nov 18 2017 09:49:39 GMT-0200 (-02) + * Built: Thu Apr 05 2018 11:39:12 GMT-0300 (-03) */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("openlayers")):"function"==typeof define&&define.amd?define(["openlayers"],e):t.ContextMenu=e(t.ol)}(this,function(t){"use strict";function e(t,e){if(void 0===e&&(e="Assertion failed"),!t){if("undefined"!=typeof Error)throw new Error(e);throw e}}function n(t){return/^\d+$/.test(t)}function s(t,e,n){if(Array.isArray(t))return void t.forEach(function(t){return s(t,e)});const i=Array.isArray(e)?e:e.split(/\s+/);let a=i.length;for(;a--;)o(t,i[a])||l(t,i[a],n)}function i(t,e,n){if(Array.isArray(t))return void t.forEach(function(t){return i(t,e,n)});const s=Array.isArray(e)?e:e.split(/\s+/);let a=s.length;for(;a--;)o(t,s[a])&&u(t,s[a],n)}function o(t,e){return t.classList?t.classList.contains(e):c(e).test(t.className)}function a(t,e,n){void 0===e&&(e=window.document);let s=/\./g,i=Array.prototype.slice,o=[];if(/^(#?[\w-]+|\.[\w-.]+)$/.test(t))switch(t[0]){case"#":o=[function(t){return t="#"===t[0]?t.substr(1,t.length):t,document.getElementById(t)}(t.substr(1))];break;case".":o=i.call(e.getElementsByClassName(t.substr(1).replace(s," ")));break;default:o=i.call(e.getElementsByTagName(t))}else o=i.call(e.querySelectorAll(t));return n?o:o[0]}function r(t){let e=document.createDocumentFragment(),n=document.createElement("div");for(n.innerHTML=t;n.firstChild;)e.appendChild(n.firstChild);return e}function c(t){return new RegExp("(^|\\s+) "+t+" (\\s+|$)")}function l(t,e,s){t.classList?t.classList.add(e):t.className=(t.className+" "+e).trim(),s&&n(s)&&window.setTimeout(function(){return u(t,e)},s)}function u(t,e,s){t.classList?t.classList.remove(e):t.className=t.className.replace(c(e)," ").trim(),s&&n(s)&&window.setTimeout(function(){return l(t,e)},s)}t=t&&t.hasOwnProperty("default")?t.default:t;var p={namespace:"ol-ctx-menu",container_class:"-container",separator_class:"-separator",submenu_class:"-submenu",hidden_class:"-hidden",icon_class:"-icon",zoom_in_class:"-zoom-in",zoom_out_class:"-zoom-out",ol_unselectable_class:"ol-unselectable"};const h=Object.freeze({namespace:"ol-ctx-menu",container_class:"-container",separator_class:"-separator",submenu_class:"-submenu",hidden_class:"-hidden",icon_class:"-icon",zoom_in_class:"-zoom-in",zoom_out_class:"-zoom-out",ol_unselectable_class:"ol-unselectable",default:p}),d={BEFOREOPEN:"beforeopen",OPEN:"open",CLOSE:"close",ADD_MENU_ENTRY:"add-menu-entry",CONTEXTMENU:"contextmenu",HOVER:"mouseover"},m={container:h.namespace+h.container_class,separator:h.namespace+h.separator_class,submenu:h.namespace+h.submenu_class,hidden:h.namespace+h.hidden_class,icon:h.namespace+h.icon_class,zoomIn:h.namespace+h.zoom_in_class,zoomOut:h.namespace+h.zoom_out_class,OL_unselectable:h.ol_unselectable_class},f={width:150,scrollAt:4,eventType:d.CONTEXTMENU,defaultItems:!0},y=[{text:"Zoom In",classname:m.zoomIn+" "+m.icon,callback:function(t,e){const n=e.getView();n.animate({zoom:+n.getZoom()+1,duration:700,center:t.coordinate})}},{text:"Zoom Out",classname:m.zoomOut+" "+m.icon,callback:function(t,e){const n=e.getView();n.animate({zoom:+n.getZoom()-1,duration:700,center:t.coordinate})}}];var b=function(t){return this.Base=t,this.map=void 0,this.viewport=void 0,this.coordinateClicked=void 0,this.pixelClicked=void 0,this.lineHeight=0,this.items={},this.opened=!1,this.submenu={left:t.options.width-15+"px",lastLeft:""},this.eventHandler=this.handleEvent.bind(this),this};b.prototype.init=function(t){this.map=t,this.viewport=t.getViewport(),this.setListeners(),this.Base.Html.createMenu(),this.lineHeight=this.getItemsLength()>0?this.Base.container.offsetHeight/this.getItemsLength():this.Base.Html.cloneAndGetLineHeight()},b.prototype.getItemsLength=function(){var t=this;let e=0;return Object.keys(this.items).forEach(function(n){t.items[n].submenu||t.items[n].separator||e++}),e},b.prototype.getPixelClicked=function(){return this.pixelClicked},b.prototype.getCoordinateClicked=function(){return this.coordinateClicked},b.prototype.positionContainer=function(t){var e=this;const n=this.Base.container,s=this.map.getSize(),o=s[1]-t[1],r=s[0]-t[0],c={w:n.offsetWidth,h:Math.round(this.lineHeight*this.getItemsLength())},l=a("li."+m.submenu+">div",n,!0);r>=c.w?(n.style.right="auto",n.style.left=t[0]+5+"px"):(n.style.left="auto",n.style.right="15px"),o>=c.h?(n.style.bottom="auto",n.style.top=t[1]-10+"px"):(n.style.top="auto",n.style.bottom=0),i(n,m.hidden),l.length&&(this.submenu.lastLeft=r<2*c.w?"-"+c.w+"px":this.submenu.left,l.forEach(function(t){const n={w:window.innerWidth||document.documentElement.clientWidth,h:window.innerHeight||document.documentElement.clientHeight},s=function(t){const e=t.getBoundingClientRect(),n=document.documentElement;return{left:e.left+window.pageXOffset-n.clientLeft,top:e.top+window.pageYOffset-n.clientTop,width:t.offsetWidth,height:t.offsetHeight}}(t),i=s.height;let a=o-i;a<0&&(a=i-(n.h-s.top),t.style.top="-"+a+"px"),t.style.left=e.submenu.lastLeft}))},b.prototype.openMenu=function(t,e){this.Base.dispatchEvent({type:d.OPEN,pixel:t,coordinate:e}),this.opened=!0,this.positionContainer(t)},b.prototype.closeMenu=function(){this.opened=!1,s(this.Base.container,m.hidden),this.Base.dispatchEvent({type:d.CLOSE})},b.prototype.setListeners=function(){this.viewport.addEventListener(this.Base.options.eventType,this.eventHandler,!1)},b.prototype.removeListeners=function(){this.viewport.removeEventListener(this.Base.options.eventType,this.eventHandler,!1)},b.prototype.handleEvent=function(t){const e=this;this.coordinateClicked=this.map.getEventCoordinate(t),this.pixelClicked=this.map.getEventPixel(t),this.Base.dispatchEvent({type:d.BEFOREOPEN,pixel:this.pixelClicked,coordinate:this.coordinateClicked}),this.Base.disabled||(this.Base.options.eventType===d.CONTEXTMENU&&(t.stopPropagation(),t.preventDefault()),this.openMenu(this.pixelClicked,this.coordinateClicked),t.target.addEventListener("mousedown",{handleEvent:function(n){e.closeMenu(),t.target.removeEventListener(n.type,this,!1)}},!1))},b.prototype.setItemListener=function(t,e){const n=this;t&&"function"==typeof this.items[e].callback&&function(s){t.addEventListener("click",function(t){t.preventDefault();const i={coordinate:n.getCoordinateClicked(),data:n.items[e].data||null};n.closeMenu(),s(i,n.map)},!1)}(this.items[e].callback)};var g=function(t){return this.Base=t,this.Base.container=this.container=this.createContainer(),this};g.prototype.createContainer=function(t){const e=document.createElement("div"),n=document.createElement("ul"),s=[m.container,m.OL_unselectable];return t&&s.push(m.hidden),e.className=s.join(" "),e.style.width=parseInt(this.Base.options.width,10)+"px",e.appendChild(n),e},g.prototype.createMenu=function(){let t=[];if("items"in this.Base.options?t=this.Base.options.defaultItems?this.Base.options.items.concat(y):this.Base.options.items:this.Base.options.defaultItems&&(t=y),0===t.length)return!1;t.forEach(this.addMenuEntry,this)},g.prototype.addMenuEntry=function(t){var e=this;if(t.items&&Array.isArray(t.items)){t.classname=t.classname||"",function(t,e){return!!~e.indexOf(t)}(m.submenu,t.classname)||(t.classname=t.classname.length?" "+m.submenu:m.submenu);let n=this.generateHtmlAndPublish(this.container,t),s=this.createContainer();s.style.left=this.Base.Internal.submenu.lastLeft||this.Base.Internal.submenu.left,n.appendChild(s),t.items.forEach(function(t){e.generateHtmlAndPublish(s,t,!0)})}else this.generateHtmlAndPublish(this.container,t)},g.prototype.generateHtmlAndPublish=function(t,e,n){let s,i,o,a=!1;const c="_"+Math.random().toString(36).substr(2,9);return"string"==typeof e&&"-"===e.trim()?(i=r(s=['
  • ',"
    • "].join("")),o=[].slice.call(i.childNodes,0)[0],t.firstChild.appendChild(i),a=!0):(e.classname=e.classname||"",i=r(s=""+e.text+""),o=document.createElement("li"),e.icon&&(""===e.classname?e.classname=m.icon:-1===e.classname.indexOf(m.icon)&&(e.classname+=" "+m.icon),o.setAttribute("style","background-image:url("+e.icon+")")),o.id=c,o.className=e.classname,o.appendChild(i),t.firstChild.appendChild(o)),this.Base.Internal.items[c]={id:c,submenu:n||0,separator:a,callback:e.callback,data:e.data||null},this.Base.Internal.setItemListener(o,c),o},g.prototype.removeMenuEntry=function(t){const e=a("#"+t,this.container.firstChild);e&&this.container.firstChild.removeChild(e),delete this.Base.Internal.items[t]},g.prototype.cloneAndGetLineHeight=function(){const t=this.container.cloneNode(),e=r("Foo"),n=r("Foo"),s=document.createElement("li"),i=document.createElement("li");s.appendChild(e),i.appendChild(n),t.appendChild(s),t.appendChild(i),this.container.parentNode.appendChild(t);const o=t.offsetHeight/2;return this.container.parentNode.removeChild(t),o};return function(n){function s(t){void 0===t&&(t={}),e("object"==typeof t,"@param `opt_options` should be object type!"),this.options=function(t,e){let n={};for(let e in t)n[e]=t[e];for(let t in e)n[t]=e[t];return n}(f,t),this.disabled=!1,this.Internal=new b(this),this.Html=new g(this),n.call(this,{element:this.container})}return n&&(s.__proto__=n),s.prototype=Object.create(n&&n.prototype),s.prototype.constructor=s,s.prototype.clear=function(){Object.keys(this.Internal.items).forEach(this.Html.removeMenuEntry,this.Html)},s.prototype.close=function(){this.Internal.closeMenu()},s.prototype.enable=function(){this.disabled=!1},s.prototype.disable=function(){this.disabled=!0},s.prototype.getDefaultItems=function(){return y},s.prototype.countItems=function(){return Object.keys(this.Internal.items).length},s.prototype.extend=function(t){e(Array.isArray(t),"@param `arr` should be an Array."),t.forEach(this.push,this)},s.prototype.isOpen=function(){return this.Internal.opened},s.prototype.updatePosition=function(t){e(Array.isArray(t),"@param `pixel` should be an Array."),this.isOpen()&&this.Internal.positionContainer(t)},s.prototype.pop=function(){const t=Object.keys(this.Internal.items);this.Html.removeMenuEntry(t[t.length-1])},s.prototype.push=function(t){e(function(t){return null!=t}(t),"@param `item` must be informed."),this.Html.addMenuEntry(t)},s.prototype.shift=function(){this.Html.removeMenuEntry(Object.keys(this.Internal.items)[0])},s.prototype.setMap=function(e){t.control.Control.prototype.setMap.call(this,e),e?this.Internal.init(e,this):this.Internal.removeListeners()},s}(t.control.Control)}); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("ol/control/control")):"function"==typeof define&&define.amd?define(["ol/control/control"],e):t.ContextMenu=e(t.ol.control.Control)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={namespace:"ol-ctx-menu",container_class:"-container",separator_class:"-separator",submenu_class:"-submenu",hidden_class:"-hidden",icon_class:"-icon",zoom_in_class:"-zoom-in",zoom_out_class:"-zoom-out",ol_unselectable_class:"ol-unselectable"};const n=Object.freeze({namespace:"ol-ctx-menu",container_class:"-container",separator_class:"-separator",submenu_class:"-submenu",hidden_class:"-hidden",icon_class:"-icon",zoom_in_class:"-zoom-in",zoom_out_class:"-zoom-out",ol_unselectable_class:"ol-unselectable",default:e}),s="beforeopen",i="open",o="close",a="contextmenu",r={container:n.namespace+n.container_class,separator:n.namespace+n.separator_class,submenu:n.namespace+n.submenu_class,hidden:n.namespace+n.hidden_class,icon:n.namespace+n.icon_class,zoomIn:n.namespace+n.zoom_in_class,zoomOut:n.namespace+n.zoom_out_class,OL_unselectable:n.ol_unselectable_class},c={width:150,scrollAt:4,eventType:a,defaultItems:!0},l=[{text:"Zoom In",classname:r.zoomIn+" "+r.icon,callback:function(t,e){const n=e.getView();n.animate({zoom:+n.getZoom()+1,duration:700,center:t.coordinate})}},{text:"Zoom Out",classname:r.zoomOut+" "+r.icon,callback:function(t,e){const n=e.getView();n.animate({zoom:+n.getZoom()-1,duration:700,center:t.coordinate})}}];function u(t,e){if(void 0===e&&(e="Assertion failed"),!t){if("undefined"!=typeof Error)throw new Error(e);throw e}}function p(t){return/^\d+$/.test(t)}function h(t,e){return t.classList?t.classList.contains(e):f(e).test(t.className)}function d(t,e,n){void 0===e&&(e=window.document);let s=/\./g,i=Array.prototype.slice,o=[];if(/^(#?[\w-]+|\.[\w-.]+)$/.test(t))switch(t[0]){case"#":o=[(a=t.substr(1),a="#"===a[0]?a.substr(1,a.length):a,document.getElementById(a))];break;case".":o=i.call(e.getElementsByClassName(t.substr(1).replace(s," ")));break;default:o=i.call(e.getElementsByTagName(t))}else o=i.call(e.querySelectorAll(t));var a;return n?o:o[0]}function m(t){let e=document.createDocumentFragment(),n=document.createElement("div");for(n.innerHTML=t;n.firstChild;)e.appendChild(n.firstChild);return e}function f(t){return new RegExp("(^|\\s+) "+t+" (\\s+|$)")}function y(t,e,n){t.classList?t.classList.add(e):t.className=(t.className+" "+e).trim(),n&&p(n)&&window.setTimeout(function(){return b(t,e)},n)}function b(t,e,n){t.classList?t.classList.remove(e):t.className=t.className.replace(f(e)," ").trim(),n&&p(n)&&window.setTimeout(function(){return y(t,e)},n)}var g=function(t){return this.Base=t,this.map=void 0,this.viewport=void 0,this.coordinateClicked=void 0,this.pixelClicked=void 0,this.lineHeight=0,this.items={},this.opened=!1,this.submenu={left:t.options.width-15+"px",lastLeft:""},this.eventHandler=this.handleEvent.bind(this),this};g.prototype.init=function(t){this.map=t,this.viewport=t.getViewport(),this.setListeners(),this.Base.Html.createMenu(),this.lineHeight=this.getItemsLength()>0?this.Base.container.offsetHeight/this.getItemsLength():this.Base.Html.cloneAndGetLineHeight()},g.prototype.getItemsLength=function(){var t=this;let e=0;return Object.keys(this.items).forEach(function(n){t.items[n].submenu||t.items[n].separator||e++}),e},g.prototype.getPixelClicked=function(){return this.pixelClicked},g.prototype.getCoordinateClicked=function(){return this.coordinateClicked},g.prototype.positionContainer=function(t){var e=this;const n=this.Base.container,s=this.map.getSize(),i=s[1]-t[1],o=s[0]-t[0],a=n.offsetWidth,c=Math.round(this.lineHeight*this.getItemsLength()),l=d("li."+r.submenu+">div",n,!0);o>=a?(n.style.right="auto",n.style.left=t[0]+5+"px"):(n.style.left="auto",n.style.right="15px"),i>=c?(n.style.bottom="auto",n.style.top=t[1]-10+"px"):(n.style.top="auto",n.style.bottom=0),function t(e,n,s){if(Array.isArray(e))return void e.forEach(function(e){return t(e,n,s)});const i=Array.isArray(n)?n:n.split(/\s+/);let o=i.length;for(;o--;)h(e,i[o])&&b(e,i[o],s)}(n,r.hidden),l.length&&(this.submenu.lastLeft=o<2*a?"-"+a+"px":this.submenu.left,l.forEach(function(t){const n={w:window.innerWidth||document.documentElement.clientWidth,h:window.innerHeight||document.documentElement.clientHeight},s=function(t){const e=t.getBoundingClientRect(),n=document.documentElement;return{left:e.left+window.pageXOffset-n.clientLeft,top:e.top+window.pageYOffset-n.clientTop,width:t.offsetWidth,height:t.offsetHeight}}(t),o=s.height;let a=i-o;a<0&&(a=o-(n.h-s.top),t.style.top="-"+a+"px"),t.style.left=e.submenu.lastLeft}))},g.prototype.openMenu=function(t,e){this.Base.dispatchEvent({type:i,pixel:t,coordinate:e}),this.opened=!0,this.positionContainer(t)},g.prototype.closeMenu=function(){this.opened=!1,function t(e,n,s){if(Array.isArray(e))return void e.forEach(function(e){return t(e,n)});const i=Array.isArray(n)?n:n.split(/\s+/);let o=i.length;for(;o--;)h(e,i[o])||y(e,i[o],s)}(this.Base.container,r.hidden),this.Base.dispatchEvent({type:o})},g.prototype.setListeners=function(){this.viewport.addEventListener(this.Base.options.eventType,this.eventHandler,!1)},g.prototype.removeListeners=function(){this.viewport.removeEventListener(this.Base.options.eventType,this.eventHandler,!1)},g.prototype.handleEvent=function(t){const e=this;this.coordinateClicked=this.map.getEventCoordinate(t),this.pixelClicked=this.map.getEventPixel(t),this.Base.dispatchEvent({type:s,pixel:this.pixelClicked,coordinate:this.coordinateClicked}),this.Base.disabled||(this.Base.options.eventType===a&&(t.stopPropagation(),t.preventDefault()),this.openMenu(this.pixelClicked,this.coordinateClicked),t.target.addEventListener("mousedown",{handleEvent:function(n){e.closeMenu(),t.target.removeEventListener(n.type,this,!1)}},!1))},g.prototype.setItemListener=function(t,e){const n=this;var s;t&&"function"==typeof this.items[e].callback&&(s=this.items[e].callback,t.addEventListener("click",function(t){t.preventDefault();const i={coordinate:n.getCoordinateClicked(),data:n.items[e].data||null};n.closeMenu(),s(i,n.map)},!1))};var v=function(t){return this.Base=t,this.Base.container=this.container=this.createContainer(),this};return v.prototype.createContainer=function(t){const e=document.createElement("div"),n=document.createElement("ul"),s=[r.container,r.OL_unselectable];return t&&s.push(r.hidden),e.className=s.join(" "),e.style.width=parseInt(this.Base.options.width,10)+"px",e.appendChild(n),e},v.prototype.createMenu=function(){let t=[];if("items"in this.Base.options?t=this.Base.options.defaultItems?this.Base.options.items.concat(l):this.Base.options.items:this.Base.options.defaultItems&&(t=l),0===t.length)return!1;t.forEach(this.addMenuEntry,this)},v.prototype.addMenuEntry=function(t){var e,n=this;if(t.items&&Array.isArray(t.items)){t.classname=t.classname||"",e=r.submenu,~t.classname.indexOf(e)||(t.classname=t.classname.length?" "+r.submenu:r.submenu);let s=this.generateHtmlAndPublish(this.container,t),i=this.createContainer();i.style.left=this.Base.Internal.submenu.lastLeft||this.Base.Internal.submenu.left,s.appendChild(i),t.items.forEach(function(t){n.generateHtmlAndPublish(i,t,!0)})}else this.generateHtmlAndPublish(this.container,t)},v.prototype.generateHtmlAndPublish=function(t,e,n){let s,i,o,a=!1;const c="_"+Math.random().toString(36).substr(2,9);return"string"==typeof e&&"-"===e.trim()?(i=m(s=['
  • ',"
    • "].join("")),o=[].slice.call(i.childNodes,0)[0],t.firstChild.appendChild(i),a=!0):(e.classname=e.classname||"",i=m(s=""+e.text+""),o=document.createElement("li"),e.icon&&(""===e.classname?e.classname=r.icon:-1===e.classname.indexOf(r.icon)&&(e.classname+=" "+r.icon),o.setAttribute("style","background-image:url("+e.icon+")")),o.id=c,o.className=e.classname,o.appendChild(i),t.firstChild.appendChild(o)),this.Base.Internal.items[c]={id:c,submenu:n||0,separator:a,callback:e.callback,data:e.data||null},this.Base.Internal.setItemListener(o,c),o},v.prototype.removeMenuEntry=function(t){const e=d("#"+t,this.container.firstChild);e&&this.container.firstChild.removeChild(e),delete this.Base.Internal.items[t]},v.prototype.cloneAndGetLineHeight=function(){const t=this.container.cloneNode(),e=m("Foo"),n=m("Foo"),s=document.createElement("li"),i=document.createElement("li");s.appendChild(e),i.appendChild(n),t.appendChild(s),t.appendChild(i),this.container.parentNode.appendChild(t);const o=t.offsetHeight/2;return this.container.parentNode.removeChild(t),o},function(t){function e(e){void 0===e&&(e={}),u("object"==typeof e,"@param `opt_options` should be object type!"),this.options=function(t,e){let n={};for(let e in t)n[e]=t[e];for(let t in e)n[t]=e[t];return n}(c,e),this.disabled=!1,this.Internal=new g(this),this.Html=new v(this),t.call(this,{element:this.container})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.clear=function(){Object.keys(this.Internal.items).forEach(this.Html.removeMenuEntry,this.Html)},e.prototype.close=function(){this.Internal.closeMenu()},e.prototype.enable=function(){this.disabled=!1},e.prototype.disable=function(){this.disabled=!0},e.prototype.getDefaultItems=function(){return l},e.prototype.countItems=function(){return Object.keys(this.Internal.items).length},e.prototype.extend=function(t){u(Array.isArray(t),"@param `arr` should be an Array."),t.forEach(this.push,this)},e.prototype.isOpen=function(){return this.Internal.opened},e.prototype.updatePosition=function(t){u(Array.isArray(t),"@param `pixel` should be an Array."),this.isOpen()&&this.Internal.positionContainer(t)},e.prototype.pop=function(){const t=Object.keys(this.Internal.items);this.Html.removeMenuEntry(t[t.length-1])},e.prototype.push=function(t){u(null!=t,"@param `item` must be informed."),this.Html.addMenuEntry(t)},e.prototype.shift=function(){this.Html.removeMenuEntry(Object.keys(this.Internal.items)[0])},e.prototype.setMap=function(e){t.prototype.setMap.call(this,e),e?this.Internal.init(e,this):this.Internal.removeListeners()},e}(t)}); diff --git a/dist/ol-contextmenu.min.css b/dist/ol-contextmenu.min.css index 4918632..d189e13 100644 --- a/dist/ol-contextmenu.min.css +++ b/dist/ol-contextmenu.min.css @@ -1,7 +1,7 @@ /*! - * ol-contextmenu - v3.1.0 + * ol-contextmenu - v3.2.0 * Custom Context Menu for Openlayers * https://github.com/jonataswalker/ol-contextmenu - * Built: Sat Nov 18 2017 09:49:41 GMT-0200 (-02) + * Built: Thu Apr 05 2018 11:39:14 GMT-0300 (-03) */ -.ol-ctx-menu-container{position:absolute;padding:8px;background:#fff;color:#222;font-size:13px;border-radius:5px;box-shadow:3px 3px 5px rgba(0,0,0,.2);box-sizing:border-box}.ol-ctx-menu-container a,.ol-ctx-menu-container div,.ol-ctx-menu-container img,.ol-ctx-menu-container li,.ol-ctx-menu-container span,.ol-ctx-menu-container ul{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}.ol-ctx-menu-container a img{border:none}.ol-ctx-menu-container *,.ol-ctx-menu-container :after,.ol-ctx-menu-container :before{box-sizing:inherit}.ol-ctx-menu-container.ol-ctx-menu-hidden{opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container ul{list-style:none}.ol-ctx-menu-container li{position:relative;line-height:20px;padding:2px 5px}.ol-ctx-menu-container li:not(.ol-ctx-menu-separator):hover{cursor:pointer;background-color:#333;color:#eee}.ol-ctx-menu-container li.ol-ctx-menu-submenu .ol-ctx-menu-container{border:1px solid #eee;padding:8px;top:0;opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container li.ol-ctx-menu-submenu:hover .ol-ctx-menu-container{opacity:1;visibility:visible;transition-delay:0s}.ol-ctx-menu-container li.ol-ctx-menu-submenu:after{position:absolute;top:7px;right:10px;content:"";display:inline-block;width:.6em;height:.6em;border-right:.3em solid #222;border-top:.3em solid #222;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.ol-ctx-menu-container li.ol-ctx-menu-submenu:hover:after{border-color:#eee}.ol-ctx-menu-container li.ol-ctx-menu-separator{padding:0}.ol-ctx-menu-container li.ol-ctx-menu-separator hr{border:0;height:1px;background-image:linear-gradient(270deg,transparent,rgba(0,0,0,.75),transparent)}.ol-ctx-menu-icon{text-indent:20px;background-size:20px auto;background-repeat:no-repeat;background-position:0}.ol-ctx-menu-zoom-in{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABaUlEQVQ4T72U7VHCQBCGn90GtAMuNGCswFiBWIFQgWMFxg6wArECsQKhArEBiB1Qwa1zgQn5IAYcxv13k71n3919L8KJQ07M47+BzgG9TRfZ/JBuWhS6BJFHRJICYrZGZIz3z5Ct2+B7gG6I6kt+wewdkQVwjtkAkR5mC8yu26A1oItR/cTsOweQBdgutD8G7jGm2PJ2n8oqUKIpIjd4HxTM8gvaT/F+AlmWnyWaIXKF95eNguFzTYFhNsdWu9kFgFlaFMANUH3D8wDLoLgSTSD2il8NCe2ZXQBxWDGwxmyUzzOMBZ7wy7Qb2K0wQfXjMOBuhlFpZtNty5sFaTQBuTusZdymeqs1SpYKcO9HkE3KbTd9WFijMHJQ5hBNEAYNq5Qd0dhyke0GiE4QzjqfW23mHT8Hl4DG4Lce3FPE7AtbBSdsbNqpoJLgYkRnNeUV+xwJDHTnUEkxHGbhBXUs5TjJjew/KPy94g+NRaIVRYmMXwAAAABJRU5ErkJggg==")}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-in{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABc0lEQVQ4T71U21ECQRDsJgGdvQDECMQIxAjECMQILCPwzAAjECIQI0AiEDPQAPaWCBhrcKHuCUcV5f7dY3v6tUscefHIePhfwBBCF8CZqRCReRs1tQxDCH1VfQLQz4EsSY4AvIjIsgm8AhhCGKrqa9zwrqoLAKckB5HtguR1E2gBMITQU9VPAD8GICIGtl3e+xHJBwBT59xtHcsCYJZlUwA3kcGHbfDep51OZywi3/acZZm9vyJ5WR5o38uACmDunNt6ZwAkUxFZDwghDFT1jeSjiJinhVUBVNVJkiTDKO8CQA+AsbNQ7s1Ps0VVn5MkSfcCtmBoDZi1Bdx4eJ7zbBolrwPy3o9J3rWSHPs3A1BbjVKlYBaIyDgvu9LDXDU2RTZmXVW1oKyLxRD+OrkOrJLy5mVM0iaftDhuhVbsvBzMglzKUNW6IV/OOWtCM8MmVvEkmbwt83LaB19fdgOtVquUZJeknaDdobTwbOcvBzPcN/AXH1DFFWP7u9oAAAAASUVORK5CYII=")}.ol-ctx-menu-zoom-out{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABU0lEQVQ4T72U7VECMRRFz3sNaAdkacC1AtcKxApcKnCsQOwAK3CtQKxAqEBsANYOqCDPyTIC+8WCw5jfybn33dxEOPGSE/P4b6BzQG89RT47ZJoWhy5B5BGRZAMxWyEyxvtnyFdt8AagS1F9KQ6YvSMyB84xGyDSw2yO2XUbtAJ0MaqfmH0XAPIA2y7tj4F7jAm2uG1yWQZKNEHkBu+Dg2njWBJNEbnC+8uaIFRuWfuG2QxbbrOrUd0A1Tc8D7AIjkur7DAAsVf8MiWMZ3ZR2m02LPIMscATfjHqBnY7TFD9OAy4zTCCPG/MUKMM5O6wkXFr9dZq7FQqqHk/hDzbFa73cFONTZFDdRyiCcKg5rrSiLaXkiI6RjjrfG6VzDs+B5eAxuDXeYpmNRGzL2wZ/wof+du4GNFpBVqqz5HA4MM5VEYYDrOs+1I6Q9u/4Q8O9wN/AGgWjBVqQjjgAAAAAElFTkSuQmCC")}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-out{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABYklEQVQ4T72U4VHCQBCF36tA91KAWIFYgViBWIFYgWMFYgdYgVCBWAFSgdiBFpAsFWSdxcDkQoBkhnF/ZjbfvX377ogjF4/Mw/8CVbUD4MynEJF5k2lqFapqz8yeAPRKkCXJEYAXEVnugm8BVXVgZq/FD+9mtgBwSrJfqF2QvN4FjYCq2jWzTwA/DhARh20qTdMRyQcA0xDCbZ3KCJhl2RTATaHgo+6HLMv8+xXJy+qB3l8FGoB5CKHsXcRV1b6ZvZF8FBH3NKotoJlNkiQZFONdlLtJ3rufbouZPSdJMjwIbKDQEzBrClx7eC4i33Uepmk6JnnXaOQifzMAtdGoRApugYiMI1uqKkrRWAfZo9MxM1+UZzFewl8mN4nYdVM83L7BkwbXLUrF3sfBLQDQBbDy08x8vOohXyEE71lVq9emuEk+3gZa3XYroCvwFyjP8yHJDsnxwaU08GxvS2uFhw78BbzWrxXgMbsHAAAAAElFTkSuQmCC")} \ No newline at end of file +.ol-ctx-menu-container{position:absolute;padding:8px;background:#fff;color:#222;font-size:13px;border-radius:5px;box-shadow:3px 3px 5px rgba(0,0,0,.2);box-sizing:border-box}.ol-ctx-menu-container a,.ol-ctx-menu-container div,.ol-ctx-menu-container img,.ol-ctx-menu-container li,.ol-ctx-menu-container span,.ol-ctx-menu-container ul{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}.ol-ctx-menu-container a img{border:none}.ol-ctx-menu-container *,.ol-ctx-menu-container :after,.ol-ctx-menu-container :before{box-sizing:inherit}.ol-ctx-menu-container.ol-ctx-menu-hidden{opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container ul{list-style:none}.ol-ctx-menu-container li{position:relative;line-height:20px;padding:2px 5px}.ol-ctx-menu-container li:not(.ol-ctx-menu-separator):hover{cursor:pointer;background-color:#333;color:#eee}.ol-ctx-menu-container li.ol-ctx-menu-submenu .ol-ctx-menu-container{border:1px solid #eee;padding:8px;top:0;opacity:0;visibility:hidden;transition:visibility 0s linear .3s,opacity .3s}.ol-ctx-menu-container li.ol-ctx-menu-submenu:hover .ol-ctx-menu-container{opacity:1;visibility:visible;transition-delay:0s}.ol-ctx-menu-container li.ol-ctx-menu-submenu:after{position:absolute;top:7px;right:10px;content:"";display:inline-block;width:.6em;height:.6em;border-right:.3em solid #222;border-top:.3em solid #222;transform:rotate(45deg)}.ol-ctx-menu-container li.ol-ctx-menu-submenu:hover:after{border-color:#eee}.ol-ctx-menu-container li.ol-ctx-menu-separator{padding:0}.ol-ctx-menu-container li.ol-ctx-menu-separator hr{border:0;height:1px;background-image:linear-gradient(270deg,transparent,rgba(0,0,0,.75),transparent)}.ol-ctx-menu-icon{text-indent:20px;background-size:20px auto;background-repeat:no-repeat;background-position:0}.ol-ctx-menu-zoom-in{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABaUlEQVQ4T72U7VHCQBCGn90GtAMuNGCswFiBWIFQgWMFxg6wArECsQKhArEBiB1Qwa1zgQn5IAYcxv13k71n3919L8KJQ07M47+BzgG9TRfZ/JBuWhS6BJFHRJICYrZGZIz3z5Ct2+B7gG6I6kt+wewdkQVwjtkAkR5mC8yu26A1oItR/cTsOweQBdgutD8G7jGm2PJ2n8oqUKIpIjd4HxTM8gvaT/F+AlmWnyWaIXKF95eNguFzTYFhNsdWu9kFgFlaFMANUH3D8wDLoLgSTSD2il8NCe2ZXQBxWDGwxmyUzzOMBZ7wy7Qb2K0wQfXjMOBuhlFpZtNty5sFaTQBuTusZdymeqs1SpYKcO9HkE3KbTd9WFijMHJQ5hBNEAYNq5Qd0dhyke0GiE4QzjqfW23mHT8Hl4DG4Lce3FPE7AtbBSdsbNqpoJLgYkRnNeUV+xwJDHTnUEkxHGbhBXUs5TjJjew/KPy94g+NRaIVRYmMXwAAAABJRU5ErkJggg==")}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-in{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABc0lEQVQ4T71U21ECQRDsJgGdvQDECMQIxAjECMQILCPwzAAjECIQI0AiEDPQAPaWCBhrcKHuCUcV5f7dY3v6tUscefHIePhfwBBCF8CZqRCReRs1tQxDCH1VfQLQz4EsSY4AvIjIsgm8AhhCGKrqa9zwrqoLAKckB5HtguR1E2gBMITQU9VPAD8GICIGtl3e+xHJBwBT59xtHcsCYJZlUwA3kcGHbfDep51OZywi3/acZZm9vyJ5WR5o38uACmDunNt6ZwAkUxFZDwghDFT1jeSjiJinhVUBVNVJkiTDKO8CQA+AsbNQ7s1Ps0VVn5MkSfcCtmBoDZi1Bdx4eJ7zbBolrwPy3o9J3rWSHPs3A1BbjVKlYBaIyDgvu9LDXDU2RTZmXVW1oKyLxRD+OrkOrJLy5mVM0iaftDhuhVbsvBzMglzKUNW6IV/OOWtCM8MmVvEkmbwt83LaB19fdgOtVquUZJeknaDdobTwbOcvBzPcN/AXH1DFFWP7u9oAAAAASUVORK5CYII=")}.ol-ctx-menu-zoom-out{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABU0lEQVQ4T72U7VECMRRFz3sNaAdkacC1AtcKxApcKnCsQOwAK3CtQKxAqEBsANYOqCDPyTIC+8WCw5jfybn33dxEOPGSE/P4b6BzQG89RT47ZJoWhy5B5BGRZAMxWyEyxvtnyFdt8AagS1F9KQ6YvSMyB84xGyDSw2yO2XUbtAJ0MaqfmH0XAPIA2y7tj4F7jAm2uG1yWQZKNEHkBu+Dg2njWBJNEbnC+8uaIFRuWfuG2QxbbrOrUd0A1Tc8D7AIjkur7DAAsVf8MiWMZ3ZR2m02LPIMscATfjHqBnY7TFD9OAy4zTCCPG/MUKMM5O6wkXFr9dZq7FQqqHk/hDzbFa73cFONTZFDdRyiCcKg5rrSiLaXkiI6RjjrfG6VzDs+B5eAxuDXeYpmNRGzL2wZ/wof+du4GNFpBVqqz5HA4MM5VEYYDrOs+1I6Q9u/4Q8O9wN/AGgWjBVqQjjgAAAAAElFTkSuQmCC")}.ol-ctx-menu-container li:hover.ol-ctx-menu-zoom-out{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABYklEQVQ4T72U4VHCQBCF36tA91KAWIFYgViBWIFYgWMFYgdYgVCBWAFSgdiBFpAsFWSdxcDkQoBkhnF/ZjbfvX377ogjF4/Mw/8CVbUD4MynEJF5k2lqFapqz8yeAPRKkCXJEYAXEVnugm8BVXVgZq/FD+9mtgBwSrJfqF2QvN4FjYCq2jWzTwA/DhARh20qTdMRyQcA0xDCbZ3KCJhl2RTATaHgo+6HLMv8+xXJy+qB3l8FGoB5CKHsXcRV1b6ZvZF8FBH3NKotoJlNkiQZFONdlLtJ3rufbouZPSdJMjwIbKDQEzBrClx7eC4i33Uepmk6JnnXaOQifzMAtdGoRApugYiMI1uqKkrRWAfZo9MxM1+UZzFewl8mN4nYdVM83L7BkwbXLUrF3sfBLQDQBbDy08x8vOohXyEE71lVq9emuEk+3gZa3XYroCvwFyjP8yHJDsnxwaU08GxvS2uFhw78BbzWrxXgMbsHAAAAAElFTkSuQmCC")} \ No newline at end of file From 74d09390ec81936ad58f6cfdca4896d726f545e3 Mon Sep 17 00:00:00 2001 From: Jonatas Walker Date: Thu, 5 Apr 2018 11:42:04 -0300 Subject: [PATCH 2/2] Release v3.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4ad034e..5a708e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ol-contextmenu", - "version": "3.1.0", + "version": "3.2.0", "description": "Custom Context Menu for Openlayers", "main": "dist/ol-contextmenu.js", "author": "Jonatas Walker",