fix: steam market sticker container

csfloat · Dec 5, 2024 · b5b0e35 · b5b0e35
1 parent 749c4c6
commit b5b0e35
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/src/lib/components/market/helpers.ts b/src/lib/components/market/helpers.ts
@@ -107,6 +107,12 @@ function generateKeychainInlineHTML(itemInfo: ItemInfo, asset: rgAsset): string[
 export function inlineStickersAndKeychains(itemNameBlock: JQuery<Element>, itemInfo: ItemInfo, asset: rgAsset) {
     if (!itemNameBlock) return;
 
+    // Remove Steam's inspect button
+    itemNameBlock.parent().find('.market_listing_row_action')?.parent().remove();
+    // Remove Steam's stickers and keychains
+    itemNameBlock.parent().find('.market_listing_row_details')?.remove();
+
+
     if (itemNameBlock.find('.csfloat-stickers-container').length) {
         // Don't inline stickers if they're already inlined
         return;
@@ -117,11 +123,16 @@ export function inlineStickersAndKeychains(itemNameBlock: JQuery<Element>, itemI
         return;
     }
 
+    const elementId = `listing_${itemInfo.m}_csfloat`;
+
     itemNameBlock.prepend(`
-        <div class="csfloat-stickers-container">
+        <div class="csfloat-stickers-container" id="${elementId}">
             ${blobs.reduce((acc, v) => acc + v, '')}
         </div>
     `);
+
+    // Add Steam's item popover on-hover
+    CreateItemHoverFromContainer(g_rgAssets, elementId, asset.appid, asset.contextid, asset.id, asset.amount);
 }
 
 /**
@@ -136,3 +147,4 @@ export function inlineEasyInspect(itemImgContainer: JQuery<Element>, inspectLink
         <a class="csfloat-easy-inspect" href="${inspectLink}">🔍</a>
     `);
 }
+
diff --git a/src/lib/components/market/item_row_wrapper.ts b/src/lib/components/market/item_row_wrapper.ts
@@ -140,6 +140,15 @@ export class ItemRowWrapper extends FloatElement {
             // dialogs opening.
             MarketCheckHash();
         }
+
+
+        // Make sure the parent containers can overflow
+        const parentContainer = $J(this).parent();
+        if (parentContainer) {
+            parentContainer.css('overflow', 'visible');
+            parentContainer.parent().css('overflow', 'visible');
+        }
+
     }
 
     render() {
@@ -161,8 +170,7 @@ export class ItemRowWrapper extends FloatElement {
             return html`
                 <div class="float-row-wrapper">
                     ${this.renderFloatBar()}
-                    <span> Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)} </span>
-                    <br />
+                    <span style="display: block;"> Float: ${this.itemInfo.floatvalue.toFixed(14)} ${renderClickableRank(this.itemInfo)} </span>
                     Paint Seed:
                     ${formatSeed(this.itemInfo)}${fadePercentage !== undefined
                         ? html`<br />

diff --git a/src/lib/types/steam.d.ts b/src/lib/types/steam.d.ts
@@ -219,16 +219,18 @@ export interface TradeInventory {
     success: boolean;
 }
 
+export type SteamAssets = {
+    [appId in AppId]: {
+        [contextId in ContextId]: {[assetId: string]: rgAsset};
+    };
+}
+
 // Declares globals available in the Steam Page Context
 declare global {
     const $J: typeof $;
     const g_rgListingInfo: {[listingId: string]: ListingData};
     const g_rgWalletInfo: WalletInfo | undefined; // Not populated when user is signed-out
-    const g_rgAssets: {
-        [appId in AppId]: {
-            [contextId in ContextId]: {[assetId: string]: rgAsset};
-        };
-    };
+    const g_rgAssets: SteamAssets;
     const g_ActiveInventory: CInventory | undefined; // Only populated on Steam inventory pages
     const g_steamID: string;
     const g_oSearchResults: CAjaxPagingControls;
@@ -250,6 +252,7 @@ declare global {
     const MoveItemToTrade: (el: HTMLElement) => void; // Only populated on create offer pages
     const g_rgCurrentTradeStatus: CurrentTradeStatus;
     const ShowItemInventory: (appID: AppId, contextID: ContextId, AssetID?: number) => void;
+    const CreateItemHoverFromContainer: (g_rgAssets: SteamAssets, elementId: string, appid: AppId, contextid: string, id: string, amount: number) => void;
 }
 
 export {};