Drag and Drop файл-лист (трек-лист)

lufton

lufton

Пользователь
Ещё один мод, который, думаю, будет особенно полезным при создании релизов музыки. Для работы добавляем элемент "Drag and Drop файл-лист" после TXT[] и можно обычным перетягиванием загружать список файлов в textarea. Список при этом сортируется по алфавиту и от имени файлов "отрезается" расширение.
Для установки добавьте в конце styles\templates\posting_tpl.tpl:
HTML: 
<!--drag_drop_filelist-->
<style>
    textarea.drag-over {
        border: dashed;
        border-radius: 5px;
    }
</style>
<script>
    TPL.el_id = Object.assign({drag_drop_filelist: 'Drag and Drop файл-лист'}, TPL.el_id);
    $('body')
        .on('drop', 'textarea', e => {
            if ($(e.target).parent().has('.drag_drop_filelist').length) {
                e.preventDefault();
                let files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files;
                $(e.target).val($.map(files, (file)=>{return file.name.replace(/\.[^/.]+$/, "")}).sort().join('\r\n'));
            }
            $(e.target).removeClass('drag-over');
        })
        .on('dragover', 'textarea', e => {
            if ($(e.target).parent().has('.drag_drop_filelist').length) {
                e.preventDefault();
                $(e.target).addClass('drag-over');
            }
        })
        .on('dragleave', 'textarea', e => {
            $(e.target).removeClass('drag-over');
        });
</script>
<div id="drag_drop_filelist" style="display: none">
    <div class="drag_drop_filelist"></div>
</div>
<!--/drag_drop_filelist-->
Пример работы:
 
Сверху