제이쿼리 최소화

templates/youtube-dl_download.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% macro setting_select2(id, title, options, col='9', desc=None, value=None) %}
+{% macro my_setting_select(id, title, options, col='9', desc=None, value=None) %}
     {{ macros.setting_top(title) }}
     <div class="input-group col-sm-{{ col }}">
         <select id="{{ id }}" name="{{ id }}" class="form-control form-control-sm">
@@ -31,68 +31,62 @@
 
 {% block content %}
 
-    <div>
+    <form id="download">
         {{ macros.setting_input_text('url', 'URL', placeholder='http:// 주소', desc='유튜브, 네이버TV 등 동영상 주소') }}
         {{ macros.setting_input_text('filename', '파일명', value=arg['filename'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#output-template 참고') }}
         {{ macros.setting_select('preset', '동영상 포맷 프리셋', arg['preset_list'], col='3') }}
         {{ macros.setting_input_text('format', '동영상 포맷', desc=['포맷 지정은 https://github.com/ytdl-org/youtube-dl/#format-selection 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }}
-        {{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
+        {{ my_setting_select('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
         {{ macros.setting_button([['download_btn', '다운로드']]) }}
-    </div>
+    </form>
 
     <script>
         "use strict";
         const package_name = '{{ arg["package_name"] }}';
 
-        $(function () {
-            // 프리셋 변경
-            $('#preset').change(function () {
-                if ($(this).val() === '_custom') {
-                    return;
-                }
-                $('#format').val($(this).val());
-            });
-            $('#format').change(function () {
-                $('#preset').val('_custom');
-            });
+        // 프리셋 변경
+        const preset = document.getElementById('preset');
+        const format = document.getElementById('format');
+        preset.addEventListener('change', () => {
+            if (preset.value !== '_custom') {
+                format.value = preset.value;
+            }
+        });
+        format.addEventListener('input', () => {
+            preset.value = '_custom';
+        });
 
-            // 후처리 변경
-            $('#postprocessor').change(function () {
-                if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') {
-                    $('#preset').val('bestaudio/best').change();
-                }
-            });
+        // 후처리 변경
+        const postprocessor = document.getElementById('postprocessor');
+        postprocessor.addEventListener('change', () => {
+            const select = postprocessor.selectedOptions[0];
+            if (select.parentElement.label === '오디오 추출') {
+                preset.value = 'bestaudio/best';
+                format.value = preset.value;
+            }
+        });
 
-            // 다운로드
-            $('#download_btn').click(function () {
-                let url = $('#url').val();
-                if (url.startsWith('http') === false) {
-                    $.notify('<strong>URL을 입력하세요.</strong>', {
-                        type: 'warning'
-                    });
-                    return false;
-                }
-                $.ajax({
-                    url: `/${package_name}/ajax/download`,
-                    type: 'POST',
-                    cache: false,
-                    data: {
-                        url: url,
-                        filename: $('#filename').val(),
-                        format: $('#format').val(),
-                        postprocessor: $('#postprocessor').val()
-                    },
-                    dataType: 'json'
-                }).done(function () {
-                    $.notify('<strong>분석중..</strong>', {
-                        type: 'info'
-                    });
-                }).fail(function () {
-                    $.notify('<strong>다운로드 요청 실패</strong>', {
-                        type: 'danger'
-                    });
-                });
-                return false;
+        // 다운로드
+        const download_btn = document.getElementById('download_btn');
+        download_btn.addEventListener('click', (event) => {
+            event.preventDefault();
+            const url = document.getElementById('url').value;
+            if (!url.startsWith('http')) {
+                notify('URL을 입력하세요.', 'warning');
+                return;
+            }
+
+            fetch(`/${package_name}/ajax/download`, {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                body: get_formdata('#download')
+            }).then(response => response.json()).then(() => {
+                notify('분석중..', 'info');
+            }).catch(() => {
+                notify('다운로드 요청 실패', 'danger');
             });
         });
     </script>