Ihre Angaben

Die Zahlen rechnen sich bei jeder Änderung sofort neu. Mit ? erklärt sich jedes Feld selbst.

@@ -360,7 +399,7 @@ a{color:var(--navy)}

@@ -371,21 +410,21 @@ a{color:var(--navy)}

Weitere Angaben

Alles hier hat sinnvolle Voreinstellungen. Nur anfassen, wenn es auf Sie zutrifft.

Rechenweg

Für alle, die es nachvollziehen wollen.

Speichern und weitergeben

Ihre Eingaben liegen ausschließlich in diesem Browser (localStorage). Nichts wird übertragen, es gibt keinen Server und keine Tracker.

@@ -1600,7 +1639,11 @@ function renderSticky(){ }).join(''); } function initSticky(){ - var bar = $('#stickybar'), res = $('#result'); + /* Das Ergebnisfenster heisst #w-result. Der frueher hier stehende + Selektor #result traf nichts, observe(null) warf, und die Ausnahme + riss alles mit, was danach kam — Leiste, Service Worker und + Installationshinweis inklusive. */ + var bar = $('#stickybar'), res = $('#w-result'); $('#sb-up').onclick = function(){ res.scrollIntoView({ behavior:'smooth', block:'start' }); }; if (!('IntersectionObserver' in window)) return; // ohne Beobachter bleibt sie aus new IntersectionObserver(function(es){ @@ -2300,6 +2343,7 @@ function refresh(){ renderVerdict(); renderDemo(); renderSticky(); + if (LAY) LAY.fit(); // Kartenzahl aendert die Fensterhoehe if (rafId) cancelAnimationFrame(rafId); rafId = requestAnimationFrame(function(){ drawChart(); scheduleDetails(); rafId = null; }); saveState(); @@ -2358,7 +2402,10 @@ $('#reset').onclick = function(){ /* Es gibt nur ein Farbschema. Silber auf Petrol ist hier nicht Dekoration, sondern die Sache selbst — eine Dunkelvariante gäbe es nicht zu skinnen. */ var rt = null; -window.addEventListener('resize', function(){ clearTimeout(rt); rt = setTimeout(drawChart, 120); }); +window.addEventListener('resize', function(){ + clearTimeout(rt); + rt = setTimeout(function(){ LAY.sync(); drawChart(); }, 120); +}); /* ===================================================================== TEIL 12 — FENSTERRAHMEN @@ -2403,6 +2450,7 @@ function dressWindows(){ S.open[key] = !r; if (save) saveState(); if (!r) drawChart(); // eingeklapptes Canvas hat Breite 0 + if (LAY) LAY.fit(); // Einklappen aendert die Fensterhoehe }; mn.onclick = function(){ setRolled(!sec.classList.contains('rolled'), true); }; /* Doppelklick auf die Titelleiste klappt ein - wie unter Windows */ @@ -2411,9 +2459,96 @@ function dressWindows(){ }); } +/* ===================================================================== + TEIL 13 — KACHELUNG + Der Programm-Manager legte seine Fenster auf Wunsch nebeneinander. + Hier geschieht das von selbst, sobald der Schirm es hergibt: + + unter 1080 px eine Spalte (Quelltextreihenfolge, unveraendert) + ab 1080 px zwei Spalten Eingaben | Ausgaben + ab 1560 px drei Spalten Eingaben | Ergebnis+Bild | Herleitung + + Die Aufteilung folgt der Wirkungsrichtung: was man anfasst, steht + links; was daraus folgt, rechts daneben und damit gleichzeitig im + Bild. Das ist der eigentliche Gewinn — Ursache und Wirkung ohne + Scrollen, wofuer auf dem Telefon die mitlaufende Leiste einspringt. + + Die Fenster werden dafuer wirklich umgehaengt statt bloss per CSS + umsortiert. Der Quelltext bleibt einspaltig und damit in der fuer + schmale Geraete richtigen Reihenfolge; display:contents haette diese + Reihenfolge zerstoert, und reine Grid-Zuweisung haette in jeder Zeile + Luecken in Hoehe des jeweils hoechsten Fensters gelassen. + ===================================================================== */ +var LAY = (function(){ + var wrap = document.querySelector('.wrap'), foot = wrap.querySelector('footer'); + /* einspaltige Reihenfolge = Quelltextreihenfolge */ + var ORDER = ['w-result','w-input','w-chart','w-extra','w-calc','w-share']; + var PLAN = { + 2: [['w-input','w-extra','w-share'], ['w-result','w-chart','w-calc']], + 3: [['w-input','w-extra'], ['w-result','w-chart'], ['w-calc','w-share']] + }; + var cur = 0; + + /* Die Schwellen stehen doppelt — hier und im Stilblatt. Das ist der + Preis dafuer, dass die Struktur im DOM liegt und die Optik im CSS; + matchMedia liest wenigstens dieselbe Quelle wie der Umbruch. */ + function want(){ + return matchMedia('(min-width:1560px)').matches ? 3 + : matchMedia('(min-width:1080px)').matches ? 2 : 1; + } + + /* Ein angeheftetes Fenster nimmt dauerhaft Platz weg. Ueber 60 % der + Schirmhoehe waere das ein schlechter Tausch: darunter stuenden nur + noch Reste des Diagramms, und ein Fenster hoeher als der Schirm + liesse sein unteres Ende gar nicht mehr erreichen. In dem Fall + scrollt es normal mit — dann uebernimmt wieder die mitlaufende + Leiste, die dafuer ja gebaut ist. */ + var STICKY_ANTEIL = 0.6; + function fitSticky(){ + var r = document.getElementById('w-result'); + if (!r) return; + document.body.classList.toggle('nosticky', + cur < 2 || r.getBoundingClientRect().height > window.innerHeight * STICKY_ANTEIL); + } + + function apply(n){ + if (n === cur) return false; + cur = n; + var w = {}; + ORDER.forEach(function(id){ w[id] = document.getElementById(id); }); + /* Erst die Fenster festhalten, dann die alten Spalten entfernen — + die Referenzen ueberleben das, appendChild haengt sie danach um. */ + [].slice.call(wrap.querySelectorAll('.col')).forEach(function(c){ c.remove(); }); + if (n === 1){ + ORDER.forEach(function(id){ if (w[id]) wrap.insertBefore(w[id], foot); }); + } else { + PLAN[n].forEach(function(ids){ + var c = el('div','col'); + ids.forEach(function(id){ if (w[id]) c.appendChild(w[id]); }); + wrap.insertBefore(c, foot); + }); + } + document.body.classList.toggle('tiled', n > 1); + return true; + } + + return { + cols: function(){ return cur; }, + fit: fitSticky, + sync: function(){ + var geaendert = apply(want()); + fitSticky(); + /* Das Canvas hat nach dem Umhaengen eine andere Breite. */ + if (geaendert && typeof R !== 'undefined' && R) drawChart(); + return geaendert; + } + }; +})(); + /* --- Start --- */ loadState(); dressWindows(); +LAY.sync(); buildMetricBar(); buildTabs(); buildInputs(); R = AVModell.rechne(S.I, S.P); refresh(); -- cgit v1.2.1