Skip to content

add single line and animation options to banner #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
marcprux merged 4 commits into from
Mar 9, 2026
Merged

add single line and animation options to banner #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
008c801
feat(banner.js): add "minimal" size for banner
mmmeon Mar 9, 2026
cb01e2c
feat(banner.js): split minimal to animation & size
mmmeon Mar 9, 2026
fd03a41
docs(banner.md): update table with new params
mmmeon Mar 9, 2026
3b61fd4
docs(banner.md): add minimal & animation example
mmmeon Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 41 additions & 7 deletions public/banner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@
* lang=fr Override the browser language (default: auto-detected)
* id=myDiv Insert the banner inside the element with this id
* (default: prepend to <body>)
* size=normal Banner size: "normal" (default) or "mini"
* size=normal Banner size: "normal" (default), "mini" or "minimal"
* link=URL Make the banner text a link (default: https://keepandroidopen.org)
* Set link=none to disable the link
* hidebutton=on Show an X close button (default: on)
* Set hidebutton=off to hide the close button
* animation=on Add animation to border of banner (default: on)
* Set animation=off to disable
*/
(function () {
"use strict";
Expand Down Expand Up @@ -101,7 +103,10 @@
);

// ── Size variant ──────────────────────────────────────────────────────
var size = params.size === "mini" ? "mini" : "normal";
var size = params.size === "mini" ? "mini"
: params.size === "minimal"
? "minimal"
: "normal";

// ── Link ────────────────────────────────────────────────────────────
var linkParam = params.link;
Expand Down Expand Up @@ -133,7 +138,6 @@
"0px 3px 0px #751111," +
"0px 4px 0px #5e0d0d," +
"0px 6px 10px rgba(0,0,0,0.5);" +
"animation:kao-pulse 2s infinite;" +
"padding:0.5rem 2.5rem;" +
"line-height:1.6;" +
"box-sizing:border-box;" +
Expand All @@ -156,12 +160,33 @@
"0px 1px 0px #9e1a1a," +
"0px 2px 0px #8a1515," +
"0px 3px 5px rgba(0,0,0,0.4);" +
"animation:kao-pulse 2s infinite;" +
"padding:0.25rem 1.5rem;" +
"line-height:1.4;" +
"box-sizing:border-box;" +
"}";

var cssMinimal =
".kao-banner{" +
"position:relative;" +
"font-variant-numeric:tabular-nums;" +
"background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);" +
"border-bottom:2px solid #801313;" +
"color:#fff;" +
"font-family:'Arial Black',sans-serif;" +
"font-weight:900;" +
"text-transform:uppercase;" +
"letter-spacing:1px;" +
"font-size:0.75rem;" +
"text-align:center;" +
"text-shadow:" +
"0px 1px 0px #9e1a1a," +
"0px 2px 0px #8a1515," +
"0px 3px 5px rgba(0,0,0,0.4);" +
"padding:0.25rem 1.5rem;" +
"line-height:1.4;" +
"box-sizing:border-box;" +
"}";

var cssCommon =
".kao-banner a{color:#fff;text-decoration:none;}" +
".kao-banner a:hover{text-decoration:underline;}" +
Expand All @@ -180,15 +205,20 @@
"line-height:1;" +
"text-shadow:none;" +
"}" +
".kao-banner-close:hover{opacity:1;}" +
".kao-banner-close:hover{opacity:1;}";

var cssKaoPulse =
".kao-banner { animation:kao-pulse 2s infinite; }" +
"@keyframes kao-pulse{" +
"0%{box-shadow:0 0 0 0 rgba(211,47,47,0.7)}" +
"70%{box-shadow:0 0 0 15px rgba(211,47,47,0)}" +
"100%{box-shadow:0 0 0 0 rgba(211,47,47,0)}" +
"}";

var style = document.createElement("style");
style.textContent = (size === "mini" ? cssMini : cssNormal) + cssCommon;
style.textContent = (size === "mini" ? cssMini : size === "minimal" ? cssMinimal : cssNormal)
+ (params.animation === "off" ? "" : cssKaoPulse)
+ cssCommon;
document.head.appendChild(style);

// ── Check if previously dismissed (reappears after dismissDays) ─────
Expand Down Expand Up @@ -220,7 +250,11 @@
banner.appendChild(document.createTextNode(messageText));
}

banner.appendChild(document.createElement("br"));
if (params.size === "minimal") {
banner.appendChild(document.createTextNode("\u00A0"));
} else {
banner.appendChild(document.createElement("br"));
}

var countdownSpan = document.createElement("span");
countdownSpan.textContent = "\u00A0";
Expand Down
11 changes: 10 additions & 1 deletion src/content/pages/banner.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@ Customize the banner by appending query parameters to the script URL:
|-----------|--------|---------|-------------|
| `lang` | `en`, `fr`, `de`, `es`, … | Browser language | Override the display language |
| `id` | Any element id | _(prepend to body)_ | Insert the banner inside the element with this id |
| `size` | `normal`, `mini` | `normal` | Banner size variant |
| `size` | `normal`, `mini`, `minimal` | `normal` | Banner size variant |
| `link` | Any URL, or `none` | `https://keepandroidopen.org` | Make the banner text a clickable link; set to `none` to disable |
| `hidebutton` | `on`, `off` | `on` | Show or hide the X close button (dismissed state is remembered per-site via localStorage) |
| `animation` | `on`, `off` | `on` | Enable or disable the banner's pulsing animation |

## Examples

Expand All @@ -49,6 +50,14 @@ Link to a custom page, no close button:
<div id="my-banner-custom"></div>
<script src="/banner.js?link=https://example.com/android&hidebutton=off&size=mini&id=my-banner-custom"></script>

Minimal size without animations.

```html
<script src="/banner.js?size=minimal&animation=off&id=my-banner-minimal"></script>
```
<div id="my-banner-minimal"></div>
<script src="/banner.js?size=minimal&animation=off&id=my-banner-minimal"></script>

## Source

The source for the banner can be found at [https://github.com/keepandroidopen/keepandroidopen.github.io/blob/main/public/banner.js](https://github.com/keepandroidopen/keepandroidopen.github.io/blob/main/public/banner.js). Suggestions for improvement are welcome!