Merge pull request #279 from csfloat/fix/market-entry-stickers-update

Fix: Steam Market Sticker Container

Author: GODrums

src/lib/components/market/helpers.ts

@@ -88,7 +88,7 @@ function generateStickerInlineHTML(itemInfo: ItemInfo, asset: rgAsset): string[]
 function generateKeychainInlineHTML(itemInfo: ItemInfo, asset: rgAsset): string[] {
     const description = getKeychainDescription(itemInfo, asset);
 
-    if (!description || description.type !== 'html' || !description.value.includes('sticker')) {
+    if (!description || description.type !== 'html' || description.value.includes('sticker')) {
         return [];
     }
 
@@ -107,6 +107,11 @@ 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 +122,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);
 }
 
 /**

src/lib/components/market/item_row_wrapper.ts

@@ -140,6 +140,13 @@ 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 +168,9 @@ 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 />

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,14 @@ 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 {};