Merge branch 'Haocen-317', fixes #317, fixes #487

2019-08-21 07:15:09 +02:00 · 2019-08-21 07:15:09 +02:00 · 388655fdd1
commit 388655fdd1
parent 30ddcacca6 b7b7aa3a47
7 changed files with 162 additions and 31 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,10 +4,12 @@
    * ADDED: Translation for Bulgarian (#455)
    * CHANGED: Improved mobile UI - obscured send button and hard to click shortener button (#477)
    * CHANGED: Enhanced URL shortener integration (#479)
+    * CHANGED: Improved file upload drag & drop UI (#317)
    * FIXED: Clicking 'New' on a previously submitted paste does not blank address bar (#354)
    * FIXED: Clear address bar when create new paste from existing paste (#479)
    * FIXED: Discussion section not hiding when new/clone paste is clicked on (#484)
    * FIXED: Showdown.js error when posting svg qrcode (#485)
+    * FIXED: Failed to handle the case where user cancelled attachment selection properly (#487)
  * **1.3 (2019-07-09)**
    * ADDED: Translation for Czech (#424)
    * ADDED: Threat modeled the application (#177)
--- a/CREDITS.md
+++ b/CREDITS.md
@ -25,6 +25,7 @@ Sébastien Sauvage - original idea and main developer
 * PunKeel - first docker container
 * thororm - Display of video, audio & PDF, drag & drop, preview of attachments
 * Harald Leithner - base58 encoding of key
+* Haocen - lots of bugfixes and UI improvements

 ## Translations
 * Hexalyse - French
--- a/css/bootstrap/privatebin.css
+++ b/css/bootstrap/privatebin.css
@ -80,10 +80,29 @@ body.loading {
 	margin-bottom: 20px;
 }

+#dropzone {
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+	opacity: 0.6;
+	background-color: #99ccff;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 25vh;
+	outline: 2px dashed #228bff;
+	outline-offset: -50px;
+}
+
 .dragAndDropFile{
-	color:#777;
-	font-size:1em;
-	display:inline;
+	color: #777;
+	font-size: 1em;
+	display: inline;
+	white-space: normal;
 }

 #deletelink {
@ -124,6 +143,10 @@ body.loading {
 	margin-bottom: 10px;
 }

+#filewrap {
+	transition: background-color 0.75s ease-out;
+}
+
 .comment {
 	border-left: 1px solid #ccc;
 	padding: 5px 0 5px 10px;
@ -131,7 +154,7 @@ body.loading {
 	transition: background-color 0.75s ease-out;
 }

-.comment.highlight {
+.highlight {
 	background-color: #ffdd86;
 	transition: background-color 0.2s ease-in;
 }
--- a/css/privatebin.css
+++ b/css/privatebin.css
@ -115,10 +115,29 @@ h3.title {
 	margin-bottom: 20px;
 }

+#dropzone {
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1000;
+	opacity: 0.6;
+	background-color: #99ccff;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 25vh;
+	outline: 2px dashed #228bff;
+	outline-offset: -50px;
+}
+
 .dragAndDropFile{
-        color:#777;
-        font-size:1em;
-        display:inline;
+	color: #777;
+	font-size: 1em;
+	display: inline;
+	white-space: normal;
 }

 #status {
@ -405,6 +424,15 @@ h4.title {

 .commentdate { color: #bfcede; }

+#filewrap {
+	transition: background-color 0.75s ease-out;
+}
+
+.highlight {
+	background-color: #ffdd86;
+	transition: background-color 0.2s ease-in;
+}
+
 img.vizhash {
 	width: 16px;
 	height: 16px;
--- a/js/privatebin.js
+++ b/js/privatebin.js
@ -22,6 +22,27 @@
 /** global: showdown */
 /** global: kjua */

+jQuery.fn.draghover = function() {
+    return this.each(function() {
+        let collection = $(),
+            self = $(this);
+  
+        self.on('dragenter', function(e) {
+            if (collection.length === 0) {
+                self.trigger('draghoverstart');
+            }
+            collection = collection.add(e.target);
+        });
+  
+        self.on('dragleave drop', function(e) {
+            collection = collection.not(e.target);
+            if (collection.length === 0) {
+                self.trigger('draghoverend');
+            }
+        });
+    });
+};
+
 // main application start, called when DOM is fully loaded
 jQuery(document).ready(function() {
    'use strict';
@ -2492,7 +2513,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            file,
            $fileInput,
            $dragAndDropFileName,
-            attachmentHasPreview = false;
+            attachmentHasPreview = false,
+            $dropzone;

        /**
         * sets the attachment but does not yet show it
@ -2714,7 +2736,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                // revert loading status…
                me.hideAttachment();
                me.hideAttachmentPreview();
-                Alert.showError('Your browser does not support uploading encrypted files. Please use a newer browser.');
+                Alert.showError(
+                    I18n._('Your browser does not support uploading encrypted files. Please use a newer browser.')
+                );
                return;
            }

@ -2726,18 +2750,23 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                $dragAndDropFileName.text(loadedFile.name);
            }

-            file = loadedFile;
+            if (typeof loadedFile !== 'undefined') {
+                file = loadedFile;
+                fileReader.onload = function (event) {
+                    const dataURL = event.target.result;
+                    attachmentData = dataURL;

-            fileReader.onload = function (event) {
-                const dataURL = event.target.result;
-                attachmentData = dataURL;
+                    if (Editor.isPreview()) {
+                        me.handleAttachmentPreview($attachmentPreview, dataURL);
+                        $attachmentPreview.removeClass('hidden');
+                    }

-                if (Editor.isPreview()) {
-                    me.setAttachment(dataURL, loadedFile.name || '');
-                    $attachmentPreview.removeClass('hidden');
-                }
-            };
-            fileReader.readAsDataURL(loadedFile);
+                    TopNav.highlightFileupload();
+                };
+                fileReader.readAsDataURL(loadedFile);
+            } else {
+                me.removeAttachmentData();
+            }
        }

        /**
@ -2781,7 +2810,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                    );
                } else if (mimeType.match(/\/pdf/i)) {
                    // Fallback for browsers, that don't support the vh unit
-                    var clientHeight = $(window).height();
+                    const clientHeight = $(window).height();

                    $targetElement.html(
                        $(document.createElement('embed'))
@ -2808,12 +2837,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                return;
            }

-            const ignoreDragDrop = function(event) {
+            const handleDragEnterOrOver = function(event) {
                event.stopPropagation();
                event.preventDefault();
            };

-            const drop = function(event) {
+            const handleDrop = function(event) {
                const evt = event.originalEvent;
                evt.stopPropagation();
                evt.preventDefault();
@ -2830,9 +2859,19 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                }
            };

-            $(document).on('drop', drop);
-            $(document).on('dragenter', ignoreDragDrop);
-            $(document).on('dragover', ignoreDragDrop);
+            $(document).draghover().on({
+                'draghoverstart': function() {
+                    // show dropzone to indicate drop support
+                    $dropzone.removeClass('hidden');
+                },
+                'draghoverend': function() {
+                    $dropzone.addClass('hidden');
+                }
+            });
+
+            $(document).on('drop', handleDrop);
+            $(document).on('dragenter dragover', handleDragEnterOrOver);
+
            $fileInput.on('change', function () {
                readFileData();
            });
@ -2920,6 +2959,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                $attachmentLink = $('#attachment a');
                $attachmentPreview = $('#attachmentPreview');
                $dragAndDropFileName = $('#dragAndDropFileName');
+                $dropzone = $('#dropzone');

                $fileInput = $('#file');
                addDragDropHandler();
@ -3741,6 +3781,25 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            retryButtonCallback = callback;
        }

+        /**
+         * Highlight file upload
+         * 
+         * @name  TopNav.highlightFileupload
+         * @function
+         */
+        me.highlightFileupload = function()
+        {
+            // visually indicate file uploaded
+            const $attachDropdownToggle = $attach.children('.dropdown-toggle');
+            if ($attachDropdownToggle.attr('aria-expanded') === 'false') {
+                $attachDropdownToggle.click();
+            }
+            $fileWrap.addClass('highlight');
+            setTimeout(function () {
+                $fileWrap.removeClass('highlight');
+            }, 300);
+        }
+
        /**
         * init navigation manager
         *
@ -4479,7 +4538,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {

            // log detailed error, but display generic translation
            console.error(message);
-            Alert.showError('Could not decrypt data. Did you enter a wrong password? Retry with the button at the top.');
+            Alert.showError(
+                I18n._('Could not decrypt data. Did you enter a wrong password? Retry with the button at the top.')
+            );

            // reset password, so it can be re-entered
            Prompt.reset();
@ -4548,8 +4609,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
     * @param  {object} document
     * @class
     */
-    var InitialCheck = (function () {
-        var me = {};
+    const InitialCheck = (function () {
+        const me = {};

        /**
         * blacklist of UserAgents (parts) known to belong to a bot
@ -4762,7 +4823,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {

                // missing decryption key (or paste ID) in URL?
                if (window.location.hash.length === 0) {
-                    Alert.showError('Cannot decrypt paste: Decryption key missing in URL (Did you use a redirector or an URL shortener which strips part of the URL?)');
+                    Alert.showError(
+                        I18n._('Cannot decrypt paste: Decryption key missing in URL (Did you use a redirector or an URL shortener which strips part of the URL?)')
+                    );
                    return;
                }
            }
--- a/tpl/bootstrap.php
+++ b/tpl/bootstrap.php
@ -71,7 +71,7 @@ if ($MARKDOWN):
 endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-1.0.11.js" integrity="sha512-p7UyJuyBkhMcMgE4mDsgK0Lz70OvetLefua1oXs1OujWv9gOxh4xy8InFux7bZ4/DAZsTmO4rgVwZW9BHKaTaw==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-kQMNNeXI+TANiKlYOXFhSIpjoNl8++VpBHLsXMlCH4GTBLFc3cWSGo9ZbOSzctTZn3HFlnAfbOjvuK/qmRbWDA==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-9Da8DaTfUn0f3a/cW0wWDekZ97HkdI+Qpt4rT551a/JPMbHP3L0wG8OYwRxHn6qRgsMDBwzlE2yA1ZkDHlWe+Q==" crossorigin="anonymous"></script>
 		<!--[if IE]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;}</style>
 		<![endif]-->
@ -552,6 +552,13 @@ if ($DISCUSSION):
 		</div>
 <?php
 endif;
+?>
+<?php
+if ($FILEUPLOAD):
+?>
+		<div id="dropzone" class="hidden" tabindex="-1" aria-hidden="true"></div>
+<?php
+endif;
 ?>
 	</body>
 </html>
--- a/tpl/page.php
+++ b/tpl/page.php
@ -49,7 +49,7 @@ if ($MARKDOWN):
 endif;
 ?>
 		<script type="text/javascript" data-cfasync="false" src="js/purify-1.0.11.js" integrity="sha512-p7UyJuyBkhMcMgE4mDsgK0Lz70OvetLefua1oXs1OujWv9gOxh4xy8InFux7bZ4/DAZsTmO4rgVwZW9BHKaTaw==" crossorigin="anonymous"></script>
-		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-kQMNNeXI+TANiKlYOXFhSIpjoNl8++VpBHLsXMlCH4GTBLFc3cWSGo9ZbOSzctTZn3HFlnAfbOjvuK/qmRbWDA==" crossorigin="anonymous"></script>
+		<script type="text/javascript" data-cfasync="false" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-9Da8DaTfUn0f3a/cW0wWDekZ97HkdI+Qpt4rT551a/JPMbHP3L0wG8OYwRxHn6qRgsMDBwzlE2yA1ZkDHlWe+Q==" crossorigin="anonymous"></script>
 		<!--[if IE]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;}</style>
 		<![endif]-->
@ -254,6 +254,13 @@ if ($DISCUSSION):
 		</div>
 <?php
 endif;
+?>
+<?php
+if ($FILEUPLOAD):
+?>
+		<div id="dropzone" class="hidden" tabindex="-1" aria-hidden="true"></div>
+<?php
+endif;
 ?>
 		<section class="container">
 			<div id="noscript" role="alert" class="nonworking alert alert-info noscript-hide"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true">