From c181faf68f593e57414159dace4f9df26254df39 Mon Sep 17 00:00:00 2001 From: Ivan Coronado Date: Fri, 23 Oct 2015 08:06:47 +0200 Subject: [PATCH] Possibility to style markers with css hover eventDiv_ (with 0.1 opacity) was overlaying labelDiv_, for this reason if you tried to style labelDiv_ with css :hover you didn't notice about the effect. You always was hovering eventDiv_. More info https://github.com/angular-ui/angular-google-maps/issues/1574#issuecomment-150467740 Closes #4 Breaking changes: Events can't be captured even if the label is in the shadow of a google.maps.InfoWindow. --- index.js | 49 +++++++------------------------------------------ 1 file changed, 7 insertions(+), 42 deletions(-) diff --git a/index.js b/index.js index 08fb159..6be26d6 100644 --- a/index.js +++ b/index.js @@ -65,17 +65,6 @@ function MarkerLabel_(marker, crossURL, handCursorURL) { this.labelDiv_ = document.createElement("div"); this.labelDiv_.style.cssText = "position: absolute; overflow: hidden;"; - // Set up the DIV for handling mouse events in the label. This DIV forms a transparent veil - // in the "overlayMouseTarget" pane, a veil that covers just the label. This is done so that - // events can be captured even if the label is in the shadow of a google.maps.InfoWindow. - // Code is included here to ensure the veil is always exactly the same size as the label. - this.eventDiv_ = document.createElement("div"); - this.eventDiv_.style.cssText = this.labelDiv_.style.cssText; - - // This is needed for proper behavior on MSIE: - this.eventDiv_.setAttribute("onselectstart", "return false;"); - this.eventDiv_.setAttribute("ondragstart", "return false;"); - // Get the DIV for the "X" to be displayed when the marker is raised. this.crossDiv_ = MarkerLabel_.getSharedCross(crossURL); } @@ -137,7 +126,7 @@ MarkerLabel_.prototype.onAdd = function () { }; this.getPanes().markerLayer.appendChild(this.labelDiv_); - this.getPanes().overlayMouseTarget.appendChild(this.eventDiv_); + this.getPanes().overlayMouseTarget.appendChild(this.labelDiv_); // One cross is shared with all markers, so only add it once: if (typeof MarkerLabel_.getSharedCross.processed === "undefined") { this.getPanes().markerLayer.appendChild(this.crossDiv_); @@ -145,19 +134,19 @@ MarkerLabel_.prototype.onAdd = function () { } this.listeners_ = [ - google.maps.event.addDomListener(this.eventDiv_, "mouseover", function (e) { + google.maps.event.addDomListener(this.labelDiv_, "mouseover", function (e) { if (me.marker_.getDraggable() || me.marker_.getClickable()) { this.style.cursor = "pointer"; google.maps.event.trigger(me.marker_, "mouseover", e); } }), - google.maps.event.addDomListener(this.eventDiv_, "mouseout", function (e) { + google.maps.event.addDomListener(this.labelDiv_, "mouseout", function (e) { if ((me.marker_.getDraggable() || me.marker_.getClickable()) && !cDraggingLabel) { this.style.cursor = me.marker_.getCursor(); google.maps.event.trigger(me.marker_, "mouseout", e); } }), - google.maps.event.addDomListener(this.eventDiv_, "mousedown", function (e) { + google.maps.event.addDomListener(this.labelDiv_, "mousedown", function (e) { cDraggingLabel = false; if (me.marker_.getDraggable()) { cMouseIsDown = true; @@ -238,7 +227,7 @@ MarkerLabel_.prototype.onAdd = function () { } } }), - google.maps.event.addDomListener(this.eventDiv_, "click", function (e) { + google.maps.event.addDomListener(this.labelDiv_, "click", function (e) { if (me.marker_.getDraggable() || me.marker_.getClickable()) { if (cIgnoreClick) { // Ignore the click reported when a label drag ends cIgnoreClick = false; @@ -248,7 +237,7 @@ MarkerLabel_.prototype.onAdd = function () { } } }), - google.maps.event.addDomListener(this.eventDiv_, "dblclick", function (e) { + google.maps.event.addDomListener(this.labelDiv_, "dblclick", function (e) { if (me.marker_.getDraggable() || me.marker_.getClickable()) { google.maps.event.trigger(me.marker_, "dblclick", e); cAbortEvent(e); // Prevent map zoom when double-clicking on a label @@ -317,7 +306,6 @@ MarkerLabel_.prototype.onAdd = function () { MarkerLabel_.prototype.onRemove = function () { var i; this.labelDiv_.parentNode.removeChild(this.labelDiv_); - this.eventDiv_.parentNode.removeChild(this.eventDiv_); // Remove event listeners: for (i = 0; i < this.listeners_.length; i++) { @@ -344,20 +332,13 @@ MarkerLabel_.prototype.setContent = function () { var content = this.marker_.get("labelContent"); if (typeof content.nodeType === "undefined") { this.labelDiv_.innerHTML = content; - this.eventDiv_.innerHTML = this.labelDiv_.innerHTML; } else { // Remove current content while (this.labelDiv_.lastChild) { this.labelDiv_.removeChild(this.labelDiv_.lastChild); } - while (this.eventDiv_.lastChild) { - this.eventDiv_.removeChild(this.eventDiv_.lastChild); - } - this.labelDiv_.appendChild(content); - content = content.cloneNode(true); - this.eventDiv_.appendChild(content); } }; @@ -367,7 +348,7 @@ MarkerLabel_.prototype.setContent = function () { * @private */ MarkerLabel_.prototype.setTitle = function () { - this.eventDiv_.title = this.marker_.getTitle() || ""; + this.labelDiv_.title = this.marker_.getTitle() || ""; }; /** @@ -380,17 +361,14 @@ MarkerLabel_.prototype.setStyles = function () { // Apply style values from the style sheet defined in the labelClass parameter: this.labelDiv_.className = this.marker_.get("labelClass"); - this.eventDiv_.className = this.labelDiv_.className; // Clear existing inline style values: this.labelDiv_.style.cssText = ""; - this.eventDiv_.style.cssText = ""; // Apply style values defined in the labelStyle parameter: labelStyle = this.marker_.get("labelStyle"); for (i in labelStyle) { if (labelStyle.hasOwnProperty(i)) { this.labelDiv_.style[i] = labelStyle[i]; - this.eventDiv_.style[i] = labelStyle[i]; } } this.setMandatoryStyles(); @@ -410,12 +388,6 @@ MarkerLabel_.prototype.setMandatoryStyles = function () { this.labelDiv_.style.filter = "alpha(opacity=" + (this.labelDiv_.style.opacity * 100) + ")"; } - this.eventDiv_.style.position = this.labelDiv_.style.position; - this.eventDiv_.style.overflow = this.labelDiv_.style.overflow; - this.eventDiv_.style.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE - this.eventDiv_.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\""; - this.eventDiv_.style.filter = "alpha(opacity=1)"; // For MSIE - this.setAnchor(); this.setPosition(); // This also updates z-index, if necessary. this.setVisible(); @@ -429,8 +401,6 @@ MarkerLabel_.prototype.setAnchor = function () { var anchor = this.marker_.get("labelAnchor"); this.labelDiv_.style.marginLeft = -anchor.x + "px"; this.labelDiv_.style.marginTop = -anchor.y + "px"; - this.eventDiv_.style.marginLeft = -anchor.x + "px"; - this.eventDiv_.style.marginTop = -anchor.y + "px"; }; /** @@ -444,8 +414,6 @@ MarkerLabel_.prototype.setPosition = function (yOffset) { } this.labelDiv_.style.left = Math.round(position.x) + "px"; this.labelDiv_.style.top = Math.round(position.y - yOffset) + "px"; - this.eventDiv_.style.left = this.labelDiv_.style.left; - this.eventDiv_.style.top = this.labelDiv_.style.top; this.setZIndex(); }; @@ -460,10 +428,8 @@ MarkerLabel_.prototype.setZIndex = function () { var zAdjust = (this.marker_.get("labelInBackground") ? -1 : +1); if (typeof this.marker_.getZIndex() === "undefined") { this.labelDiv_.style.zIndex = parseInt(this.labelDiv_.style.top, 10) + zAdjust; - this.eventDiv_.style.zIndex = this.labelDiv_.style.zIndex; } else { this.labelDiv_.style.zIndex = this.marker_.getZIndex() + zAdjust; - this.eventDiv_.style.zIndex = this.labelDiv_.style.zIndex; } }; @@ -478,7 +444,6 @@ MarkerLabel_.prototype.setVisible = function () { } else { this.labelDiv_.style.display = "none"; } - this.eventDiv_.style.display = this.labelDiv_.style.display; }; /**