cardmarket show image.md

• always show the card image in a sellers inventory
• remove empty dropdown options

script.user.js

'use strict';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

function __awaiter(thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
}

/**
 * Exception thrown when ensuredSelectorand waitForElement can not assure the existance of the input
 */
class MissingElementException extends Error {
    constructor(message) {
        super(message);
        this.name = "MissingElementException";
    }
}

/**
 * creates an element from string by using innerHTML
 * @param html any valid html as string
 * @returns element
 */
function createElementFromHTMLString(html) {
    return createElement("div", {
        attributes: {
            innerHTML: html,
        },
    }).firstChild;
}
/**
 * easy creation of html elements with styles and attributes
 * @param tagName HTML tag name of the element, e.g. "div"
 * @param options @see CreateElementOptions
 * @returns element
 */
function createElement(tagName, options = {}) {
    const { attributes = {}, style = {}, className = "", children = [], events = [] } = options;
    const element = document.createElement(tagName);
    Object.assign(element, Object.assign(Object.assign({}, attributes), { className: `rr-lib ${className}` }));
    Object.assign(element.style, style);
    element.append(...children);
    events.forEach((event) => element.addEventListener(event.type, event.handler));
    return element;
}

/**
 * waits for the supplied amount of time
 * @param ms time in miliseconds
 * @returns
 */
function wait(ms) {
    return new Promise((r) => setTimeout(r, ms));
}
/**
 * ensures that an element exists in the document and returns this element
 * @param query any valid css selector, @see document.querySelector
 * @throws MissingElementError when element can not be found in document, aka is null or undefined
 * @returns selected element
 */
function ensuredSelector(query, parent = document) {
    const element = parent.querySelector(query);
    if (!element) {
        throw new MissingElementException(`No element found for query: "${query}"`);
    }
    return element;
}

// ==UserScript==
// @name CardMarket always picture
// @version  1.1
// @author RockRoller
// @match https://www.cardmarket.com/*/Users/*/Offers/*
// @downloadURL https://gist.github.com/RockRoller01/b2508a43e54ddc2c2bb6ae13afac1702/raw/script.user.js
// @updateURL https://gist.github.com/RockRoller01/b2508a43e54ddc2c2bb6ae13afac1702/raw/script.user.js
// ==/UserScript==
function main() {
    return __awaiter(this, void 0, void 0, function* () {
        yield wait(1000);
        filterEmptyDropdownOptions();
        addImage();
        // TODO: fix stuck popups
        // TODO: fix stuck text inputs
    });
}
function filterEmptyDropdownOptions() {
    const dropdown = ensuredSelector("#IdExpansionInput select");
    dropdown.querySelectorAll("option").forEach((option) => {
        if (option.innerText.substring(option.innerText.length - 3) == "(0)") {
            option.remove();
        }
    });
}
function addImage() {
    let mode = "full";
    if (location.pathname.toLowerCase().includes("yugioh")) {
        mode = "yugioh";
    }
    document.querySelectorAll("div[id*=articleRow]").forEach((e) => {
        const imgHtml = createElementFromHTMLString(e.querySelector(".col-thumbnail span").dataset.bsTitle);
        if (mode == "full") {
            e.style.height = "50px";
        }
        const rowHeight = e.clientHeight;
        let wrapperStyle = {
            position: "absolute",
            display: "flex",
            width: "max-content",
            right: "100%",
        };
        let imageStyle = {
            position: "relative",
            height: rowHeight + "px",
        };
        if (mode == "yugioh") {
            wrapperStyle.width = rowHeight + "px";
            wrapperStyle.height = rowHeight + "px";
            wrapperStyle.right = "100%";
            wrapperStyle.overflow = "hidden";
            imageStyle.width = "44px";
            imageStyle.height = "64px";
            imageStyle.top = "-11px";
            imageStyle.left = "-4px";
        }
        e.prepend(createElement("div", {
            style: wrapperStyle,
            children: [
                createElement("img", {
                    attributes: {
                        src: imgHtml.src,
                    },
                    style: imageStyle,
                }),
            ],
        }));
    });
}
main();