diff --git a/src/ol/overlay.js b/src/ol/overlay.js index e555b8c3d4..9e7beac57a 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -36,32 +36,38 @@ ol.Overlay = function(options) { ol.Object.call(this); /** - * @private - * @type {number|string|undefined} + * @protected + * @type {olx.OverlayOptions} */ - this.id_ = options.id; + this.options = options; /** - * @private + * @protected + * @type {number|string|undefined} + */ + this.id = options.id; + + /** + * @protected * @type {boolean} */ - this.insertFirst_ = options.insertFirst !== undefined ? + this.insertFirst = options.insertFirst !== undefined ? options.insertFirst : true; /** - * @private + * @protected * @type {boolean} */ - this.stopEvent_ = options.stopEvent !== undefined ? options.stopEvent : true; + this.stopEvent = options.stopEvent !== undefined ? options.stopEvent : true; /** - * @private + * @protected * @type {Element} */ - this.element_ = document.createElement('DIV'); - this.element_.className = options.className !== undefined ? + this.element = document.createElement('DIV'); + this.element.className = options.className !== undefined ? options.className : 'ol-overlay-container ' + ol.css.CLASS_SELECTABLE; - this.element_.style.position = 'absolute'; + this.element.style.position = 'absolute'; /** * @protected @@ -70,28 +76,28 @@ ol.Overlay = function(options) { this.autoPan = options.autoPan !== undefined ? options.autoPan : false; /** - * @private + * @protected * @type {olx.OverlayPanOptions} */ - this.autoPanAnimation_ = options.autoPanAnimation || + this.autoPanAnimation = options.autoPanAnimation || /** @type {olx.OverlayPanOptions} */ ({}); /** - * @private + * @protected * @type {number} */ - this.autoPanMargin_ = options.autoPanMargin !== undefined ? + this.autoPanMargin = options.autoPanMargin !== undefined ? options.autoPanMargin : 20; /** - * @private + * @protected * @type {{bottom_: string, * left_: string, * right_: string, * top_: string, * visible: boolean}} */ - this.rendered_ = { + this.rendered = { bottom_: '', left_: '', right_: '', @@ -100,29 +106,29 @@ ol.Overlay = function(options) { }; /** - * @private + * @protected * @type {?ol.EventsKey} */ - this.mapPostrenderListenerKey_ = null; + this.mapPostrenderListenerKey = null; ol.events.listen( - this, ol.Object.getChangeEventType(ol.Overlay.Property_.ELEMENT), + this, ol.Object.getChangeEventType(ol.Overlay.Property.ELEMENT), this.handleElementChanged, this); ol.events.listen( - this, ol.Object.getChangeEventType(ol.Overlay.Property_.MAP), + this, ol.Object.getChangeEventType(ol.Overlay.Property.MAP), this.handleMapChanged, this); ol.events.listen( - this, ol.Object.getChangeEventType(ol.Overlay.Property_.OFFSET), + this, ol.Object.getChangeEventType(ol.Overlay.Property.OFFSET), this.handleOffsetChanged, this); ol.events.listen( - this, ol.Object.getChangeEventType(ol.Overlay.Property_.POSITION), + this, ol.Object.getChangeEventType(ol.Overlay.Property.POSITION), this.handlePositionChanged, this); ol.events.listen( - this, ol.Object.getChangeEventType(ol.Overlay.Property_.POSITIONING), + this, ol.Object.getChangeEventType(ol.Overlay.Property.POSITIONING), this.handlePositioningChanged, this); if (options.element !== undefined) { @@ -151,7 +157,7 @@ ol.inherits(ol.Overlay, ol.Object); */ ol.Overlay.prototype.getElement = function() { return /** @type {Element|undefined} */ ( - this.get(ol.Overlay.Property_.ELEMENT)); + this.get(ol.Overlay.Property.ELEMENT)); }; @@ -161,7 +167,7 @@ ol.Overlay.prototype.getElement = function() { * @api */ ol.Overlay.prototype.getId = function() { - return this.id_; + return this.id; }; @@ -173,7 +179,7 @@ ol.Overlay.prototype.getId = function() { */ ol.Overlay.prototype.getMap = function() { return /** @type {ol.PluggableMap|undefined} */ ( - this.get(ol.Overlay.Property_.MAP)); + this.get(ol.Overlay.Property.MAP)); }; @@ -185,7 +191,7 @@ ol.Overlay.prototype.getMap = function() { */ ol.Overlay.prototype.getOffset = function() { return /** @type {Array.} */ ( - this.get(ol.Overlay.Property_.OFFSET)); + this.get(ol.Overlay.Property.OFFSET)); }; @@ -198,7 +204,7 @@ ol.Overlay.prototype.getOffset = function() { */ ol.Overlay.prototype.getPosition = function() { return /** @type {ol.Coordinate|undefined} */ ( - this.get(ol.Overlay.Property_.POSITION)); + this.get(ol.Overlay.Property.POSITION)); }; @@ -211,7 +217,7 @@ ol.Overlay.prototype.getPosition = function() { */ ol.Overlay.prototype.getPositioning = function() { return /** @type {ol.OverlayPositioning} */ ( - this.get(ol.Overlay.Property_.POSITIONING)); + this.get(ol.Overlay.Property.POSITIONING)); }; @@ -219,10 +225,10 @@ ol.Overlay.prototype.getPositioning = function() { * @protected */ ol.Overlay.prototype.handleElementChanged = function() { - ol.dom.removeChildren(this.element_); + ol.dom.removeChildren(this.element); var element = this.getElement(); if (element) { - this.element_.appendChild(element); + this.element.appendChild(element); } }; @@ -231,22 +237,22 @@ ol.Overlay.prototype.handleElementChanged = function() { * @protected */ ol.Overlay.prototype.handleMapChanged = function() { - if (this.mapPostrenderListenerKey_) { - ol.dom.removeNode(this.element_); - ol.events.unlistenByKey(this.mapPostrenderListenerKey_); - this.mapPostrenderListenerKey_ = null; + if (this.mapPostrenderListenerKey) { + ol.dom.removeNode(this.element); + ol.events.unlistenByKey(this.mapPostrenderListenerKey); + this.mapPostrenderListenerKey = null; } var map = this.getMap(); if (map) { - this.mapPostrenderListenerKey_ = ol.events.listen(map, + this.mapPostrenderListenerKey = ol.events.listen(map, ol.MapEventType.POSTRENDER, this.render, this); this.updatePixelPosition(); - var container = this.stopEvent_ ? + var container = this.stopEvent ? map.getOverlayContainerStopEvent() : map.getOverlayContainer(); - if (this.insertFirst_) { - container.insertBefore(this.element_, container.childNodes[0] || null); + if (this.insertFirst) { + container.insertBefore(this.element, container.childNodes[0] || null); } else { - container.appendChild(this.element_); + container.appendChild(this.element); } } }; @@ -273,8 +279,8 @@ ol.Overlay.prototype.handleOffsetChanged = function() { */ ol.Overlay.prototype.handlePositionChanged = function() { this.updatePixelPosition(); - if (this.get(ol.Overlay.Property_.POSITION) && this.autoPan) { - this.panIntoView_(); + if (this.get(ol.Overlay.Property.POSITION) && this.autoPan) { + this.panIntoView(); } }; @@ -294,7 +300,7 @@ ol.Overlay.prototype.handlePositioningChanged = function() { * @api */ ol.Overlay.prototype.setElement = function(element) { - this.set(ol.Overlay.Property_.ELEMENT, element); + this.set(ol.Overlay.Property.ELEMENT, element); }; @@ -305,7 +311,7 @@ ol.Overlay.prototype.setElement = function(element) { * @api */ ol.Overlay.prototype.setMap = function(map) { - this.set(ol.Overlay.Property_.MAP, map); + this.set(ol.Overlay.Property.MAP, map); }; @@ -316,7 +322,7 @@ ol.Overlay.prototype.setMap = function(map) { * @api */ ol.Overlay.prototype.setOffset = function(offset) { - this.set(ol.Overlay.Property_.OFFSET, offset); + this.set(ol.Overlay.Property.OFFSET, offset); }; @@ -329,28 +335,28 @@ ol.Overlay.prototype.setOffset = function(offset) { * @api */ ol.Overlay.prototype.setPosition = function(position) { - this.set(ol.Overlay.Property_.POSITION, position); + this.set(ol.Overlay.Property.POSITION, position); }; /** * Pan the map so that the overlay is entirely visible in the current viewport * (if necessary). - * @private + * @protected */ -ol.Overlay.prototype.panIntoView_ = function() { +ol.Overlay.prototype.panIntoView = function() { var map = this.getMap(); if (!map || !map.getTargetElement()) { return; } - var mapRect = this.getRect_(map.getTargetElement(), map.getSize()); + var mapRect = this.getRect(map.getTargetElement(), map.getSize()); var element = /** @type {!Element} */ (this.getElement()); - var overlayRect = this.getRect_(element, + var overlayRect = this.getRect(element, [ol.dom.outerWidth(element), ol.dom.outerHeight(element)]); - var margin = this.autoPanMargin_; + var margin = this.autoPanMargin; if (!ol.extent.containsExtent(mapRect, overlayRect)) { // the overlay is not completely inside the viewport, so pan the map var offsetLeft = overlayRect[0] - mapRect[0]; @@ -384,8 +390,8 @@ ol.Overlay.prototype.panIntoView_ = function() { map.getView().animate({ center: map.getCoordinateFromPixel(newCenterPx), - duration: this.autoPanAnimation_.duration, - easing: this.autoPanAnimation_.easing + duration: this.autoPanAnimation.duration, + easing: this.autoPanAnimation.easing }); } } @@ -397,9 +403,9 @@ ol.Overlay.prototype.panIntoView_ = function() { * @param {Element|undefined} element The element. * @param {ol.Size|undefined} size The size of the element. * @return {ol.Extent} The extent. - * @private + * @protected */ -ol.Overlay.prototype.getRect_ = function(element, size) { +ol.Overlay.prototype.getRect = function(element, size) { var box = element.getBoundingClientRect(); var offsetX = box.left + window.pageXOffset; var offsetY = box.top + window.pageYOffset; @@ -420,7 +426,7 @@ ol.Overlay.prototype.getRect_ = function(element, size) { * @api */ ol.Overlay.prototype.setPositioning = function(positioning) { - this.set(ol.Overlay.Property_.POSITIONING, positioning); + this.set(ol.Overlay.Property.POSITIONING, positioning); }; @@ -430,9 +436,9 @@ ol.Overlay.prototype.setPositioning = function(positioning) { * @protected */ ol.Overlay.prototype.setVisible = function(visible) { - if (this.rendered_.visible !== visible) { - this.element_.style.display = visible ? '' : 'none'; - this.rendered_.visible = visible; + if (this.rendered.visible !== visible) { + this.element.style.display = visible ? '' : 'none'; + this.rendered.visible = visible; } }; @@ -461,7 +467,7 @@ ol.Overlay.prototype.updatePixelPosition = function() { * @protected */ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) { - var style = this.element_.style; + var style = this.element.style; var offset = this.getOffset(); var positioning = this.getPositioning(); @@ -473,59 +479,69 @@ ol.Overlay.prototype.updateRenderedPosition = function(pixel, mapSize) { if (positioning == ol.OverlayPositioning.BOTTOM_RIGHT || positioning == ol.OverlayPositioning.CENTER_RIGHT || positioning == ol.OverlayPositioning.TOP_RIGHT) { - if (this.rendered_.left_ !== '') { - this.rendered_.left_ = style.left = ''; + if (this.rendered.left_ !== '') { + this.rendered.left_ = style.left = ''; } var right = Math.round(mapSize[0] - pixel[0] - offsetX) + 'px'; - if (this.rendered_.right_ != right) { - this.rendered_.right_ = style.right = right; + if (this.rendered.right_ != right) { + this.rendered.right_ = style.right = right; } } else { - if (this.rendered_.right_ !== '') { - this.rendered_.right_ = style.right = ''; + if (this.rendered.right_ !== '') { + this.rendered.right_ = style.right = ''; } if (positioning == ol.OverlayPositioning.BOTTOM_CENTER || positioning == ol.OverlayPositioning.CENTER_CENTER || positioning == ol.OverlayPositioning.TOP_CENTER) { - offsetX -= this.element_.offsetWidth / 2; + offsetX -= this.element.offsetWidth / 2; } var left = Math.round(pixel[0] + offsetX) + 'px'; - if (this.rendered_.left_ != left) { - this.rendered_.left_ = style.left = left; + if (this.rendered.left_ != left) { + this.rendered.left_ = style.left = left; } } if (positioning == ol.OverlayPositioning.BOTTOM_LEFT || positioning == ol.OverlayPositioning.BOTTOM_CENTER || positioning == ol.OverlayPositioning.BOTTOM_RIGHT) { - if (this.rendered_.top_ !== '') { - this.rendered_.top_ = style.top = ''; + if (this.rendered.top_ !== '') { + this.rendered.top_ = style.top = ''; } var bottom = Math.round(mapSize[1] - pixel[1] - offsetY) + 'px'; - if (this.rendered_.bottom_ != bottom) { - this.rendered_.bottom_ = style.bottom = bottom; + if (this.rendered.bottom_ != bottom) { + this.rendered.bottom_ = style.bottom = bottom; } } else { - if (this.rendered_.bottom_ !== '') { - this.rendered_.bottom_ = style.bottom = ''; + if (this.rendered.bottom_ !== '') { + this.rendered.bottom_ = style.bottom = ''; } if (positioning == ol.OverlayPositioning.CENTER_LEFT || positioning == ol.OverlayPositioning.CENTER_CENTER || positioning == ol.OverlayPositioning.CENTER_RIGHT) { - offsetY -= this.element_.offsetHeight / 2; + offsetY -= this.element.offsetHeight / 2; } var top = Math.round(pixel[1] + offsetY) + 'px'; - if (this.rendered_.top_ != top) { - this.rendered_.top_ = style.top = top; + if (this.rendered.top_ != top) { + this.rendered.top_ = style.top = top; } } }; /** - * @enum {string} - * @private + * returns the options this Overlay has been created with + * @public + * @return {olx.OverlayOptions} overlay options */ -ol.Overlay.Property_ = { +ol.Overlay.prototype.getOptions = function() { + return this.options; +}; + + +/** + * @enum {string} + * @protected + */ +ol.Overlay.Property = { ELEMENT: 'element', MAP: 'map', OFFSET: 'offset', diff --git a/test/spec/ol/overlay.test.js b/test/spec/ol/overlay.test.js index a6c3fe002d..0b8ffde2d6 100644 --- a/test/spec/ol/overlay.test.js +++ b/test/spec/ol/overlay.test.js @@ -47,7 +47,7 @@ describe('ol.Overlay', function() { it('can be constructed with className', function() { var instance = new ol.Overlay({className: 'my-class'}); expect(instance).to.be.an(ol.Overlay); - expect(instance.element_.className).to.be('my-class'); + expect(instance.element.className).to.be('my-class'); }); }); @@ -98,9 +98,9 @@ describe('ol.Overlay', function() { }); map.addOverlay(overlay); map.renderSync(); - expect(overlay.element_.style.display).not.to.be('none'); + expect(overlay.element.style.display).not.to.be('none'); overlay.setVisible(false); - expect(overlay.element_.style.display).to.be('none'); + expect(overlay.element.style.display).to.be('none'); }); });