From f3d81983dde21980113335891adc937517492426 Mon Sep 17 00:00:00 2001 From: crschmidt Date: Mon, 31 Mar 2008 05:55:12 +0000 Subject: [PATCH] Add 'allowSelection' option to controls, to determine whether they allow selection. Use CSS ClassName in FF, and onselectstart attribute in IE, to control selection. Fix inappropriate overriding of className in some Control subclasses in order to let this work. Prevents accidental selection of controls in IE and FF. r=euzuro. (Closes #1378) git-svn-id: http://svn.openlayers.org/trunk/openlayers@6727 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- lib/OpenLayers/Control.js | 14 ++++++++++++++ lib/OpenLayers/Control/MousePosition.js | 1 - lib/OpenLayers/Control/OverviewMap.js | 2 +- lib/OpenLayers/Control/Permalink.js | 1 - lib/OpenLayers/Control/Scale.js | 1 - lib/OpenLayers/Control/ScaleLine.js | 1 - theme/default/style.css | 4 ++++ 7 files changed, 19 insertions(+), 5 deletions(-) diff --git a/lib/OpenLayers/Control.js b/lib/OpenLayers/Control.js index a98cc00e3e..d1196f3c0e 100644 --- a/lib/OpenLayers/Control.js +++ b/lib/OpenLayers/Control.js @@ -78,6 +78,15 @@ OpenLayers.Control = OpenLayers.Class({ */ type: null, + /** + * Property: allowSelection + * {Boolean} By deafault, controls do not allow selection, because + * it may interfere with map dragging. If this is true, OpenLayers + * will not prevent selection of the control. + * Default is false. + */ + allowSelection: false, + /** * Property: displayClass * {string} This property is used for CSS related to the drawing of the @@ -240,6 +249,11 @@ OpenLayers.Control = OpenLayers.Class({ if (this.div == null) { this.div = OpenLayers.Util.createDiv(this.id); this.div.className = this.displayClass; + if (!this.allowSelection) { + this.div.className += " olControlNoSelect"; + this.div.setAttribute("unselectable", "on", 0); + this.div.onselectstart = function() { return(false); }; + } if (this.title != "") { this.div.title = this.title; } diff --git a/lib/OpenLayers/Control/MousePosition.js b/lib/OpenLayers/Control/MousePosition.js index b0f0c007eb..704859f638 100644 --- a/lib/OpenLayers/Control/MousePosition.js +++ b/lib/OpenLayers/Control/MousePosition.js @@ -91,7 +91,6 @@ OpenLayers.Control.MousePosition = OpenLayers.Class(OpenLayers.Control, { if (!this.element) { this.div.left = ""; this.div.top = ""; - this.div.className = this.displayClass; this.element = this.div; } diff --git a/lib/OpenLayers/Control/OverviewMap.js b/lib/OpenLayers/Control/OverviewMap.js index 8adca968d0..a283184e17 100644 --- a/lib/OpenLayers/Control/OverviewMap.js +++ b/lib/OpenLayers/Control/OverviewMap.js @@ -204,7 +204,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, { // Optionally add min/max buttons if the control will go in the // map viewport. if(!this.outsideViewport) { - this.div.className = this.displayClass + 'Container'; + this.div.className += " " + this.displayClass + 'Container'; var imgLocation = OpenLayers.Util.getImagesLocation(); // maximize button div var img = imgLocation + 'layer-switcher-maximize.png'; diff --git a/lib/OpenLayers/Control/Permalink.js b/lib/OpenLayers/Control/Permalink.js index 60d5dfd342..2ffcce5481 100644 --- a/lib/OpenLayers/Control/Permalink.js +++ b/lib/OpenLayers/Control/Permalink.js @@ -109,7 +109,6 @@ OpenLayers.Control.Permalink = OpenLayers.Class(OpenLayers.Control, { OpenLayers.Control.prototype.draw.apply(this, arguments); if (!this.element) { - this.div.className = this.displayClass; this.element = document.createElement("a"); this.element.innerHTML = OpenLayers.i18n("permalink"); this.element.href=""; diff --git a/lib/OpenLayers/Control/Scale.js b/lib/OpenLayers/Control/Scale.js index f23beaddcf..a2e67fc582 100644 --- a/lib/OpenLayers/Control/Scale.js +++ b/lib/OpenLayers/Control/Scale.js @@ -43,7 +43,6 @@ OpenLayers.Control.Scale = OpenLayers.Class(OpenLayers.Control, { OpenLayers.Control.prototype.draw.apply(this, arguments); if (!this.element) { this.element = document.createElement("div"); - this.div.className = this.displayClass; this.div.appendChild(this.element); } this.map.events.register( 'moveend', this, this.updateScale); diff --git a/lib/OpenLayers/Control/ScaleLine.js b/lib/OpenLayers/Control/ScaleLine.js index 9fc243bf71..5c3e7892c7 100644 --- a/lib/OpenLayers/Control/ScaleLine.js +++ b/lib/OpenLayers/Control/ScaleLine.js @@ -81,7 +81,6 @@ OpenLayers.Control.ScaleLine = OpenLayers.Class(OpenLayers.Control, { draw: function() { OpenLayers.Control.prototype.draw.apply(this, arguments); if (!this.eTop) { - this.div.className = this.displayClass; this.div.style.display = "block"; this.div.style.position = "absolute"; diff --git a/theme/default/style.css b/theme/default/style.css index 63bac81d2e..3920efe44d 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -240,3 +240,7 @@ div.olControlMousePosition { background: url("../../img/close.gif") no-repeat; cursor: pointer; } + +.olControlNoSelect { + -moz-user-select: none; +}