ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add support for anchor-based permalink, p=sbrunner, r=me (closes #2785)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11170 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2011-02-21 11:53:08 +00:00
parent 3fce968f2a
commit 7e18475a0b
7 changed files with 220 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
examples/anchor-permalink.html Normal file
View File

@@ -0,0 +1,27 @@
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>AnchorPermalink Example</title>
<script src="../lib/OpenLayers.js"></script>
<script src="anchor-permalink.js"></script>
</head>
<body onload="init()">
<h1 id="title">AnchorPermalink Example</h1>
<div id="tags">
anchor, permalink
</div>
<p id="shortdesc">
Place a permalink in the anchor of the url.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
See the <a href="anchor-permalink.js" target="_blank">anchor-permalink.js
source</a> to see how this is done.
</p>
</div>
</body>
</html>

13
examples/anchor-permalink.js Normal file
View File

@@ -0,0 +1,13 @@
function init() {
var map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
layers: [
new OpenLayers.Layer.OSM()
]
});
if (!map.getCenter()) map.zoomToMaxExtent();
map.addControl(new OpenLayers.Control.Permalink({anchor: true}));
}

18
lib/OpenLayers/Control/ArgParser.js
View File

@@ -64,6 +64,22 @@ OpenLayers.Control.ArgParser = OpenLayers.Class(OpenLayers.Control, {
OpenLayers.Control.prototype.initialize.apply(this, arguments);
},
getParameters: function(url) {
url = url || window.location.href;
var parameters = OpenLayers.Util.getParameters(url);
// If we have an chchor in the url use it to split the url
var index = url.indexOf('#');
if (index > 0) {
// create an url to parce on the getParameters
url = '?' + url.substring(index + 1, url.length);
OpenLayers.Util.extend(parameters,
OpenLayers.Util.getParameters(url));
}
return parameters;
},
/**
* Method: setMap
* Set the map property for the control.
@@ -92,7 +108,7 @@ OpenLayers.Control.ArgParser = OpenLayers.Class(OpenLayers.Control, {
}
if (i == this.map.controls.length) {
var args = OpenLayers.Util.getParameters();
var args = this.getParameters();
// Be careful to set layer first, to not trigger unnecessary layer loads
if (args.layers) {
this.layers = args.layers;

49
lib/OpenLayers/Control/Permalink.js
View File

@@ -35,6 +35,16 @@ OpenLayers.Control.Permalink = OpenLayers.Class(OpenLayers.Control, {
*/
element: null,
/**
* APIProperty: anchor
* {Boolean} This option changes 3 things:
* the character '#' is used in place of the character '?',
* the window.href is updated if no element is provided.
* When this option is set to true it's not recommend to provide
* a base without provide an element.
*/
anchor: false,
/**
* APIProperty: base
* {String}
@@ -59,14 +69,27 @@ OpenLayers.Control.Permalink = OpenLayers.Class(OpenLayers.Control, {
* Parameters:
* element - {DOMElement}
* base - {String}
* options - {Object} options to the control.
* options - {Object} options to the control.
*
* Or for anchor:
* options - {Object} options to the control.
*/
initialize: function(element, base, options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.element = OpenLayers.Util.getElement(element);
this.base = base || document.location.href;
if (element !== null && typeof element == 'object' && !OpenLayers.Util.isElement(element)) {
options = element;
this.base = document.location.href;
OpenLayers.Control.prototype.initialize.apply(this, [options]);
if (this.element != null) {
this.element = OpenLayers.Util.getElement(this.element);
}
}
else {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.element = OpenLayers.Util.getElement(element);
this.base = base || document.location.href;
}
},
/**
* APIMethod: destroy
*/
@@ -122,7 +145,7 @@ OpenLayers.Control.Permalink = OpenLayers.Class(OpenLayers.Control, {
draw: function() {
OpenLayers.Control.prototype.draw.apply(this, arguments);
if (!this.element) {
if (!this.element && !this.anchor) {
this.element = document.createElement("a");
this.element.innerHTML = OpenLayers.i18n("permalink");
this.element.href="";
@@ -146,13 +169,19 @@ OpenLayers.Control.Permalink = OpenLayers.Class(OpenLayers.Control, {
* Method: updateLink
*/
updateLink: function() {
var separator = this.anchor ? '#' : '?';
var href = this.base;
if (href.indexOf('?') != -1) {
href = href.substring( 0, href.indexOf('?') );
if (href.indexOf(separator) != -1) {
href = href.substring( 0, href.indexOf(separator) );
}
href += '?' + OpenLayers.Util.getParameterString(this.createParams());
this.element.href = href;
href += separator + OpenLayers.Util.getParameterString(this.createParams());
if (this.anchor && !this.element) {
window.location.href = href;
}
else {
this.element.href = href;
}
},
/**

26
tests/Control/ArgParser.html Normal file
View File

@@ -0,0 +1,26 @@
<html>
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
function test_getParameters(t) {
t.plan(4);
var c = new OpenLayers.Control.ArgParser(), p;
p = c.getParameters('http://example.com?fook=foov&bark=barv');
t.eq(p, {fook: 'foov', bark: 'barv'}, 'a) params are correct');
p = c.getParameters('http://example.com#fook=foov&bark=barv');
t.eq(p, {fook: 'foov', bark: 'barv'}, 'b) params are correct');
p = c.getParameters('http://example.com?a=b&b=c#fook=foov&bark=barv');
t.eq(p, {a: 'b', b: 'c', fook: 'foov', bark: 'barv'},
'c) params are correct');
p = c.getParameters('http://example.com?a=b&b=c&fook=a&bark=b#fook=foov&bark=barv');
t.eq(p, {a: 'b', b: 'c', fook: 'foov', bark: 'barv'},
'd) params are correct');
}
</script>
</head>
</html>

100
tests/Control/Permalink.html
View File

@@ -4,11 +4,67 @@
<script type="text/javascript">
var map;
function test_Control_Permalink_constructor (t) {
t.plan( 2 );
t.plan(42);
control = new OpenLayers.Control.Permalink();
t.ok( control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object" );
t.eq( control.displayClass, "olControlPermalink", "displayClass is correct" );
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, document.location.href, "base is correct");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink('permalink', 'test.html');
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, 'test.html', "base is correct");
t.ok(OpenLayers.Util.isElement(control.element), "element is a dom object");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink('permalink');
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, document.location.href, "base is correct");
t.ok(OpenLayers.Util.isElement(control.element), "element is a dom object");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink(OpenLayers.Util.getElement('permalink'));
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, document.location.href, "base is correct");
t.ok(OpenLayers.Util.isElement(control.element), "element is a dom object");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink({anchor: true});
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, document.location.href, "base is correct");
t.ok(control.element == null, "element is null");
t.ok(control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink({anchor: false});
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, document.location.href, "base is correct");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink({});
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, document.location.href, "base is correct");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink({element: 'permalink', base: 'test.html'});
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, 'test.html', "base is correct");
t.ok(OpenLayers.Util.isElement(control.element), "element is a dom object");
t.ok(!control.anchor, "anchor is correct");
control = new OpenLayers.Control.Permalink({element: 'permalink', base: 'test.html', anchor: true});
t.ok(control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object");
t.eq(control.displayClass, "olControlPermalink", "displayClass is correct");
t.eq(control.base, 'test.html', "base is correct");
t.ok(OpenLayers.Util.isElement(control.element), "element is a dom object");
t.ok(control.anchor, "anchor is correct");
}
function test_Control_Permalink_uncentered (t) {
t.plan( 1 );
@@ -226,7 +282,45 @@
OpenLayers.Util.getParameters = old_getParameters;
OpenLayers.Projection.transform = old_transform;
}
function test_Control_Permalink_Anchor (t) {
t.plan(3);
control = new OpenLayers.Control.Permalink({anchor: true});
t.ok( control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object" );
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'});
map.addLayer(layer);
layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'}, {'isBaseLayer': false});
map.addLayer(layer);
layer.setVisibility(true);
if (!map.getCenter()) map.zoomToMaxExtent();
map.addControl(control);
map.pan(5, 0, {animate:false});
t.ok(OpenLayers.Util.isEquivalentUrl(OpenLayers.Util.getParameterString(control.createParams()), "zoom=2&lat=0&lon=1.75781&layers=BT"), 'pan sets permalink');
map.layers[1].setVisibility(false);
t.ok(OpenLayers.Util.isEquivalentUrl(OpenLayers.Util.getParameterString(control.createParams()), "zoom=2&lat=0&lon=1.75781&layers=BF"), 'setVisibility sets permalink');
}
function test_Control_Permalink_AnchorBaseElement (t) {
t.plan(3);
control = new OpenLayers.Control.Permalink('permalink', document.location.href, {anchor: true});
t.ok( control instanceof OpenLayers.Control.Permalink, "new OpenLayers.Control returns object" );
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'});
map.addLayer(layer);
layer = new OpenLayers.Layer.WMS('Test Layer', "http://octo.metacarta.com/cgi-bin/mapserv", {map: '/mapdata/vmap_wms.map', layers: 'basic', format: 'image/jpeg'}, {'isBaseLayer': false});
map.addLayer(layer);
layer.setVisibility(true);
if (!map.getCenter()) map.zoomToMaxExtent();
map.addControl(control);
map.pan(5, 0, {animate:false});
t.ok(OpenLayers.Util.isEquivalentUrl(OpenLayers.Util.getElement('permalink').href, location+"#zoom=2&lat=0&lon=1.75781&layers=BT"), 'pan sets permalink');
map.layers[1].setVisibility(false);
t.ok(OpenLayers.Util.isEquivalentUrl(OpenLayers.Util.getElement('permalink').href, location+"#zoom=2&lat=0&lon=1.75781&layers=BF"), 'setVisibility sets permalink');
}
</script>
</head>
<body>

1
tests/list-tests.html
View File

@@ -10,6 +10,7 @@
<li>Console.html</li>
<li>Control.html</li>
<li>Control/Attribution.html</li>
<li>Control/ArgParser.html</li>
<li>Control/Button.html</li>
<li>Control/DragFeature.html</li>
<li>Control/DragPan.html</li>