Add refresh button and license statement

Close #25, close #24
This commit is contained in:
jrenslin committed 2022-11-28 15:55:05 +01:00
1 parent 20810aa850
commit 5146305caf
4 files changed
+56 -3

No files matched your search

+10
View File
@@ -65,11 +65,21 @@ h1 img:hover { opacity: 1; }
main,
body > div,
body > footer,
body > form { display: block; max-width: 90vw; margin: 0 auto 3em auto; padding-bottom: 3em; }
form > div { margin-bottom: 1em; }
label { display: block; font-weight: bold; margin-bottom: .5em; }
body > footer { border-top: .1em solid var(--color-borders); }
body > footer > div { display: block; }
body > footer > div a,
body > footer > div span { display: block; font-weight: bold; cursor: pointer;
color: var(--color-fg-less); transition: color .4s; }
body > footer > div a:hover,
body > footer > div span:hover { color: var(--color-accent-hover); }
.invisible { display: none !important; opacity: 0; }
.buttonLike,
+1 -1
View File
@@ -1 +1 @@
.newToolTip{position:fixed;display:none!important;min-width:300px!important;max-width:600px;background:var(--color-fg-less)!important;color:var(--color-bg-normal);text-align:left;font-size:.95rem;border-radius:.2em;box-shadow:1px 1px 4px var(--color-borders-dark);z-index:3000;white-space:initial!important}#newToolTipMain:before{content:attr(data-title);display:block;padding:.5em 1em;max-width:598px;background:var(--color-fg-less);color:var(--color-bg-raised2);font-weight:700;box-shadow:0 4px 2px -2px var(--color-borders-dark)}#newToolTipMain>*{padding:.5rem 1rem!important}#newToolTipMain>table td{padding:.5rem 1em;vertical-align:top}@media screen and (min-width:75em){#newToolTipMain.visible{display:block!important}}#newToolTipMain img{max-width:200px;max-height:300px}dl#newToolTipMain dt{padding-bottom:0;font-weight:700}dl#newToolTipMain dd{margin:-1em 0 0;padding:0}.newToolTipMain p+.toolTipHierarchy{padding-bottom:0!important}#newToolTipMain>h5{padding:0 1rem!important;margin:-.5rem 0!important}.copyToDialogue{cursor:pointer}@keyframes pulseBorderSize{0%{border-width:1em}50%{border-width:1.2em}100%{border-width:1em}}@keyframes fade-in-and-vanish{0%{opacity:0;z-index:1000}5%{opacity:.4}15%{opacity:1;padding:.8em}75%{opacity:1;padding:.8em}85%{opacity:.4;transform:translateY(0px)}99%{opacity:0;transform:translateY(-30px)}100%{opacity:0;z-index:0}}#dialogueArea{display:block;position:fixed;left:0;top:0;width:100%;height:100%;max-width:initial;max-height:initial;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);z-index:10000}#dialogue{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:60vw;min-height:2em;max-width:90vw;max-height:90vh;overflow-y:auto;padding:1.5em 1em;background:var(--color-bg-normal);border-radius:.3em;box-shadow:2px 2px 4px var(--color-fg-less),-2px -2px 4px var(--color-fg-less)}#dialogue h3{margin-top:0;padding-top:0;text-transform:initial;color:var(--color-fg-less)}#confirmButtons{text-align:right}#dialogue .buttonLike{margin:.5em 0 .2em .5em;background:0 0;transition:background .4s,color .4s}#dialogue .buttonLike:hover{background:var(--color-borders-dark);color:var(--color-bg-normal)}#dialogue input[type=text],#dialogue textarea{padding:.5em;border-radius:.1em;border:2px solid var(--color-borders);transition:border .4s}#dialogue input[type=text]:hover,#dialogue textarea:hover{border-color:var(--color-fg-normal)}#dialogue button{padding:.6em .8em;font-size:.8em;background:var(--color-bg-normal);border:1px solid var(--color-borders);transition:.4s}#dialogue button:focus,#dialogue button:hover{background:var(--color-fg-less);color:var(--color-bg-normal);border-color:var(--color-fg-less)}#dialogue form>*{display:block;width:100%}#dialogue form label{font-weight:700;color:var(--color-fg-less)}#dialogueClose{float:right;display:inline-block;padding:0 .6em .2em;background:var(--color-bg-raised);border-radius:100%;cursor:pointer;transition:.4s}#dialogueClose:hover{background:var(--color-fg-less);color:var(--color-bg-normal)}#dialogue ul{margin-left:1em;padding-left:0;transition:.4s}#dialogue ul.minimized{height:20px;background-color:var(--color-accent-normal);background-size:20px 20px;background-image:repeating-linear-gradient(to right,var(--color-fg-normal),var(--color-fg-normal) 1px,var(--color-accent-normal) 1px,var(--color-accent-normal))}#dialogue ul.minimized>*{display:none}@import 'editMenu.css';@import 'dialogue.css';:root{--color-bg-normal: #FFF;--color-bg-raised: #EEE;--color-bg-raised2: #FAFAFA;--color-fg-normal: #000;--color-fg-less: #212121;--color-borders: #D6D6D6;--color-borders-dark: #646464;--color-accent-normal: #FFCCBC;--color-accent-hover: #CB9B8C}@media(prefers-color-scheme:dark){:root{--color-bg-normal: #000;--color-bg-raised: #273000;--color-bg-raised2: #121212;--color-fg-normal: #FFF;--color-fg-less: #EEE;--color-borders: #37474F;--color-borders-dark: #BDBDBD;--color-accent-normal: #FFC107;--color-accent-hover: #FFA000}}@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:0;background:var(--color-bg-normal);color:var(--color-fg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}a{text-decoration:none;color:inherit}h1{display:block;width:100%;text-align:center;margin:0 auto .8em;padding:1em 0;font-size:2.5em;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}main,body>div,body>form{display:block;max-width:90vw;margin:0 auto 3em;padding-bottom:3em}form>div{margin-bottom:1em}label{display:block;font-weight:700;margin-bottom:.5em}.invisible{display:none!important;opacity:0}.buttonLike,select,button,textarea,input{display:block;widthLine truncated
.newToolTip{position:fixed;display:none!important;min-width:300px!important;max-width:600px;background:var(--color-fg-less)!important;color:var(--color-bg-normal);text-align:left;font-size:.95rem;border-radius:.2em;box-shadow:1px 1px 4px var(--color-borders-dark);z-index:3000;white-space:initial!important}#newToolTipMain:before{content:attr(data-title);display:block;padding:.5em 1em;max-width:598px;background:var(--color-fg-less);color:var(--color-bg-raised2);font-weight:700;box-shadow:0 4px 2px -2px var(--color-borders-dark)}#newToolTipMain>*{padding:.5rem 1rem!important}#newToolTipMain>table td{padding:.5rem 1em;vertical-align:top}@media screen and (min-width:75em){#newToolTipMain.visible{display:block!important}}#newToolTipMain img{max-width:200px;max-height:300px}dl#newToolTipMain dt{padding-bottom:0;font-weight:700}dl#newToolTipMain dd{margin:-1em 0 0;padding:0}.newToolTipMain p+.toolTipHierarchy{padding-bottom:0!important}#newToolTipMain>h5{padding:0 1rem!important;margin:-.5rem 0!important}.copyToDialogue{cursor:pointer}@keyframes pulseBorderSize{0%{border-width:1em}50%{border-width:1.2em}100%{border-width:1em}}@keyframes fade-in-and-vanish{0%{opacity:0;z-index:1000}5%{opacity:.4}15%{opacity:1;padding:.8em}75%{opacity:1;padding:.8em}85%{opacity:.4;transform:translateY(0px)}99%{opacity:0;transform:translateY(-30px)}100%{opacity:0;z-index:0}}#dialogueArea{display:block;position:fixed;left:0;top:0;width:100%;height:100%;max-width:initial;max-height:initial;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);z-index:10000}#dialogue{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:60vw;min-height:2em;max-width:90vw;max-height:90vh;overflow-y:auto;padding:1.5em 1em;background:var(--color-bg-normal);border-radius:.3em;box-shadow:2px 2px 4px var(--color-fg-less),-2px -2px 4px var(--color-fg-less)}#dialogue h3{margin-top:0;padding-top:0;text-transform:initial;color:var(--color-fg-less)}#confirmButtons{text-align:right}#dialogue .buttonLike{margin:.5em 0 .2em .5em;background:0 0;transition:background .4s,color .4s}#dialogue .buttonLike:hover{background:var(--color-borders-dark);color:var(--color-bg-normal)}#dialogue input[type=text],#dialogue textarea{padding:.5em;border-radius:.1em;border:2px solid var(--color-borders);transition:border .4s}#dialogue input[type=text]:hover,#dialogue textarea:hover{border-color:var(--color-fg-normal)}#dialogue button{padding:.6em .8em;font-size:.8em;background:var(--color-bg-normal);border:1px solid var(--color-borders);transition:.4s}#dialogue button:focus,#dialogue button:hover{background:var(--color-fg-less);color:var(--color-bg-normal);border-color:var(--color-fg-less)}#dialogue form>*{display:block;width:100%}#dialogue form label{font-weight:700;color:var(--color-fg-less)}#dialogueClose{float:right;display:inline-block;padding:0 .6em .2em;background:var(--color-bg-raised);border-radius:100%;cursor:pointer;transition:.4s}#dialogueClose:hover{background:var(--color-fg-less);color:var(--color-bg-normal)}#dialogue ul{margin-left:1em;padding-left:0;transition:.4s}#dialogue ul.minimized{height:20px;background-color:var(--color-accent-normal);background-size:20px 20px;background-image:repeating-linear-gradient(to right,var(--color-fg-normal),var(--color-fg-normal) 1px,var(--color-accent-normal) 1px,var(--color-accent-normal))}#dialogue ul.minimized>*{display:none}@import 'editMenu.css';@import 'dialogue.css';:root{--color-bg-normal: #FFF;--color-bg-raised: #EEE;--color-bg-raised2: #FAFAFA;--color-fg-normal: #000;--color-fg-less: #212121;--color-borders: #D6D6D6;--color-borders-dark: #646464;--color-accent-normal: #FFCCBC;--color-accent-hover: #CB9B8C}@media(prefers-color-scheme:dark){:root{--color-bg-normal: #000;--color-bg-raised: #273000;--color-bg-raised2: #121212;--color-fg-normal: #FFF;--color-fg-less: #EEE;--color-borders: #37474F;--color-borders-dark: #BDBDBD;--color-accent-normal: #FFC107;--color-accent-hover: #FFA000}}@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:0;background:var(--color-bg-normal);color:var(--color-fg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}a{text-decoration:none;color:inherit}h1{display:block;width:100%;text-align:center;margin:0 auto .8em;padding:1em 0;font-size:2.5em;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}main,body>div,body>footer,body>form{display:block;max-width:90vw;margin:0 auto 3em;padding-bottom:3em}form>div{margin-bottom:1em}label{display:block;font-weight:700;margin-bottom:.5em}body>footer{border-top:.1em solid var(--color-borders)}body>footer>div{display:block}body>foLine truncated
+40
View File
@@ -1018,6 +1018,45 @@ class CsvxmlPage {
}
renderFooter() {
const footer = document.createElement("footer");
const licenseStatement = document.createElement("p");
licenseStatement.textContent = "This work is licensed under the GNU Affero Public License Version 3.";
footer.appendChild(licenseStatement);
const footerOptions = document.createElement("div");
const codeLink = document.createElement("a");
codeLink.textContent = "Source code";
codeLink.href = "https://gitea.armuli.eu/museum-digital/csvxml";
footerOptions.appendChild(codeLink);
if ('serviceWorker' in navigator) {
const refreshB = document.createElement("span");
refreshB.textContent = "Reload application";
refreshB.setAttribute("tabindex", 1);
refreshB.addEventListener('click', function(e) {
Promise.all(['csvxml-cache-v1'].map(function(cache) {
caches.has(cache).then(function(hasCache) {
if (hasCache === true) {
caches.delete(cache).then(function(deletionStatus) {});
}
})
}))
location.reload()
}, {passive: true, once: true});
footerOptions.appendChild(refreshB);
}
footer.appendChild(footerOptions);
document.body.appendChild(footer);
}
}
(async function() {
@@ -1056,6 +1095,7 @@ class CsvxmlPage {
page.renderHelpTexts();
page.renderUploader();
page.renderMain();
page.renderFooter();
}
+5 -2
View File
@@ -72,7 +72,10 @@ const remarkCont=document.createElement("p");remarkCont=field.remarks;tooltipCon
if(field.allowedValues!==undefined&&Object.values(field.allowedValues).length!==0){const allowedHl=document.createElement("h4");allowedHl.textContent=this.tls.allowed_values;tooltipContent.appendChild(allowedHl);const allowedList=document.createElement("p");allowedList.textContent=Object.values(field.allowedValues).join(', ');tooltipContent.appendChild(allowedList);}
CsvxmlTooltip.bindTooltipToElement(domLi,field.name_human_readable,tooltipContent);}
domDiv.appendChild(domUl);this.domMainWrapper.appendChild(domDiv);}
document.body.appendChild(this.domMainWrapper);let app=this;this.doForFieldList(function(field){field.addEventListener('click',function(e){app.toggleListFieldSelectionState(field);app.checkCSVBySelectionAccessibility();});});}}
document.body.appendChild(this.domMainWrapper);let app=this;this.doForFieldList(function(field){field.addEventListener('click',function(e){app.toggleListFieldSelectionState(field);app.checkCSVBySelectionAccessibility();});});}
renderFooter(){const footer=document.createElement("footer");const licenseStatement=document.createElement("p");licenseStatement.textContent="This work is licensed under the GNU Affero Public License Version 3.";footer.appendChild(licenseStatement);const footerOptions=document.createElement("div");const codeLink=document.createElement("a");codeLink.textContent="Source code";codeLink.href="https://gitea.armuli.eu/museum-digital/csvxml";footerOptions.appendChild(codeLink);if('serviceWorker'in navigator){const refreshB=document.createElement("span");refreshB.textContent="Reload application";refreshB.setAttribute("tabindex",1);refreshB.addEventListener('click',function(e){Promise.all(['csvxml-cache-v1'].map(function(cache){caches.has(cache).then(function(hasCache){if(hasCache===true){caches.delete(cache).then(function(deletionStatus){});}})}))
location.reload()},{passive:true,once:true});footerOptions.appendChild(refreshB);}
footer.appendChild(footerOptions);document.body.appendChild(footer);}}
(async function(){function getLang(){const allowedLangs=document.documentElement.getAttribute("data-allowed-langs").split(',');if(navigator.language===undefined)return 'en';const browserLang=navigator.language.toLowerCase().substr(0,2);console.log(browserLang);if(allowedLangs.includes(browserLang))return browserLang;else return 'en';}
const lang=getLang();document.documentElement.setAttribute("lang",lang);document.body.classList.add("loading");let loaded=0;let fieldList;let tls;function loadPage(){document.body.classList.remove("loading");const page=new CsvxmlPage(fieldList,tls);page.renderGenHeader();page.renderHeader();page.renderHelpTexts();page.renderUploader();page.renderMain();}
const lang=getLang();document.documentElement.setAttribute("lang",lang);document.body.classList.add("loading");let loaded=0;let fieldList;let tls;function loadPage(){document.body.classList.remove("loading");const page=new CsvxmlPage(fieldList,tls);page.renderGenHeader();page.renderHeader();page.renderHelpTexts();page.renderUploader();page.renderMain();page.renderFooter();}
window.fetch('/json/fields.'+lang+'.json',{method:'GET',cache:'no-cache',credentials:'same-origin',}).then(function(response){return response.json();}).then(function(elements){fieldList=elements;loaded++;if(loaded===2)loadPage();});window.fetch('/json/tls.'+lang+'.json',{method:'GET',cache:'no-cache',credentials:'same-origin',}).then(function(response){return response.json();}).then(function(elements){tls=elements;loaded++;if(loaded===2)loadPage();});})();