Merge pull request #2413 from tonio/logos

Revisit Logos
This commit is contained in:
Antoine Abt
2014-07-24 17:25:07 +02:00
8 changed files with 109 additions and 63 deletions

View File

@@ -219,6 +219,9 @@ button.ol-full-screen-true:after {
.ol-attribution.ol-collapsed ul {
display: none;
}
.ol-attribution.ol-logo-only ul {
display: block;
}
.ol-attribution:not(.ol-collapsed) {
background: rgba(255,255,255,0.8);
}
@@ -229,10 +232,17 @@ button.ol-full-screen-true:after {
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-logo-only {
background: transparent;
bottom: .4em;
height: 1.1em;
line-height: 1em;
}
.ol-attribution.ol-uncollapsible img {
margin-top: -.2em;
max-height: 1.6em;
}
.ol-attribution.ol-logo-only button,
.ol-attribution.ol-uncollapsible button {
display: none;
}

View File

@@ -98,6 +98,14 @@ olx.GeolocationOptions.prototype.trackingOptions;
olx.GeolocationOptions.prototype.projection;
/**
* Object literal with config options for the map logo.
* @typedef {{href: (string), src: (string)}}
* @api
*/
olx.LogoOptions;
/**
* Object literal with config options for the map.
* @typedef {{controls: (ol.Collection|Array.<ol.control.Control>|undefined),
@@ -106,7 +114,7 @@ olx.GeolocationOptions.prototype.projection;
* interactions: (ol.Collection|Array.<ol.interaction.Interaction>|undefined),
* keyboardEventTarget: (Element|Document|string|undefined),
* layers: (Array.<ol.layer.Base>|ol.Collection|undefined),
* ol3Logo: (boolean|undefined),
* logo: (boolean|string|olx.LogoOptions|undefined),
* overlays: (ol.Collection|Array.<ol.Overlay>|undefined),
* renderer: (ol.RendererType|Array.<ol.RendererType|string>|string|undefined),
* target: (Element|string|undefined),
@@ -168,10 +176,14 @@ olx.MapOptions.prototype.layers;
/**
* Show ol3 logo. Default is `true`.
* @type {boolean|undefined}
* The map logo. A logo to be displayed on the map at all times. If a string is
* provided, it will be set as the image source of the logo. If an object is
* provided, the `src` property should be the URL for an image and the `href`
* property should be a URL for creating a link. To disable the map logo, set
* the option to `false`. By default, the OpenLayers 3 logo is shown.
* @type {boolean|string|olx.LogoOptions|undefined}
*/
olx.MapOptions.prototype.ol3Logo;
olx.MapOptions.prototype.logo;
/**
@@ -2559,7 +2571,7 @@ olx.source.BingMapsOptions.prototype.tileLoadFunction;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (ol.Extent|undefined),
* format: ol.format.Feature,
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike}}
* @api
*/
@@ -2589,7 +2601,7 @@ olx.source.FormatVectorOptions.prototype.format;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.FormatVectorOptions.prototype.logo;
@@ -2605,7 +2617,7 @@ olx.source.FormatVectorOptions.prototype.projection;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* defaultProjection: ol.proj.ProjectionLike,
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* object: (GeoJSONObject|undefined),
* projection: ol.proj.ProjectionLike,
* text: (string|undefined),
@@ -2639,7 +2651,7 @@ olx.source.GeoJSONOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.GeoJSONOptions.prototype.logo;
@@ -2684,7 +2696,7 @@ olx.source.GeoJSONOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* doc: (Document|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* node: (Node|undefined),
* projection: ol.proj.ProjectionLike,
* text: (string|undefined),
@@ -2718,7 +2730,7 @@ olx.source.GPXOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.GPXOptions.prototype.logo;
@@ -2763,7 +2775,7 @@ olx.source.GPXOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* crossOrigin: (null|string|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* opaque: (boolean|undefined),
* projection: ol.proj.ProjectionLike,
* tileClass: (function(new: ol.ImageTile, ol.TileCoord,
@@ -2801,7 +2813,7 @@ olx.source.TileImageOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.TileImageOptions.prototype.logo;
@@ -2865,7 +2877,7 @@ olx.source.TileImageOptions.prototype.tileUrlFunction;
* defaultProjection: ol.proj.ProjectionLike,
* extent: (ol.Extent|undefined),
* format: ol.format.Feature,
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* object: (GeoJSONObject|undefined),
* projection: ol.proj.ProjectionLike,
* tileGrid: ol.tilegrid.TileGrid,
@@ -2907,7 +2919,7 @@ olx.source.TileVectorOptions.prototype.format;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.TileVectorOptions.prototype.logo;
@@ -2960,7 +2972,7 @@ olx.source.TileVectorOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* defaultProjection: ol.proj.ProjectionLike,
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* object: (GeoJSONObject|undefined),
* projection: ol.proj.ProjectionLike,
* text: (string|undefined),
@@ -2993,7 +3005,7 @@ olx.source.TopoJSONOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.TopoJSONOptions.prototype.logo;
@@ -3168,7 +3180,7 @@ olx.source.MapGuideOptions.prototype.params;
* defaultStyle: (Array.<ol.style.Style>|undefined),
* doc: (Document|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* node: (Node|undefined),
* projection: ol.proj.ProjectionLike,
* text: (string|undefined),
@@ -3209,7 +3221,7 @@ olx.source.KMLOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.KMLOptions.prototype.logo;
@@ -3354,7 +3366,7 @@ olx.source.OSMOptions.prototype.url;
* defaultStyle: (Array.<ol.style.Style>|undefined),
* doc: (Document|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* node: (Node|undefined),
* projection: ol.proj.ProjectionLike,
* reprojectTo: ol.proj.ProjectionLike,
@@ -3396,7 +3408,7 @@ olx.source.OSMXMLOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.OSMXMLOptions.prototype.logo;
@@ -3447,7 +3459,7 @@ olx.source.OSMXMLOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* canvasFunction: ol.CanvasFunctionType,
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* ratio: (number|undefined),
* resolutions: (Array.<number>|undefined),
@@ -3487,7 +3499,7 @@ olx.source.ImageCanvasOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.ImageCanvasOptions.prototype.logo;
@@ -3525,7 +3537,7 @@ olx.source.ImageCanvasOptions.prototype.state;
/**
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* ratio: (number|undefined),
* resolutions: (Array.<number>|undefined),
@@ -3552,7 +3564,7 @@ olx.source.ImageVectorOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.ImageVectorOptions.prototype.logo;
@@ -3601,7 +3613,7 @@ olx.source.ImageVectorOptions.prototype.style;
* extent: (ol.Extent|undefined),
* hidpi: (boolean|undefined),
* serverType: (ol.source.wms.ServerType|string|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* params: Object.<string,*>,
* projection: ol.proj.ProjectionLike,
* ratio: (number|undefined),
@@ -3651,7 +3663,7 @@ olx.source.ImageWMSOptions.prototype.serverType;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.ImageWMSOptions.prototype.logo;
@@ -3754,7 +3766,7 @@ olx.source.StamenOptions.prototype.url;
* extent: (ol.Extent|undefined),
* imageExtent: (ol.Extent|undefined),
* imageSize: (ol.Size|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* url: string}}
* @api
@@ -3799,7 +3811,7 @@ olx.source.ImageStaticOptions.prototype.imageSize;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.ImageStaticOptions.prototype.logo;
@@ -3824,7 +3836,7 @@ olx.source.ImageStaticOptions.prototype.url;
* format: ol.format.Feature,
* loader: function(this: ol.source.ServerVector, ol.Extent, number, ol.proj.Projection),
* strategy: (function(ol.Extent, number): Array.<ol.Extent>|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike}}
* @api
*/
@@ -3869,7 +3881,7 @@ olx.source.ServerVectorOptions.prototype.strategy;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.ServerVectorOptions.prototype.logo;
@@ -3918,7 +3930,7 @@ olx.source.TileJSONOptions.prototype.url;
* extent: (ol.Extent|undefined),
* gutter: (number|undefined),
* hidpi: (boolean|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* tileGrid: (ol.tilegrid.TileGrid|undefined),
* maxZoom: (number|undefined),
* projection: ol.proj.ProjectionLike,
@@ -3985,7 +3997,7 @@ olx.source.TileWMSOptions.prototype.hidpi;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.TileWMSOptions.prototype.logo;
@@ -4049,7 +4061,7 @@ olx.source.TileWMSOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (ol.Extent|undefined),
* features: (Array.<ol.Feature>|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* state: (ol.source.State|string|undefined)}}
* @api
@@ -4080,7 +4092,7 @@ olx.source.VectorOptions.prototype.features;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.VectorOptions.prototype.logo;
@@ -4105,7 +4117,7 @@ olx.source.VectorOptions.prototype.state;
* doc: (Document|undefined),
* extent: (ol.Extent|undefined),
* format: ol.format.Feature,
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* node: (Node|undefined),
* object: (Object|undefined),
* projection: ol.proj.ProjectionLike,
@@ -4154,7 +4166,7 @@ olx.source.StaticVectorOptions.prototype.format;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.StaticVectorOptions.prototype.logo;
@@ -4205,7 +4217,7 @@ olx.source.StaticVectorOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* crossOrigin: (string|null|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* tileGrid: ol.tilegrid.WMTS,
* projection: ol.proj.ProjectionLike,
* requestEncoding: (ol.source.WMTSRequestEncoding|undefined),
@@ -4248,7 +4260,7 @@ olx.source.WMTSOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.WMTSOptions.prototype.logo;
@@ -4358,7 +4370,7 @@ olx.source.WMTSOptions.prototype.urls;
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* crossOrigin: (null|string|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* maxZoom: (number|undefined),
* minZoom: (number|undefined),
@@ -4396,7 +4408,7 @@ olx.source.XYZOptions.prototype.extent;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.XYZOptions.prototype.logo;
@@ -4471,7 +4483,7 @@ olx.source.XYZOptions.prototype.wrapX;
/**
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* crossOrigin: (null|string|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* url: !string,
* tierSizeCalculation: (string|undefined),
* size: ol.Size}}
@@ -4496,7 +4508,7 @@ olx.source.ZoomifyOptions.prototype.crossOrigin;
/**
* Logo.
* @type {string|undefined}
* @type{string|olx.LogoOptions|undefined}
*/
olx.source.ZoomifyOptions.prototype.logo;

View File

@@ -96,7 +96,8 @@ ol.control.Attribution = function(opt_options) {
*/
this.labelSpan_ = label;
var button = goog.dom.createDom(goog.dom.TagName.BUTTON, {
'class': 'ol-has-tooltip'
'class': 'ol-has-tooltip',
'type': 'button'
}, this.labelSpan_);
goog.dom.appendChild(button, tip);
@@ -272,6 +273,12 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
goog.style.setElementShown(this.element, renderVisible);
this.renderedVisible_ = renderVisible;
}
if (renderVisible &&
goog.object.isEmpty(this.attributionElementRenderedVisible_)) {
goog.dom.classlist.add(this.element, 'ol-logo-only');
} else {
goog.dom.classlist.remove(this.element, 'ol-logo-only');
}
this.insertLogos_(frameState);
@@ -354,7 +361,7 @@ ol.control.Attribution.prototype.handleToggle_ = function() {
/**
* @return {boolean} True is the widget is collapsible.
* @return {boolean} True if the widget is collapsible.
* @api
*/
ol.control.Attribution.prototype.getCollapsible = function() {
@@ -363,7 +370,7 @@ ol.control.Attribution.prototype.getCollapsible = function() {
/**
* @param {boolean} collapsible True is the widget is collapsible.
* @param {boolean} collapsible True if the widget is collapsible.
* @api
*/
ol.control.Attribution.prototype.setCollapsible = function(collapsible) {
@@ -379,7 +386,7 @@ ol.control.Attribution.prototype.setCollapsible = function(collapsible) {
/**
* @param {boolean} collapsed True is the widget is collapsed.
* @param {boolean} collapsed True if the widget is collapsed.
* @api
*/
ol.control.Attribution.prototype.setCollapsed = function(collapsed) {
@@ -391,7 +398,7 @@ ol.control.Attribution.prototype.setCollapsed = function(collapsed) {
/**
* @return {boolean} True is the widget is collapsed.
* @return {boolean} True if the widget is collapsed.
* @api
*/
ol.control.Attribution.prototype.getCollapsed = function() {

View File

@@ -172,9 +172,9 @@ ol.Map = function(options) {
/**
* @private
* @type {boolean}
* @type {Object}
*/
this.ol3Logo_ = optionsInternal.ol3Logo;
this.logos_ = optionsInternal.logos;
/**
* @private
@@ -1209,7 +1209,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
index: this.frameIndex_++,
layerStates: layerStates,
layerStatesArray: layerStatesArray,
logos: {},
logos: this.logos_,
pixelRatio: this.pixelRatio_,
pixelToCoordinateMatrix: this.pixelToCoordinateMatrix_,
postRenderFunctions: [],
@@ -1222,9 +1222,6 @@ ol.Map.prototype.renderFrame_ = function(time) {
viewHints: viewHints,
wantedTiles: {}
});
if (this.ol3Logo_) {
frameState.logos[ol.OL3_LOGO_URL] = ol.OL3_URL;
}
}
var preRenderFunctions = this.preRenderFunctions_;
@@ -1382,7 +1379,7 @@ ol.Map.prototype.unskipFeature = function(feature) {
* deviceOptions: olx.DeviceOptions,
* interactions: ol.Collection,
* keyboardEventTarget: (Element|Document),
* ol3Logo: boolean,
* logos: Object,
* overlays: ol.Collection,
* rendererConstructor:
* function(new: ol.renderer.Map, Element, ol.Map),
@@ -1414,7 +1411,20 @@ ol.Map.createOptionsInternal = function(options) {
*/
var values = {};
var ol3Logo = goog.isDef(options.ol3Logo) ? options.ol3Logo : true;
var logos = {};
if (!goog.isDef(options.logo) ||
(goog.isBoolean(options.logo) && options.logo)) {
logos[ol.OL3_LOGO_URL] = ol.OL3_URL;
} else {
var logo = options.logo;
if (goog.isString(logo)) {
logos[logo] = '';
} else if (goog.isObject(logo)) {
goog.asserts.assertString(logo.href);
goog.asserts.assertString(logo.src);
logos[logo.src] = logo.href;
}
}
var layerGroup = (options.layers instanceof ol.layer.Group) ?
options.layers : new ol.layer.Group({layers: options.layers});
@@ -1512,7 +1522,7 @@ ol.Map.createOptionsInternal = function(options) {
deviceOptions: deviceOptions,
interactions: interactions,
keyboardEventTarget: keyboardEventTarget,
ol3Logo: ol3Logo,
logos: logos,
overlays: overlays,
rendererConstructor: rendererConstructor,
values: values

View File

@@ -1,6 +1,7 @@
goog.provide('ol.renderer.Layer');
goog.require('goog.Disposable');
goog.require('goog.asserts');
goog.require('ol.ImageState');
goog.require('ol.TileRange');
goog.require('ol.TileState');
@@ -160,7 +161,13 @@ ol.renderer.Layer.prototype.updateAttributions =
ol.renderer.Layer.prototype.updateLogos = function(frameState, source) {
var logo = source.getLogo();
if (goog.isDef(logo)) {
frameState.logos[logo] = '';
if (goog.isString(logo)) {
frameState.logos[logo] = '';
} else if (goog.isObject(logo)) {
goog.asserts.assertString(logo.href);
goog.asserts.assertString(logo.src);
frameState.logos[logo.src] = logo.href;
}
}
};

View File

@@ -11,7 +11,7 @@ goog.require('ol.source.Source');
/**
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (null|ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* resolutions: (Array.<number>|undefined),
* state: (ol.source.State|string|undefined)}}

View File

@@ -23,7 +23,7 @@ ol.source.State = {
/**
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* projection: ol.proj.ProjectionLike,
* state: (ol.source.State|string|undefined)}}
*/
@@ -69,7 +69,7 @@ ol.source.Source = function(options) {
/**
* @private
* @type {string|undefined}
* @type {string|olx.LogoOptions|undefined}
*/
this.logo_ = options.logo;
@@ -115,7 +115,7 @@ ol.source.Source.prototype.getExtent = function() {
/**
* @return {string|undefined} Logo.
* @return {string|olx.LogoOptions|undefined} Logo.
*/
ol.source.Source.prototype.getLogo = function() {
return this.logo_;
@@ -162,7 +162,7 @@ ol.source.Source.prototype.setExtent = function(extent) {
/**
* @param {string|undefined} logo Logo.
* @param {string|olx.LogoOptions|undefined} logo Logo.
*/
ol.source.Source.prototype.setLogo = function(logo) {
this.logo_ = logo;

View File

@@ -13,7 +13,7 @@ goog.require('ol.tilegrid.TileGrid');
/**
* @typedef {{attributions: (Array.<ol.Attribution>|undefined),
* extent: (ol.Extent|undefined),
* logo: (string|undefined),
* logo: (string|olx.LogoOptions|undefined),
* opaque: (boolean|undefined),
* tilePixelRatio: (number|undefined),
* projection: ol.proj.ProjectionLike,