From 615b869fc7e37a1ec50fc6a3acc72ae746e2a483 Mon Sep 17 00:00:00 2001 From: candela97 <54083835+candela97@users.noreply.github.com> Date: Mon, 25 Mar 2024 01:02:53 +0800 Subject: [PATCH] Refactor app page review section toggle button --- src/css/augmentedsteam.css | 22 ------ src/js/Content/Features/Store/App/CApp.js | 2 +- .../Features/Store/App/FReviewToggleButton.js | 47 ------------ .../Store/App/FReviewToggleButton.svelte | 74 +++++++++++++++++++ src/localization/en.json | 1 + 5 files changed, 76 insertions(+), 70 deletions(-) delete mode 100644 src/js/Content/Features/Store/App/FReviewToggleButton.js create mode 100644 src/js/Content/Features/Store/App/FReviewToggleButton.svelte diff --git a/src/css/augmentedsteam.css b/src/css/augmentedsteam.css index 0627d21bc..b38387aee 100644 --- a/src/css/augmentedsteam.css +++ b/src/css/augmentedsteam.css @@ -993,28 +993,6 @@ video.highlight_movie:hover + .html5_video_overlay { background-color: #aeaeae; } -/*************************************** - * App pages - * FReviewToggleButton - **************************************/ -.es_review_section { - overflow: hidden; -} -#review_create.es_contracted .es_review_section { - max-height: 0; -} -#es_review_toggle { - float: right; -} -#review_create.es_contracted .es_review_contract, -#review_create:not(.es_contracted) .es_review_expand { - display: none; -} -#review_create.es_contracted .es_review_expand, -#review_create:not(.es_contracted) .es_review_contract { - display: block; -} - /*************************************** * App pages * FWaitlistDropdown diff --git a/src/js/Content/Features/Store/App/CApp.js b/src/js/Content/Features/Store/App/CApp.js index 7b4b6199e..03098a6cd 100644 --- a/src/js/Content/Features/Store/App/CApp.js +++ b/src/js/Content/Features/Store/App/CApp.js @@ -33,7 +33,7 @@ import FPurchaseDate from "./FPurchaseDate"; import FRemoveBroadcasts from "./FRemoveBroadcasts"; import FRemoveDupeScreenshots from "./FRemoveDupeScreenshots"; import FReplaceDevPubLinks from "./FReplaceDevPubLinks"; -import FReviewToggleButton from "./FReviewToggleButton"; +import {FReviewToggleButton} from "./FReviewToggleButton.svelte"; import FSaveReviewFilters from "./FSaveReviewFilters"; import FShowCoupon from "./FShowCoupon"; import FSteamDeckCompatibility from "./FSteamDeckCompatibility"; diff --git a/src/js/Content/Features/Store/App/FReviewToggleButton.js b/src/js/Content/Features/Store/App/FReviewToggleButton.js deleted file mode 100644 index 5e5d09b6f..000000000 --- a/src/js/Content/Features/Store/App/FReviewToggleButton.js +++ /dev/null @@ -1,47 +0,0 @@ -import {Feature} from "../../../Modules/Feature/Feature"; -import {HTML, LocalStorage, Localization} from "../../../../modulesCore"; - -export default class FReviewToggleButton extends Feature { - - checkPrerequisites() { - return document.getElementById("review_create") !== null; - } - - apply() { - const head = document.querySelector("#review_create h1"); - - // Reparent review section nodes - const newParent = document.createElement("div"); - newParent.classList.add("es_review_section"); - newParent.append( - ...document.getElementById("review_create").querySelectorAll("p, .avatar_block, .content") - ); - - head.insertAdjacentElement("afterend", newParent); - - // Insert review toggle button - HTML.beforeEnd(head, - `<div class="btnv6_lightblue_blue btn_medium" id="es_review_toggle"> - <div data-tooltip-text="${Localization.str.expand_slider}" class="es_review_expand">▼</div> - <div data-tooltip-text="${Localization.str.contract_slider}" class="es_review_contract">▲</div> - </div>`); - - document.querySelector("#es_review_toggle").addEventListener("click", () => { - this._toggleReviews(); - }); - - this._toggleReviews(LocalStorage.get("show_review_section")); - } - - _toggleReviews(state) { - - let _state = state; - - if (typeof _state === "undefined") { - _state = !LocalStorage.get("show_review_section"); - LocalStorage.set("show_review_section", _state); - } - - document.getElementById("review_create").classList.toggle("es_contracted", !_state); - } -} diff --git a/src/js/Content/Features/Store/App/FReviewToggleButton.svelte b/src/js/Content/Features/Store/App/FReviewToggleButton.svelte new file mode 100644 index 000000000..9e2ad76d6 --- /dev/null +++ b/src/js/Content/Features/Store/App/FReviewToggleButton.svelte @@ -0,0 +1,74 @@ +<script lang="ts" context="module"> + // @ts-ignore + import self_ from "./FReviewToggleButton.svelte"; + import {Feature} from "../../../modulesContent"; + import type {CApp} from "./CApp"; + + export class FReviewToggleButton extends Feature<CApp> { + + override checkPrerequisites(): boolean { + this._node = document.getElementById("review_create"); + return this._node !== null; + } + + override apply(): void { + const target = this._node.querySelector("h1"); + if (!target) { + throw new Error("Node not found"); + } + + // Reparent review section nodes + const reviewSection = document.createElement("div"); + reviewSection.classList.add("es_review_section"); + reviewSection.append( + ...this._node.querySelectorAll("p, .avatar_block, .content") + ); + + target.after(reviewSection); + + (new self_({ + target, + props: { + reviewSection + } + })); + } + } +</script> + +<script lang="ts"> + import {LocalStorage, Localization} from "../../../../modulesCore"; + import {onMount} from "svelte"; + + export let reviewSection: Element|undefined; + export let state: boolean = LocalStorage.get("show_review_section"); + + function toggleReviews(event) { + if (event) { + state = !state; + LocalStorage.set("show_review_section", state); + } + + reviewSection!.style.maxHeight = state ? null : 0; + } + + onMount(() => { + toggleReviews(); + }); +</script> + + +<button class="btnv6_lightblue_blue btn_medium es_review_toggle" on:click={toggleReviews}> + <div data-tooltip-text="{Localization.str.expand_or_contract_slider}">{state ? "▲" : "▼"}</div> +</button> + + +<style> + :global(.es_review_section) { + overflow: hidden; + } + .es_review_toggle { + float: right; + font-size: 18px; + } +</style> diff --git a/src/localization/en.json b/src/localization/en.json index 11da5ae65..95e92a272 100644 --- a/src/localization/en.json +++ b/src/localization/en.json @@ -292,6 +292,7 @@ "preview_background": "Preview Background", "expand_slider": "Expand slider", "contract_slider": "Contract slider", + "expand_or_contract_slider": "Expand/contract slider", "early_access": "Early Access", "tag_short": "Use short tags to save space", "no_price_data": "No price data available",