From 839e1d1c65775fab0afc214881c645743cae3a7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 13 Aug 2022 16:08:02 +0200 Subject: [PATCH 1/6] Use non-symlinked ol.css for example-builder File watching does not seem to work with symlinks --- examples/webpack/config.mjs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/webpack/config.mjs b/examples/webpack/config.mjs index 45e67e9f04..83ed6c08b0 100644 --- a/examples/webpack/config.mjs +++ b/examples/webpack/config.mjs @@ -70,6 +70,10 @@ export default { new CopyPlugin({ patterns: [ {from: '../site/src/theme', to: 'theme'}, + { + from: path.join(baseDir, '..', '..', 'src', 'ol', 'ol.css'), + to: path.join(baseDir, '..', '..', 'theme', 'ol', 'ol.css'), + }, {from: 'data', to: 'data'}, {from: 'resources', to: 'resources'}, {from: 'index.html', to: 'index.html'}, From 259e3fe1c9d36229711ad1de8be14c7d80543599 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 13 Aug 2022 16:39:28 +0200 Subject: [PATCH 2/6] Fix ol.css for some examples - es2015-custom-element needs css variables declared in :host - external-map-map still does not work when editing in codesandbox, though that neither worked before. --- examples/es2015-custom-element.js | 2 +- examples/mobile-full-screen.html | 2 +- examples/resources/external-map-map.html | 2 +- site/src/download/index.hbs | 2 +- src/ol/ol.css | 3 ++- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/examples/es2015-custom-element.js b/examples/es2015-custom-element.js index 4a4dbd8901..5d3c38b854 100644 --- a/examples/es2015-custom-element.js +++ b/examples/es2015-custom-element.js @@ -9,7 +9,7 @@ class OLComponent extends HTMLElement { this.shadow = this.attachShadow({mode: 'open'}); const link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); - link.setAttribute('href', 'css/ol.css'); + link.setAttribute('href', 'theme/ol.css'); this.shadow.appendChild(link); const style = document.createElement('style'); style.innerText = ` diff --git a/examples/mobile-full-screen.html b/examples/mobile-full-screen.html index 32b73f4215..0a1bbfb922 100644 --- a/examples/mobile-full-screen.html +++ b/examples/mobile-full-screen.html @@ -13,7 +13,7 @@ cloak: Mobile full screen example - + - - - OpenLayers Examples @@ -103,5 +100,8 @@ + + + diff --git a/examples/index.js b/examples/index.js index 034fe3f182..20d8f3b72c 100644 --- a/examples/index.js +++ b/examples/index.js @@ -1,7 +1,9 @@ (function () { 'use strict'; /* global info, jugl */ - let template, target; + + const template = new jugl.Template('template'); + const target = document.getElementById('examples'); function listExamples(examples) { target.innerHTML = ''; @@ -82,14 +84,10 @@ listExamples(examples); } - window.addEventListener('load', function () { - template = new jugl.Template('template'); - target = document.getElementById('examples'); - const params = new URLSearchParams(window.location.search); - const text = params.get('q') || ''; - const input = document.getElementById('keywords'); - input.addEventListener('input', inputChange); - input.value = text; - filterList(text); - }); + const params = new URLSearchParams(window.location.search); + const text = params.get('q') || ''; + const input = document.getElementById('keywords'); + input.addEventListener('input', inputChange); + input.value = text; + filterList(text); })(); diff --git a/examples/mobile-full-screen.html b/examples/mobile-full-screen.html index 0a1bbfb922..1f8b288159 100644 --- a/examples/mobile-full-screen.html +++ b/examples/mobile-full-screen.html @@ -22,11 +22,11 @@ cloak: height: 100%; } -
- + + diff --git a/examples/templates/example.html b/examples/templates/example.html index e26a342510..76d3b4fffb 100644 --- a/examples/templates/example.html +++ b/examples/templates/example.html @@ -3,21 +3,17 @@ - - - - +{{#each css.local}} + +{{/each}} - - {{{ extraHead.local }}} - {{{ css.tag }}} {{ title }} @@ -134,9 +130,9 @@ <head> <meta charset="UTF-8"> <title>{{ title }}</title> - <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --> - <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>{{#if extraHead.remote}} -{{ indent extraHead.remote spaces=4 }}{{/if}} +{{#each css.remote}} + <link rel="stylesheet" href="{{ . }}"> +{{/each}} <link rel="stylesheet" href="node_modules/ol/ol.css"> <style> .map { @@ -146,7 +142,12 @@ {{#if css.source}}{{ indent css.source spaces=6 }}{{/if}} </style> </head> <body> -{{ indent contents spaces=4 }} <script type="module" src="main.js"></script> +{{ indent contents spaces=4 }} <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --> + <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script> +{{#each js.remote}} + <script src="{{ . }}"></script> +{{/each}} + <script type="module" src="main.js"></script> </body> </html> @@ -163,12 +164,17 @@ + - -{{#each js.scripts}} +{{#each js.local}} {{/each}} + + + + + + `); + data.js.local.push(resource); } - remoteResources.push(``); + data.js.remote.push(absoluteUrl); } else if (isCssRegEx.test(resource)) { if (!isTemplateCss.test(resource)) { - localResources.push(``); + data.css.local.push(resource); } - remoteResources.push( - `` - ); + data.css.remote.push(absoluteUrl); } else { throw new Error( `Invalid resource: '${resource}' is not .js or .css: ${data.filename}` ); } }); - data.extraHead = { - local: localResources.join('\n'), - remote: remoteResources.join('\n'), - }; + } + + data.js.local.push(`${this.common}.js`, jsName); + + // check for example css + const cssName = `${data.name}.css`; + const cssPath = path.join(data.dir, cssName); + try { + assets[cssName] = await fse.readFile(cssPath, readOptions); + data.css.local.push(cssName); + data.css.source = this.ensureNewLineAtEnd(assets[cssName]); + } catch (err) { + // pass, no css for this example } const templatePath = path.join(this.templates, data.layout);