diff --git a/nyaa/static/css/main.css b/nyaa/static/css/main.css index 6666cbb..c1367ff 100644 --- a/nyaa/static/css/main.css +++ b/nyaa/static/css/main.css @@ -173,6 +173,34 @@ table.torrent-list thead th.sorting_desc:after { } } +/* Upload page drop zone */ +#upload-drop-zone +{ + visibility: hidden; + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: 9999999999; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + transition: visibility 175ms, opacity 175ms; + display: table; + text-shadow: 1px 1px 2px #000; + color: #fff; + background: rgba(0, 0, 0, 0.45); + font: bold 42px Tahoma, sans-serif; +} + +#upload-drop-zone span +{ + display: table-cell; + text-align: center; + vertical-align: middle; + transition: font-size 175ms; +} + /* elasticsearch term highlight */ .hlt1 { font-style: normal; @@ -184,5 +212,5 @@ table.torrent-list thead th.sorting_desc:after { } ul.nav-tabs#profileTabs { - margin-bottom: 15px; + margin-bottom: 15px; } diff --git a/nyaa/static/js/main.js b/nyaa/static/js/main.js index d6c0314..341b104 100644 --- a/nyaa/static/js/main.js +++ b/nyaa/static/js/main.js @@ -18,10 +18,23 @@ $(document).on('change', ':file', function() { // We can watch for our custom `fileselect` event like this $(document).ready(function() { - $(':file').on('fileselect', function(event, numFiles, label) { + var dropZone = $('#upload-drop-zone'), + fileWarning = $('
').html('Invalid file selected. Please select a torrent file.') + .css({ id: 'file-warning', class: 'alert alert-warning text-center', + role: 'alert', width: $('.form-group:first').width() + 'px' }) + .hide().insertAfter(dropZone); + $(':file').on('fileselect', function(event, numFiles, label) { var input = $(this).parent().prev().find(':text'), log = numFiles > 1 ? numFiles + ' files selected' : label; + + if (label.endsWith('.torrent')) { + fileWarning.fadeOut('fast'); + } else { + fileWarning.fadeIn('fast'); + input.val(''); + return false; + } if (input.length) { input.val(log); @@ -29,6 +42,27 @@ $(document).ready(function() { if (log) alert(log); } }); + + $('body').on('dragenter', function(event) { + event.preventDefault(); + dropZone.css({ 'visibility': 'visible', 'opacity': 1 }); + }); + + dropZone.on('dragleave', function(event) { + event.preventDefault(); + $(this).css({ 'visibility': 'hidden', 'opacity': 0 }); + }); + + dropZone.on('dragover', function(event) { + event.preventDefault(); + }); + + dropZone.on('drop dragdrop', function(event) { + event.preventDefault(); + var files = event.originalEvent.dataTransfer.files; + $('#torrent_file')[0].files = files; + $(this).css({ 'visibility': 'hidden', 'opacity': 0 }); + }); }); function _format_time_difference(seconds) { diff --git a/nyaa/templates/upload.html b/nyaa/templates/upload.html index 5645fb5..0a49282 100644 --- a/nyaa/templates/upload.html +++ b/nyaa/templates/upload.html @@ -12,6 +12,7 @@ {% endif %} +