archive-gh-me/ol-layerswitcher
1
0
Fork 0
mirror of https://github.com/walkermatt/ol-layerswitcher.git synced 2026-02-01 15:56:51 +00:00
Code Issues Projects Releases Wiki Activity

Merge prettier changes

Browse Source
This commit is contained in:
Peter Goulborn 2020-09-14 09:14:02 +01:00
commit 5f103cc23e
22 changed files with 940 additions and 833 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.babelrc
View File

@ -1,13 +1,11 @@
{
"presets": [
[
"env",
{
"modules": false
}
]
],
"plugins": [
"external-helpers"
"presets": [
[
"env",
{
"modules": false
}
]
],
"plugins": ["external-helpers"]
}

20
.eslintrc.js
View File

@ -1,14 +1,16 @@
var config = {
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error'
},
"extends": ["openlayers", "plugin:prettier/recommended"],
"rules": {
"object-curly-spacing": "off",
"no-var": "off",
"no-console": (process.env.WATCH) ? "off" : ["error", { allow: ["info", "warn", "error"] }],
"no-debugger": (process.env.WATCH) ? "off" : "error"
extends: ['openlayers', 'plugin:prettier/recommended'],
rules: {
'object-curly-spacing': 'off',
'no-var': 'off',
'no-console': process.env.WATCH
? 'off'
: ['error', { allow: ['info', 'warn', 'error'] }],
'no-debugger': process.env.WATCH ? 'off' : 'error'
}
};
module.exports = config;

5
README.md
View File

@ -31,8 +31,9 @@ The examples demonstrate usage and can be viewed online thanks to [raw.githack.c
- [Bundling with `ol` package (Browserify, Parcel, Webpack...)](https://github.com/walkermatt/ol-layerswitcher-examples)
- To use the layer switcher with the [`ol` package](https://www.npmjs.com/package/ol) and a module bundler such as Browserify, Parcel, Webpack etc. see [ol-layerswitcher-examples](https://github.com/walkermatt/ol-layerswitcher-examples).
- [Activate panel with click](http://raw.githack.com/walkermatt/ol-layerswitcher/master/examples/activation-mode-click.html)
- Shows setting `activationMode: 'click'` (default is `'mouseover'`). When using this mode the control's button persists in the panel - use `collapseLabel` to set its text (default is `collapseLabel: '»'`, see the comments in [examples/layerswitcher.js](./examples/layerswitcher.js) for other examples). The close button is positioned to the left of the panel, to move it to the right add the following to your CSS:
```CSS
- Shows setting `activationMode: 'click'` (default is `'mouseover'`). When using this mode the control's button persists in the panel - use `collapseLabel` to set its text (default is `collapseLabel: '»'`, see the comments in [examples/layerswitcher.js](./examples/layerswitcher.js) for other examples). The close button is positioned to the left of the panel, to move it to the right add the following to your CSS:
```CSS
.layer-switcher.shown.activationModeClick {
padding-right: 34px;
}

24
bower.json
View File

@ -1,25 +1,11 @@
{
"name": "ol-layerswitcher",
"version": "3.5.0",
"version": "3.6.0",
"homepage": "https://github.com/walkermatt/ol-layerswitcher",
"authors": [
"Matt Walker (http://longwayaround.org.uk)"
],
"authors": ["Matt Walker (http://longwayaround.org.uk)"],
"description": "Layer switcher control for OpenLayers",
"main": [
"dist/ol-layerswitcher.js",
"src/ol-layerswitcher.css"
],
"keywords": [
"openlayers",
"ol",
"layerswitcher"
],
"main": ["dist/ol-layerswitcher.js", "src/ol-layerswitcher.css"],
"keywords": ["openlayers", "ol", "layerswitcher"],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test"
]
"ignore": ["**/.*", "node_modules", "bower_components", "test"]
}

5
examples/activation-mode-click.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - LayerSwitcher</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="layerswitcher.css" />

5
examples/addlayer.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - LayerSwitcher Add Layer</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="layerswitcher.css" />

92
examples/addlayer.js
View File

@ -1,53 +1,51 @@
(function() {
(function () {
// Create a group for overlays. Add the group to the map when it's created
// but add the overlay layers later
var overlayGroup = new ol.layer.Group({
title: 'Overlays',
layers: []
});
// Create a group for overlays. Add the group to the map when it's created
// but add the overlay layers later
var overlayGroup = new ol.layer.Group({
title: 'Overlays',
// Create a map containing two group layers
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
title: 'Base maps',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
source: new ol.source.OSM()
})
]
});
}),
overlayGroup
],
view: new ol.View({
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
// Create a map containing two group layers
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
'title': 'Base maps',
layers: [
new ol.layer.Tile({
title: 'OSM',
type: 'base',
source: new ol.source.OSM()
})
]
}),
overlayGroup
],
view: new ol.View({
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
// Create a LayerSwitcher instance and add it to the map
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
// Add a layer to a pre-exiting ol.layer.Group after the LayerSwitcher has
// been added to the map. The layer will appear in the list the next time
// the LayerSwitcher is shown or LayerSwitcher#renderPanel is called.
overlayGroup.getLayers().push(
new ol.layer.Image({
title: 'Countries',
minResolution: 500,
maxResolution: 5000,
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: {'LAYERS': 'show:0'},
url: "https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer"
})
})
);
// Create a LayerSwitcher instance and add it to the map
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
// Add a layer to a pre-exiting ol.layer.Group after the LayerSwitcher has
// been added to the map. The layer will appear in the list the next time
// the LayerSwitcher is shown or LayerSwitcher#renderPanel is called.
overlayGroup.getLayers().push(
new ol.layer.Image({
title: 'Countries',
minResolution: 500,
maxResolution: 5000,
source: new ol.source.ImageArcGISRest({
ratio: 1,
params: { LAYERS: 'show:0' },
url:
'https://ons-inspire.esriuk.com/arcgis/rest/services/Administrative_Boundaries/Countries_December_2016_Boundaries/MapServer'
})
})
);
})();

5
examples/collapse-groups.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - LayerSwitcher</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="layerswitcher.css" />

3
examples/layerswitcher.css
View File

@ -1,4 +1,5 @@
html, body {
html,
body {
height: 100%;
padding: 0;
margin: 0;

5
examples/layerswitcher.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - LayerSwitcher</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="layerswitcher.css" />

2
examples/scroll.css
View File

@ -1,4 +1,4 @@
/* Set the maxmimum height of the layerswitcher when it's shown */
.layer-switcher.shown {
max-height: 170px;
max-height: 170px;
}

5
examples/scroll.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - LayerSwitcher Scrolling</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="layerswitcher.css" />

11
examples/select-groups.css
View File

@ -1,4 +1,5 @@
html, body {
html,
body {
height: 100%;
padding: 0;
margin: 0;
@ -12,8 +13,8 @@ html, body {
}
#group-select-style {
position: absolute;
top: 0.5em;
right: 0.5em;
z-index: 100;
position: absolute;
top: 0.5em;
right: 0.5em;
z-index: 100;
}

5
examples/select-groups.html
View File

@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - Selectable Groups</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="select-groups.css" />

9
examples/sidebar.css
View File

@ -1,22 +1,23 @@
html, body {
html,
body {
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: small;
overflow: hidden;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
font: 10pt 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#map {
width: 100%;
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
font: 10pt 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
/* As we've given the element we're displaying the layer tree within a class of
* layer-switcher (so we can benefit from the default layer-switcher styles) we
* need to override the position to avoid it being absolutely positioned */
.layer-switcher {
position: initial;
position: initial;
}

64
examples/sidebar.html
View File

@ -3,29 +3,51 @@
<head>
<meta charset="utf-8" />
<title>OpenLayers - LayerSwitcher sidebar</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" href="https://rawgit.com/Turbo87/sidebar-v2/master/css/ol3-sidebar.css" />
<link
rel="stylesheet"
href="https://rawgit.com/Turbo87/sidebar-v2/master/css/ol3-sidebar.css"
/>
<link rel="stylesheet" href="../src/ol-layerswitcher.css" />
<link rel="stylesheet" href="sidebar.css" />
</head>
<body>
<!-- START OF SIDEBAR DIV -->
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://github.com/Turbo87/sidebar-v2" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
<li>
<a href="#home" role="tab"><i class="fa fa-bars"></i></a>
</li>
<li>
<a href="#profile" role="tab"><i class="fa fa-user"></i></a>
</li>
<li class="disabled">
<a href="#messages" role="tab"><i class="fa fa-envelope"></i></a>
</li>
<li>
<a
href="https://github.com/Turbo87/sidebar-v2"
role="tab"
target="_blank"
><i class="fa fa-github"></i
></a>
</li>
</ul>
<ul role="tablist">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
<li>
<a href="#settings" role="tab"><i class="fa fa-gear"></i></a>
</li>
</ul>
</div>
@ -33,7 +55,7 @@
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
Layers
Layers
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<!-- !!! HERE WILL GO THE CONTENT OF LAYERSWITCHER !!! -->
@ -41,15 +63,27 @@
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<h1 class="sidebar-header">
Profile<span class="sidebar-close"
><i class="fa fa-caret-left"></i
></span>
</h1>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<h1 class="sidebar-header">
Messages<span class="sidebar-close"
><i class="fa fa-caret-left"></i
></span>
</h1>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header">Settings<span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<h1 class="sidebar-header">
Settings<span class="sidebar-close"
><i class="fa fa-caret-left"></i
></span>
</h1>
</div>
</div>
</div>
@ -65,7 +99,7 @@
ol.inherits = function inherits(childCtor, parentCtor) {
childCtor.prototype = Object.create(parentCtor.prototype);
childCtor.prototype.constructor = childCtor;
}
};
}
</script>
<script src="https://rawgit.com/Turbo87/sidebar-v2/master/js/ol3-sidebar.js"></script>

48
rollup.config.js
View File

@ -1,29 +1,29 @@
import babel from 'rollup-plugin-babel';
module.exports = {
entry: 'src/ol-layerswitcher.js',
targets: [
{
dest: 'dist/ol-layerswitcher.js',
// format: 'iife',
format: 'umd',
moduleName: 'LayerSwitcher'
}
],
plugins: [
require('rollup-plugin-node-resolve')(),
require('rollup-plugin-commonjs')(),
babel({
exclude: 'node_modules/**' // only transpile our source code
})
],
external: function(id) {
console.log('id', id);
return /ol\//.test(id);
},
globals: {
'ol/Map': 'ol.Map',
'ol/Observable': 'ol.Observable',
'ol/control/Control': 'ol.control.Control'
entry: 'src/ol-layerswitcher.js',
targets: [
{
dest: 'dist/ol-layerswitcher.js',
// format: 'iife',
format: 'umd',
moduleName: 'LayerSwitcher'
}
],
plugins: [
require('rollup-plugin-node-resolve')(),
require('rollup-plugin-commonjs')(),
babel({
exclude: 'node_modules/**' // only transpile our source code
})
],
external: function (id) {
console.log('id', id);
return /ol\//.test(id);
},
globals: {
'ol/Map': 'ol.Map',
'ol/Observable': 'ol.Observable',
'ol/control/Control': 'ol.control.Control'
}
};

75
test/index.html
View File

@ -1,44 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<head>
<title>ol-layerswitcher spec runner</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../node_modules/mocha/mocha.css">
<meta charset="utf-8" />
<link
rel="stylesheet"
type="text/css"
href="../node_modules/mocha/mocha.css"
/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" />
<link rel="stylesheet" type="text/css" href="../src/ol-layerswitcher.css">
<link rel="stylesheet" type="text/css" href="../src/ol-layerswitcher.css" />
<style type="text/css">
/* Can be useful when writing tests, uncomment the following CSS to always show
/* Can be useful when writing tests, uncomment the following CSS to always show
the panel and add a `debugger` statement where you want to inspect the current state */
/*
/*
.layer-switcher .panel {
display: block;
}
*/
</style>
</head>
<body>
<div id="mocha"></div>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../node_modules/expect.js/index.js"></script>
<script type="text/javascript" src="../node_modules/mocha/mocha.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/difflib@0.2.4/dist/difflib-browser.min.js"></script>
<script>
mocha.setup({
</head>
<body>
<div id="mocha"></div>
<script
type="text/javascript"
src="../node_modules/jquery/dist/jquery.js"
></script>
<script
type="text/javascript"
src="../node_modules/expect.js/index.js"
></script>
<script
type="text/javascript"
src="../node_modules/mocha/mocha.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"
></script>
<script src="https://cdn.jsdelivr.net/npm/difflib@0.2.4/dist/difflib-browser.min.js"></script>
<script>
mocha.setup({
ui: 'bdd',
bail: false
});
</script>
<script src="https://openlayers.org/en/v6.1.1/build/ol.js"></script>
<script type="text/javascript" src="../dist/ol-layerswitcher.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="spec/ol-layerswitcher.js"></script>
<script type="text/javascript" src="spec/twomaps.js"></script>
<script type="text/javascript" src="spec/renderpanel.js"></script>
<script type="text/javascript" src="spec/groupselectstyle.js"></script>
<script>
mocha.run();
</script>
</body>
});
</script>
<script src="https://openlayers.org/en/v6.1.1/build/ol.js"></script>
<script type="text/javascript" src="../dist/ol-layerswitcher.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="spec/ol-layerswitcher.js"></script>
<script type="text/javascript" src="spec/twomaps.js"></script>
<script type="text/javascript" src="spec/renderpanel.js"></script>
<script type="text/javascript" src="spec/groupselectstyle.js"></script>
<script>
mocha.run();
</script>
</body>
</html>

683
test/spec/ol-layerswitcher.js
View File

@ -1,337 +1,378 @@
describe('ol.control.LayerSwitcher', function () {
var map, target, switcher;
describe('ol.control.LayerSwitcher', function() {
var map, target, switcher;
beforeEach(function() {
target = document.createElement('div');
document.body.appendChild(target);
switcher = new ol.control.LayerSwitcher();
map = new ol.Map({
target: target,
layers: [
new ol.layer.Group({
title: 'Base-Group',
fold: 'open',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined base group
new ol.layer.Group({
title: 'Combined-Base-Layer',
type: 'base',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined overlay group
new ol.layer.Group({
title: 'Combined-Overlay-Group',
type: 'overlay',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Group with no title (group and its children should be ignored)
new ol.layer.Group({
layers: [
new ol.layer.Tile({
title: 'Never shown',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Top-level layer not in a group
new ol.layer.Tile({
title: 'Bar',
minResolution: 1000,
maxResolution: 5000,
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
// Layer with no title (should be ignored)
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
beforeEach(function () {
target = document.createElement('div');
document.body.appendChild(target);
switcher = new ol.control.LayerSwitcher();
map = new ol.Map({
target: target,
layers: [
new ol.layer.Group({
title: 'Base-Group',
fold: 'open',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
],
controls: [switcher]
});
})
}),
new ol.layer.Tile({
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined base group
new ol.layer.Group({
title: 'Combined-Base-Layer',
type: 'base',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined overlay group
new ol.layer.Group({
title: 'Combined-Overlay-Group',
type: 'overlay',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Group with no title (group and its children should be ignored)
new ol.layer.Group({
layers: [
new ol.layer.Tile({
title: 'Never shown',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Top-level layer not in a group
new ol.layer.Tile({
title: 'Bar',
minResolution: 1000,
maxResolution: 5000,
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
// Layer with no title (should be ignored)
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
],
controls: [switcher]
});
});
afterEach(function() {
document.body.removeChild(target);
switcher = null;
map = null;
target = null;
afterEach(function () {
document.body.removeChild(target);
switcher = null;
map = null;
target = null;
});
describe('DOM creation', function () {
it('creates the expected DOM elements', function () {
expect(jQuery('.layer-switcher').length).to.be(1);
});
});
describe('DOM creation', function() {
it('creates the expected DOM elements', function() {
expect(jQuery('.layer-switcher').length).to.be(1);
});
describe('Show and hide', function () {
it('is initially hidden', function () {
expect(jQuery('.layer-switcher').hasClass('.shown')).to.be(false);
expect(jQuery('.layer-switcher .panel:visible').length).to.be(0);
});
describe('Show and hide', function() {
it('is initially hidden', function() {
expect(jQuery('.layer-switcher').hasClass('.shown')).to.be(false);
expect(jQuery('.layer-switcher .panel:visible').length).to.be(0);
});
it('is shown on button click', function() {
jQuery('.layer-switcher button').click();
expect(jQuery('.layer-switcher.shown').length).to.be(1);
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
});
it('is hidden on map click', function() {
jQuery('#map').click();
expect(jQuery('.layer-switcher').hasClass('.shown')).to.be(false);
expect(jQuery('.layer-switcher .panel:visible').length).to.be(0);
});
it('is shown on button click', function () {
jQuery('.layer-switcher button').click();
expect(jQuery('.layer-switcher.shown').length).to.be(1);
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
});
describe('Layer list', function() {
it('displays all layers with a title in reverse order', function() {
switcher.showPanel();
var titles = jQuery('.layer-switcher label').map(function() {
return jQuery(this).text();
}).get();
expect(titles).to.eql(['Bar', 'Combined-Overlay-Group', 'Combined-Base-Layer', 'Base-Group', 'Too', 'Foo']);
});
it('only displays layers with a title', function() {
switcher.showPanel();
var elmTitles = jQuery('.layer-switcher label').map(function() {
return jQuery(this).text();
}).get();
var lyrsWithTitle = shownLyrs(map);
expect(lyrsWithTitle.length).to.eql(elmTitles.length);
});
it('don\'t display layers without a title', function() {
switcher.showPanel();
// This is basically to ensure that our test layers include layers without a title
var lyrsWithoutTitle = _.filter(allLyrs(map), function(lyr) {return !lyr.get('title')});
expect(lyrsWithoutTitle.length).not.to.equal(0);
});
it('displays normal layers as checkbox', function() {
switcher.showPanel();
var titles = jQuery('.layer-switcher input[type=checkbox]').siblings('label').map(function() {
return jQuery(this).text();
}).get();
expect(titles).to.eql(['Bar', 'Combined-Overlay-Group']);
});
it('greys out normal layer title labels when outside of layer resolution', function() {
map.getView().setResolution(6000);
switcher.showPanel();
var layerResTooHigh = jQuery('.layer-switcher label.disabled').map(function() {
return jQuery(this).text();
}).get();
map.getView().setResolution(500);
var layerResTooLow = jQuery('.layer-switcher label.disabled').map(function() {
return jQuery(this).text();
}).get();
expect([layerResTooHigh, layerResTooLow]).to.eql([['Bar'], ['Bar']]);
});
it('displays base layers as radio buttons', function() {
switcher.showPanel();
var titles = jQuery('.layer-switcher input[type=radio]').siblings('label').map(function() {
return jQuery(this).text();
}).get();
expect(titles).to.eql(['Combined-Base-Layer', 'Too', 'Foo']);
});
it('should display uncombined groups without an input', function() {
switcher.showPanel();
var groups = jQuery('.layer-switcher label:not([for])')
var titles = groups.map(function() {
return jQuery(this).text();
}).get();
expect(titles).to.eql(['Base-Group']);
expect(groups.siblings('input').length).to.be(0);
});
it('should display combined groups with an input', function () {
switcher.showPanel();
var titles = jQuery('.layer-switcher label[for]').map(function() {
return jQuery(this).text();
}).get();
expect(titles).to.contain('Combined-Base-Layer');
expect(titles).to.contain('Combined-Overlay-Group');
});
it('should display combined groups without sub layers', function () {
switcher.showPanel();
var groups = jQuery('.layer-switcher label[for]')
expect(groups.siblings('ul').length).to.be(0);
});
it('is hidden on map click', function () {
jQuery('#map').click();
expect(jQuery('.layer-switcher').hasClass('.shown')).to.be(false);
expect(jQuery('.layer-switcher .panel:visible').length).to.be(0);
});
});
describe('Overlay layer visibility', function() {
it('Toggles overlay layer visibility on click', function() {
switcher.showPanel();
var bar = getLayerByTitle(map, 'Bar');
bar.setVisible(true);
jQuery('.layer-switcher label:contains("Bar")').siblings('input').click();
expect(bar.getVisible()).to.be(false);
expect(jQuery('.layer-switcher label:contains("Bar")').siblings('input').get(0).checked).to.be(bar.getVisible());
bar.setVisible(false)
jQuery('.layer-switcher label:contains("Bar")').siblings('input').click();
expect(bar.getVisible()).to.be(true);
expect(jQuery('.layer-switcher label:contains("Bar")').siblings('input').get(0).checked).to.be(bar.getVisible());
});
describe('Layer list', function () {
it('displays all layers with a title in reverse order', function () {
switcher.showPanel();
var titles = jQuery('.layer-switcher label')
.map(function () {
return jQuery(this).text();
})
.get();
expect(titles).to.eql([
'Bar',
'Combined-Overlay-Group',
'Combined-Base-Layer',
'Base-Group',
'Too',
'Foo'
]);
});
describe('Base layer visibility', function() {
it('Only one base layer is visible after renderPanel', function() {
var foo = getLayerByTitle(map, 'Foo');
var too = getLayerByTitle(map, 'Too');
var cbg = getLayerByTitle(map, 'Combined-Base-Layer');
var baseLayers = [foo, too, cbg];
// Enable all base layers
_.forEach(baseLayers, function (l) {
l.setVisible(true);
});
switcher.renderPanel();
var visibleBaseLayerCount = _.countBy(baseLayers, function (l){
return l.getVisible();
});
expect(visibleBaseLayerCount.true).to.be(1);
});
it('Only top most base layer is visible after renderPanel if more than one is visible', function() {
var foo = getLayerByTitle(map, 'Foo');
var too = getLayerByTitle(map, 'Too');
var cbg = getLayerByTitle(map, 'Combined-Base-Layer');
var baseLayers = [foo, too, cbg];
// Enable all base layers
_.forEach(baseLayers, function (l) {
l.setVisible(true);
});
switcher.renderPanel();
expect(cbg.getVisible()).to.be(true);
});
it('Clicking on unchecked base layer shows it', function() {
var too = getLayerByTitle(map, 'Too');
too.setVisible(false);
switcher.renderPanel();
jQuery('.layer-switcher label:contains("Too")').siblings('input').click();
expect(too.getVisible()).to.be(true);
expect(jQuery('.layer-switcher label:contains("Too")').siblings('input').get(0).checked).to.be(true);
});
it('Clicking on checked base layer does not change base layer', function() {
var foo = getLayerByTitle(map, 'Foo');
foo.setVisible(true);
switcher.renderPanel();
jQuery('.layer-switcher label:contains("Foo")').siblings('input').click();
expect(foo.getVisible()).to.be(true);
expect(jQuery('.layer-switcher label:contains("Foo")').siblings('input').get(0).checked).to.be(true);
});
it('only displays layers with a title', function () {
switcher.showPanel();
var elmTitles = jQuery('.layer-switcher label')
.map(function () {
return jQuery(this).text();
})
.get();
var lyrsWithTitle = shownLyrs(map);
expect(lyrsWithTitle.length).to.eql(elmTitles.length);
});
describe('Folding', function() {
it('Child layers shown when group has fold: open', function() {
var baseGroup = getLayerByTitle(map, 'Base-Group');
baseGroup.set('fold', 'open');
switcher.renderPanel();
jQuery('.layer-switcher button').click();
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
var baseGroupLi = jQuery(".layer-switcher label:contains('Base-Group')").parent();
expect(baseGroupLi.hasClass('layer-switcher-fold')).to.be(true);
expect(baseGroupLi.hasClass('layer-switcher-open')).to.be(true);
expect(baseGroupLi.hasClass('layer-switcher-close')).to.be(false);
// Determining if the content is visible or not is difficult as we simply set the
// height of the ul containing the child layers to 0 so jQuery's :hidden
// selector doesn't consider the element or it's children hidden even though
// they are not visible to the user. Here I'm using offsetHeight as suggested
// by https://davidwalsh.name/offsetheight-visibility
expect(baseGroupLi.find('ul').get(0).offsetHeight).to.be.greaterThan(0);
});
it('Child layers hidden when group has fold: close', function() {
var baseGroup = getLayerByTitle(map, 'Base-Group');
baseGroup.set('fold', 'close');
switcher.renderPanel();
jQuery('.layer-switcher button').click();
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
var baseGroupLi = jQuery(".layer-switcher label:contains('Base-Group')").parent();
expect(baseGroupLi.hasClass('layer-switcher-fold')).to.be(true);
expect(baseGroupLi.hasClass('layer-switcher-open')).to.be(false);
expect(baseGroupLi.hasClass('layer-switcher-close')).to.be(true);
// See above comment on use of offsetHeight
expect(baseGroupLi.find('ul').get(0).offsetHeight).to.be(0);
});
it("don't display layers without a title", function () {
switcher.showPanel();
// This is basically to ensure that our test layers include layers without a title
var lyrsWithoutTitle = _.filter(allLyrs(map), function (lyr) {
return !lyr.get('title');
});
expect(lyrsWithoutTitle.length).not.to.equal(0);
});
describe('Removes cleanly', function() {
it('Removes cleanly when ol.Map#removeControl is called', function() {
map.removeControl(switcher);
});
it('displays normal layers as checkbox', function () {
switcher.showPanel();
var titles = jQuery('.layer-switcher input[type=checkbox]')
.siblings('label')
.map(function () {
return jQuery(this).text();
})
.get();
expect(titles).to.eql(['Bar', 'Combined-Overlay-Group']);
});
it('greys out normal layer title labels when outside of layer resolution', function () {
map.getView().setResolution(6000);
switcher.showPanel();
var layerResTooHigh = jQuery('.layer-switcher label.disabled')
.map(function () {
return jQuery(this).text();
})
.get();
map.getView().setResolution(500);
var layerResTooLow = jQuery('.layer-switcher label.disabled')
.map(function () {
return jQuery(this).text();
})
.get();
expect([layerResTooHigh, layerResTooLow]).to.eql([['Bar'], ['Bar']]);
});
it('displays base layers as radio buttons', function () {
switcher.showPanel();
var titles = jQuery('.layer-switcher input[type=radio]')
.siblings('label')
.map(function () {
return jQuery(this).text();
})
.get();
expect(titles).to.eql(['Combined-Base-Layer', 'Too', 'Foo']);
});
it('should display uncombined groups without an input', function () {
switcher.showPanel();
var groups = jQuery('.layer-switcher label:not([for])');
var titles = groups
.map(function () {
return jQuery(this).text();
})
.get();
expect(titles).to.eql(['Base-Group']);
expect(groups.siblings('input').length).to.be(0);
});
it('should display combined groups with an input', function () {
switcher.showPanel();
var titles = jQuery('.layer-switcher label[for]')
.map(function () {
return jQuery(this).text();
})
.get();
expect(titles).to.contain('Combined-Base-Layer');
expect(titles).to.contain('Combined-Overlay-Group');
});
it('should display combined groups without sub layers', function () {
switcher.showPanel();
var groups = jQuery('.layer-switcher label[for]');
expect(groups.siblings('ul').length).to.be(0);
});
});
describe('Overlay layer visibility', function () {
it('Toggles overlay layer visibility on click', function () {
switcher.showPanel();
var bar = getLayerByTitle(map, 'Bar');
bar.setVisible(true);
jQuery('.layer-switcher label:contains("Bar")').siblings('input').click();
expect(bar.getVisible()).to.be(false);
expect(
jQuery('.layer-switcher label:contains("Bar")').siblings('input').get(0)
.checked
).to.be(bar.getVisible());
bar.setVisible(false);
jQuery('.layer-switcher label:contains("Bar")').siblings('input').click();
expect(bar.getVisible()).to.be(true);
expect(
jQuery('.layer-switcher label:contains("Bar")').siblings('input').get(0)
.checked
).to.be(bar.getVisible());
});
});
describe('Base layer visibility', function () {
it('Only one base layer is visible after renderPanel', function () {
var foo = getLayerByTitle(map, 'Foo');
var too = getLayerByTitle(map, 'Too');
var cbg = getLayerByTitle(map, 'Combined-Base-Layer');
var baseLayers = [foo, too, cbg];
// Enable all base layers
_.forEach(baseLayers, function (l) {
l.setVisible(true);
});
switcher.renderPanel();
var visibleBaseLayerCount = _.countBy(baseLayers, function (l) {
return l.getVisible();
});
expect(visibleBaseLayerCount.true).to.be(1);
});
it('Only top most base layer is visible after renderPanel if more than one is visible', function () {
var foo = getLayerByTitle(map, 'Foo');
var too = getLayerByTitle(map, 'Too');
var cbg = getLayerByTitle(map, 'Combined-Base-Layer');
var baseLayers = [foo, too, cbg];
// Enable all base layers
_.forEach(baseLayers, function (l) {
l.setVisible(true);
});
switcher.renderPanel();
expect(cbg.getVisible()).to.be(true);
});
it('Clicking on unchecked base layer shows it', function () {
var too = getLayerByTitle(map, 'Too');
too.setVisible(false);
switcher.renderPanel();
jQuery('.layer-switcher label:contains("Too")').siblings('input').click();
expect(too.getVisible()).to.be(true);
expect(
jQuery('.layer-switcher label:contains("Too")').siblings('input').get(0)
.checked
).to.be(true);
});
it('Clicking on checked base layer does not change base layer', function () {
var foo = getLayerByTitle(map, 'Foo');
foo.setVisible(true);
switcher.renderPanel();
jQuery('.layer-switcher label:contains("Foo")').siblings('input').click();
expect(foo.getVisible()).to.be(true);
expect(
jQuery('.layer-switcher label:contains("Foo")').siblings('input').get(0)
.checked
).to.be(true);
});
});
describe('Folding', function () {
it('Child layers shown when group has fold: open', function () {
var baseGroup = getLayerByTitle(map, 'Base-Group');
baseGroup.set('fold', 'open');
switcher.renderPanel();
jQuery('.layer-switcher button').click();
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
var baseGroupLi = jQuery(
".layer-switcher label:contains('Base-Group')"
).parent();
expect(baseGroupLi.hasClass('layer-switcher-fold')).to.be(true);
expect(baseGroupLi.hasClass('layer-switcher-open')).to.be(true);
expect(baseGroupLi.hasClass('layer-switcher-close')).to.be(false);
// Determining if the content is visible or not is difficult as we simply set the
// height of the ul containing the child layers to 0 so jQuery's :hidden
// selector doesn't consider the element or it's children hidden even though
// they are not visible to the user. Here I'm using offsetHeight as suggested
// by https://davidwalsh.name/offsetheight-visibility
expect(baseGroupLi.find('ul').get(0).offsetHeight).to.be.greaterThan(0);
});
it('Child layers hidden when group has fold: close', function () {
var baseGroup = getLayerByTitle(map, 'Base-Group');
baseGroup.set('fold', 'close');
switcher.renderPanel();
jQuery('.layer-switcher button').click();
expect(jQuery('.layer-switcher .panel:visible').length).to.be(1);
var baseGroupLi = jQuery(
".layer-switcher label:contains('Base-Group')"
).parent();
expect(baseGroupLi.hasClass('layer-switcher-fold')).to.be(true);
expect(baseGroupLi.hasClass('layer-switcher-open')).to.be(false);
expect(baseGroupLi.hasClass('layer-switcher-close')).to.be(true);
// See above comment on use of offsetHeight
expect(baseGroupLi.find('ul').get(0).offsetHeight).to.be(0);
});
});
describe('Removes cleanly', function () {
it('Removes cleanly when ol.Map#removeControl is called', function () {
map.removeControl(switcher);
});
});
});

313
test/spec/renderpanel.js
View File

@ -1,167 +1,167 @@
describe('ol.control.LayerSwitcher.renderPanel', function() {
var map, target, panel;
describe('ol.control.LayerSwitcher.renderPanel', function () {
var map, target, panel;
beforeEach(function() {
target = document.createElement('div');
document.body.appendChild(target);
panel = document.createElement('div');
document.body.appendChild(panel);
map = new ol.Map({
target: target,
layers: [
new ol.layer.Group({
title: 'Base',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined base group
new ol.layer.Group({
title: 'Combined-Base-Group',
type: 'base',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined overlay group
new ol.layer.Group({
title: 'Combined-Overlay-Group',
type: 'overlay',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Group with no title (group and it's children should be ignored)
new ol.layer.Group({
layers: [
new ol.layer.Tile({
title: 'Never shown',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
new ol.layer.Tile({
title: 'Bar',
minResolution: 1000,
maxResolution: 5000,
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
// Layer with no title (should be ignored)
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
beforeEach(function () {
target = document.createElement('div');
document.body.appendChild(target);
panel = document.createElement('div');
document.body.appendChild(panel);
map = new ol.Map({
target: target,
layers: [
new ol.layer.Group({
title: 'Base',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
]
});
})
}),
new ol.layer.Tile({
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined base group
new ol.layer.Group({
title: 'Combined-Base-Group',
type: 'base',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Combined overlay group
new ol.layer.Group({
title: 'Combined-Overlay-Group',
type: 'overlay',
combine: true,
layers: [
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
// Group with no title (group and it's children should be ignored)
new ol.layer.Group({
layers: [
new ol.layer.Tile({
title: 'Never shown',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
}),
new ol.layer.Tile({
title: 'Bar',
minResolution: 1000,
maxResolution: 5000,
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
// Layer with no title (should be ignored)
new ol.layer.Tile({
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
});
});
afterEach(function() {
document.body.removeChild(target);
document.body.removeChild(panel);
map = null;
target = null;
panel = null;
afterEach(function () {
document.body.removeChild(target);
document.body.removeChild(panel);
map = null;
target = null;
panel = null;
});
describe('Render to div', function () {
it('creates the expected DOM elements', function () {
ol.control.LayerSwitcher.renderPanel(map, panel);
expect(jQuery('li.layer', panel).length).to.be(5);
expect(jQuery('li.group', panel).length).to.be(1);
});
});
describe('Render to div', function() {
it('creates the expected DOM elements', function() {
ol.control.LayerSwitcher.renderPanel(map, panel);
expect(jQuery('li.layer', panel).length).to.be(5);
expect(jQuery('li.group', panel).length).to.be(1);
});
describe('Overlay layer visibility', function () {
it('Re-rendering reflects current layer state', function () {
// Initial render
ol.control.LayerSwitcher.renderPanel(map, panel);
var input = getElmByTitle(panel, 'Bar');
// Assert the Bar layer is initially visible
expect(input.checked).to.be(true);
// Hide the layer
var bar = getLayerByTitle(map, 'Bar');
bar.setVisible(false);
// Re-render to update layer tree
ol.control.LayerSwitcher.renderPanel(map, panel);
input = getElmByTitle(panel, 'Bar');
expect(input.checked).to.be(false);
});
});
describe('Overlay layer visibility', function() {
it('Re-rendering reflects current layer state', function() {
// Initial render
ol.control.LayerSwitcher.renderPanel(map, panel);
var input = getElmByTitle(panel, 'Bar');
// Assert the Bar layer is initially visible
expect(input.checked).to.be(true);
// Hide the layer
var bar = getLayerByTitle(map, 'Bar');
bar.setVisible(false);
// Re-render to update layer tree
ol.control.LayerSwitcher.renderPanel(map, panel);
input = getElmByTitle(panel, 'Bar');
expect(input.checked).to.be(false);
});
});
/*
/*
// TODO Should we make sure event listeners are unregistered?
describe('Removes cleanly', function() {
it('Removes cleanly when ol.Map#removeControl is called', function() {
@ -169,5 +169,4 @@ describe('ol.control.LayerSwitcher.renderPanel', function() {
});
});
*/
});

213
test/spec/twomaps.js
View File

@ -1,116 +1,119 @@
describe('ol.control.LayerSwitcher - Two maps', function() {
var map1, map2, target1, target2, switcher1, switcher2;
describe('ol.control.LayerSwitcher - Two maps', function () {
var map1, map2, target1, target2, switcher1, switcher2;
beforeEach(function() {
target1 = document.createElement('div');
target1.id = 'map1';
document.body.appendChild(target1);
target2 = document.createElement('div');
target2.id = 'map2';
document.body.appendChild(target2);
switcher1 = new ol.control.LayerSwitcher();
switcher2 = new ol.control.LayerSwitcher();
map1 = new ol.Map({
target: target1,
layers: [
new ol.layer.Group({
title: 'Base',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
beforeEach(function () {
target1 = document.createElement('div');
target1.id = 'map1';
document.body.appendChild(target1);
target2 = document.createElement('div');
target2.id = 'map2';
document.body.appendChild(target2);
switcher1 = new ol.control.LayerSwitcher();
switcher2 = new ol.control.LayerSwitcher();
map1 = new ol.Map({
target: target1,
layers: [
new ol.layer.Group({
title: 'Base',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
title: 'Bar',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
}),
],
controls: [switcher1]
});
map2 = new ol.Map({
target: target2,
layers: [
new ol.layer.Group({
title: 'Base',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
]
})
})
]
}),
new ol.layer.Tile({
title: 'Bar',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
],
controls: [switcher1]
});
map2 = new ol.Map({
target: target2,
layers: [
new ol.layer.Group({
title: 'Base',
layers: [
new ol.layer.Tile({
title: 'Foo',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
}),
new ol.layer.Tile({
title: 'Bar',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
title: 'Too',
type: 'base',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
}),
],
controls: [switcher2]
});
})
})
]
}),
new ol.layer.Tile({
title: 'Bar',
source: new ol.source.TileDebug({
projection: 'EPSG:3857',
tileGrid: ol.tilegrid.createXYZ({
maxZoom: 22
})
})
})
],
controls: [switcher2]
});
});
afterEach(function() {
document.body.removeChild(target1);
document.body.removeChild(target2);
target1 = null;
target2 = null;
switcher1 = null;
switcher2 = null;
map1 = null;
map2 = null;
afterEach(function () {
document.body.removeChild(target1);
document.body.removeChild(target2);
target1 = null;
target2 = null;
switcher1 = null;
switcher2 = null;
map1 = null;
map2 = null;
});
describe('Layer IDs are unique', function () {
it('Inputs for layers with the same title in different maps will have different IDs', function () {
switcher1.showPanel();
switcher2.showPanel();
var bar1Id = jQuery('#map1 .layer-switcher label:contains("Bar")')
.siblings('input')
.attr('id');
var bar2Id = jQuery('#map2 .layer-switcher label:contains("Bar")')
.siblings('input')
.attr('id');
expect(bar1Id).to.not.equal(bar2Id);
});
describe('Layer IDs are unique', function() {
it('Inputs for layers with the same title in different maps will have different IDs', function() {
switcher1.showPanel();
switcher2.showPanel();
var bar1Id = jQuery('#map1 .layer-switcher label:contains("Bar")').siblings('input').attr('id');
var bar2Id = jQuery('#map2 .layer-switcher label:contains("Bar")').siblings('input').attr('id');
expect(bar1Id).to.not.equal(bar2Id);
});
});
});
});

163
test/utils.js
View File

@ -6,20 +6,20 @@ var __log_output = [];
* log to the console if the current test fails
*/
function log(o1, o2, o3, oN) {
__log_output = __log_output.concat(Array.prototype.slice.call(arguments));
__log_output = __log_output.concat(Array.prototype.slice.call(arguments));
}
beforeEach(function() {
__log_output = [];
beforeEach(function () {
__log_output = [];
});
afterEach(function() {
// If the test fails then log it's output to the console
if (this.currentTest.state === 'failed') {
__log_output.forEach(function (o) {
console.log(o);
});
}
afterEach(function () {
// If the test fails then log it's output to the console
if (this.currentTest.state === 'failed') {
__log_output.forEach(function (o) {
console.log(o);
});
}
});
// OpenLayers related utils
@ -28,14 +28,14 @@ afterEach(function() {
* Returns the Layer instance that has the given title
*/
function getLayerByTitle(grp, title) {
var layer = null;
ol.control.LayerSwitcher.forEachRecursive(grp, function(lyr) {
if (lyr.get('title') && lyr.get('title') === title) {
layer = lyr;
return;
}
});
return layer;
var layer = null;
ol.control.LayerSwitcher.forEachRecursive(grp, function (lyr) {
if (lyr.get('title') && lyr.get('title') === title) {
layer = lyr;
return;
}
});
return layer;
}
/**
@ -43,25 +43,26 @@ function getLayerByTitle(grp, title) {
* properties that we need to compare in tests.
*/
function groupToJson(group) {
function walk(g, group) {
group.getLayers().forEach(function(lyr, idx, a) {
const title = lyr.get('title');
if (title) {
const l = {title: title, visible: lyr.getVisible()}
const keys = lyr.getKeys();
if (keys.includes('indeterminate')) l.indeterminate = lyr.get('indeterminate');
if (keys.includes('fold')) l.fold = lyr.get('fold');
g.layers.push(l)
if (lyr.getLayers) {
l.layers = []
walk(l, lyr);
}
}
});
return g;
}
let g = walk({title: 'map', visible: true, layers: []}, group);
function walk(g, group) {
group.getLayers().forEach(function (lyr, idx, a) {
const title = lyr.get('title');
if (title) {
const l = { title: title, visible: lyr.getVisible() };
const keys = lyr.getKeys();
if (keys.includes('indeterminate'))
l.indeterminate = lyr.get('indeterminate');
if (keys.includes('fold')) l.fold = lyr.get('fold');
g.layers.push(l);
if (lyr.getLayers) {
l.layers = [];
walk(l, lyr);
}
}
});
return g;
}
let g = walk({ title: 'map', visible: true, layers: [] }, group);
return g;
}
/**
@ -69,9 +70,9 @@ function groupToJson(group) {
* shown by the LayerSwitcher
*/
function allLyrs(group) {
return flatten(group, function (lyr) {
return (lyr.getLayers) ? lyr.getLayers().getArray() : lyr;
});
return flatten(group, function (lyr) {
return lyr.getLayers ? lyr.getLayers().getArray() : lyr;
});
}
/**
@ -79,24 +80,24 @@ function allLyrs(group) {
* should show
*/
function shownLyrs(group) {
// Pass in the Array from the root LayerGroup as it doesn't have a
// title but we don't want to filter out all layers
lyrs = group.getLayers().getArray();
var flat = flatten(lyrs, function (lyr) {
// Return a Groups layer array only if the group has a title
// otherwise just return the group so that it's children will be
// skipped
return (lyr.getLayers && lyr.get('title')) ? lyr.getLayers().getArray() : lyr;
});
// Only return layers with a title
return _.filter(flat, lyrTitle);
// Pass in the Array from the root LayerGroup as it doesn't have a
// title but we don't want to filter out all layers
lyrs = group.getLayers().getArray();
var flat = flatten(lyrs, function (lyr) {
// Return a Groups layer array only if the group has a title
// otherwise just return the group so that it's children will be
// skipped
return lyr.getLayers && lyr.get('title') ? lyr.getLayers().getArray() : lyr;
});
// Only return layers with a title
return _.filter(flat, lyrTitle);
}
/**
* Returns the title of a given layer or null if lyr is falsey
*/
function lyrTitle(lyr) {
return (lyr) ? lyr.get('title') : null;
return lyr ? lyr.get('title') : null;
}
/**
@ -104,17 +105,21 @@ function lyrTitle(lyr) {
* to get an Array of the collections children.
*/
function flatten(srcCollection, getArray) {
getArray = getArray || function (item) {return item};
var src = getArray(srcCollection),
dest = [];
for (var i = 0, item; i < src.length; i++) {
item = src[i];
dest = dest.concat(item);
if (_.isArray(getArray(item))) {
dest = dest.concat(flatten(item, getArray));
}
getArray =
getArray ||
function (item) {
return item;
};
var src = getArray(srcCollection),
dest = [];
for (var i = 0, item; i < src.length; i++) {
item = src[i];
dest = dest.concat(item);
if (_.isArray(getArray(item))) {
dest = dest.concat(flatten(item, getArray));
}
return dest;
}
return dest;
}
// jQuery/ DOM utils
@ -123,25 +128,28 @@ function flatten(srcCollection, getArray) {
* Get the input associated with a layer by it's title
*/
function getElmByTitle(panel, name) {
return jQuery('label:contains("' + name + '")', panel).siblings('input').get(0);
return jQuery('label:contains("' + name + '")', panel)
.siblings('input')
.get(0);
}
/**
* Does jQuery selection `elms` contain an element with tagName `tag`
*/
function includesTag(elms, tag) {
return _.includes(elms.get().map(function (elm) {return elm.tagName}), tag);
return _.includes(
elms.get().map(function (elm) {
return elm.tagName;
}),
tag
);
}
function domToJson(elm) {
var state = jQuery('li', elm)
.map(function() {
var input = jQuery(this)
.find('>input')
.get(0);
var label = jQuery(this)
.find('>label')
.get(0);
.map(function () {
var input = jQuery(this).find('>input').get(0);
var label = jQuery(this).find('>label').get(0);
var data = {
title: label.innerText,
className: this.className
@ -163,17 +171,18 @@ function domToJson(elm) {
* Produce a unified diff of two objects.
*/
function diff(obj1, obj2) {
return difflib.unifiedDiff(
JSON.stringify(obj1, null, 2).split('\n'),
JSON.stringify(obj2, null, 2).split('\n')
).join('\n');
return difflib
.unifiedDiff(
JSON.stringify(obj1, null, 2).split('\n'),
JSON.stringify(obj2, null, 2).split('\n')
)
.join('\n');
}
/**
* Expect current to deep equal fixture, logs diff as JSON if they differ
*/
function expectEqual(current, fixture) {
log(diff(current, fixture));
expect(current).to.eql(fixture);
log(diff(current, fixture));
expect(current).to.eql(fixture);
}