Drag and Drop продолжительность

lufton

lufton

Пользователь
Ещё один мод для работы с музыкальными релизами. Добавляете после поля Продолжительность и поле будет подсчитывать общую продолжительность перетянутых на него аудио-файлов (только файлы поддерживаемые вашим браузером).
Для установки добавьте в конце styles\templates\posting_tpl.tpl:
HTML: 
<!--drag_drop_duration-->
<style>
    input.drag-over {
        border: dashed;
        border-radius: 5px;
    }
</style>
<script>
    TPL.el_id = Object.assign({drag_drop_duration: 'Drag and Drop продолжительность'}, TPL.el_id);
    $('body')
        .on('drop', 'input[type=text]', e => {
            if ($(e.target).parent().has('.drag_drop_duration').length) {
                e.preventDefault();
                let files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files,
                    audios = new Set,
                    duration = 0;
                $.each(files, (i, file) => {
                    let audio = new Audio(URL.createObjectURL(file));
                    audio.oncanplaythrough = () => {
                        duration += audio.duration;
                        audios.delete(audio);
                        if (!audios.size) {
                            let date = new Date(1970, 0, 1);
                            date.setSeconds(Math.round(duration));
                            $(e.target).val(date.toTimeString().replace(/(\d\d:\d\d:\d\d).*/, '$1'));
                        }
                    };
                    audios.add(audio);
                });
            }
            $(e.target).removeClass('drag-over');
        })
        .on('dragover', 'input[type=text]', e => {
            if ($(e.target).parent().has('.drag_drop_duration').length) {
                e.preventDefault();
                $(e.target).addClass('drag-over');
            }
        })
        .on('dragleave', 'input[type=text]', e => {
            $(e.target).removeClass('drag-over');
        });
</script>
<div id="drag_drop_duration" style="display: none">
    <span class="drag_drop_duration"></span>
</div>
<!--/drag_drop_duration-->
Пример работы:
 
Сверху