Skip to content

Commit

Permalink
Refactor wishlist action buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@candela97
candela97 committed Sep 16, 2024
1 parent 2904565 commit 7304bec
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 156 deletions.
35 changes: 0 additions & 35 deletions src/css/augmentedsteam.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -888,41 +888,6 @@ video.highlight_movie:hover + .html5_video_overlay {
display: none;
}

/***************************************
* Wishlist
* FEmptyWishlist/FExportWishlist
**************************************/
#cart_status_data {
display: flex;
align-items: center;
}

.es-wbtn {
color: #fff;
float: right;
cursor: pointer;
font-size: 11px;
text-transform: uppercase;
padding: 0 25px;
line-height: 20px;
}
#es_empty_wishlist {
margin-right: 3px;
background-color: #bf5a5a;
}
#es_empty_wishlist:hover {
background-color: #ffd1d1;
color: black;
}
#es_export_wishlist {
background-color: #6c94a0;
margin-right: 15px;
}
#es_export_wishlist:hover {
background-color: #dbdee1;
color: black;
}

/***************************************
* App pages
* Common/UserNotes
Expand Down
11 changes: 3 additions & 8 deletions src/js/Content/Features/Store/Wishlist/CWishlist.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import FWishlistHighlights from "./FWishlistHighlights";
import FWishlistITADPrices from "./FWishlistITADPrices";
import FWishlistUserNotes from "./FWishlistUserNotes";
import FWishlistStats from "./FWishlistStats";
import FEmptyWishlist from "./FEmptyWishlist";
import FExportWishlist from "./FExportWishlist";
import FWishlistActionButtons from "./FWishlistActionButtons";
import FKeepEditableRanking from "./FKeepEditableRanking";
import FOneClickRemoveFromWishlist from "./FOneClickRemoveFromWishlist";
import FWishlistProfileLink from "./FWishlistProfileLink";
Expand All @@ -16,7 +15,7 @@ import ContextType from "@Content/Modules/Context/ContextType";
import User from "@Content/Modules/User";
import ASEventHandler from "@Content/Modules/ASEventHandler";

interface WishlistEntry {
export interface WishlistEntry {
appid: number,
priority: number,
added: number
Expand All @@ -43,8 +42,7 @@ export default class CWishlist extends CStoreBase {
FWishlistITADPrices,
FWishlistUserNotes,
FWishlistStats,
FEmptyWishlist,
FExportWishlist,
FWishlistActionButtons,
FKeepEditableRanking,
FOneClickRemoveFromWishlist,
FWishlistProfileLink,
Expand All @@ -64,9 +62,6 @@ export default class CWishlist extends CStoreBase {
const myWishlistUrlRegex = new RegExp(`^${myWishlistUrl}([/#]|$)`);
this.myWishlist = myWishlistUrlRegex.test(window.location.href) || window.location.href.includes(`/profiles/${User.steamId}`);
}

// Maintain the order of the buttons
this.dependency(FEmptyWishlist, [FExportWishlist, true]);
}

override async applyFeatures(): Promise<void> {
Expand Down
53 changes: 29 additions & 24 deletions src/js/Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,40 +40,45 @@
</script>


<div class="es-wexport">
<h2>{L(__export_type)}</h2>
<div class="es-wexport__buttons">
<label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
<label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
<div class="as_wexport_container">
<div class="as_wexport">
<h2>{L(__export_type)}</h2>
<div class="as_wexport_buttons">
<label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
<label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
</div>
</div>
</div>

{#if type === "text"}
<div class="es-wexport" transition:slide={{axis: "y", duration: 200}}>
<h2>{L(__export_format)}</h2>
<div>
<input type="text" id="es-wexport-format" bind:value={format} bind:this={input} on:change>
<div class="es-wexport__symbols">
{#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
{#if index > 0}, {/if}
<button type="button" on:click={() => add(str)}>{str}</button>
{/each}
{#if type === "text"}
<div class="as_wexport" transition:slide={{axis: "y", duration: 200}}>
<h2>{L(__export_format)}</h2>
<div>
<input type="text" bind:value={format} bind:this={input} on:change>
<div class="as_wexport_symbols">
{#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
{#if index > 0}, {/if}
<button type="button" on:click={() => add(str)}>{str}</button>
{/each}
</div>
</div>
</div>
</div>
{/if}
{/if}
</div>


<style>
.es-wexport {
.as_wexport_container {
width: 580px;
}
.as_wexport {
margin-bottom: 30px;
}
.es-wexport__buttons {
.as_wexport_buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px
}
.es-wexport__symbols {
.as_wexport_symbols {
margin-top: 2px;
font-size: 11px;
}
Expand All @@ -94,9 +99,9 @@
}
label:has(input[type=radio]:checked) {
color: white;
border-color: #1a97ff
border-color: #1a97ff;
}
label input[type=radio]{
label input[type=radio] {
display: none;
}
Expand Down Expand Up @@ -124,4 +129,4 @@
text-decoration: underline;
color: white;
}
</style>
</style>
44 changes: 44 additions & 0 deletions src/js/Content/Features/Store/Wishlist/EmptyWishlist.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import {L} from "@Core/Localization/Localization";
import {__emptyWishlist_confirm, __emptyWishlist_removing, __emptyWishlist_title} from "@Strings/_strings";
import DynamicStore from "@Content/Modules/Data/DynamicStore";
import RequestData from "@Content/Modules/RequestData";
import User from "@Content/Modules/User";
import SteamFacade from "@Content/Modules/Facades/SteamFacade";
import BlockingWaitDialog from "@Core/Modals/BlockingWaitDialog";
import type {WishlistEntry} from "./CWishlist";

export default class EmptyWishlist {

static async showDialog(wishlistData: WishlistEntry[]): Promise<void> {

const result = await SteamFacade.showConfirmDialog(
L(__emptyWishlist_title),
L(__emptyWishlist_confirm), {
explicitConfirm: true
});

if (result !== "OK") { return; }

let cur = 0;

const waitDialog = new BlockingWaitDialog(
L(__emptyWishlist_title),
() => L(__emptyWishlist_removing, {
cur,
total: wishlistData.length
})
);

for (const {appid} of wishlistData) {
++cur;
await waitDialog.update();
await RequestData.post("https://store.steampowered.com/api/removefromwishlist", {
sessionid: User.sessionId!,
appid: String(appid)
});
}

DynamicStore.clear();
location.reload();
}
}
47 changes: 14 additions & 33 deletions ...eatures/Store/Wishlist/FExportWishlist.ts → ...Features/Store/Wishlist/ExportWishlist.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import Downloader from "@Core/Downloader";
import {L} from "@Core/Localization/Localization";
import {__export_copyClipboard, __export_download, __export_wishlist,} from "@Strings/_strings";
import Feature from "@Content/Modules/Context/Feature";
import type CWishlist from "@Content/Features/Store/Wishlist/CWishlist";
import HTML from "@Core/Html/Html";
import SteamFacade from "@Content/Modules/Facades/SteamFacade";
import UserNotes from "@Content/Features/Store/Common/UserNotes/UserNotes";
import Clipboard from "@Content/Modules/Clipboard";
import ExportWishlistForm from "@Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte";
import CustomModal from "@Core/CustomModal";

type WishlistData = Array<[string, {
name: string,
Expand Down Expand Up @@ -105,28 +103,24 @@ class WishlistExporter {
}


export default class FExportWishlist extends Feature<CWishlist> {
export default class ExportWishlist {

private type: "text"|"json" = "text";
private format: string = "%title%";
private static type: "text"|"json" = "text";
private static format: string = "%title%";

override apply(): void {
HTML.afterBegin("#cart_status_data", `<div class="es-wbtn" id="es_export_wishlist"><div>${L(__export_wishlist)}</div></div>`);

document.querySelector("#es_export_wishlist")!.addEventListener("click", () => {
this.showDialog();
});
}

private async showDialog(): Promise<void> {
static async showDialog(): Promise<void> {

let form: ExportWishlistForm|undefined;

const observer = new MutationObserver(() => {
const modal = document.querySelector("#as_export_form");
if (modal) {
const response = await CustomModal({
title: L(__export_wishlist),
options: {
okButton: L(__export_download),
secondaryActionButton: L(__export_copyClipboard)
},
modalFn: (target) => {
form = new ExportWishlistForm({
target: modal,
target,
props: {
type: this.type,
format: this.format
Expand All @@ -136,22 +130,9 @@ export default class FExportWishlist extends Feature<CWishlist> {
this.format = form!.format;
this.type = form!.type;
});
observer.disconnect();
return form;
}
});
observer.observe(document.body, {
childList: true
});

const response = await SteamFacade.showConfirmDialog(
L(__export_wishlist),
`<div id="as_export_form" style="width:580px"></div>`,
{
okButton: L(__export_download),
secondaryActionButton: L(__export_copyClipboard)
});

form?.$destroy();

if (response === "CANCEL") {
return;
Expand Down
56 changes: 0 additions & 56 deletions src/js/Content/Features/Store/Wishlist/FEmptyWishlist.ts
View file

This file was deleted.

Loading

0 comments on commit 7304bec

Please sign in to comment.