From 74a8759e3bcf2902a88187ebee019bbf9c9c89ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Sat, 13 Aug 2022 16:27:43 +0200 Subject: [PATCH] Fix topolis example toastr did not work because jquery has to bo loaded before toastr. --- examples/index.html | 6 +-- examples/index.js | 20 +++++---- examples/mobile-full-screen.html | 4 +- examples/templates/example.html | 35 +++++++++------- examples/webpack/example-builder.js | 63 +++++++++++++++-------------- 5 files changed, 68 insertions(+), 60 deletions(-) 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 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);