| @@ -131,8 +131,36 @@ | ||
| 131 | 131 | }); |
| 132 | 132 | })(); |
| 133 | 133 | |
| 134 | 134 | /* ---------------------------------------------------------------- |
| 135 | + * Walkthrough — a facade, so YouTube only loads if it is asked for | |
| 136 | + * -------------------------------------------------------------- */ | |
| 137 | + | |
| 138 | + (function walkthrough() { | |
| 139 | + var trigger = $('[data-gs-video]'); | |
| 140 | + | |
| 141 | + if (!trigger) { | |
| 142 | + return; | |
| 143 | + } | |
| 144 | + | |
| 145 | + trigger.addEventListener('click', function () { | |
| 146 | + var frame = document.createElement('iframe'); | |
| 147 | + | |
| 148 | + frame.src = trigger.getAttribute('data-gs-video'); | |
| 149 | + frame.title = trigger.getAttribute('data-gs-video-title') || ''; | |
| 150 | + frame.allow = | |
| 151 | + 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'; | |
| 152 | + frame.referrerPolicy = 'strict-origin-when-cross-origin'; | |
| 153 | + frame.allowFullscreen = true; | |
| 154 | + | |
| 155 | + trigger.innerHTML = ''; | |
| 156 | + trigger.appendChild(frame); | |
| 157 | + trigger.disabled = true; | |
| 158 | + trigger.style.cursor = 'default'; | |
| 159 | + }); | |
| 160 | + })(); | |
| 161 | + | |
| 162 | + /* ---------------------------------------------------------------- | |
| 135 | 163 | * Save bar — shared by the blocks and settings screens |
| 136 | 164 | * -------------------------------------------------------------- */ |
| 137 | 165 | |
| 138 | 166 | function createSaveBar(handler) { |
| @@ -233,13 +261,21 @@ | ||
| 233 | 261 | |
| 234 | 262 | var cards = $$('[data-gs-block]', screen); |
| 235 | 263 | var searchInput = $('[data-gs-search]', screen); |
| 236 | 264 | var counter = $('[data-gs-counter]', screen); |
| 265 | + var summary = $('[data-gs-summary]', screen); | |
| 266 | + var metricValue = $('[data-gs-metric-enabled]', screen); | |
| 267 | + var metricNote = $('[data-gs-metric-note]', screen); | |
| 237 | 268 | var empty = $('[data-gs-empty]', screen); |
| 238 | 269 | var grid = $('[data-gs-grid]', screen); |
| 239 | 270 | var filter = 'all'; |
| 240 | 271 | var query = ''; |
| 241 | 272 | |
| 273 | + var freeTotal = cards.filter(function (card) { | |
| 274 | + return card.getAttribute('data-gs-tier') === 'free'; | |
| 275 | + }).length; | |
| 276 | + var proTotal = cards.length - freeTotal; | |
| 277 | + | |
| 242 | 278 | var state = {}; |
| 243 | 279 | var initial = {}; |
| 244 | 280 | |
| 245 | 281 | cards.forEach(function (card) { |
| @@ -295,8 +331,26 @@ | ||
| 295 | 331 | }); |
| 296 | 332 | |
| 297 | 333 | if (counter) { |
| 298 | 334 | counter.textContent = sprintf(i18n.enabledCount, [enabled, cards.length]); |
| 335 | + } | |
| 336 | + | |
| 337 | + if (summary) { | |
| 338 | + summary.textContent = sprintf(i18n.blockSummary, [ | |
| 339 | + freeTotal, | |
| 340 | + proTotal, | |
| 341 | + enabled, | |
| 342 | + cards.length | |
| 343 | + ]); | |
| 344 | + } | |
| 345 | + | |
| 346 | + if (metricValue) { | |
| 347 | + metricValue.textContent = String(enabled); | |
| 348 | + } | |
| 349 | + | |
| 350 | + if (metricNote) { | |
| 351 | + var off = cards.length - enabled; | |
| 352 | + metricNote.textContent = off > 0 ? sprintf(i18n.someDisabled, [off]) : i18n.allEnabled; | |
| 299 | 353 | } |
| 300 | 354 | } |
| 301 | 355 | |
| 302 | 356 | function applyFilters() { |
