docs: durchgaengig HoneyBar statt Leiste
Der Dienst im Beispiel heisst jetzt einsetzer — er ist nicht die HoneyBar, er setzt sie ein. Zusammensetzungen wie Menueleiste, Taskleiste und Statusleiste bleiben, die meinen etwas anderes. Dazu in IDEAS notiert, dass HoneyBar und Menueleiste zwei getrennte Stilsaetze sind und schon einmal auseinandergelaufen ist. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
marcandClaude Opus 5 committed
1 parent
3b7367944b
commit
9da6503837
6 files changed
+156
-131
No files matched your search
+19
-19
@@ -1,28 +1,28 @@
|
||||
/*
|
||||
* HoneyBar — die HoneyOS-Leiste zum Einhängen in eine fremde App.
|
||||
* HoneyBar — die HoneyBar zum Einhängen in eine fremde App.
|
||||
*
|
||||
* <script src="https://os.honeyy.duckdns.org/honeybar/honeybar.js"
|
||||
* data-app="aether"></script>
|
||||
*
|
||||
* Eine Zeile, kein Build, keine Abhängigkeit. Die Leiste rendert in einem
|
||||
* Eine Zeile, kein Build, keine Abhängigkeit. Die HoneyBar rendert in einem
|
||||
* Shadow DOM — die Stile der Gastgeber-App kommen nicht rein, unsere nicht
|
||||
* raus. Das ist der ganze Grund für die Konstruktion: Aether ist React +
|
||||
* Tailwind, InkNote React + eigene Palette, und beide sollen von der Leiste
|
||||
* Tailwind, InkNote React + eigene Palette, und beide sollen von der HoneyBar
|
||||
* nichts merken außer den 32 Pixeln oben.
|
||||
*
|
||||
* data-Attribute am <script>:
|
||||
* data-app (Pflicht) id der App, in der die Leiste steckt
|
||||
* data-app (Pflicht) id der App, in der die HoneyBar steckt
|
||||
* data-apps URL der App-Liste; ohne das /api/apps neben dem Skript
|
||||
* data-key Schlüssel für die App-Liste. Nötig, wenn HoneyOS auf einer
|
||||
* anderen Site liegt als die App: dann schickt der Browser die
|
||||
* HoneyOS-Sitzung nicht mit, und ohne zweiten Ausweis bliebe die
|
||||
* Leiste ohne Liste.
|
||||
* HoneyBar ohne Liste.
|
||||
* data-home URL des HoneyOS-Desktops
|
||||
* data-push "body" (Standard) schiebt den Seiteninhalt nach unten,
|
||||
* "none" legt die Leiste darüber
|
||||
* "none" legt die HoneyBar darüber
|
||||
*
|
||||
* Wichtig zu wissen: localStorage ist pro Domain. Was auf os.honeyy… steht,
|
||||
* sieht diese Leiste auf notes.honeyy… nicht — die Leiste ist ein Schalter,
|
||||
* sieht diese HoneyBar auf notes.honeyy… nicht — die HoneyBar ist ein Schalter,
|
||||
* kein geteilter Zustand. Gemeinsame Sitzung wäre echtes SSO und ist eine
|
||||
* eigene Baustelle.
|
||||
*/
|
||||
@@ -46,7 +46,7 @@
|
||||
// Ohne data-home führt der Weg zurück dorthin, wo dieses Skript herkommt.
|
||||
const homeUrl = d("home", script ? new URL("/", script.src).href : "/");
|
||||
const pushMode = d("push", "body");
|
||||
// Ohne data-apps fragt die Leiste den HoneyOS-Server, von dem sie selbst
|
||||
// Ohne data-apps fragt die HoneyBar den HoneyOS-Server, von dem sie selbst
|
||||
// geladen wurde. Er gibt die Liste nur an angemeldete Browser heraus und
|
||||
// nur an Ursprünge, die selbst als App eingetragen sind.
|
||||
const appsUrl = d("apps", script ? new URL("../api/apps", script.src).href : "");
|
||||
@@ -56,14 +56,14 @@
|
||||
|
||||
let apps = DEFAULT_APPS;
|
||||
let settings = null;
|
||||
// Was die Seite oben schon hatte, bevor die Leiste sie heruntergeschoben hat.
|
||||
// Was die Seite oben schon hatte, bevor die HoneyBar sie heruntergeschoben hat.
|
||||
let urspruenglichesPolster = null;
|
||||
|
||||
/* ── Aufbau ───────────────────────────────────────────────────────────── */
|
||||
|
||||
// Als installierte App liegt der Inhalt unter der Statusleiste des Geraets
|
||||
// (die Apps setzen viewport-fit=cover, damit der Hintergrund bis an den Rand
|
||||
// reicht). Eine Leiste, die stur bei 0 anfaengt, liegt dort unter Uhrzeit und
|
||||
// reicht). Eine HoneyBar, die stur bei 0 anfaengt, liegt dort unter Uhrzeit und
|
||||
// Akkustand. Deshalb waechst sie um die Aussparung und polstert sich selbst;
|
||||
// im Browser ist env() null und alles bleibt bei 32 px.
|
||||
const SAFE = "env(safe-area-inset-top, 0px)";
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
/* Wettersymbole als Pixelraster, dieselben Namen wie in weather.go.
|
||||
Sie stehen auch in os.js — bis die geteilte Symbolquelle (1.3) gebaut ist,
|
||||
ist das die kleinere Sünde: Die Leiste soll eine einzelne Datei bleiben,
|
||||
ist das die kleinere Sünde: Die HoneyBar soll eine einzelne Datei bleiben,
|
||||
die eine fremde App mit einer Zeile einbindet. */
|
||||
const WX = {
|
||||
sonne: "............;.....##.....;..#..##..#..;...#....#...;....####....;..##....##..;..##....##..;....####....;...#....#...;..#..##..#..;.....##.....;............",
|
||||
@@ -133,7 +133,7 @@
|
||||
user-select: none;
|
||||
}
|
||||
.bar::after {
|
||||
/* Scanlines, damit die Leiste zum Desktop gehört */
|
||||
/* Scanlines, damit die HoneyBar zum Desktop gehört */
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
background: repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px);
|
||||
}
|
||||
@@ -198,12 +198,12 @@
|
||||
<div class="head">wechseln zu</div>
|
||||
<div id="menuApps"></div>
|
||||
<hr />
|
||||
<button id="hide" role="menuitem">leiste einklappen</button>
|
||||
<button id="hide" role="menuitem">honeybar einklappen</button>
|
||||
</div>`;
|
||||
|
||||
/* ── Aussehen ─────────────────────────────────────────────────────────────
|
||||
* Dieselben drei Röhren wie in style.css. Sie hier zu wiederholen ist die
|
||||
* bewusste Entscheidung: die Leiste soll ohne zweite Datei auskommen, damit
|
||||
* bewusste Entscheidung: die HoneyBar soll ohne zweite Datei auskommen, damit
|
||||
* sie in jeder fremden App mit einer Zeile funktioniert.
|
||||
*/
|
||||
const ROEHREN = {
|
||||
@@ -280,7 +280,7 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeigt an, wer angemeldet ist. Die Leiste steckt in der App selbst, der
|
||||
* Zeigt an, wer angemeldet ist. Die HoneyBar steckt in der App selbst, der
|
||||
* Aufruf geht also an denselben Ursprung — kein CORS, keine Freigabe nötig.
|
||||
* Antwortet die App nicht wie erwartet, bleibt das Feld leer und niemand
|
||||
* merkt etwas: die Anzeige ist eine Zugabe, keine Zusicherung.
|
||||
@@ -377,7 +377,7 @@
|
||||
/**
|
||||
* Eingeklappt bleibt ein 3 px hoher Strich am oberen Rand stehen. Er nimmt
|
||||
* praktisch keinen Platz, liegt über dem Inhalt statt ihn zu schieben — und
|
||||
* ist der Weg zurück. Ganz verschwinden darf die Leiste nicht: wer sie einmal
|
||||
* ist der Weg zurück. Ganz verschwinden darf die HoneyBar nicht: wer sie einmal
|
||||
* weggeklickt hat, käme sonst nur noch über die Entwicklerkonsole an sie heran.
|
||||
*/
|
||||
let nub = null;
|
||||
@@ -390,7 +390,7 @@
|
||||
"top:" + SAFE,
|
||||
"z-index:2147483000", "cursor:pointer", "display:block",
|
||||
].join(";");
|
||||
nub.title = "HoneyOS-Leiste einblenden";
|
||||
nub.title = "HoneyBar einblenden";
|
||||
const r = nub.attachShadow({ mode: "open" });
|
||||
r.innerHTML = `
|
||||
<style>
|
||||
@@ -436,7 +436,7 @@
|
||||
try {
|
||||
hidden = localStorage.getItem(LS_HIDDEN) === "1";
|
||||
} catch {
|
||||
/* kein Speicher, Leiste bleibt sichtbar */
|
||||
/* kein Speicher, HoneyBar bleibt sichtbar */
|
||||
}
|
||||
// ?honeybar=1 holt sie zurück, falls der Strich einmal übersehen wird.
|
||||
if (hidden && new URLSearchParams(location.search).get("honeybar") === "1") {
|
||||
@@ -467,7 +467,7 @@
|
||||
}
|
||||
} catch {
|
||||
/* nicht angemeldet, kein CORS, kein Netz → eingebaute Liste;
|
||||
die Leiste bleibt ein Umschalter, nur ohne frische Namen */
|
||||
die HoneyBar bleibt ein Umschalter, nur ohne frische Namen */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user