Implement some session storage magic for back buttons
This commit is contained in:
parent
d7b9a08829
commit
8bc0161e66
|
@ -0,0 +1,31 @@
|
|||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
let back = document.getElementsByClassName('back')[0];
|
||||
if (!back) {
|
||||
return;
|
||||
}
|
||||
|
||||
let group = back.dataset.group || 'default';
|
||||
let name = back.dataset.name;
|
||||
let insert = back.dataset.insert == "true";
|
||||
|
||||
if (name) {
|
||||
window.sessionStorage.setItem('back-' + 'group', JSON.stringify({
|
||||
'text': name,
|
||||
'location': window.location.toString()
|
||||
}));
|
||||
}
|
||||
|
||||
let history = JSON.parse(window.sessionStorage.getItem('back-' + 'group'));
|
||||
if (insert && history) {
|
||||
|
||||
let a = document.createElement("a");
|
||||
a.href = "#";
|
||||
a.onclick = function() {
|
||||
window.location = history.location;
|
||||
};
|
||||
|
||||
a.innerText = history.text || 'Zurück';
|
||||
back.appendChild(a);
|
||||
}
|
||||
|
||||
});
|
|
@ -13,7 +13,7 @@
|
|||
<ul>
|
||||
<li><a th:href="@{/intern/}">Dashboard</a>
|
||||
</li>
|
||||
<li><a th:href="@{/intern/listedArticles/}">Gelsistete Artikel</a>
|
||||
<li><a th:href="@{/intern/listedArticles/}">Gelistete Artikel</a>
|
||||
<ul>
|
||||
<li><a th:href="@{/intern/articles/}">Händlerangebote</a>
|
||||
</li>
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Alle Buchungen</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu allen Buchungen." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Hauptbuchungskonto</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu den Hauptbuchungen." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Mehrwertsteuerkonto</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu den Mehrwertsteuerbuchungen." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Übersicht der von Lieferanten angebotenen Artikel</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zur Übersicht der von Lieferanten angebotenen Artikel." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Bestellung 1010</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-insert="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Bestellungen</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu den Kunden Bestellungen." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -23,6 +23,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Kunde 1510</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-insert="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,8 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Kunden</h1>
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zur Kundenübersicht." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -74,6 +74,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zum Dashboard." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
@ -146,9 +149,6 @@
|
|||
<section class="spacer"></section>
|
||||
<section class="spacer"></section>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer th:replace="fragments/footer :: footer"></footer>
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Gelisteter Artikel 8450</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-insert="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Gelistete Artikel</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu den gelisteten Artikeln." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Lieferanten Bestellungen</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu den Bestellungen bei Lieferanten." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Lierfant Cheap AG</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-insert="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Lieferanten</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zur Übersicht der Lieferanten." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Lagerbuchungen</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zu den Lagerbuchungen." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Inventar</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zum Inventar." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Packliste</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="intern" data-name="Zurück zur Packliste." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
|
@ -18,7 +18,11 @@
|
|||
<div class="content-width">
|
||||
<div class="detailgrid">
|
||||
<div class="s">
|
||||
|
||||
<h1>Tolle Kamera</h1>
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="shop" data-insert="true"></div>
|
||||
|
||||
<h2>25.14 EUR</h2>
|
||||
<p>
|
||||
Eine TOLLE Kamera <br>
|
||||
|
|
|
@ -15,10 +15,12 @@
|
|||
<div class="sidebar-layout content-width">
|
||||
<div>
|
||||
<h1>Warenkorb</h1>
|
||||
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<p class="back" data-group="shop" data-insert="true"></p>
|
||||
</div>
|
||||
<nav></nav>
|
||||
</div>
|
||||
<!-- TODO: this is suboptimal on mobile -->
|
||||
<main class="content-width sidebar-layout" style="min-height: 100vh;">
|
||||
<div style="max-width: 45em; width: 100%;">
|
||||
<table>
|
||||
|
|
|
@ -15,6 +15,8 @@
|
|||
<div class='hero'>
|
||||
<div class='content-width'>
|
||||
<h1>Angebote</h1>
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="shop" data-name="Zurück zur Startseite." data-insert="false"></div>
|
||||
<div class='grid m base shadow'>
|
||||
<section> <a th:href="@{/shop/articles/1234}" class="section">
|
||||
|
||||
|
|
|
@ -16,6 +16,8 @@
|
|||
<nav></nav>
|
||||
<div>
|
||||
<h1>Suchergebnisse</h1>
|
||||
<script th:src="@{/js/back.js}"></script>
|
||||
<div class="back" data-group="shop" data-name="Zurück zur Suche." data-insert="false"></div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="sidebar-layout content-width">
|
||||
|
|
Reference in New Issue