From 326af61836c970b60498fccb5042e636e9c9b2d1 Mon Sep 17 00:00:00 2001 From: Joshua Ramon Enslin Date: Mon, 7 Nov 2022 03:55:07 +0100 Subject: [PATCH] Set serviceWorker to allow offline usage Close #15, close #14 --- public/assets/css/csvxml.css | 11 ++- public/assets/css/csvxml.min.css | 6 +- public/assets/img/mdlogo-csvxml-1028px.png | Bin 0 -> 9450 bytes public/assets/img/mdlogo-csvxml-192px.png | Bin 0 -> 2093 bytes public/assets/js/csvxmlV2.js | 17 +++- public/assets/js/csvxmlV2.min.js | 13 +-- public/index.htm | 22 ++++-- public/manifest.json | 19 +++++ public/sw.js | 88 +++++++++++++++++++++ scripts/compile.php | 25 +++--- 10 files changed, 172 insertions(+), 29 deletions(-) create mode 100644 public/assets/img/mdlogo-csvxml-1028px.png create mode 100644 public/assets/img/mdlogo-csvxml-192px.png create mode 100644 public/manifest.json create mode 100644 public/sw.js diff --git a/public/assets/css/csvxml.css b/public/assets/css/csvxml.css index d32ffb1..4b44841 100644 --- a/public/assets/css/csvxml.css +++ b/public/assets/css/csvxml.css @@ -36,7 +36,7 @@ body { margin: 2em; background: var(--color-bg-normal); a { text-decoration: none; color: inherit; } -h1 { display: block; max-width: 600px; margin: 0 auto 1.5em auto; } +h1 { display: block; max-width: 600px; margin: 0 auto 1.5em auto; line-height: 1.2em; } h1 > * { display: inline-block; vertical-align: middle; color: var(--color-fg-less); } h1 img { height: 2em; margin-right: .5em; border-radius: .1em; opacity: .7; transition: opacity .4s; } h1 img:hover { opacity: 1; } @@ -106,13 +106,13 @@ ul.fieldList > li:hover { background: var(--color-bg-normal); border-color: var( ul.fieldList > li.requiredField:before { display: inline-block; content: " \002612 "; margin-right: .5em; } ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); background: var(--color-accent-hover); box-shadow: 0 8px 6px -6px black; } -.options > a.buttonLike { display: inline-block; width: auto; +.options > .buttonLike { display: inline-block; width: auto; margin: .15em 0; padding: .4em .5em; text-transform: inherit; cursor: pointer; background: initial; border: 2px solid var(--color-borders); opacity: 1; transition: background .4s, opacity .4s; } -.options > a.buttonLike:hover { background: var(--color-borders); } +.options > .buttonLike:hover { background: var(--color-borders); } .actionList { margin: 1em 0 1em 1em; padding: .5em 0; } .actionList > li a { display: inline-block; padding: .3em; border-radius: .3em; transition: background .4s; } @@ -135,6 +135,11 @@ ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); back to { transform: rotate(360deg); } } +@media screen and (max-width: 75em) { + body { font-size: 1.08em; } + h1 img { display: none; } +} + /* ============= | Dark mode |============ */ diff --git a/public/assets/css/csvxml.min.css b/public/assets/css/csvxml.min.css index 2500e95..c0eb457 100644 --- a/public/assets/css/csvxml.min.css +++ b/public/assets/css/csvxml.min.css @@ -2,7 +2,7 @@ @font-face{font-family:sourceSansPro;src:local('Source-Sans-Pro'),local('Source Sans Pro'),url(../fonts/SourceSansPro-Regular.woff2)format('woff2'),url(../fonts/SourceSansPro-Regular.ttf)format('truetype');font-display:swap}*{box-sizing:border-box;z-index:1} body{margin:2em;background:var(--color-bg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em} a{text-decoration:none;color:inherit} -h1{display:block;max-width:600px;margin:0 auto 1.5em auto} +h1{display:block;max-width:600px;margin:0 auto 1.5em auto;line-height:1.2em} h1>*{display:inline-block;vertical-align:middle;color:var(--color-fg-less)} h1 img{height:2em;margin-right:.5em;border-radius:.1em;opacity:.7;transition:opacity.4s} h1 img:hover{opacity:1} @@ -27,9 +27,11 @@ ul.fieldList{display:block;margin:.5em 0;padding:0 0;list-style:none} ul.fieldList>li{display:inline-block;padding:.3em;margin:.1em;border:1px solid var(--color-borders);background:var(--color-bg-raised2);cursor:pointer;transition:background.4s,border.4s,box-shadow.4s} ul.fieldList>li:hover{background:var(--color-bg-normal);border-color:var(--color-fg-less)} ul.fieldList>li.requiredField:before{display:inline-block;content:" \002612 ";margin-right:.5em} -ul.fieldList>li.humanTLToggled{border-color:var(--color-accent-hover);background:var(--color-accent-hover);box-shadow:0 8px 6px-6px black}.options>a.buttonLike{display:inline-block;width:auto;margin:.15em 0;padding:.4em.5em;text-transform:inherit;cursor:pointer;background:initial;border:2px solid var(--color-borders);opacity:1;transition:background.4s,opacity.4s}.options>a.buttonLike:hover{background:var(--color-borders)}.actionList{margin:1em 0 1em 1em;padding:.5em 0}.actionList>li a{display:inline-block;padding:.3em;border-radius:.3em;transition:background.4s}.actionList>li a:hover{background:var(--color-accent-hover)}.loading:before,.loading:after{content:" ";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;width:64px;margin:0;padding:0;border-radius:50%;border:8px solid var(--color-accent-hover);border-color:var(--color-accent-hover)transparent transparent transparent;z-index:100;animation:rotating 1.2s cubic-bezier(0.5,0,0.5,1)infinite;animation-delay:-0.15s}.loading:after{animation-delay:-0.45s} +ul.fieldList>li.humanTLToggled{border-color:var(--color-accent-hover);background:var(--color-accent-hover);box-shadow:0 8px 6px-6px black}.options>.buttonLike{display:inline-block;width:auto;margin:.15em 0;padding:.4em.5em;text-transform:inherit;cursor:pointer;background:initial;border:2px solid var(--color-borders);opacity:1;transition:background.4s,opacity.4s}.options>.buttonLike:hover{background:var(--color-borders)}.actionList{margin:1em 0 1em 1em;padding:.5em 0}.actionList>li a{display:inline-block;padding:.3em;border-radius:.3em;transition:background.4s}.actionList>li a:hover{background:var(--color-accent-hover)}.loading:before,.loading:after{content:" ";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;width:64px;margin:0;padding:0;border-radius:50%;border:8px solid var(--color-accent-hover);border-color:var(--color-accent-hover)transparent transparent transparent;z-index:100;animation:rotating 1.2s cubic-bezier(0.5,0,0.5,1)infinite;animation-delay:-0.15s}.loading:after{animation-delay:-0.45s} @keyframes rotating{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} +@media screen and(max-width:75em){body{font-size:1.08em} +h1 img{display:none}} @media(prefers-color-scheme:dark){body{background:#263238;color:#ECEFF1} input,select,textarea{background:inherit;color:inherit;border:3px solid #37474F;transition:border.4s,box-shadow.4s} a.buttonLike:focus,.options>a.buttonLike:focus,button:focus,select:focus,textarea:focus,input:focus,textarea:active,input:active,a.buttonLike:hover,.options>a.buttonLike:hover,ul.fieldList>li:hover,button:hover,select:hover,textarea:hover,input:hover{background:inherit;border-color:#FFF;box-shadow:initial;border-radius:.2em} diff --git a/public/assets/img/mdlogo-csvxml-1028px.png b/public/assets/img/mdlogo-csvxml-1028px.png new file mode 100644 index 0000000000000000000000000000000000000000..51ef9938c817a9c5da213c7d01eca61ece20930a GIT binary patch literal 9450 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 - - + + - - CSVXML :: museum-digital + + + + + + + + + + + + - + - + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..a061633 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "csvxml :: museum-digital", + "short_name": "csvxml", + "start_url": "/", + "display": "standalone", + "background_color": "#F2F2F2", + "theme_color": "#aa4400", + "description": "Validate import CSV files for museum-digital.", + "icons": [{ + "src": "assets/img/mdlogo-csvxml-1028x.png", + "sizes": "1028x1028", + "type": "image/png" + }, { + "src": "assets/img/mdlogo-csvxml.svg", + "sizes": "48x48 72x72 96x96 128x128 256x256 512x512", + "type": "image/svg+xml", + "purpose": "any maskable" + }] +} diff --git a/public/sw.js b/public/sw.js new file mode 100644 index 0000000..4afe43e --- /dev/null +++ b/public/sw.js @@ -0,0 +1,88 @@ +const debug = false; +const CACHE_NAME = 'csvxml-cache-v1'; +const urlsToCache = [ + + '/index.htm', + '/assets/js/jszip/dist/jszip.min.js', + '/assets/js/csvxmlV2.min.js', + '/assets/css/csvxml.min.css', + + '/assets/fonts/SourceSansPro-Regular.woff2', + + '/json/fields.de.json', + '/json/fields.en.json', + '/json/fields.hu.json', + + '/json/tls.de.json', + '/json/tls.en.json', + '/json/tls.hu.json', + +]; + +self.addEventListener('install', function(event) { + // Perform install steps + event.waitUntil( + Promise.all([ + caches.open(CACHE_NAME) + .then(function(cache) { + if (debug === true) console.log('Opened cache'); + return cache.addAll(urlsToCache.map(url => new Request(url, {credentials: 'same-origin'}))); + }), + + ]) + ); +}); + +self.addEventListener('fetch', function(event) { + + if (event.request.url.startsWith(location.origin) === false) return; + + event.respondWith( + caches.match(event.request) + .then(function(response) { + + if (response) { + if (debug === true) console.log("Serving " + event.request.url + " from cache."); + return response; + } + + // IMPORTANT: Clone the request. A request is a stream and + // can only be consumed once. Since we are consuming this + // once by cache and once by the browser for fetch, we need + // to clone the response. + var fetchRequest = event.request.clone(); + + return fetch(fetchRequest).then( + function(response) { + // Check if we received a valid response + if(!response || response.status !== 200 || response.type !== 'basic') { + return response; + } + + var responseToCache = response.clone(); + + caches.open(CACHE_NAME) + .then(function(cache) { + if (debug === true) console.log("Added " + event.request.url + "to cache"); + cache.put(event.request, responseToCache); + }); + + return response; + } + ).catch( + () => { + console.log("Problem"); + if (event.request.url.indexOf("index.php?") == -1) return; + else { + console.log("Fixing"); + return caches.open(CACHE_NAME).then( + function(cache) { + // cache.keys().then(function(keys) { console.log(keys); }) + // return cache.match("index.php") + }); + } + } + ); + }) + ); +}); diff --git a/scripts/compile.php b/scripts/compile.php index ff33126..b509349 100644 --- a/scripts/compile.php +++ b/scripts/compile.php @@ -70,25 +70,30 @@ function generateAppShell():string { - - + + - - CSVXML :: museum-digital + + + + + + + + + + + + -

- - museum-digital:csvxml -

- - + ';