From e136b4b4db360b0dfaf9c310c9fc6dbdb620e4b9 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Tue, 16 Sep 2014 09:36:42 +0200
Subject: [PATCH] Change the control visibility by using css class

Instead of changing the button opacity in the control, only add/remove
a css class (ol-hidden). This let the developer easily change the
behavior by updating the css.
---
 css/ol.css                      |  3 +++
 src/ol/control/rotatecontrol.js | 11 ++++++++---
 src/ol/css.js                   |  9 +++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/css/ol.css b/css/ol.css
index 5e76f84ba6..e6efd38dc1 100644
--- a/css/ol.css
+++ b/css/ol.css
@@ -55,6 +55,9 @@
   right: .5em;
   transition: opacity .25s;
 }
+.ol-rotate.ol-hidden {
+  opacity: 0;
+}
 .ol-zoom-extent {
   top: 4.643em;
   left: .5em;
diff --git a/src/ol/control/rotatecontrol.js b/src/ol/control/rotatecontrol.js
index e305c1bd35..db3fc47ef5 100644
--- a/src/ol/control/rotatecontrol.js
+++ b/src/ol/control/rotatecontrol.js
@@ -3,6 +3,7 @@ goog.provide('ol.control.Rotate');
 goog.require('goog.asserts');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.dom.classlist');
 goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.math');
@@ -17,7 +18,8 @@ goog.require('ol.pointer.PointerEventHandler');
 /**
  * @classdesc
  * A button control to reset rotation to 0.
- * To style this control use css selector `.ol-rotate`.
+ * To style this control use css selector `.ol-rotate`. A `.ol-hidden` css
+ * selector is added to the button when the rotation is 0.
  *
  * @constructor
  * @extends {ol.control.Control}
@@ -92,7 +94,9 @@ ol.control.Rotate = function(opt_options) {
    */
   this.rotation_ = undefined;
 
-  element.style.opacity = (this.autoHide_) ? 0 : 1;
+  if (this.autoHide_) {
+    goog.dom.classlist.add(this.element, ol.css.CLASS_HIDDEN);
+  }
 
 };
 goog.inherits(ol.control.Rotate, ol.control.Control);
@@ -159,7 +163,8 @@ ol.control.Rotate.prototype.handleMapPostrender = function(mapEvent) {
   if (rotation != this.rotation_) {
     var transform = 'rotate(' + goog.math.toDegrees(rotation) + 'deg)';
     if (this.autoHide_) {
-      this.element.style.opacity = (rotation === 0) ? 0 : 1;
+      goog.dom.classlist.enable(
+          this.element, ol.css.CLASS_HIDDEN, rotation === 0);
     }
     this.label_.style.msTransform = transform;
     this.label_.style.webkitTransform = transform;
diff --git a/src/ol/css.js b/src/ol/css.js
index dd7040d8f0..2d4247be14 100644
--- a/src/ol/css.js
+++ b/src/ol/css.js
@@ -1,6 +1,15 @@
 goog.provide('ol.css');
 
 
+/**
+ * The CSS class for hidden feature.
+ *
+ * @const
+ * @type {string}
+ */
+ol.css.CLASS_HIDDEN = 'ol-hidden';
+
+
 /**
  * The CSS class that we'll give the DOM elements to have them unselectable.
  *