From d65fb01bb2fbb6f8b155e29c613aa3e4a1279e7f Mon Sep 17 00:00:00 2001 From: Firstname Lastname Date: Mon, 24 Sep 2018 22:40:17 +0200 Subject: [PATCH 01/12] First (failed) round of ol5-ying the sidebar --- .gitignore | 5 +- examples/ol5.html | 83 +++++++++++++++++++++++++++++ examples/ol5.js | 42 +++++++++++++++ js/ol5-sidebar.js | 130 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 8 ++- 5 files changed, 266 insertions(+), 2 deletions(-) create mode 100644 examples/ol5.html create mode 100644 examples/ol5.js create mode 100644 js/ol5-sidebar.js diff --git a/.gitignore b/.gitignore index 4375ad4e..ccb1d4a8 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,7 @@ npm-debug.log node_modules dist -build \ No newline at end of file +build + +.cache +package-lock.json diff --git a/examples/ol5.html b/examples/ol5.html new file mode 100644 index 00000000..f812ea44 --- /dev/null +++ b/examples/ol5.html @@ -0,0 +1,83 @@ + + + + sidebar-v2 example + + + + + + + + + + + + + Fork me on GitHub + + + + diff --git a/examples/ol5.js b/examples/ol5.js new file mode 100644 index 00000000..bfbf4222 --- /dev/null +++ b/examples/ol5.js @@ -0,0 +1,42 @@ +// CSS imports +import 'ol/ol.css'; + +// JS imports +import Map from 'ol/Map'; +import View from 'ol/View'; +import LayerTile from 'ol/layer/Tile'; +import SourceOSM from 'ol/source/OSM'; +import { transform } from 'ol/proj.js'; +import { inherits } from 'ol/util.js'; +import Control from 'ol/control/Control'; +import { defaults as defaultControls } from 'ol/control.js'; + +import { Sidebar } from '../js/ol5-sidebar'; + +/** + * Define a namespace for the application. + */ +window.app = {}; +var app = window.app; + +inherits(app.Sidebar, Control); + +var map = new Map({ + controls: defaultControls({ + attributionOptions: { + collapsible: false + } + }).extend([ + new app.Sidebar({ element: 'sidebar', position: 'left' }) + ]), + layers: [ + new TileLayer({ + source: new OSM() + }) + ], + target: 'map', + view: new View({ + center: transform([7, 51.2], 'EPSG:4326', 'EPSG:3857'), + zoom: 4, + }) +}); diff --git a/js/ol5-sidebar.js b/js/ol5-sidebar.js new file mode 100644 index 00000000..069f4062 --- /dev/null +++ b/js/ol5-sidebar.js @@ -0,0 +1,130 @@ +// CSS imports +import 'ol/ol.css'; +import '../css/ol3-sidebar.css'; + +/** +* Define a namespace for the application. +*/ + +export default function Sidebar(settings) { + + var defaults = { + element: null, + position: 'left' + }, i, child; + + this._options = Object.assign({}, defaults, settings); + + Control.call(this, { + element: document.getElementById(this._options.element), + target: this._options.target + }); + + // Attach .sidebar-left/right class + this.element.classList.add('sidebar-' + this._options.position); + + // Find sidebar > div.sidebar-content + for (i = this.element.children.length - 1; i >= 0; i--) { + child = this.element.children[i]; + if (child.tagName === 'DIV' && + child.classList.contains('sidebar-content')) { + this._container = child; + } + } + + // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li + this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); + for (i = this._tabitems.length - 1; i >= 0; i--) { + this._tabitems[i]._sidebar = this; + } + + // Find sidebar > div.sidebar-content > div.sidebar-pane + this._panes = []; + this._closeButtons = []; + for (i = this._container.children.length - 1; i >= 0; i--) { + child = this._container.children[i]; + if (child.tagName == 'DIV' && + child.classList.contains('sidebar-pane')) { + this._panes.push(child); + + var closeButtons = child.querySelectorAll('.sidebar-close'); + for (var j = 0, len = closeButtons.length; j < len; j++) { + this._closeButtons.push(closeButtons[j]); + } + } + } +}; + +Sidebar.prototype.setMap = function(map) { + var i, child; + + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + var sub = child.querySelector('a'); + if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { + sub.onclick = this._onClick.bind(child); + } + } + + for (i = this._closeButtons.length - 1; i >= 0; i--) { + child = this._closeButtons[i]; + child.onclick = this._onCloseClick.bind(this); + } +}; + +Sidebar.prototype.open = function(id) { + var i, child; + + // hide old active contents and show new content + for (i = this._panes.length - 1; i >= 0; i--) { + child = this._panes[i]; + if (child.id == id) + child.classList.add('active'); + else if (child.classList.contains('active')) + child.classList.remove('active'); + } + + // remove old active highlights and set new highlight + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + if (child.querySelector('a').hash == '#' + id) + child.classList.add('active'); + else if (child.classList.contains('active')) + child.classList.remove('active'); + } + + // open sidebar (if necessary) + if (this.element.classList.contains('collapsed')) { + this.element.classList.remove('collapsed'); + } + + return this; +}; + +Sidebar.prototype.close = function() { + // remove old active highlights + for (var i = this._tabitems.length - 1; i >= 0; i--) { + var child = this._tabitems[i]; + if (child.classList.contains('active')) + child.classList.remove('active'); + } + + // close sidebar + if (!this.element.classList.contains('collapsed')) { + this.element.classList.add('collapsed'); + } + + return this; +}; + +Sidebar.prototype._onClick = function() { + if (this.classList.contains('active')) { + this._sidebar.close(); + } else if (!this.classList.contains('disabled')) { + this._sidebar.open(this.querySelector('a').hash.slice(1)); + } +}; + +Sidebar.prototype._onCloseClick = function() { + this.close(); +}; diff --git a/package.json b/package.json index 46fab333..6690fb6c 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,11 @@ "type": "git", "url": "https://github.com/turbo87/sidebar-v2.git" }, + "main": "./examples/ol5.js", "scripts": { - "test": "gulp lint" + "test": "gulp lint", + "start": "parcel ./examples/ol5.html", + "build": "parcel build --public-url ./ ./examples/ol5.html" }, "devDependencies": { "gulp": "~3.9.1", @@ -36,5 +39,8 @@ "gulp-uglify": "~3.0.0", "gulp-zip": "~4.0.0", "jshint": "^2.9.5" + }, + "dependencies": { + "ol": "^5.2.0" } } From 30f850fa76226d96a33c44e20620acc7d0e4dd76 Mon Sep 17 00:00:00 2001 From: Firstname Lastname Date: Tue, 25 Sep 2018 00:07:55 +0200 Subject: [PATCH 02/12] first (nasty) working example --- examples/ol5.js | 131 ++++++++++++++++++++++++++++++++++++++++++++-- js/ol5-sidebar.js | 8 +-- 2 files changed, 131 insertions(+), 8 deletions(-) diff --git a/examples/ol5.js b/examples/ol5.js index bfbf4222..04f8e06c 100644 --- a/examples/ol5.js +++ b/examples/ol5.js @@ -1,5 +1,6 @@ // CSS imports import 'ol/ol.css'; +import '../css/ol3-sidebar.css'; // JS imports import Map from 'ol/Map'; @@ -7,11 +8,9 @@ import View from 'ol/View'; import LayerTile from 'ol/layer/Tile'; import SourceOSM from 'ol/source/OSM'; import { transform } from 'ol/proj.js'; +import { defaults as defaultControls } from 'ol/control.js'; import { inherits } from 'ol/util.js'; import Control from 'ol/control/Control'; -import { defaults as defaultControls } from 'ol/control.js'; - -import { Sidebar } from '../js/ol5-sidebar'; /** * Define a namespace for the application. @@ -19,8 +18,130 @@ import { Sidebar } from '../js/ol5-sidebar'; window.app = {}; var app = window.app; +app.Sidebar = function(settings) { + var defaults = { + element: null, + position: 'left' + }, i, child; + + this._options = Object.assign({}, defaults, settings); + + Control.call(this, { + element: document.getElementById(this._options.element), + target: this._options.target + }); + + // Attach .sidebar-left/right class + this.element.classList.add('sidebar-' + this._options.position); + + // Find sidebar > div.sidebar-content + for (i = this.element.children.length - 1; i >= 0; i--) { + child = this.element.children[i]; + if (child.tagName === 'DIV' && + child.classList.contains('sidebar-content')) { + this._container = child; + } + } + + // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li + this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); + for (i = this._tabitems.length - 1; i >= 0; i--) { + this._tabitems[i]._sidebar = this; + } + + // Find sidebar > div.sidebar-content > div.sidebar-pane + this._panes = []; + this._closeButtons = []; + for (i = this._container.children.length - 1; i >= 0; i--) { + child = this._container.children[i]; + if (child.tagName == 'DIV' && + child.classList.contains('sidebar-pane')) { + this._panes.push(child); + + var closeButtons = child.querySelectorAll('.sidebar-close'); + for (var j = 0, len = closeButtons.length; j < len; j++) { + this._closeButtons.push(closeButtons[j]); + } + } + } +}; + inherits(app.Sidebar, Control); +app.Sidebar.prototype.setMap = function(map) { + var i, child; + + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + var sub = child.querySelector('a'); + if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { + sub.onclick = this._onClick.bind(child); + } + } + + for (i = this._closeButtons.length - 1; i >= 0; i--) { + child = this._closeButtons[i]; + child.onclick = this._onCloseClick.bind(this); + } +}; + +app.Sidebar.prototype.open = function(id) { + var i, child; + + // hide old active contents and show new content + for (i = this._panes.length - 1; i >= 0; i--) { + child = this._panes[i]; + if (child.id == id) + child.classList.add('active'); + else if (child.classList.contains('active')) + child.classList.remove('active'); + } + + // remove old active highlights and set new highlight + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + if (child.querySelector('a').hash == '#' + id) + child.classList.add('active'); + else if (child.classList.contains('active')) + child.classList.remove('active'); + } + + // open sidebar (if necessary) + if (this.element.classList.contains('collapsed')) { + this.element.classList.remove('collapsed'); + } + + return this; +}; + +app.Sidebar.prototype.close = function() { + // remove old active highlights + for (var i = this._tabitems.length - 1; i >= 0; i--) { + var child = this._tabitems[i]; + if (child.classList.contains('active')) + child.classList.remove('active'); + } + + // close sidebar + if (!this.element.classList.contains('collapsed')) { + this.element.classList.add('collapsed'); + } + + return this; +}; + +app.Sidebar.prototype._onClick = function() { + if (this.classList.contains('active')) { + this._sidebar.close(); + } else if (!this.classList.contains('disabled')) { + this._sidebar.open(this.querySelector('a').hash.slice(1)); + } +}; + +app.Sidebar.prototype._onCloseClick = function() { + this.close(); +}; + var map = new Map({ controls: defaultControls({ attributionOptions: { @@ -30,8 +151,8 @@ var map = new Map({ new app.Sidebar({ element: 'sidebar', position: 'left' }) ]), layers: [ - new TileLayer({ - source: new OSM() + new LayerTile({ + source: new SourceOSM() }) ], target: 'map', diff --git a/js/ol5-sidebar.js b/js/ol5-sidebar.js index 069f4062..0fda0ff9 100644 --- a/js/ol5-sidebar.js +++ b/js/ol5-sidebar.js @@ -2,9 +2,9 @@ import 'ol/ol.css'; import '../css/ol3-sidebar.css'; -/** -* Define a namespace for the application. -*/ +// JS imports +import { inherits } from 'ol/util.js'; +import Control from 'ol/control/Control'; export default function Sidebar(settings) { @@ -55,6 +55,8 @@ export default function Sidebar(settings) { } }; +inherits(Sidebar, Control); + Sidebar.prototype.setMap = function(map) { var i, child; From 22f209b426e3c0b1085417977ed210e60fc9f9e5 Mon Sep 17 00:00:00 2001 From: Firstname Lastname Date: Wed, 26 Sep 2018 00:25:29 +0200 Subject: [PATCH 03/12] major reworking. Need to fix i, child lacking in defaults --- examples/ol5.html | 2 + examples/ol5.js | 144 +----------------------------- js/ol5-sidebar.js | 219 +++++++++++++++++++++++----------------------- package.json | 3 +- 4 files changed, 119 insertions(+), 249 deletions(-) diff --git a/examples/ol5.html b/examples/ol5.html index f812ea44..9e6c30d2 100644 --- a/examples/ol5.html +++ b/examples/ol5.html @@ -78,6 +78,8 @@

SettingsFork me on GitHub + + diff --git a/examples/ol5.js b/examples/ol5.js index 04f8e06c..dce628ce 100644 --- a/examples/ol5.js +++ b/examples/ol5.js @@ -8,148 +8,8 @@ import View from 'ol/View'; import LayerTile from 'ol/layer/Tile'; import SourceOSM from 'ol/source/OSM'; import { transform } from 'ol/proj.js'; -import { defaults as defaultControls } from 'ol/control.js'; -import { inherits } from 'ol/util.js'; -import Control from 'ol/control/Control'; - -/** - * Define a namespace for the application. - */ -window.app = {}; -var app = window.app; - -app.Sidebar = function(settings) { - var defaults = { - element: null, - position: 'left' - }, i, child; - - this._options = Object.assign({}, defaults, settings); - - Control.call(this, { - element: document.getElementById(this._options.element), - target: this._options.target - }); - - // Attach .sidebar-left/right class - this.element.classList.add('sidebar-' + this._options.position); - - // Find sidebar > div.sidebar-content - for (i = this.element.children.length - 1; i >= 0; i--) { - child = this.element.children[i]; - if (child.tagName === 'DIV' && - child.classList.contains('sidebar-content')) { - this._container = child; - } - } - - // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li - this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); - for (i = this._tabitems.length - 1; i >= 0; i--) { - this._tabitems[i]._sidebar = this; - } - - // Find sidebar > div.sidebar-content > div.sidebar-pane - this._panes = []; - this._closeButtons = []; - for (i = this._container.children.length - 1; i >= 0; i--) { - child = this._container.children[i]; - if (child.tagName == 'DIV' && - child.classList.contains('sidebar-pane')) { - this._panes.push(child); - - var closeButtons = child.querySelectorAll('.sidebar-close'); - for (var j = 0, len = closeButtons.length; j < len; j++) { - this._closeButtons.push(closeButtons[j]); - } - } - } -}; - -inherits(app.Sidebar, Control); - -app.Sidebar.prototype.setMap = function(map) { - var i, child; - - for (i = this._tabitems.length - 1; i >= 0; i--) { - child = this._tabitems[i]; - var sub = child.querySelector('a'); - if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { - sub.onclick = this._onClick.bind(child); - } - } - - for (i = this._closeButtons.length - 1; i >= 0; i--) { - child = this._closeButtons[i]; - child.onclick = this._onCloseClick.bind(this); - } -}; - -app.Sidebar.prototype.open = function(id) { - var i, child; - - // hide old active contents and show new content - for (i = this._panes.length - 1; i >= 0; i--) { - child = this._panes[i]; - if (child.id == id) - child.classList.add('active'); - else if (child.classList.contains('active')) - child.classList.remove('active'); - } - - // remove old active highlights and set new highlight - for (i = this._tabitems.length - 1; i >= 0; i--) { - child = this._tabitems[i]; - if (child.querySelector('a').hash == '#' + id) - child.classList.add('active'); - else if (child.classList.contains('active')) - child.classList.remove('active'); - } - - // open sidebar (if necessary) - if (this.element.classList.contains('collapsed')) { - this.element.classList.remove('collapsed'); - } - - return this; -}; - -app.Sidebar.prototype.close = function() { - // remove old active highlights - for (var i = this._tabitems.length - 1; i >= 0; i--) { - var child = this._tabitems[i]; - if (child.classList.contains('active')) - child.classList.remove('active'); - } - - // close sidebar - if (!this.element.classList.contains('collapsed')) { - this.element.classList.add('collapsed'); - } - - return this; -}; - -app.Sidebar.prototype._onClick = function() { - if (this.classList.contains('active')) { - this._sidebar.close(); - } else if (!this.classList.contains('disabled')) { - this._sidebar.open(this.querySelector('a').hash.slice(1)); - } -}; - -app.Sidebar.prototype._onCloseClick = function() { - this.close(); -}; var map = new Map({ - controls: defaultControls({ - attributionOptions: { - collapsible: false - } - }).extend([ - new app.Sidebar({ element: 'sidebar', position: 'left' }) - ]), layers: [ new LayerTile({ source: new SourceOSM() @@ -161,3 +21,7 @@ var map = new Map({ zoom: 4, }) }); + +var sidebar = new ol.control.Sidebar({ element: 'sidebar', position: 'left' }); + +map.addControl(sidebar); diff --git a/js/ol5-sidebar.js b/js/ol5-sidebar.js index 0fda0ff9..abfb2d07 100644 --- a/js/ol5-sidebar.js +++ b/js/ol5-sidebar.js @@ -1,132 +1,135 @@ -// CSS imports -import 'ol/ol.css'; -import '../css/ol3-sidebar.css'; - // JS imports -import { inherits } from 'ol/util.js'; import Control from 'ol/control/Control'; -export default function Sidebar(settings) { +export default class Sidebar extends Control { - var defaults = { - element: null, - position: 'left' - }, i, child; + constructor(opt_options) { + var options = opt_options || {}; - this._options = Object.assign({}, defaults, settings); + var position = options.position ? + options.position : 'left'; - Control.call(this, { - element: document.getElementById(this._options.element), - target: this._options.target - }); + var element = options.element ? + options.element : null; - // Attach .sidebar-left/right class - this.element.classList.add('sidebar-' + this._options.position); + super({ element: document.getElementById(options.element), target: options.target}); - // Find sidebar > div.sidebar-content - for (i = this.element.children.length - 1; i >= 0; i--) { - child = this.element.children[i]; - if (child.tagName === 'DIV' && - child.classList.contains('sidebar-content')) { - this._container = child; - } - } + // Attach .sidebar-left/right class + element.classList.add('sidebar-' + position); - // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li - this._tabitems = this.element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); - for (i = this._tabitems.length - 1; i >= 0; i--) { - this._tabitems[i]._sidebar = this; - } - - // Find sidebar > div.sidebar-content > div.sidebar-pane - this._panes = []; - this._closeButtons = []; - for (i = this._container.children.length - 1; i >= 0; i--) { - child = this._container.children[i]; - if (child.tagName == 'DIV' && - child.classList.contains('sidebar-pane')) { - this._panes.push(child); - - var closeButtons = child.querySelectorAll('.sidebar-close'); - for (var j = 0, len = closeButtons.length; j < len; j++) { - this._closeButtons.push(closeButtons[j]); + // Find sidebar > div.sidebar-content + for (i = element.children.length - 1; i >= 0; i--) { + child = element.children[i]; + if (child.tagName === 'DIV' && + child.classList.contains('sidebar-content')) { + this._container = child; } } - } -}; - -inherits(Sidebar, Control); -Sidebar.prototype.setMap = function(map) { - var i, child; + // Find sidebar ul.sidebar-tabs > li, sidebar .sidebar-tabs > ul > li + this._tabitems = element.querySelectorAll('ul.sidebar-tabs > li, .sidebar-tabs > ul > li'); + for (i = this._tabitems.length - 1; i >= 0; i--) { + this._tabitems[i]._sidebar = this; + } - for (i = this._tabitems.length - 1; i >= 0; i--) { - child = this._tabitems[i]; - var sub = child.querySelector('a'); - if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { - sub.onclick = this._onClick.bind(child); + // Find sidebar > div.sidebar-content > div.sidebar-pane + this._panes = []; + this._closeButtons = []; + for (i = this._container.children.length - 1; i >= 0; i--) { + child = this._container.children[i]; + if (child.tagName == 'DIV' && + child.classList.contains('sidebar-pane')) { + this._panes.push(child); + + var closeButtons = child.querySelectorAll('.sidebar-close'); + for (var j = 0, len = closeButtons.length; j < len; j++) { + this._closeButtons.push(closeButtons[j]); + } + } } } - for (i = this._closeButtons.length - 1; i >= 0; i--) { - child = this._closeButtons[i]; - child.onclick = this._onCloseClick.bind(this); - } -}; - -Sidebar.prototype.open = function(id) { - var i, child; - - // hide old active contents and show new content - for (i = this._panes.length - 1; i >= 0; i--) { - child = this._panes[i]; - if (child.id == id) - child.classList.add('active'); - else if (child.classList.contains('active')) - child.classList.remove('active'); - } + /** + * Set the map instance the control is associated with. + * @param {ol.Map} map The map instance. + */ + setMap(map) { + var i, child; + + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + var sub = child.querySelector('a'); + if (sub.hasAttribute('href') && sub.getAttribute('href').slice(0,1) == '#') { + sub.onclick = this._onClick.bind(child); + } + } - // remove old active highlights and set new highlight - for (i = this._tabitems.length - 1; i >= 0; i--) { - child = this._tabitems[i]; - if (child.querySelector('a').hash == '#' + id) - child.classList.add('active'); - else if (child.classList.contains('active')) - child.classList.remove('active'); - } + for (i = this._closeButtons.length - 1; i >= 0; i--) { + child = this._closeButtons[i]; + child.onclick = this._onCloseClick.bind(this); + } + }; + + open(id) { + var i, child; + + // hide old active contents and show new content + for (i = this._panes.length - 1; i >= 0; i--) { + child = this._panes[i]; + if (child.id == id) + child.classList.add('active'); + else if (child.classList.contains('active')) + child.classList.remove('active'); + } - // open sidebar (if necessary) - if (this.element.classList.contains('collapsed')) { - this.element.classList.remove('collapsed'); - } + // remove old active highlights and set new highlight + for (i = this._tabitems.length - 1; i >= 0; i--) { + child = this._tabitems[i]; + if (child.querySelector('a').hash == '#' + id) + child.classList.add('active'); + else if (child.classList.contains('active')) + child.classList.remove('active'); + } - return this; -}; + // open sidebar (if necessary) + if (this.element.classList.contains('collapsed')) { + this.element.classList.remove('collapsed'); + } -Sidebar.prototype.close = function() { - // remove old active highlights - for (var i = this._tabitems.length - 1; i >= 0; i--) { - var child = this._tabitems[i]; - if (child.classList.contains('active')) - child.classList.remove('active'); - } + return this; + }; - // close sidebar - if (!this.element.classList.contains('collapsed')) { - this.element.classList.add('collapsed'); - } + close() { + // remove old active highlights + for (var i = this._tabitems.length - 1; i >= 0; i--) { + var child = this._tabitems[i]; + if (child.classList.contains('active')) + child.classList.remove('active'); + } - return this; -}; + // close sidebar + if (!this.element.classList.contains('collapsed')) { + this.element.classList.add('collapsed'); + } -Sidebar.prototype._onClick = function() { - if (this.classList.contains('active')) { - this._sidebar.close(); - } else if (!this.classList.contains('disabled')) { - this._sidebar.open(this.querySelector('a').hash.slice(1)); - } -}; + return this; + }; -Sidebar.prototype._onCloseClick = function() { - this.close(); -}; + _onClick() { + if (this.classList.contains('active')) { + this._sidebar.close(); + } else if (!this.classList.contains('disabled')) { + this._sidebar.open(this.querySelector('a').hash.slice(1)); + } + }; + + _onCloseClick() { + this.close(); + }; +} + +// Expose Sidebar as ol.control.Sidebar if using a full build of +// OpenLayers +if (window.ol && window.ol.control) { + window.ol.control.Sidebar = Sidebar; +} diff --git a/package.json b/package.json index 6690fb6c..fab38883 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,10 @@ "scripts": { "test": "gulp lint", "start": "parcel ./examples/ol5.html", - "build": "parcel build --public-url ./ ./examples/ol5.html" + "build": "parcel build --public-url ./ ./js/ol5-sidebar.js" }, "devDependencies": { + "cssnano": "^4.1.3", "gulp": "~3.9.1", "gulp-clean": "~0.3.1", "gulp-concat": "~2.6.1", From ca3b0c95d302729dfff790388a733189c878f3a7 Mon Sep 17 00:00:00 2001 From: Umberto Minora Date: Wed, 26 Sep 2018 09:27:12 +0200 Subject: [PATCH 04/12] Slight adjustments to method calls and CSS import in HTML --- examples/ol5.html | 3 +++ examples/ol5.js | 21 +++++---------------- js/ol5-sidebar.js | 4 ++-- 3 files changed, 10 insertions(+), 18 deletions(-) diff --git a/examples/ol5.html b/examples/ol5.html index 9e6c30d2..f24783bf 100644 --- a/examples/ol5.html +++ b/examples/ol5.html @@ -6,6 +6,9 @@ + + +