From 3046f6194fbfe1178ab8f063dcf3692c3e35579d Mon Sep 17 00:00:00 2001 From: Patrizio Bekerle <patrizio.bekerle@tugraz.at> Date: Wed, 12 Aug 2020 12:59:27 +0200 Subject: [PATCH] Add more demo app scaffolding --- demo/assets/dbp-toolkit-demo.html.ejs | 143 ++++++++++++++++++++++++++ demo/src/toolkit-demo.js | 2 +- 2 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 demo/assets/dbp-toolkit-demo.html.ejs diff --git a/demo/assets/dbp-toolkit-demo.html.ejs b/demo/assets/dbp-toolkit-demo.html.ejs new file mode 100644 index 00000000..108c34ae --- /dev/null +++ b/demo/assets/dbp-toolkit-demo.html.ejs @@ -0,0 +1,143 @@ +<!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <!-- Favicons --> + <link rel="shortcut icon" type="image/x-icon" href="<%= getPrivateUrl('favicon.ico') %>"> + <link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('favicon.svg') %>" sizes="any"> + +<% if (environment === "local") { -%> + <!-- XXX: Disable adoptedStyleSheets so that lit-element doesn't use it and we can edit CSS in the Chrome dev tools --> + <script> + delete Document.prototype.adoptedStyleSheets; + </script> +<% } -%> + + <!-- PWA manfiest file --> + <link rel="manifest" href="<%= getUrl(name + '.manifest.json') %>"> + + <!-- Loading spinner --> + <script type="module"> + import {Spinner} from '<%= getPrivateUrl('spinner.js') %>'; + customElements.define('dbp-loading-spinner', Spinner); + </script> + + <!-- App bundles--> + <script type="module" src="<%= getUrl(name + '.js') %>"></script> + + <!-- Prevent Chrome/Edge from suggesting to translate the page --> + <meta name="google" content="notranslate"> + + <!-- Preload fonts --> + <link rel="preload" href="<%= getPrivateUrl('fonts/SourceSansPro-Light.otf.woff2') %>" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="<%= getPrivateUrl('fonts/SourceSansPro-Regular.otf.woff2') %>" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="<%= getPrivateUrl('fonts/SourceSansPro-Semibold.otf.woff2') %>" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="<%= getPrivateUrl('fonts/SourceSansPro-Bold.otf.woff2') %>" as="font" type="font/woff2" crossorigin> + + <!-- Matomo --> + <script type="text/javascript"> + var _paq = window._paq || []; + _paq.push(['setCustomVariable', 1, "GitCommit", "<%= buildInfo.info %>", "visit"]); + _paq.push(['enableHeartBeatTimer']); + _paq.push(['disableCookies']); + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + + (function() { + var u="https://analytics.tugraz.at/"; + _paq.push(['setTrackerUrl', u+'matomo.php']); + _paq.push(['setSiteId', '<%= matomoSiteId %>']); + var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; + g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); + })(); + + // track changed locations + window.addEventListener('locationchanged', function(e) { + _paq.push(['setReferrerUrl', e.detail.referrerUrl]); + _paq.push(['setCustomUrl', location.href]); + // _paq.push(['setDocumentTitle', '']); + _paq.push(['trackPageView']); + + // make Matomo aware of newly added content + var content = document.getElementById('content'); + _paq.push(['MediaAnalytics::scanForMedia', content]); + _paq.push(['FormAnalytics::scanForForms', content]); + _paq.push(['trackContentImpressionsWithinNode', content]); + }); + + // track errors + window.addEventListener('error', function(e) { + _paq.push(['trackEvent', 'Error', e.error.message + '\n' + e.error.stack]); + }); + </script> + <!-- End Matomo Code --> + + <!-- Font related CSS --> + <style> + body { + font-family: 'Source Sans Pro', 'Calibri', 'Arial', 'sans-serif'; + font-weight: 300; + margin: 0; + } + + @font-face { + font-family: 'Source Sans Pro'; + font-weight: 300; + src: url('<%= getPrivateUrl('fonts/SourceSansPro-Light.otf.woff2') %>') format('woff2'); + font-display: block; + } + + @font-face { + font-family: 'Source Sans Pro'; + font-weight: 400; + src: url('<%= getPrivateUrl('fonts/SourceSansPro-Regular.otf.woff2') %>') format('woff2'); + font-display: block; + } + + @font-face { + font-family: 'Source Sans Pro'; + font-weight: 600; + src: url('<%= getPrivateUrl('fonts/SourceSansPro-Semibold.otf.woff2') %>') format('woff2'); + font-display: block; + } + + @font-face { + font-family: 'Source Sans Pro'; + font-weight: 700; + src: url('<%= getPrivateUrl('fonts/SourceSansPro-Bold.otf.woff2') %>') format('woff2'); + font-display: block; + } + + /* TU-Graz style override */ + html { + --dbp-override-primary-bg-color: #245b78; + --dbp-override-primary-button-border: solid 1px #245b78; + --dbp-override-info-bg-color: #245b78; + --dbp-override-danger-bg-color: #e4154b; + --dbp-override-warning-bg-color: #ffe183; + --dbp-override-warning-text-color: black; + --dbp-override-success-bg-color: #259207; + } + </style> + + <!-- Preloading/Preconnecting --> + <link rel="preconnect" href="<%= entryPointURL %>"> + <link rel="preconnect" href="<%= keyCloakBaseURL %>"> +</head> + +<body> +<<%= name %> + lang="de" + src="<%= getUrl(name + '.topic.metadata.json') %>" + entry-point-url="<%= entryPointURL %>" + base-path="<%= getUrl('') %>" + keycloak-config='{"url": "<%= keyCloakBaseURL %>", "realm": "tugraz", "clientId": "<%= keyCloakClientId %>", "silentCheckSsoRedirectUri": "<%= getUrl('silent-check-sso.html') %>"}' +><dbp-loading-spinner></dbp-loading-spinner></<%= name %>> + +<!-- Error handling for too old browsers --> +<script src="<%= getPrivateUrl('browser-check.js') %>" defer></script> +<noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript> +</body> +</html> \ No newline at end of file diff --git a/demo/src/toolkit-demo.js b/demo/src/toolkit-demo.js index 47faec64..f9b88e27 100644 --- a/demo/src/toolkit-demo.js +++ b/demo/src/toolkit-demo.js @@ -1,4 +1,4 @@ import {AppShell} from 'dbp-app-shell'; import * as commonUtils from 'dbp-common/utils'; -commonUtils.defineCustomElement('dbp-signature', AppShell); \ No newline at end of file +commonUtils.defineCustomElement('dbp-toolkit-demo', AppShell); -- GitLab