From 4d150e6b84f16bbee31d0febcfdd4fdd483e2953 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Tue, 3 Jun 2014 15:22:53 +0200 Subject: [PATCH] Move Logos in attributions --- css/ol.css | 14 ++--- externs/olx.js | 7 ++- src/ol/control/attributioncontrol.js | 76 ++++++++++++++++++++++++++-- 3 files changed, 87 insertions(+), 10 deletions(-) diff --git a/css/ol.css b/css/ol.css index 40e94c5561..937ab06219 100644 --- a/css/ol.css +++ b/css/ol.css @@ -209,10 +209,8 @@ button.ol-full-screen-true:after { .ol-attribution li:not(:last-child):after { content: " "; } -.ol-attribution-bing-tos { - /* float:right; */ - /* padding-left: .4em; */ - /* line-height: 1.5em; */ +.ol-attribution img { + max-height: 2em; } .ol-attribution ul, .ol-attribution button { display: inline-block; @@ -228,8 +226,12 @@ button.ol-full-screen-true:after { bottom: 0; right: 0; border-radius: 4px 0 0; - height: 1em; - line-height: .9em; + height: 1.1em; + line-height: 1em; +} +.ol-attribution.ol-uncollapsible img { + margin-top: -.2em; + max-height: 1.6em; } .ol-attribution.ol-uncollapsible button { display: none; diff --git a/externs/olx.js b/externs/olx.js index d3e67a1ea6..3c20d4f547 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -685,11 +685,16 @@ olx.control.AttributionOptions.prototype.tipLabel; /** - * Text label to use for the attributions button. Default is `i` + * Text label to use for the collapsed attributions button. Default is `i` * @type {string|undefined} */ olx.control.AttributionOptions.prototype.label; +/** + * Text label to use for the expanded attributions button. Default is `ยป` + * @type {string|undefined} + */ +olx.control.AttributionOptions.prototype.collapseLabel; /** * @typedef {{element: (Element|undefined), diff --git a/src/ol/control/attributioncontrol.js b/src/ol/control/attributioncontrol.js index bcb9f359da..9035a4ce71 100644 --- a/src/ol/control/attributioncontrol.js +++ b/src/ol/control/attributioncontrol.js @@ -38,6 +38,15 @@ ol.control.Attribution = function(opt_options) { */ this.ulElement_ = goog.dom.createElement(goog.dom.TagName.UL); + /** + * @private + * @type {Element} + */ + this.logoLi_ = goog.dom.createElement(goog.dom.TagName.LI); + + goog.dom.appendChild(this.ulElement_, this.logoLi_); + goog.style.setElementShown(this.logoLi_, false); + /** * @private * @type {boolean} @@ -56,12 +65,22 @@ ol.control.Attribution = function(opt_options) { 'role' : 'tooltip' }, tipLabel); + /** + * @private + * @type {string} + */ + this.collapseLabel_ = goog.isDef(options.collapseLabel) ? + options.collapseLabel : '\u00BB'; + /** * @private * @type {string} */ this.label_ = goog.isDef(options.label) ? options.label : 'i'; - var label = goog.dom.createDom(goog.dom.TagName.SPAN, {}, this.label_); + var label = goog.dom.createDom(goog.dom.TagName.SPAN, {}, + (collapsible && !this.collapsed_) ? + this.collapseLabel_ : this.label_); + /** * @private @@ -115,6 +134,12 @@ ol.control.Attribution = function(opt_options) { */ this.attributionElementRenderedVisible_ = {}; + /** + * @private + * @type {Object.} + */ + this.logoElements_ = {}; + }; goog.inherits(ol.control.Attribution, ol.control.Control); @@ -232,12 +257,57 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) { } var renderVisible = - !goog.object.isEmpty(this.attributionElementRenderedVisible_); + !goog.object.isEmpty(this.attributionElementRenderedVisible_) || + !goog.object.isEmpty(frameState.logos); if (this.renderedVisible_ != renderVisible) { goog.style.setElementShown(this.element, renderVisible); this.renderedVisible_ = renderVisible; } + this.insertLogos_(frameState); + +}; + + +/** + * @param {?olx.FrameState} frameState Frame state. + * @private + */ +ol.control.Attribution.prototype.insertLogos_ = function(frameState) { + + var logo; + var logos = frameState.logos; + var logoElements = this.logoElements_; + + for (logo in logoElements) { + if (!(logo in logos)) { + goog.dom.removeNode(logoElements[logo]); + delete logoElements[logo]; + } + } + + var image, logoElement, logoKey; + for (logoKey in logos) { + if (!(logoKey in logoElements)) { + image = new Image(); + image.src = logoKey; + var logoValue = logos[logoKey]; + if (logoValue === '') { + logoElement = image; + } else { + logoElement = goog.dom.createDom(goog.dom.TagName.A, { + 'href': logoValue, + 'target': '_blank' + }); + logoElement.appendChild(image); + } + goog.dom.appendChild(this.logoLi_, logoElement); + logoElements[logoKey] = logoElement; + } + } + + goog.style.setElementShown(this.logoLi_, !goog.object.isEmpty(logos)); + }; @@ -249,6 +319,6 @@ 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.collapseLabel_ : this.label_); this.collapsed_ = !this.collapsed_; };