مدیاویکی:Gadget-colorTextBoxEditor.js

$(function () {
    var edit = $("#wpTextbox1");
    if (edit.length === 0) { return; }

    // رنگ‌های پس‌زمینه و متن
    var backgroundColors = ['#ffffff', '#3c3c3c', '#4f4f4f', '#616161', '#1a1a1a', '#ff5722', '#8bc34a', '#9c27b0', '#009688', '#f44336'];
    var textColors = ['#ffffff', '#000000', '#c7c7c7', '#00bcd4', '#ff9800', '#8bc34a', '#3f51b5', '#e91e63', '#795548', '#ffeb3b'];
    var fontSizes = ['14px', '15px', '16px', '17px', '18px', '19px', '20px'];
    var fontFamily = 'iransansxlight';

    // بارگذاری تنظیمات ذخیره‌شده از localStorage
    var savedBackgroundColor = localStorage.getItem('background-color');
    var savedTextColor = localStorage.getItem('text-color');
    var savedFontSize = localStorage.getItem('font-size');
    var settingsVisible = localStorage.getItem('settings-visible') === 'true' || localStorage.getItem('settings-visible') === null;

    // اعمال تنظیمات ذخیره‌شده یا پیش‌فرض
    edit.css({
        'background-color': savedBackgroundColor || '#ffffff',
        'color': savedTextColor || '#000000',
        'font-size': savedFontSize || '16px',
        'font-family': fontFamily
    });

    // ایجاد یک کانتینر برای تنظیمات با نمایش پیش‌فرض و اسکرول در موبایل
    var controlsContainer = $('<div>', {
        css: {
            display: settingsVisible ? 'flex' : 'none',
            gap: '10px',
            alignItems: 'center',
            padding: '5px',
            border: '1px solid #ccc',
            borderRadius: '5px',
            marginBottom: '10px',
            backgroundColor: '#f9f9f9',
            overflowX: 'auto', // اسکرول افقی
            whiteSpace: 'nowrap', // جلوگیری از شکستن خط‌ها
            maxWidth: '100%' // عرض تطبیقی در دستگاه‌های مختلف
        }
    }).insertBefore(edit.parent());

    // دکمه باز و بسته کردن تنظیمات
    var toggleButton = $('<button>', {
        text: '🔧 تنظیمات',
        css: {
			font-family: 'iransansxlight',
            fontSize: '12px',
            padding: '2px 5px',
            margin: '5px 0',
            cursor: 'pointer',
            borderRadius: '3px',
            border: '1px solid #888'
        }
    }).insertBefore(controlsContainer);

    toggleButton.click(function () {
        settingsVisible = !settingsVisible;
        controlsContainer.toggle(settingsVisible);
        localStorage.setItem('settings-visible', settingsVisible);
    });

    // ایجاد دکمه‌ها برای انتخاب رنگ پس‌زمینه به صورت اینلاین
    var backgroundColorContainer = $('<div>', { css: { display: 'inline-flex', alignItems: 'center' } }).appendTo(controlsContainer);
    backgroundColorContainer.append($('<span>').text('رنگ پس‌زمینه:').css({ fontSize: '12px', marginRight: '5px' }));
    $.each(backgroundColors, function (_, color) {
        backgroundColorContainer.append($('<button>', {
            css: {
                backgroundColor: color,
                margin: '0 3px',
                width: '20px',
                height: '20px',
                border: '1px solid #ccc',
                borderRadius: '50%'
            }
        }).click(function () {
            edit.css('background-color', color);
            localStorage.setItem('background-color', color);
        }));
    });

    // ایجاد دکمه‌ها برای انتخاب رنگ متن به صورت اینلاین
    var textColorContainer = $('<div>', { css: { display: 'inline-flex', alignItems: 'center' } }).appendTo(controlsContainer);
    textColorContainer.append($('<span>').text('رنگ متن:').css({ fontSize: '12px', marginRight: '5px' }));
    $.each(textColors, function (_, color) {
        textColorContainer.append($('<button>', {
            css: {
                backgroundColor: color,
                margin: '0 3px',
                width: '20px',
                height: '20px',
                border: '1px solid #ccc',
                borderRadius: '50%'
            }
        }).click(function () {
            edit.css('color', color);
            localStorage.setItem('text-color', color);
        }));
    });

    // ایجاد دکمه‌ها برای انتخاب اندازه فونت به صورت اینلاین
    var fontSizeContainer = $('<div>', { css: { display: 'inline-flex', alignItems: 'center' } }).appendTo(controlsContainer);
    fontSizeContainer.append($('<span>').text('اندازه متن:').css({ fontSize: '12px', marginRight: '5px' }));
    $.each(fontSizes, function (_, size) {
        fontSizeContainer.append($('<button>', {
            text: size,
            css: {
                margin: '0 3px',
                padding: '2px 4px',
                fontSize: '12px',
                border: '1px solid #ccc',
                borderRadius: '4px'
            }
        }).click(function () {
            edit.css('font-size', size);
            localStorage.setItem('font-size', size);
        }));
    });
});