DekuDeals - This Week's New Deals Filter

Add sale type filters to "This Week's New Deals" page, supporting both Grid and List views

当前为 2024-11-19 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        DekuDeals - This Week's New Deals Filter
// @namespace   MKScripts
// @match       https://www.dekudeals.com/items*
// @grant       none
// @version     2.3
// @author      MKScripts
// @description Add sale type filters to "This Week's New Deals" page, supporting both Grid and List views
// ==/UserScript==

(function() {
    'use strict';

    // Find the new injection element
    const injectionElement = document.querySelector('body > main > div.d-flex.flex-md-nowrap.flex-wrap > div.search-left');

    if (injectionElement) {
        // Create a container div for the radio buttons
        const radioContainer = document.createElement('div');
        radioContainer.style.display = 'block'; // Set to block for vertical layout
        radioContainer.style.marginBottom = '20px'; // Make room below the div

        // Create radio buttons
        const radioButtons = [
            createRadioButton('Show All', 'showAll', showAll),
            createRadioButton('Regular Sale', 'regularSale', regularSale),
            createRadioButton('Matches Previous Low', 'matchesPreviousLow', matchesPreviousLow),
            createRadioButton('Lowest Price Ever', 'lowestPriceEver', lowestPriceEver)
        ];

        // Set "Show All" as checked by default
        radioButtons[0].input.checked = true;

        // Append radio buttons to the container
        radioButtons.forEach(({ container }) => radioContainer.appendChild(container));

        // Insert the container into the new injection point
        injectionElement.insertAdjacentElement('afterbegin', radioContainer);
    }

    // Function to create a radio button
    function createRadioButton(label, value, handler) {
        const radioButton = document.createElement('input');
        radioButton.type = 'radio';
        radioButton.name = 'dealType';
        radioButton.value = value;
        radioButton.style.cursor = 'pointer';

        const labelElement = document.createElement('label');
        labelElement.textContent = label;
        labelElement.style.marginLeft = '7px'; // Add margin-left to the labels
        labelElement.style.cursor = 'pointer';

        // Append the radio button and label to a div
        const container = document.createElement('div');
        container.style.marginBottom = '1px'; // Spacing between radio buttons
        container.style.cursor = 'pointer';
        container.appendChild(radioButton);
        container.appendChild(labelElement);

        // Attach event listener to the container
        container.addEventListener('click', function() {
            radioButton.checked = true;
            handler();
        });

        return { input: radioButton, container };
    }

    // Common badge selector
    const spanBadgeWarningSelector = '.badge-warning';

    // Function to get the appropriate item selector and default display style
    function getViewModeConfig() {
        const listViewItems = document.querySelectorAll('.items-list-row');
        if (listViewItems.length > 0) {
            return { selector: '.items-list-row', display: 'flex' };
        }
        return { selector: '.col-xl-2.col-lg-3.col-sm-4.col-6.cell', display: 'block' };
    }

    // Event listener for "Show All"
    function showAll() {
        const { selector, display } = getViewModeConfig();
        const divs = document.querySelectorAll(selector);
        divs.forEach(div => (div.style.display = display));
    }

    // Event listener for "Regular Sale"
    function regularSale() {
        const { selector, display } = getViewModeConfig();
        const divs = document.querySelectorAll(selector);
        divs.forEach(div => {
            const badge = div.querySelector(spanBadgeWarningSelector);
            if (badge && (badge.textContent.includes('Lowest price ever') || badge.textContent.includes('Matches previous low'))) {
                div.style.display = 'none';
            } else {
                div.style.display = display;
            }
        });
    }

    // Event listener for "Matches Previous Low"
    function matchesPreviousLow() {
        const { selector, display } = getViewModeConfig();
        const divs = document.querySelectorAll(selector);
        divs.forEach(div => {
            const badge = div.querySelector(spanBadgeWarningSelector);
            if (badge && badge.textContent.includes('Matches previous low')) {
                div.style.display = display;
            } else {
                div.style.display = 'none';
            }
        });
    }

    // Event listener for "Lowest Price Ever"
    function lowestPriceEver() {
        const { selector, display } = getViewModeConfig();
        const divs = document.querySelectorAll(selector);
        divs.forEach(div => {
            const badge = div.querySelector(spanBadgeWarningSelector);
            if (badge && badge.textContent.includes('Lowest price ever')) {
                div.style.display = display;
            } else {
                div.style.display = 'none';
            }
        });
    }

})();