ave-cms-alt/admin/templates/settings/settings_lang_edit.tpl

<div class="first"></div>
<div class="title"><h5>{#SETTINGS_LANG_EDIT#}</h5></div>

<div class="widget" style="margin-top: 0px;">
    <div class="body">{#SETTINGS_LANG_TITLE#}</div>
</div>

<div class="breadCrumbHolder module">
    <div class="breadCrumb module">
        <ul>
            <li class="firstB"><a href="index.php?pop=1">{#MAIN_PAGE#}</a></li>
            <li>{#SETTINGS_LANG_EDIT#}</li>
        </ul>
    </div>
</div>

<form method="post" id="lang_save_form" class="mainForm" enctype="multipart/form-data" action="index.php?do=settings&sub=language&func=save&cp={$sess}">
    <div class="widget first">
        <table cellpadding="0" cellspacing="0" width="100%" class="tableStatic">
            <col width="100" /><col width="100" /><col width="200" />
            <thead>
                <tr>
                    <td>{#SETTINGS_LANG_SYSTEM#} (en, ru)</td>
                    <td>{#SETTINGS_LANG_PREFIX#} (/en/)</td>
                    <td>{#SETTINGS_LANG_NAME#}</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><div class="pr12"><input {if !empty($items->Id)}readonly{/if} type="text" name="lang_key" id="lang_key" value="{$items->lang_key|default:''}" /></div></td>
                    <td><div class="pr12"><input type="text" name="lang_alias_pref" id="lang_alias_pref" value="{$items->lang_alias_pref|default:''}" /></div></td>
                    <td><div class="pr12"><input type="text" name="lang_name" id="lang_name" value="{$items->lang_name|default:''}" /></div></td>
                </tr>
                
                <tr>
                    <td colspan="3">
                        <div style="margin-bottom:10px;"><strong>{#SETTINGS_LANG_FLAG#}:</strong></div>
                        
                        <div id="current_flag_preview" style="display:inline-block; vertical-align: middle; margin-right: 20px;">
                            {if !empty($items->lang_key)}
                                <img src="/lib/flags/{$items->lang_key}.png" alt="" style="width: 16px; height: 11px; border: 1px solid #ccc;" />
                            {else}
                                <div style="width:16px; height:11px; border:1px dashed #ccc; display:inline-block;"></div>
                            {/if}
                        </div>

                        <div style="display:inline-block; vertical-align: middle;">
                            <input type="file" name="lang_flag" id="lang_flag" class="greyishBtn" />
                        </div>

                        <div style="margin-top:15px;">
                            <h6 style="padding: 5px 0;">
                                <a href="javascript:void(0);" id="toggle_gallery" class="expander" style="border-bottom: 1px dashed; text-decoration: none;">
                                    {#SETTINGS_SEL_FILE_FLAG#}
                                </a>
                            </h6>
                            
                            <div class="gallery_flags" style="display: none; height: 120px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; background: #f9f9f9; margin-top: 10px;">
                                {foreach from=$available_flags item=f_name}
                                    <img src="/lib/flags/{$f_name}.png" class="select_flag" data-name="{$f_name}" 
                                         title="{$f_name}" style="cursor:pointer; padding:5px; border: 1px solid transparent; width: 16px; height: 11px;" />
                                {/foreach}
                            </div>
                            <input type="hidden" name="server_flag_path" id="server_flag_path" value="" />
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan="3">
                        <input type="hidden" name="Id" value="{$items->Id|default:''}" />
                        
                        <a href="javascript:void(0);" class="button basicBtn blueBtn" id="submit_lang_form">
                            <span>{if empty($items->Id)}{#SETTINGS_LANG_ADD#}{else}{#SETTINGS_LANG_SAVE#}{/if}</span>
                        </a>
                        
                        <a href="javascript:void(0);" class="button basicBtn redBtn CloseLangDialog" style="margin-left:10px;">
                            <span>{#SETTINGS_JS_WIN_CLOSE#}</span>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="fix"></div>
    </div>
</form>

<style>
    .select_flag:hover { border-color: #3a6d9c !important; background: #eef; }
    .select_flag.active { border-color: #3a6d9c !important; background: #ddecff; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
    #toggle_gallery:hover { color: #3a6d9c; }
</style>

<script type="text/javascript">
{literal}
$(document).ready(function() {
    // Раскрытие/закрытие галереи
    $('#toggle_gallery').on('click', function() {
        $('.gallery_flags').slideToggle(200);
    });

    // Выбор флага из галереи
    $('.select_flag').on('click', function() {
        $('.select_flag').removeClass('active');
        $(this).addClass('active');
        $('#server_flag_path').val($(this).data('name'));
        $('#lang_flag').val(''); 

        // Обновляем превью сразу
        $('#current_flag_preview').html('<img src="/lib/flags/'+$(this).data('name')+'.png" style="width: 16px; height: 11px; border: 1px solid #ccc;" />');
    });

    $('#submit_lang_form').on('click', function(e) {
        e.preventDefault();

        var lKey  = $.trim($('#lang_key').val());
        var lPref = $.trim($('#lang_alias_pref').val());
        var lName = $.trim($('#lang_name').val());
        var lFile = $('#lang_flag').val();
        var lServer = $('#server_flag_path').val();
        var isNew = $('input[name="Id"]').val() == '' || $('input[name="Id"]').val() == '0';

        if (lKey == '' || lPref == '' || lName == '' || (isNew && lFile == '' && lServer == '')) {
            $.jGrowl('{/literal}{#SETTINGS_JS_FILL_ERR#}{literal}', { 
                header: '{/literal}{#SETTINGS_JS_FILL_HEAD#}{literal}', 
                theme: 'error', life: 3000 
            });
            return false;
        }

        var $form = $('#lang_save_form');
        var formData = new FormData($form[0]);

        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            beforeSend: function() {
                $.alerts._overlay('show');
            },
            success: function(data) {
                if (data.status === 'success') {
                    $.jGrowl('{/literal}{#SETTINGS_SAVED#}{literal}', { 
                        header: '{/literal}{#SETTINGS_JS_NOTIFY#}{literal}', 
                        theme: 'accept', life: 2000 
                    });
                    
                    setTimeout(function(){
                        var $dialog = $(".CloseLangDialog").closest('.ui-dialog-content');
                        if ($dialog.length) $dialog.dialog('close');
                        else window.location.reload();
                    }, 1000);
                }
            },
            error: function() {
                $.jGrowl('{/literal}{#SETTINGS_JS_SERVER_ERR#}{literal}', { theme: 'error' });
            },
            complete: function() {
                $.alerts._overlay('hide');
            }
        });
    });

    $(".CloseLangDialog").on('click', function(e) {
        e.preventDefault();
        var $dialog = $(this).closest('.ui-dialog-content');
        if ($dialog.length) $dialog.dialog('close');
    });

    var $container = $(".CloseLangDialog").closest('.ui-dialog-content');
    if ($container.length) {
        $container.off("dialogclose").on("dialogclose", function() {
            window.location.reload();
        });
    }
});
{/literal}
</script>