|
13 | 13 | * lang=fr Override the browser language (default: auto-detected) |
14 | 14 | * id=myDiv Insert the banner inside the element with this id |
15 | 15 | * (default: prepend to <body>) |
16 | | - * size=normal Banner size: "normal" (default) or "mini" |
| 16 | + * size=normal Banner size: "normal" (default), "mini" or "minimal" |
17 | 17 | * link=URL Make the banner text a link (default: https://keepandroidopen.org) |
18 | 18 | * Set link=none to disable the link |
19 | 19 | * hidebutton=on Show an X close button (default: on) |
20 | 20 | * Set hidebutton=off to hide the close button |
| 21 | + * animation=on Add animation to border of banner (default: on) |
| 22 | + * Set animation=off to disable |
21 | 23 | */ |
22 | 24 | (function () { |
23 | 25 | "use strict"; |
|
101 | 103 | ); |
102 | 104 |
|
103 | 105 | // ── Size variant ────────────────────────────────────────────────────── |
104 | | - var size = params.size === "mini" ? "mini" : "normal"; |
| 106 | + var size = params.size === "mini" ? "mini" |
| 107 | + : params.size === "minimal" |
| 108 | + ? "minimal" |
| 109 | + : "normal"; |
105 | 110 |
|
106 | 111 | // ── Link ──────────────────────────────────────────────────────────── |
107 | 112 | var linkParam = params.link; |
|
133 | 138 | "0px 3px 0px #751111," + |
134 | 139 | "0px 4px 0px #5e0d0d," + |
135 | 140 | "0px 6px 10px rgba(0,0,0,0.5);" + |
136 | | - "animation:kao-pulse 2s infinite;" + |
137 | 141 | "padding:0.5rem 2.5rem;" + |
138 | 142 | "line-height:1.6;" + |
139 | 143 | "box-sizing:border-box;" + |
|
156 | 160 | "0px 1px 0px #9e1a1a," + |
157 | 161 | "0px 2px 0px #8a1515," + |
158 | 162 | "0px 3px 5px rgba(0,0,0,0.4);" + |
159 | | - "animation:kao-pulse 2s infinite;" + |
160 | 163 | "padding:0.25rem 1.5rem;" + |
161 | 164 | "line-height:1.4;" + |
162 | 165 | "box-sizing:border-box;" + |
163 | 166 | "}"; |
164 | 167 |
|
| 168 | + var cssMinimal = |
| 169 | + ".kao-banner{" + |
| 170 | + "position:relative;" + |
| 171 | + "font-variant-numeric:tabular-nums;" + |
| 172 | + "background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);" + |
| 173 | + "border-bottom:2px solid #801313;" + |
| 174 | + "color:#fff;" + |
| 175 | + "font-family:'Arial Black',sans-serif;" + |
| 176 | + "font-weight:900;" + |
| 177 | + "text-transform:uppercase;" + |
| 178 | + "letter-spacing:1px;" + |
| 179 | + "font-size:0.75rem;" + |
| 180 | + "text-align:center;" + |
| 181 | + "text-shadow:" + |
| 182 | + "0px 1px 0px #9e1a1a," + |
| 183 | + "0px 2px 0px #8a1515," + |
| 184 | + "0px 3px 5px rgba(0,0,0,0.4);" + |
| 185 | + "padding:0.25rem 1.5rem;" + |
| 186 | + "line-height:1.4;" + |
| 187 | + "box-sizing:border-box;" + |
| 188 | + "}"; |
| 189 | + |
165 | 190 | var cssCommon = |
166 | 191 | ".kao-banner a{color:#fff;text-decoration:none;}" + |
167 | 192 | ".kao-banner a:hover{text-decoration:underline;}" + |
|
180 | 205 | "line-height:1;" + |
181 | 206 | "text-shadow:none;" + |
182 | 207 | "}" + |
183 | | - ".kao-banner-close:hover{opacity:1;}" + |
| 208 | + ".kao-banner-close:hover{opacity:1;}"; |
| 209 | + |
| 210 | + var cssKaoPulse = |
| 211 | + ".kao-banner:not(.no-animation) { animation:kao-pulse 2s infinite; }" + |
184 | 212 | "@keyframes kao-pulse{" + |
185 | 213 | "0%{box-shadow:0 0 0 0 rgba(211,47,47,0.7)}" + |
186 | 214 | "70%{box-shadow:0 0 0 15px rgba(211,47,47,0)}" + |
187 | 215 | "100%{box-shadow:0 0 0 0 rgba(211,47,47,0)}" + |
188 | 216 | "}"; |
189 | 217 |
|
190 | 218 | var style = document.createElement("style"); |
191 | | - style.textContent = (size === "mini" ? cssMini : cssNormal) + cssCommon; |
| 219 | + style.textContent = (size === "mini" ? cssMini : size === "minimal" ? cssMinimal : cssNormal) |
| 220 | + + (params.animation === "off" ? "" : cssKaoPulse) |
| 221 | + + cssCommon; |
192 | 222 | document.head.appendChild(style); |
193 | 223 |
|
194 | 224 | // ── Check if previously dismissed (reappears after dismissDays) ───── |
|
205 | 235 |
|
206 | 236 | // ── Create banner DOM ───────────────────────────────────────────────── |
207 | 237 | var banner = document.createElement("div"); |
208 | | - banner.className = "kao-banner"; |
| 238 | + banner.className = params.animation === "off" ? "kao-banner no-animation" : "kao-banner"; |
209 | 239 |
|
210 | 240 | var messageText = messages[locale] || messages.en; |
211 | 241 |
|
|
220 | 250 | banner.appendChild(document.createTextNode(messageText)); |
221 | 251 | } |
222 | 252 |
|
223 | | - banner.appendChild(document.createElement("br")); |
| 253 | + if (params.size === "minimal") { |
| 254 | + banner.appendChild(document.createTextNode("\u00A0")); |
| 255 | + } else { |
| 256 | + banner.appendChild(document.createElement("br")); |
| 257 | + } |
224 | 258 |
|
225 | 259 | var countdownSpan = document.createElement("span"); |
226 | 260 | countdownSpan.textContent = "\u00A0"; |
|
0 commit comments