☰

تحسين تجربة المستخدم باستخدام خيارات مربع الاختيار القابل للسحب

أضف تجربة مستخدم أفضل لصناديق الاختيار القابلة للسحب على صفحات الويب بحث منبثق للاختيار

// ==UserScript==
// @name         下拉选择框改善用户体验
// @name:en      Drop Down Select Box Improves User Experience
// @name:zh-CN   下拉选择框改善用户体验
// @name:zh-TW   下拉選單改善使用者體驗
// @name:ja      ドロップダウン選択ボックスがユーザーエクスペリエンスを向上させる
// @name:ko      드롭다운 선택 상자로 사용자 경험 개선
// @name:de      Verbessertes Benutzererlebnis mit Dropdown-Auswahlfeld
// @name:fr      Amélioration de l'expérience utilisateur avec une liste déroulante
// @name:es      Mejora de la experiencia del usuario con cuadro de selección desplegable
// @name:pt      Melhorando a experiência do usuário com caixa de seleção suspensa
// @name:ru      Улучшенный пользовательский опыт с выпадающим списком
// @name:it      Miglioramento dell'esperienza utente con casella di selezione a discesa
// @name:tr      Aşağı açılır seçim kutusuyla kullanıcı deneyimini geliştirme
// @name:ar      تحسين تجربة المستخدم باستخدام خيارات مربع الاختيار القابل للسحب
// @name:th      การปรับปรุงประสบการณ์ของผู้ใช้ด้วยกล่องเลือกแบบเลื่อนลง
// @name:vi      Cải thiện trải nghiệm người dùng với hộp thả xuống lựa chọn
// @name:id      Meningkatkan Pengalaman Pengguna dengan Kotak Pilihan Drop Down
// @namespace   Violentmonkey Scripts
// @match        *://*/*
// @grant       none
// @version     XiaoYing_2023.07.18.7
// @grant       GM_info
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_addStyle
// @grant       GM_deleteValue
// @grant       GM_xmlhttpRequest
// @grant       GM_setClipboard
// @grant       GM_registerMenuCommand
// @grant       GM_unregisterMenuCommand
// @grant       GM_getResourceText
// @grant       GM_getResourceURL
// @grant       GM_openInTab
// @grant       unsafeWindow
// @run-at      document-start
// @author      github.com @XiaoYingYo
// @require     https://greasyfork.org/scripts/464929-module-jquery-xiaoying/code/module_jquery_XiaoYing.js
// @require     https://greasyfork.org/scripts/464780-global-module/code/global_module.js
// @description 为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择
// @description:en Add a better user experience for dropdown select boxes on webpages Popup search for selection
// @description:zh-CN 为网页上的下拉选择框添加更好的用户体验 弹出式搜索进行选择
// @description:zh-TW 為網頁上的下拉選擇框添加更好的用戶體驗 彈出式搜索進行選擇
// @description:ja ドロップダウンセレクトボックスのより良いユーザーエクスペリエンスを提供するためのスクリプト ポップアップ検索による選択
// @description:ko 웹 페이지의 드롭다운 선택 상자에 더 나은 사용자 경험 제공 팝업 검색으로 선택
// @description:de Besseres Benutzererlebnis für Dropdown-Auswahlfelder auf Webseiten Popup-Suche zur Auswahl
// @description:fr Améliorez l'expérience utilisateur des menus déroulants sur les pages Web Recherche contextuelle pour la sélection
// @description:es Mejore la experiencia del usuario en los cuadros de selección desplegables en las páginas web Búsqueda emergente para la selección
// @description:pt Adicione uma melhor experiência do usuário para caixas de seleção suspensas em páginas da web Pesquisa de pop-up para seleção
// @description:ru Добавить более удобный пользовательский интерфейс для выпадающих списков на веб-страницах Всплывающий поиск для выбора
// @description:it Aggiungi una migliore esperienza utente per le caselle di selezione a discesa nelle pagine web Ricerca popup per la selezione
// @description:tr Web sayfalarındaki açılır menüler için daha iyi bir kullanıcı deneyimi ekleyin Seçim için açılır arama
// @description:ar أضف تجربة مستخدم أفضل لصناديق الاختيار القابلة للسحب على صفحات الويب بحث منبثق للاختيار
// @description:th เพิ่มประสบการณ์การใช้งานที่ดีขึ้นสำหรับกล่องเลือกที่เหลือบนหน้าเว็บค้นหาโดยกระทำสำหรับการเลือก
// @description:vi Thêm trải nghiệm người dùng tốt hơn cho hộp thả xuống trên các trang web Tìm kiếm xuất hiện cho việc chọn lựa
// @description:id Tambahkan pengalaman pengguna yang lebih baik untuk kotak pilihan drop-down di halaman web Pencarian pop-up untuk pemilihan
// ==/UserScript==

var global_module = window['global_module'];
var globalVariable = new Map();

(async () => {
    function showModal() {
        let ModalDom = $(`<div id="_select_"><div id="_selectModal_grayMask_"></div><div id="_selectModal_">
            <input type="text" class="input-box">
            <div class="content">
                <div class="list">
                </div>
            </div>
        </div></div>`);
        globalVariable.set('ModalDom', ModalDom);
        $('body').append(ModalDom);
        ModalDom.find('.input-box').eq(0).focus();
        ModalDom.find('div[id="_selectModal_grayMask_"]').on('click', function () {
            closeModal();
        });
        return ModalDom;
    }

    function addOption(ModalDom, listDomOrStr = null) {
        if (!listDomOrStr) {
            return;
        }
        let listDom = ModalDom.find('div.list').eq(0);
        listDom.append(listDomOrStr);
    }

    function closeModal() {
        let modalDom = globalVariable.get('ModalDom');
        modalDom.remove();
        globalVariable.delete('ModalDom');
    }

    function initCss() {
        if (globalVariable.get('pageCss')) {
            return;
        }
        let css = `
            #_selectModal_grayMask_ {
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 9999;
            }

            #_selectModal_ {
                position: fixed;
                width: 90%;
                height: 90%;
                background-color: White;
                top: 5%;
                left: 5%;
                z-index: 10000;
            }

            .input-box {
                width: 100%;
                height: 50px;
                box-sizing: border-box;
                padding: 10px;
                font-size: 16px;
                border-radius: 5px;
                border: 2px solid #3438b9;
                outline: none;
            }
            
            .content {
                height: calc(100% - 60px);
                overflow-y: auto;
            }
            
            .list li{
                list-style: none;
                text-align: center;
                border-radius: 5px;
                border: 1px solid #3438b9;
                line-height: 36px;
                margin-top: 8px;
                margin-right: 10px;
                margin-left: 10px;
                cursor: pointer;
            }
            
            @media screen and (min-width: 768px) {
                .list {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 1px;
                }
            }
            @media screen and (max-width: 767px) {
                .list {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1px;
                }
            }
        `;
        globalVariable.set('pageCss', css);
        $('body').append('<style id="selectPageCss">' + css + '</style>');
    }

    globalVariable.set('selectSed', 0);

    function findSelect() {
        let select = $('select');
        for (let i = 0; i < select.length; i++) {
            let sed = parseInt(globalVariable.get('selectSed').toString());
            globalVariable.set('selectSed', sed + 1);
            let obj = select[i];
            obj.setAttribute('sed', sed);
            (async (that = obj) => {
                that.addEventListener('click', () => {
                    let ModalDom = showModal();
                    let listDomOrStr = '';
                    let options = that.options;
                    for (let i = 0; i < options.length; i++) {
                        listDomOrStr += `<li onclick="_selectModal_Click_(this,${sed});" index='${i}'>${options[i].innerHTML}</li>`;
                    }
                    addOption(ModalDom, listDomOrStr);
                    ModalDom.find('.input-box')
                        .eq(0)
                        .on(
                            'input',
                            global_module.debounce((e) => {
                                let val = e.target.value;
                                let ops = ModalDom.find('div.list').eq(0).find('li');
                                for (let i = 0; i < ops.length; i++) {
                                    let op = ops[i];
                                    if (val !== '') {
                                        if (op.innerHTML.indexOf(val) === -1) {
                                            op.style.display = 'none';
                                        } else {
                                            op.style.display = 'block';
                                        }
                                    } else {
                                        op.style.display = 'block';
                                    }
                                }
                            }, 200)
                        );
                    initCss();
                });
            })();
        }
    }

    function selectModalClick(that, sed) {
        closeModal();
        let index = that.getAttribute('index');
        index = parseInt(index);
        let select = $('select[sed=' + sed + ']').eq(0);
        select.prop('selectedIndex', index);
        select[0].focus();
        select[0].dispatchEvent(new Event('change'));
    }

    unsafeWindow['_selectModal_Click_'] = selectModalClick;

    function main() {
        findSelect();
    }

    $(document).ready(() => {
        main();
    });
})();