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/index.html b/examples/index.html index 4cc0670750..c42b21aa48 100644 --- a/examples/index.html +++ b/examples/index.html @@ -33,9 +33,6 @@ background-color: #f8f9fa !important; } - - - OpenLayers Examples @@ -103,5 +100,8 @@ + + + diff --git a/examples/index.js b/examples/index.js index fcee11c512..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,29 +84,10 @@ listExamples(examples); } - function parseParams() { - const params = {}; - const list = window.location.search - .substring(1) - .replace(/\+/g, '%20') - .split('&'); - for (let i = 0; i < list.length; ++i) { - const pair = list[i].split('='); - if (pair.length === 2) { - params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]); - } - } - return params; - } - - window.addEventListener('load', function () { - template = new jugl.Template('template'); - target = document.getElementById('examples'); - const params = parseParams(); - const text = params['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 32b73f4215..1f8b288159 100644 --- a/examples/mobile-full-screen.html +++ b/examples/mobile-full-screen.html @@ -13,7 +13,7 @@ cloak: Mobile full screen example - + -
- + + diff --git a/examples/resources/common.js b/examples/resources/common.js index 89b34da150..7454fb34b3 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -1,4 +1,20 @@ (function() { + "use strict" + /* global LZString */ + + let lzStringPromise; + function loadLzString() { + if (!lzStringPromise) { + lzStringPromise = new Promise(function (resolve, reject) { + const script = document.createElement('script') + script.src = 'https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js'; + document.head.append(script); + script.addEventListener('load', resolve); + script.addEventListener('error', reject); + }); + } + return lzStringPromise; + } function compress(json) { return LZString.compressToBase64(JSON.stringify(json)) @@ -43,55 +59,35 @@ const pkgJson = document.getElementById('example-pkg-source').innerText; const unique = new Set(); - const localResources = (js.match(/'(\.\/)?data\/[^']*/g) || []) - .concat(js.match(/'(\.\/)?resources\/[^']*/g) || []) - .map( - function (f) { - return f.replace(/^'(\.\/)?/, ''); - } - ) - .filter( - function (f) { - return unique.has(f) ? false : (unique.add(f) || unique); - } - ); + const localResources = (js.match(/'(?:\.\/)?(?:data|resources)\/[^']*'/g) || []) + .map(function (f) { + return f.replace(/^'(?:\.\/)?|'$/g, ''); + }) + .filter(function (f) { + return unique.has(f) ? false : unique.add(f); + }); - const promises = localResources.map( - function (resource) { - return fetchResource(resource); - } - ); + const promises = localResources.map(function (resource) { + return fetchResource(resource); + }); + promises.push(loadLzString()); Promise.all(promises).then( function (results) { const files = { - 'index.html': { - content: html - }, - 'main.js': { - content: js - }, - 'package.json': { - content: pkgJson - }, - 'sandbox.config.json': { - content: '{"template": "parcel"}' - } + 'index.html': {content: html}, + 'main.js': {content: js}, + 'package.json': {content: pkgJson}, + 'sandbox.config.json': {content: '{"template": "parcel"}'} }; if (worker) { - files['worker.js'] = { - content: worker - } + files['worker.js'] = {content: worker} } - const data = { - files: files - }; - for (let i = 0; i < localResources.length; i++) { - data.files[localResources[i]] = results[i]; + files[localResources[i]] = results[i]; } - form.parameters.value = compress(data); + form.parameters.value = compress({files: files}); form.submit(); } ); diff --git a/examples/resources/external-map-map.html b/examples/resources/external-map-map.html index 0bc2512495..09d9f7f958 100644 --- a/examples/resources/external-map-map.html +++ b/examples/resources/external-map-map.html @@ -1,7 +1,7 @@ - +