Make attribution control collapsible.

css/ol.css

@@ -1,53 +1,3 @@
-.ol-attribution {
-  position: absolute;
-  text-align: right;
-  bottom: 0;
-  right: 0;
-  padding: 6px;
-  color: #000000;
-  color: rgba(238,238,238,1);
-  background: rgba(0,60,136,0.3);
-}
-.ol-attribution a {
-  text-decoration: none;
-  color: #7b98bc;
-  color: rgba(255,255,255,1);
-}
-
-.ol-attribution ul {
-  margin: 0;
-  padding: 0;
-  font-size: 10px;
-  line-height: 12px;
-}
-.ol-attribution li {
-  display: inline;
-  list-style: none;
-  line-height: inherit;
-}
-.ol-attribution li:not(:last-child):after {
-  content: "\2003";
-}
-.ol-attribution-bing-tos {
-  float:right;
-  padding-top: 2px;
-  white-space: nowrap;
-}
-
-.ol-logo {
-  bottom: 0;
-  left: 0;
-  padding: 2px;
-  position: absolute;
-}
-.ol-logo ul {
-  margin: 0;
-  padding: 0;
-}
-.ol-logo ul li {
-  display: inline;
-  list-style: none;
-}
 
 .ol-mouse-position {
   top: 8px;
@@ -226,13 +176,79 @@ button.ol-full-screen-true:after {
 }
 .ol-rotate .ol-has-tooltip:hover [role=tooltip],
 .ol-rotate .ol-has-tooltip:focus [role=tooltip],
+.ol-attribution .ol-has-tooltip:hover [role=tooltip],
+.ol-attribution .ol-has-tooltip:focus [role=tooltip],
 .ol-full-screen .ol-has-tooltip:hover [role=tooltip],
 .ol-full-screen .ol-has-tooltip:focus [role=tooltip] {
   right: 2.2em;
   left: auto;
   border-radius: 4px 0 0 4px;
+  border-left-width: 3px;
+  border-right-width: 0;
 }
 
+.ol-attribution {
+  text-align: right;
+  bottom: .5em;
+  right: .5em;
+}
+
+.ol-attribution ul {
+  margin: 0;
+  padding: 0 .5em;
+  font-size: .7rem;
+  line-height: 1.375em;
+  color: #000;
+  text-shadow: 0 0 2px #fff;
+}
+.ol-attribution li {
+  display: inline;
+  list-style: none;
+  line-height: inherit;
+}
+.ol-attribution li:not(:last-child):after {
+  content: " ";
+}
+.ol-attribution-bing-tos {
+  /* float:right; */
+  /* padding-left: .4em; */
+  /* line-height: 1.5em; */
+}
+.ol-attribution ul, .ol-attribution button {
+  display: inline-block;
+}
+.ol-attribution:not(.ol-collapsed) button:hover [role=tooltip],
+.ol-attribution.ol-collapsed ul {
+  display: none;
+}
+.ol-attribution:not(.ol-collapsed) {
+  background: rgba(255,255,255,0.8);
+}
+.ol-attribution.ol-uncollapsible {
+  bottom: 0;
+  right: 0;
+  border-radius: 4px 0 0;
+  height: 1em;
+  line-height: .9em;
+}
+.ol-attribution.ol-uncollapsible button {
+  display: none;
+}
+
+.ol-logo {
+  bottom: 0;
+  left: 0;
+  padding: 2px;
+  position: absolute;
+}
+.ol-logo ul {
+  margin: 0;
+  padding: 0;
+}
+.ol-logo ul li {
+  display: inline;
+  list-style: none;
+}
 .ol-zoomslider {
   position: absolute;
   top: 4.5em;

examples/simple.js

@@ -1,5 +1,6 @@
 goog.require('ol.Map');
 goog.require('ol.View');
+goog.require('ol.control');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
@@ -10,6 +11,11 @@ var map = new ol.Map({
       source: new ol.source.OSM()
     })
   ],
+  controls: ol.control.defaults({
+    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+      collapsible: false
+    })
+  }),
   renderer: exampleNS.getRendererFromQueryString(),
   target: 'map',
   view: new ol.View({

externs/olx.js

@@ -660,6 +660,37 @@ olx.control.AttributionOptions.prototype.className;
 olx.control.AttributionOptions.prototype.target;
 
 
+/**
+ * Specify if attributions can be collapsed. If you use an OSM source,
+ * should be set to `false` — see
+ * {@link http://www.openstreetmap.org/copyright OSM Copyright} —
+ * Default is `true`.
+ * @type {boolean|undefined}
+ */
+olx.control.AttributionOptions.prototype.collapsible;
+
+
+/**
+ * Specify if attributions should be collapsed at startup. Default is `true`.
+ * @type {boolean|undefined}
+ */
+olx.control.AttributionOptions.prototype.collapsed;
+
+
+/**
+ * Text label to use for the button tip. Default is `Attributions`
+ * @type {string|undefined}
+ */
+olx.control.AttributionOptions.prototype.tipLabel;
+
+
+/**
+ * Text label to use for the attributions button. Default is `i`
+ * @type {string|undefined}
+ */
+olx.control.AttributionOptions.prototype.label;
+
+
 /**
  * @typedef {{element: (Element|undefined),
  *     target: (Element|string|undefined)}}

resources/layout.css

@@ -9,7 +9,7 @@ body {
   background: url(textured_paper.jpeg) repeat;
 }
 .ol-attribution {
-  max-width: 50%;
+  max-width: calc(100%-3em);
 }
 #tags {
   display: none;

src/ol/control/attributioncontrol.js

@@ -4,11 +4,15 @@ goog.provide('ol.control.Attribution');
 
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
+goog.require('goog.dom.classes');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
 goog.require('goog.object');
 goog.require('goog.style');
 goog.require('ol.Attribution');
 goog.require('ol.control.Control');
 goog.require('ol.css');
+goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -34,11 +38,59 @@ ol.control.Attribution = function(opt_options) {
    */
   this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL);
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.collapsed_ = goog.isDef(options.collapsed) ? options.collapsed : true;
+
+  var collapsible = goog.isDef(options.collapsible) ?
+      options.collapsible : true;
+
   var className = goog.isDef(options.className) ?
       options.className : 'ol-attribution';
+
+  var tipLabel = goog.isDef(options.tipLabel) ?
+      options.tipLabel : 'Attributions';
+  var tip = goog.dom.createDom(goog.dom.TagName.SPAN, {
+    'role' : 'tooltip'
+  }, tipLabel);
+
+  /**
+   * @private
+   * @type {string}
+   */
+  this.label_ = goog.isDef(options.label) ? options.label : 'i';
+  var label = goog.dom.createDom(goog.dom.TagName.SPAN, {}, this.label_);
+
+  /**
+   * @private
+   * @type {Element}
+   */
+  this.labelSpan_ = label;
+  var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
+    'class': 'ol-has-tooltip'
+  }, this.labelSpan_);
+  goog.dom.appendChild(button, tip);
+
+  var buttonHandler = new ol.pointer.PointerEventHandler(button);
+  this.registerDisposable(buttonHandler);
+  goog.events.listen(buttonHandler, ol.pointer.EventType.POINTERUP,
+      this.handleToggle_, false, this);
+
+  goog.events.listen(button, [
+    goog.events.EventType.MOUSEOUT,
+    goog.events.EventType.FOCUSOUT
+  ], function() {
+    this.blur();
+  }, false);
+
   var element = goog.dom.createDom(goog.dom.TagName.DIV, {
-    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
+    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE + ' ' +
-  }, this.ulElement_);
+        ol.css.CLASS_CONTROL +
+        (this.collapsed_ && collapsible ? ' ol-collapsed' : '') +
+        (collapsible ? '' : ' ol-uncollapsible')
+  }, this.ulElement_, button);
 
   goog.base(this, {
     element: element,
@@ -187,3 +239,16 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
   }
 
 };
+
+
+/**
+ * @param {ol.pointer.PointerEvent} pointerEvent Pointer event.
+ * @private
+ */
+ol.control.Attribution.prototype.handleToggle_ = function(pointerEvent) {
+  pointerEvent.browserEvent.preventDefault();
+  goog.dom.classes.toggle(this.element, 'ol-collapsed');
+  goog.dom.setTextContent(this.labelSpan_,
+      (this.collapsed_) ? '\u00D7' : this.label_);
+  this.collapsed_ = !this.collapsed_;
+};