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

( function ( mw, $, OO ) {
    'use strict';

    if ( mw.config.get( 'wgAction' ) !== 'edit' && mw.config.get( 'wgAction' ) !== 'submit' ) {
        return;
    }

    mw.loader.load( 'https://fa.wikishia.net/w/load.php?modules=ext.gadget.iransansxlight-font' );

    mw.util.addCSS( `
        .modern-infobox-form-container {
            font-family: 'iransansxlight', 'Arial', sans-serif !important;
            direction: rtl;
            text-align: right;
        }
        .modern-infobox-form-container label {
            display: block;
            margin: 10px 0 5px;
            font-weight: bold;
            font-family: 'iransansxlight', 'Arial', sans-serif !important;
        }
        .modern-infobox-form-container input, .modern-infobox-form-container select, .modern-infobox-form-container textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: 'iransansxlight', 'Arial', sans-serif !important;
        }
        .modern-infobox-form-container input::placeholder, .modern-infobox-form-container textarea::placeholder {
            font-family: 'iransansxlight', 'Arial', sans-serif !important;
        }
        .modern-infobox-form-container [title] {
            font-family: 'iransansxlight', 'Arial', sans-serif !important;
        }
        .modern-infobox-form-container button {
            background: #1e3c72;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            font-family: 'iransansxlight', 'Arial', sans-serif !important;
        }
        .modern-infobox-form-container button:hover {
            background: #2a5298;
        }
        .modern-infobox-form-container .section, .modern-infobox-form-container .picture-section {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            background: #f9f9f9;
        }
        .modern-infobox-form-container .advanced-settings {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            background: #f1f5f9;
        }
        .modern-infobox-form-container .preview-container {
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            background: #fff;
            max-height: 400px;
            overflow-y: auto;
        }
    ` );

    mw.util.addPortletLink(
        'p-tb',
        '#',
        'فرم اینفوباکس مدرن',
        't-moderninfoboxform',
        'باز کردن فرم برای وارد کردن اطلاعات اینفوباکس مدرن'
    );

    function ModernInfoboxDialog( config ) {
        ModernInfoboxDialog.super.call( this, config );
    }
    OO.inheritClass( ModernInfoboxDialog, OO.ui.ProcessDialog );

    ModernInfoboxDialog.static.name = 'modernInfoboxDialog';
    ModernInfoboxDialog.static.title = 'فرم اینفوباکس مدرن';
    ModernInfoboxDialog.static.actions = [
        { action: 'save', label: 'ذخیره', flags: [ 'primary', 'progressive' ] },
        { action: 'cancel', label: 'لغو', flags: [ 'safe', 'destructive' ] }
    ];
    ModernInfoboxDialog.static.size = 'larger';

    ModernInfoboxDialog.prototype.initialize = function () {
        ModernInfoboxDialog.super.prototype.initialize.call( this );

        var $form = $( '<div>' ).addClass( 'modern-infobox-form-container' ).html( `
            <form id="modern-infobox-form">
                <label>زبان: <select name="زبان" id="language-select">
                    <option value="fa">فارسی</option>
                    <option value="en">English</option>
                </select></label>
                <label>عنوان / Heading: <input type="text" name="عنوان" placeholder="عنوان اینفوباکس / Infobox heading" title="عنوان اصلی اینفوباکس را وارد کنید / Enter the main heading of the infobox" /></label>
                <label>بالا / Above: <textarea name="بالا" placeholder="متن بالای جدول / Text above the table" title="متن بالای جدول را وارد کنید / Enter the text above the table"></textarea></label>
                <button type="button" class="edit-wikitext" data-target="بالا">ویرایش با ویکی‌تکست</button>
                <label>زیرعنوان 1 / Subheader 1: <input type="text" name="زیرعنوان1" placeholder="زیرعنوان اول / First subheader" title="زیرعنوان اول اینفوباکس / First subheader of the infobox" /></label>
                <div id="pictures">
                    <h3>تصاویر / Pictures</h3>
                    <div class="picture-section">
                        <label>تصویر 1 / Picture 1: <input type="text" name="تصویر1" placeholder="نام فایل (مثلاً image.jpg) / File name (e.g., image.jpg)" title="نام فایل تصویر (بدون [[File:]]) / File name of the picture (without [[File:]])" /></label>
                        <a href="https://commons.wikishia.net/common/Special:Upload" target="_blank">آپلود تصویر در ویکی‌شیعه / Upload picture on Wikishia</a>
                        <label>اندازه تصویر 1 / Picture 1 Size: <input type="number" name="اندازه تصویر1" placeholder="به پیکسل (اختیاری) / In pixels (optional)" title="اندازه تصویر به پیکسل (اگر خالی باشد، تمام‌عرض است) / Picture size in pixels (if empty, full width)" /></label>
                        <label>توضیح تصویر 1 / Picture 1 Description: <textarea name="توضیح تصویر1" placeholder="توضیح تصویر / Picture description" title="توضیح برای تصویر اول / Description for the first picture"></textarea></label>
                        <button type="button" class="edit-wikitext" data-target="توضیح تصویر1">ویرایش با ویکی‌تکست</button>
                    </div>
                </div>
                <button type="button" id="add-picture">اضافه کردن تصویر جدید / Add new picture</button>
                <div id="sections">
                    <h3>بخش‌ها / Sections</h3>
                    <div class="section">
                        <label>بخش 1 / Section 1: <input type="text" name="بخش1" placeholder="عنوان بخش / Section title" title="عنوان بخش اول (آکاردئونی) / Title of the first section (accordion)" /></label>
                        <label>باز بخش 1 / Expand Section 1: <select name="باز بخش1" title="آیا بخش به صورت پیش‌فرض باز باشد؟ / Should the section be expanded by default?"><option value="خیر">خیر / No</option><option value="بله">بله / Yes</option></select></label>
                        <div class="rows">
                            <label>برچسب 1 1 / Label 1 1: <input type="text" name="برچسب1 1" placeholder="برچسب / Label" title="برچسب اولین ردیف در بخش اول / Label of the first row in the first section" /></label>
                            <label>اطلاعات 1 1 / Info 1 1: <textarea name="اطلاعات1 1" placeholder="اطلاعات / Info" title="اطلاعات اولین ردیف در بخش اول / Info of the first row in the first section"></textarea></label>
                            <button type="button" class="edit-wikitext" data-target="اطلاعات1 1">ویرایش با ویکی‌تکست</button>
                            <label>آیکون 1 1 / Icon 1 1: <input type="text" name="آیکون1 1" placeholder="آیکون (اختیاری) / Icon (optional)" title="آیکون برای اولین ردیف (اختیاری) / Icon for the first row (optional)" /></label>
                        </div>
                        <button type="button" class="add-row">اضافه کردن ردیف جدید / Add new row</button>
                    </div>
                </div>
                <button type="button" id="add-section">اضافه کردن بخش جدید / Add new section</button>
                <label>پایین / Below: <textarea name="پایین" placeholder="متن پایین جدول / Text below the table" title="متن پایین جدول / Text below the table"></textarea></label>
                <button type="button" class="edit-wikitext" data-target="پایین">ویرایش با ویکی‌تکست</button>
                <label>فوتر / Footer: <textarea name="فوتر" placeholder="متن فوتر / Footer text" title="متن فوتر اینفوباکس / Footer text of the infobox"></textarea></label>
                <button type="button" class="edit-wikitext" data-target="فوتر">ویرایش با ویکی‌تکست</button>
                <div class="advanced-settings">
                    <h3>تنظیمات پیشرفته / Advanced Settings</h3>
                    <label>کلاس دلخواه / Custom Class: <input type="text" name="کلاس دلخواه" placeholder="کلاس‌های CSS دلخواه / Custom CSS classes" title="کلاس‌های CSS دلخواه برای اینفوباکس / Custom CSS classes for the infobox" /></label>
                    <label>استایل دلخواه / Custom Style: <input type="text" name="استایل دلخواه" placeholder="استایل‌های CSS دلخواه / Custom CSS styles" title="استایل‌های CSS دلخواه برای اینفوباکس / Custom CSS styles for the infobox" /></label>
                    <label>شناسه / ID: <input type="text" name="شناسه" placeholder="شناسه دلخواه / Custom ID" title="شناسه (ID) دلخواه برای اینفوباکس / Custom ID for the infobox" /></label>
                    <label>عرض / Width: <input type="text" name="عرض" placeholder="عرض اینفوباکس (پیش‌فرض: 400) / Infobox width (default: 400)" title="عرض اینفوباکس (به پیکسل یا درصد) / Infobox width (in pixels or percentage)" value="400" /></label>
                    <label>واحد اندازه / Unit: <select name="واحد اندازه"><option value="px">پیکسل / Pixels</option><option value="%">درصد / Percentage</option></select></label>
                    <label>رنگ پس‌زمینه جدول / Table Background Color: <input type="color" name="رنگ پس زمینه جدول" title="رنگ پس‌زمینه کل جدول / Background color of the entire table" value="#ffffff" /></label>
                    <label>رنگ پس‌زمینه عنوان / Heading Background Color: <input type="color" name="رنگ پس زمینه عنوان" title="رنگ پس‌زمینه عنوان / Background color of the heading" value="#1e3c72" /></label>
                    <label>رنگ پس‌زمینه بالا / Above Background Color: <input type="color" name="رنگ پس زمینه بالا" title="رنگ پس‌زمینه بخش بالا / Background color of the above section" value="#f1f5f9" /></label>
                    <label>رنگ پس‌زمینه زیرعنوان / Subheader Background Color: <input type="color" name="رنگ پس زمینه زیرعنوان" title="رنگ پس‌زمینه زیرعنوان / Background color of the subheader" value="#f8fafc" /></label>
                    <label>رنگ پس‌زمینه تصویر / Picture Background Color: <input type="color" name="رنگ پس زمینه تصویر" title="رنگ پس‌زمینه تصویر / Background color of the picture" value="#ffffff" /></label>
                    <label>رنگ پس‌زمینه توضیح تصویر / Description Background Color: <input type="color" name="رنگ پس زمینه توضیح" title="رنگ پس‌زمینه توضیح تصویر / Background color of the picture description" value="#ffffff" /></label>
                    <label>رنگ سربرگ / Header Color: <input type="color" name="رنگ سربرگ" title="رنگ پس‌زمینه سربرگ‌ها / Background color of the headers" value="#34495e" /></label>
                    <label>رنگ برچسب / Label Color: <input type="color" name="رنگ برچسب" title="رنگ پس‌زمینه برچسب‌ها / Background color of the labels" value="#ecf0f1" /></label>
                    <label>رنگ اطلاعات / Data Color: <input type="color" name="رنگ اطلاعات" title="رنگ پس‌زمینه اطلاعات / Background color of the data" value="#ffffff" /></label>
                    <label>رنگ پس‌زمینه پایین / Below Background Color: <input type="color" name="رنگ پس زمینه پایین" title="رنگ پس‌زمینه بخش پایین / Background color of the below section" value="#f1f5f9" /></label>
                    <label>رنگ فوتر / Footer Color: <input type="color" name="رنگ فوتر" title="رنگ پس‌زمینه فوتر / Background color of the footer" value="#34495e" /></label>
                    <button type="button" id="save-colors">ذخیره رنگ‌ها / Save Colors</button>
                    <button type="button" id="cancel-colors">لغو / Cancel</button>
                </div>
                <div class="preview-container">
                    <h3>پیش‌نمایش اینفوباکس / Infobox Preview</h3>
                    <div id="infobox-preview"></div>
                    <button type="button" id="fullscreen-preview">پیش‌نمایش تمام‌صفحه / Fullscreen Preview</button>
                </div>
                <button type="button" id="copy-to-clipboard">کپی کد به کلیپ‌بورد / Copy Code to Clipboard</button>
                <button type="button" id="save-draft">ذخیره موقت / Save Draft</button>
            </form>
        ` );

        this.content = new OO.ui.PanelLayout( {
            padded: true,
            expanded: false
        } );
        this.content.$element.append( $form );
        this.$body.append( this.content.$element );

        var pictureCount = 1;
        $( '#add-picture' ).click( function () {
            pictureCount++;
            $( '#pictures' ).append( `
                <div class="picture-section">
                    <label>تصویر ${pictureCount} / Picture ${pictureCount}: <input type="text" name="تصویر${pictureCount}" placeholder="نام فایل (مثلاً image.jpg) / File name (e.g., image.jpg)" title="نام فایل تصویر (بدون [[File:]]) / File name of the picture (without [[File:]])" /></label>
                    <a href="https://commons.wikishia.net/common/Special:Upload" target="_blank">آپلود تصویر در ویکی‌شیعه / Upload picture on Wikishia</a>
                    <label>اندازه تصویر ${pictureCount} / Picture ${pictureCount} Size: <input type="number" name="اندازه تصویر${pictureCount}" placeholder="به پیکسل (اختیاری) / In pixels (optional)" title="اندازه تصویر به پیکسل (اگر خالی باشد، تمام‌عرض است) / Picture size in pixels (if empty, full width)" /></label>
                    <label>توضیح تصویر ${pictureCount} / Picture ${pictureCount} Description: <textarea name="توضیح تصویر${pictureCount}" placeholder="توضیح تصویر / Picture description" title="توضیح برای تصویر ${pictureCount} / Description for picture ${pictureCount}"></textarea></label>
                    <button type="button" class="edit-wikitext" data-target="توضیح تصویر${pictureCount}">ویرایش با ویکی‌تکست</button>
                </div>
            ` );
        } );

        var sectionCount = 1;
        $( '#add-section' ).click( function () {
            sectionCount++;
            $( '#sections' ).append( `
                <div class="section">
                    <label>بخش ${sectionCount} / Section ${sectionCount}: <input type="text" name="بخش${sectionCount}" placeholder="عنوان بخش / Section title" title="عنوان بخش ${sectionCount} (آکاردئونی) / Title of section ${sectionCount} (accordion)" /></label>
                    <label>باز بخش ${sectionCount} / Expand Section ${sectionCount}: <select name="باز بخش${sectionCount}" title="آیا بخش به صورت پیش‌فرض باز باشد؟ / Should the section be expanded by default?"><option value="خیر">خیر / No</option><option value="بله">بله / Yes</option></select></label>
                    <div class="rows">
                        <label>برچسب ${sectionCount} 1 / Label ${sectionCount} 1: <input type="text" name="برچسب${sectionCount} 1" placeholder="برچسب / Label" title="برچسب اولین ردیف در بخش ${sectionCount} / Label of the first row in section ${sectionCount}" /></label>
                        <label>اطلاعات ${sectionCount} 1 / Info ${sectionCount} 1: <textarea name="اطلاعات${sectionCount} 1" placeholder="اطلاعات / Info" title="اطلاعات اولین ردیف در بخش ${sectionCount} / Info of the first row in section ${sectionCount}"></textarea></label>
                        <button type="button" class="edit-wikitext" data-target="اطلاعات${sectionCount} 1">ویرایش با ویکی‌تکست</button>
                        <label>آیکون ${sectionCount} 1 / Icon ${sectionCount} 1: <input type="text" name="آیکون${sectionCount} 1" placeholder="آیکون (اختیاری) / Icon (optional)" title="آیکون برای اولین ردیف (اختیاری) / Icon for the first row (optional)" /></label>
                    </div>
                    <button type="button" class="add-row">اضافه کردن ردیف جدید / Add new row</button>
                </div>
            ` );
        } );

        $( document ).on( 'click', '.add-row', function () {
            var $section = $( this ).closest( '.section' );
            var sectionNum = $section.find( 'input[name^="بخش"]' ).attr( 'name' ).match( /\d+/ )[0];
            var rowCount = $section.find( '.rows label' ).length / 3 + 1;
            $section.find( '.rows' ).append( `
                <label>برچسب ${sectionNum} ${rowCount} / Label ${sectionNum} ${rowCount}: <input type="text" name="برچسب${sectionNum} ${rowCount}" placeholder="برچسب / Label" title="برچسب ردیف ${rowCount} در بخش ${sectionNum} / Label of row ${rowCount} in section ${sectionNum}" /></label>
                <label>اطلاعات ${sectionNum} ${rowCount} / Info ${sectionNum} ${rowCount}: <textarea name="اطلاعات${sectionNum} ${rowCount}" placeholder="اطلاعات / Info" title="اطلاعات ردیف ${rowCount} در بخش ${sectionNum} / Info of row ${rowCount} in section ${sectionNum}"></textarea></label>
                <button type="button" class="edit-wikitext" data-target="اطلاعات${sectionNum} ${rowCount}">ویرایش با ویکی‌تکست</button>
                <label>آیکون ${sectionNum} ${rowCount} / Icon ${sectionNum} ${rowCount}: <input type="text" name="آیکون${sectionNum} ${rowCount}" placeholder="آیکون (اختیاری) / Icon (optional)" title="آیکون برای ردیف ${rowCount} (اختیاری) / Icon for row ${rowCount} (optional)" /></label>
            ` );
        } );

        $( document ).on( 'click', '.edit-wikitext', function () {
            var target = $( this ).data( 'target' );
            var $textarea = $( 'textarea[name="' + target + '"]' );
            var currentText = $textarea.val();
            var wikitextDialog = new OO.ui.Dialog( {
                size: 'medium'
            } );
            wikitextDialog.$body.html( `
                <textarea id="wikitext-editor" style="width: 100%; height: 200px; font-family: monospace;">${currentText}</textarea>
            ` );
            wikitextDialog.getActions().set( [
                new OO.ui.ButtonWidget( {
                    label: 'ذخیره / Save',
                    flags: [ 'primary', 'progressive' ],
                    action: 'save'
                } ),
                new OO.ui.ButtonWidget( {
                    label: 'لغو / Cancel',
                    flags: [ 'safe', 'destructive' ],
                    action: 'cancel'
                } )
            ] );
            wikitextDialog.on( 'action', function ( action ) {
                if ( action === 'save' ) {
                    $textarea.val( $( '#wikitext-editor' ).val() );
                    updatePreview();
                }
                wikitextDialog.close();
            } );
            OO.ui.getWindowManager().openWindow( wikitextDialog );
        } );

        function updatePreview() {
            var lang = $( '#language-select' ).val();
            var wikitext = '{{اینفوباکس مدرن\n';
            wikitext += '|زبان=' + lang + '\n';
            $( '#modern-infobox-form' ).find( 'input, select, textarea' ).each( function () {
                var name = $( this ).attr( 'name' );
                var value = $( this ).val();
                if ( value && name && name !== 'زبان' ) {
                    wikitext += '|' + name + '=' + value + '\n';
                }
            } );
            wikitext += '}}';

            new mw.Api().post( {
                action: 'parse',
                text: wikitext,
                title: mw.config.get( 'wgPageName' ),
                prop: 'text',
                format: 'json'
            } ).done( function ( data ) {
                if ( data.parse && data.parse.text ) {
                    $( '#infobox-preview' ).html( data.parse.text['*'] );
                }
            } ).fail( function () {
                $( '#infobox-preview' ).html( '<p>خطا در بارگذاری پیش‌نمایش / Error loading preview</p>' );
            } );
        }

        $( '#modern-infobox-form' ).on( 'input change', 'input, select, textarea', function () {
            updatePreview();
        } );

        $( '#language-select' ).on( 'change', function () {
            var lang = $( this ).val();
            if ( lang === 'fa' ) {
                $( '.modern-infobox-form-container' ).css( 'direction', 'rtl' ).css( 'text-align', 'right' );
                $( '.modern-infobox-form-container label, .modern-infobox-form-container button, .modern-infobox-form-container h3' ).each( function () {
                    var text = $( this ).text();
                    if ( text.includes( '/' ) ) {
                        $( this ).text( text.split( '/' )[0].trim() );
                    }
                } );
                $( '.modern-infobox-form-container input, .modern-infobox-form-container textarea' ).each( function () {
                    var placeholder = $( this ).attr( 'placeholder' );
                    var title = $( this ).attr( 'title' );
                    if ( placeholder && placeholder.includes( '/' ) ) {
                        $( this ).attr( 'placeholder', placeholder.split( '/' )[0].trim() );
                    }
                    if ( title && title.includes( '/' ) ) {
                        $( this ).attr( 'title', title.split( '/' )[0].trim() );
                    }
                } );
            } else {
                $( '.modern-infobox-form-container' ).css( 'direction', 'ltr' ).css( 'text-align', 'left' );
                $( '.modern-infobox-form-container label, .modern-infobox-form-container button, .modern-infobox-form-container h3' ).each( function () {
                    var text = $( this ).text();
                    if ( text.includes( '/' ) ) {
                        $( this ).text( text.split( '/' )[1].trim() );
                    }
                } );
                $( '.modern-infobox-form-container input, .modern-infobox-form-container textarea' ).each( function () {
                    var placeholder = $( this ).attr( 'placeholder' );
                    var title = $( this ).attr( 'title' );
                    if ( placeholder && placeholder.includes( '/' ) ) {
                        $( this ).attr( 'placeholder', placeholder.split( '/' )[1].trim() );
                    }
                    if ( title && title.includes( '/' ) ) {
                        $( this ).attr( 'title', title.split( '/' )[1].trim() );
                    }
                } );
            }
            updatePreview();
        } );

        $( '#fullscreen-preview' ).click( function () {
            var wikitext = '{{اینفوباکس مدرن\n';
            wikitext += '|زبان=' + $( '#language-select' ).val() + '\n';
            $( '#modern-infobox-form' ).find( 'input, select, textarea' ).each( function () {
                var name = $( this ).attr( 'name' );
                var value = $( this ).val();
                if ( value && name && name !== 'زبان' ) {
                    wikitext += '|' + name + '=' + value + '\n';
                }
            } );
            wikitext += '}}';

            new mw.Api().post( {
                action: 'parse',
                text: wikitext,
                title: mw.config.get( 'wgPageName' ),
                prop: 'text',
                format: 'json'
            } ).done( function ( data ) {
                if ( data.parse && data.parse.text ) {
                    var fullscreenDialog = new OO.ui.Dialog( {
                        size: 'full'
                    } );
                    fullscreenDialog.$body.html( data.parse.text['*'] );
                    fullscreenDialog.getActions().set( [
                        new OO.ui.ButtonWidget( {
                            label: 'بستن / Close',
                            flags: [ 'safe', 'destructive' ],
                            action: 'close'
                        } )
                    ] );
                    fullscreenDialog.on( 'action', function () {
                        fullscreenDialog.close();
                    } );
                    OO.ui.getWindowManager().openWindow( fullscreenDialog );
                }
            } );
        } );

        $( '#copy-to-clipboard' ).click( function () {
            var wikitext = '{{اینفوباکس مدرن\n';
            wikitext += '|زبان=' + $( '#language-select' ).val() + '\n';
            $( '#modern-infobox-form' ).find( 'input, select, textarea' ).each( function () {
                var name = $( this ).attr( 'name' );
                var value = $( this ).val();
                if ( value && name && name !== 'زبان' ) {
                    wikitext += '|' + name + '=' + value + '\n';
                }
            } );
            wikitext += '}}';

            navigator.clipboard.writeText( wikitext ).then( function () {
                mw.notify( 'کد الگو با موفقیت کپی شد! / Code copied to clipboard successfully!', { type: 'success' } );
            }, function () {
                mw.notify( 'خطا در کپی کردن کد / Error copying code', { type: 'error' } );
            } );
        } );

        $( '#save-draft' ).click( function () {
            var formData = {};
            $( '#modern-infobox-form' ).find( 'input, select, textarea' ).each( function () {
                var name = $( this ).attr( 'name' );
                var value = $( this ).val();
                if ( name ) {
                    formData[name] = value;
                }
            } );
            localStorage.setItem( 'modernInfoboxDraft', JSON.stringify( formData ) );
            mw.notify( 'فرم به صورت موقت ذخیره شد / Form saved as draft', { type: 'success' } );
        } );

        var draft = localStorage.getItem( 'modernInfoboxDraft' );
        if ( draft ) {
            var formData = JSON.parse( draft );
            for ( var key in formData ) {
                $( '#modern-infobox-form' ).find( '[name="' + key + '"]' ).val( formData[key] );
            }
            updatePreview();
        }

        $( '#save-colors' ).click( function () {
            updatePreview();
            mw.notify( 'رنگ‌ها با موفقیت ذخیره شدند / Colors saved successfully', { type: 'success' } );
        } );

        $( '#cancel-colors' ).click( function () {
            $( '.advanced-settings input[type="color"]' ).each( function () {
                $( this ).val( $( this ).attr( 'value' ) );
            } );
            updatePreview();
            mw.notify( 'تغییرات رنگ لغو شد / Color changes canceled', { type: 'info' } );
        } );
    };

    ModernInfoboxDialog.prototype.getActionProcess = function ( action ) {
        if ( action === 'save' ) {
            var wikitext = '{{اینفوباکس مدرن\n';
            wikitext += '|زبان=' + $( '#language-select' ).val() + '\n';
            $( '#modern-infobox-form' ).find( 'input, select, textarea' ).each( function () {
                var name = $( this ).attr( 'name' );
                var value = $( this ).val();
                if ( value && name && name !== 'زبان' ) {
                    wikitext += '|' + name + '=' + value + '\n';
                }
            } );
            wikitext += '}}';

            var editor = $( '#wpTextbox1' );
            if ( editor.length ) {
                var currentText = editor.val();
                if ( currentText && !currentText.endsWith( '\n' ) ) {
                    currentText += '\n';
                }
                editor.val( currentText + wikitext );
            }

            return new OO.ui.Process( function () {
                this.close();
            }, this );
        } else if ( action === 'cancel' ) {
            return new OO.ui.Process( function () {
                this.close();
            }, this );
        }
        return ModernInfoboxDialog.super.prototype.getActionProcess.call( this, action );
    };

    $( '#t-moderninfoboxform' ).click( function ( e ) {
        e.preventDefault();

        var windowManager = new OO.ui.WindowManager();
        $( document.body ).append( windowManager.$element );

        var dialog = new ModernInfoboxDialog();
        windowManager.addWindows( [ dialog ] );
        windowManager.openWindow( dialog );
    } );
}( mw, jQuery, OO ) );