|
29 | 29 | let platform; |
30 | 30 | let initError; |
31 | 31 | let firstGuide; |
32 | | - let windowHeight = 0; |
33 | 32 | let header; |
34 | 33 | let warn; |
35 | 34 | let err; |
|
50 | 49 | let installViewUserscriptError; |
51 | 50 | let showAll; |
52 | 51 | let allItems = []; |
53 | | - let resizeTimer; |
54 | 52 | let abort = false; |
55 | 53 |
|
56 | 54 | $: list = items.sort((a, b) => a.name.localeCompare(b.name)); |
57 | 55 |
|
58 | | - $: if (platform) document.body.classList.add(platform); |
59 | | -
|
60 | 56 | function getItemBackgroundColor(elements, index) { |
61 | 57 | if (elements.length < 2) return null; |
62 | 58 | if (elements.length % 2 === 0 && index % 2 === 0) return "light"; |
|
264 | 260 | // set toggle state |
265 | 261 | active = await settingsStorage.get("global_active"); |
266 | 262 |
|
267 | | - // set popup height |
268 | | - resize(); |
269 | | -
|
270 | 263 | // get matches |
271 | 264 | const currentTab = await browser.tabs.getCurrent(); |
272 | 265 | const url = currentTab.url; |
|
361 | 354 | window.location.reload(); |
362 | 355 | } |
363 | 356 |
|
364 | | - async function resize() { |
365 | | - if (!platform || platform === "macos") return; |
366 | | - clearTimeout(resizeTimer); |
367 | | - resizeTimer = setTimeout(async () => { |
368 | | - if (platform === "ipados") { |
369 | | - if (window.matchMedia("(max-width: 360px)").matches) { |
370 | | - // the popup window is no greater than 360px |
371 | | - // ensure body & main element have no leftover styling |
372 | | - main.removeAttribute("style"); |
373 | | - document.body.removeAttribute("style"); |
374 | | - return; |
375 | | - } |
376 | | - main.style.maxHeight = "unset"; |
377 | | - document.body.style.width = "100vw"; |
378 | | - } |
379 | | - // on ios and ipados (split view) programmatically set the height of the scrollable container |
380 | | - // first get the header height |
381 | | - const headerHeight = header.offsetHeight; |
382 | | - // then check if a warning or error is visible (ie. taking up height) |
383 | | - let addHeight = 0; |
384 | | - // if warn or error elements visible, also subtract that from applied height |
385 | | - if (warn) addHeight += warn.offsetHeight; |
386 | | - if (err) addHeight += err.offsetHeight; |
387 | | - windowHeight = window.outerHeight - (headerHeight + addHeight); |
388 | | - main.style.height = `${windowHeight}px`; |
389 | | - main.style.paddingBottom = `${headerHeight + addHeight}px`; |
390 | | - }, 25); |
391 | | - } |
| 357 | + /** @type {import("svelte/elements").UIEventHandler<Window>} */ |
| 358 | + // async function resizeHandler(event) { |
| 359 | + // if (platform !== "macos") { |
| 360 | + // const viewport = event.currentTarget.visualViewport; |
| 361 | + // console.debug(platform, viewport); |
| 362 | + // // add max limits after the window size has been rendered |
| 363 | + // // avoid display overflow when window shrinks dynamically |
| 364 | + // } |
| 365 | + // } |
392 | 366 |
|
393 | 367 | /** |
394 | 368 | * Check if the current page contains a user script |
|
497 | 471 |
|
498 | 472 | onMount(async () => { |
499 | 473 | await initialize(); |
500 | | - // run resize again for good measure |
501 | | - resize(); |
502 | 474 | }); |
503 | 475 |
|
504 | 476 | // handle native app messages |
|
522 | 494 | let showBetaNews = true; |
523 | 495 | </script> |
524 | 496 |
|
525 | | -<svelte:window on:resize={resize} /> |
526 | | -<div class="header" bind:this={header}> |
527 | | - <IconButton |
528 | | - icon={iconOpen} |
529 | | - title={"Open save location"} |
530 | | - on:click={openSaveLocation} |
531 | | - {disabled} |
532 | | - /> |
533 | | - <IconButton |
534 | | - icon={iconUpdate} |
535 | | - infoDot={!!updates.length} |
536 | | - on:click={() => (showUpdates = true)} |
537 | | - title={"Show updates"} |
538 | | - {disabled} |
539 | | - /> |
540 | | - <IconButton |
541 | | - icon={iconRefresh} |
542 | | - on:click={refreshView} |
543 | | - title={"Refresh view"} |
544 | | - {disabled} |
545 | | - /> |
546 | | - <Toggle |
547 | | - checked={active} |
548 | | - title={"Toggle injection"} |
549 | | - on:click={toggleExtension} |
550 | | - {disabled} |
551 | | - /> |
552 | | -</div> |
553 | | -{#if !active} |
554 | | - <!-- <div class="warn" bind:this={warn}>Injection disabled</div> --> |
555 | | -{/if} |
556 | | -{#if showBetaNews && platform !== "macos"} |
557 | | - <div class="warn"> |
558 | | - NEW: <button on:click={gotoExtensionPage}><b>Settings page</b></button> is |
559 | | - now available on iOS! |
560 | | - <IconButton |
561 | | - icon={iconClear} |
562 | | - on:click={() => (showBetaNews = false)} |
563 | | - title={"Close"} |
564 | | - /> |
565 | | - </div> |
566 | | -{/if} |
567 | | -{#if showInstallPrompt} |
568 | | - <div class="warn" class:done={scriptInstalled} bind:this={warn}> |
569 | | - Userscript |
570 | | - {#if scriptChecking} |
571 | | - {showInstallPrompt} |
572 | | - {:else} |
573 | | - {scriptInstalled ? "Installed" : "Detected"}: |
574 | | - <button on:click={showInstallView}>{showInstallPrompt}</button> |
575 | | - {/if} |
576 | | - </div> |
577 | | -{/if} |
578 | | -{#if errorNotification} |
579 | | - <div class="error" bind:this={err}> |
580 | | - {errorNotification} |
581 | | - <IconButton |
582 | | - icon={iconClear} |
583 | | - on:click={() => (errorNotification = undefined)} |
584 | | - title={"Clear error"} |
585 | | - /> |
586 | | - </div> |
587 | | -{/if} |
588 | | -<div class="main {rowColors || ''}" bind:this={main}> |
589 | | - {#if loading} |
590 | | - <Loader abortClick={abortUpdates} {abort} /> |
591 | | - {:else if inactive} |
592 | | - <div class="none">Popup inactive on extension page</div> |
593 | | - {:else if firstGuide} |
594 | | - <div class="none"> |
595 | | - <p>Welcome, first use please: </p> |
596 | | - <button class="link" on:click={openContainingApp}> |
597 | | - Open Userscripts App |
598 | | - </button> |
599 | | - <p>to complete the initialization</p> |
600 | | - </div> |
601 | | - {:else if initError} |
602 | | - <div class="none"> |
603 | | - Something went wrong: |
604 | | - <button class="link" on:click={() => window.location.reload()}> |
605 | | - click to retry |
606 | | - </button> |
607 | | - </div> |
608 | | - {:else if items.length < 1} |
609 | | - <div class="none">No matched userscripts</div> |
610 | | - {:else} |
611 | | - <div class="items" class:disabled> |
612 | | - {#each list as item, i (item.filename)} |
613 | | - <PopupItem |
614 | | - background={getItemBackgroundColor(list, i)} |
615 | | - enabled={!item.disabled} |
616 | | - name={item.name} |
617 | | - subframe={item.subframe} |
618 | | - type={item.type} |
619 | | - request={!!item.request} |
620 | | - on:click={() => toggleItem(item)} |
621 | | - /> |
622 | | - {/each} |
623 | | - </div> |
624 | | - {/if} |
625 | | -</div> |
626 | | -{#if !inactive && platform === "macos"} |
627 | | - <div class="footer"> |
628 | | - <button class="link" on:click={gotoExtensionPage}> |
629 | | - Open Extension Page |
630 | | - </button> |
631 | | - </div> |
632 | | -{/if} |
633 | 497 | {#if showUpdates} |
634 | 498 | <View |
635 | 499 | headerTitle={"Updates"} |
|
672 | 536 | > |
673 | 537 | <AllItemsView {allItems} allItemsToggleItem={toggleItem} /> |
674 | 538 | </View> |
| 539 | +{:else} |
| 540 | + <div class="header" bind:this={header}> |
| 541 | + <div class="buttons"> |
| 542 | + <IconButton |
| 543 | + icon={iconOpen} |
| 544 | + title={"Open save location"} |
| 545 | + on:click={openSaveLocation} |
| 546 | + {disabled} |
| 547 | + /> |
| 548 | + <IconButton |
| 549 | + icon={iconUpdate} |
| 550 | + infoDot={!!updates.length} |
| 551 | + on:click={() => (showUpdates = true)} |
| 552 | + title={"Show updates"} |
| 553 | + {disabled} |
| 554 | + /> |
| 555 | + <IconButton |
| 556 | + icon={iconRefresh} |
| 557 | + on:click={refreshView} |
| 558 | + title={"Refresh view"} |
| 559 | + {disabled} |
| 560 | + /> |
| 561 | + <Toggle |
| 562 | + checked={active} |
| 563 | + title={"Toggle injection"} |
| 564 | + on:click={toggleExtension} |
| 565 | + {disabled} |
| 566 | + /> |
| 567 | + </div> |
| 568 | + {#if !active} |
| 569 | + <!-- <div class="warn" bind:this={warn}>Injection disabled</div> --> |
| 570 | + {/if} |
| 571 | + {#if showBetaNews && platform !== "macos"} |
| 572 | + <div class="warn"> |
| 573 | + NEW: <button on:click={gotoExtensionPage}><b>Settings page</b></button> |
| 574 | + is now available! |
| 575 | + <IconButton |
| 576 | + icon={iconClear} |
| 577 | + on:click={() => (showBetaNews = false)} |
| 578 | + title={"Close"} |
| 579 | + /> |
| 580 | + </div> |
| 581 | + {/if} |
| 582 | + {#if showInstallPrompt} |
| 583 | + <div class="warn" class:done={scriptInstalled} bind:this={warn}> |
| 584 | + Userscript |
| 585 | + {#if scriptChecking} |
| 586 | + {showInstallPrompt} |
| 587 | + {:else} |
| 588 | + {scriptInstalled ? "Installed" : "Detected"}: |
| 589 | + <button on:click={showInstallView}>{showInstallPrompt}</button> |
| 590 | + {/if} |
| 591 | + </div> |
| 592 | + {/if} |
| 593 | + {#if errorNotification} |
| 594 | + <div class="error" bind:this={err}> |
| 595 | + {errorNotification} |
| 596 | + <IconButton |
| 597 | + icon={iconClear} |
| 598 | + on:click={() => (errorNotification = undefined)} |
| 599 | + title={"Clear error"} |
| 600 | + /> |
| 601 | + </div> |
| 602 | + {/if} |
| 603 | + </div> |
| 604 | + <div class="main {rowColors || ''}" bind:this={main}> |
| 605 | + {#if loading} |
| 606 | + <Loader abortClick={abortUpdates} {abort} /> |
| 607 | + {:else if inactive} |
| 608 | + <div class="none">Popup inactive on extension page</div> |
| 609 | + {:else if firstGuide} |
| 610 | + <div class="none"> |
| 611 | + <p>Welcome, first use please: </p> |
| 612 | + <button class="link" on:click={openContainingApp}> |
| 613 | + Open Userscripts App |
| 614 | + </button> |
| 615 | + <p>to complete the initialization</p> |
| 616 | + </div> |
| 617 | + {:else if initError} |
| 618 | + <div class="none"> |
| 619 | + Something went wrong: |
| 620 | + <button class="link" on:click={() => window.location.reload()}> |
| 621 | + click to retry |
| 622 | + </button> |
| 623 | + </div> |
| 624 | + {:else if items.length < 1} |
| 625 | + <div class="none">No matched userscripts</div> |
| 626 | + {:else} |
| 627 | + <div class="items" class:disabled> |
| 628 | + {#each list as item, i (item.filename)} |
| 629 | + <PopupItem |
| 630 | + background={getItemBackgroundColor(list, i)} |
| 631 | + enabled={!item.disabled} |
| 632 | + name={item.name} |
| 633 | + subframe={item.subframe} |
| 634 | + type={item.type} |
| 635 | + request={!!item.request} |
| 636 | + on:click={() => toggleItem(item)} |
| 637 | + /> |
| 638 | + {/each} |
| 639 | + </div> |
| 640 | + {/if} |
| 641 | + </div> |
| 642 | + {#if !inactive && platform === "macos"} |
| 643 | + <div class="footer"> |
| 644 | + <button class="link" on:click={gotoExtensionPage}> |
| 645 | + Open Extension Page |
| 646 | + </button> |
| 647 | + </div> |
| 648 | + {/if} |
675 | 649 | {/if} |
676 | 650 |
|
677 | 651 | <style> |
678 | 652 | .header { |
| 653 | + background-color: var(--color-bg-secondary); |
| 654 | + position: sticky; |
| 655 | + top: 0; |
| 656 | + z-index: 1; |
| 657 | + } |
| 658 | +
|
| 659 | + .header .buttons { |
679 | 660 | align-items: center; |
680 | 661 | border-bottom: 1px solid var(--color-black); |
681 | 662 | display: flex; |
682 | 663 | padding: 0.5rem 1rem calc(0.5rem - 1px) 1rem; |
683 | 664 | } |
684 | 665 |
|
685 | | - .header :global(button:nth-of-type(2)) { |
| 666 | + .header .buttons :global(button:nth-of-type(2)) { |
686 | 667 | margin: 0 auto 0 1rem; |
687 | 668 | } |
688 | 669 |
|
689 | | - .header :global(button:nth-of-type(3)) { |
| 670 | + .header .buttons :global(button:nth-of-type(3)) { |
690 | 671 | margin-right: 1rem; |
691 | 672 | } |
692 | 673 |
|
693 | | - .header :global(button:nth-of-type(1) svg) { |
| 674 | + .header .buttons :global(button:nth-of-type(1) svg) { |
694 | 675 | transform: scale(0.75); |
695 | 676 | } |
696 | 677 |
|
697 | | - .header :global(button:nth-of-type(2) svg) { |
| 678 | + .header .buttons :global(button:nth-of-type(2) svg) { |
698 | 679 | transform: scale(0.9); |
699 | 680 | } |
700 | 681 |
|
701 | | - .header :global(button:nth-of-type(4)) { |
| 682 | + .header .buttons :global(button:nth-of-type(4)) { |
702 | 683 | --toggle-font-size: 1.25rem; |
703 | 684 | } |
704 | 685 |
|
|
746 | 727 | } |
747 | 728 |
|
748 | 729 | .main { |
| 730 | + flex-grow: 1; |
749 | 731 | min-height: 12.5rem; |
750 | 732 | overflow-y: auto; |
751 | 733 | position: relative; |
752 | 734 | } |
753 | 735 |
|
754 | | - :global(body:not(.ios) .main) { |
755 | | - max-height: 20rem; |
756 | | - } |
757 | | -
|
758 | 736 | .none { |
759 | 737 | font-weight: 600; |
760 | 738 | color: var(--text-color-disabled); |
|
0 commit comments