From b6abe036ce2ed429f0748cc612399a7cbab2b533 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 18 Feb 2020 21:32:09 +0100 Subject: [PATCH 1/2] Make events work in shadow dom --- src/ol/PluggableMap.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index 75c1f4a7be..eb6c7646e4 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -934,7 +934,7 @@ class PluggableMap extends BaseObject { } const target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target); if (!mapBrowserEvent.dragging) { - if (this.overlayContainerStopEvent_.contains(target) || !document.body.contains(target)) { + if (this.overlayContainerStopEvent_.contains(target) || !(document.body.contains(target) || this.viewport_.getRootNode && this.viewport_.getRootNode().contains(target))) { // Abort if the event target is a child of the container that doesn't allow // event propagation or is no longer in the page. It's possible for the target to no longer // be in the page if it has been removed in an event listener, this might happen in a Control From 7fee85734a7d41b8335818ce93adf9be19e3aea2 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Tue, 18 Feb 2020 21:32:31 +0100 Subject: [PATCH 2/2] Add custom element example --- examples/es2015-custom-element.html | 9 ++++++ examples/es2015-custom-element.js | 43 +++++++++++++++++++++++++++++ examples/templates/readme.md | 16 +---------- examples/webpack/config.js | 2 +- 4 files changed, 54 insertions(+), 16 deletions(-) create mode 100644 examples/es2015-custom-element.html create mode 100644 examples/es2015-custom-element.js diff --git a/examples/es2015-custom-element.html b/examples/es2015-custom-element.html new file mode 100644 index 0000000000..a9d76bc683 --- /dev/null +++ b/examples/es2015-custom-element.html @@ -0,0 +1,9 @@ +--- +layout: example.html +title: Custom map element +shortdesc: Example of a custom element with a map. +docs: > + The example creates and registers a custom element, `ol-map`, which contains a simple map. **Note:** Only works in browsers that supports `ShadowRoot`. +tags: "es2015, web-component, custom-element, shadow-dom" +--- + diff --git a/examples/es2015-custom-element.js b/examples/es2015-custom-element.js new file mode 100644 index 0000000000..ff632b2b2e --- /dev/null +++ b/examples/es2015-custom-element.js @@ -0,0 +1,43 @@ +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import OSM from '../src/ol/source/OSM.js'; + +class OLComponent extends HTMLElement { + + constructor() { + super(); + this.shadow = this.attachShadow({mode: 'open'}); + const link = document.createElement('link'); + link.setAttribute('rel', 'stylesheet'); + link.setAttribute('href', 'css/ol.css'); + this.shadow.appendChild(link); + const style = document.createElement('style'); + style.innerText = ` + :host { + display: block; + } + `; + this.shadow.appendChild(style); + const div = document.createElement('div'); + div.style.width = '100%'; + div.style.height = '100%'; + this.shadow.appendChild(div); + + this.map = new Map({ + target: div, + layers: [ + new TileLayer({ + source: new OSM() + }) + ], + view: new View({ + center: [0, 0], + zoom: 2 + }) + }); + + } +} + +customElements.define('ol-map', OLComponent); diff --git a/examples/templates/readme.md b/examples/templates/readme.md index 8159182b08..fec59881a8 100644 --- a/examples/templates/readme.md +++ b/examples/templates/readme.md @@ -1,19 +1,5 @@ This folder contains example templates. These templates are used to build the examples in the `examples/` folder. The resulting examples are written to the `build/examples` folder. -Although the main purpose of these examples is to demonstrate how to use the API, they also serve other purposes in the development cycle, and so are not exactly as they would be in normal application code: - - * every time the library changes, they are compiled together with the library as a basic check that they remain in sync with the library - - * they use a special loader script to enable defining at run time which build mode (raw/debug/advanced) to use - -To enable this, examples have the following, not needed in application code: - - * each html file loads `loader.js`; application code would not need this, but would instead load the appropriate library build file, either a hosted version or a custom build - - * each js file starts with `goog.require` functions, used by the compiler; application code would only have these if the code is to be compiled together with the library and/or Closure library - - * some js files use type definitions (comments with @type tags); these are also used by the compiler, and are only needed if the code is to be compiled together with the library - - * html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these +The examples are transpiled to es5. If the name of an example starts with `es2015-`, transpilation will be bypassed. This allows for showing es2015+ features in examples. At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application. diff --git a/examples/webpack/config.js b/examples/webpack/config.js index 6121b4b66f..5ff92a550d 100644 --- a/examples/webpack/config.js +++ b/examples/webpack/config.js @@ -22,7 +22,7 @@ module.exports = { stats: 'minimal', module: { rules: [{ - test: /\.js$/, + test: /^((?!es2015-)[\s\S])*\.js$/, use: { loader: 'buble-loader' },