Add drag-and-drop status bar.

Drag-and-drop status bar displays the helper text and
the loading effect.

client/css/scenic.css

@@ -429,3 +429,52 @@ body {
     max-width: none;
     max-height: none;
 }
+
+#DragAndDropStatusBar {
+    position: fixed;
+    height: 35px;
+    bottom: -35px;
+    background-color: black;
+    color: white;
+    -webkit-transition: all .2s linear;
+    -moz-transition: all .2s linear;
+    transition: all .2s linear;
+    width: 100%;
+    text-align: center;
+    line-height: 35px;
+    opacity: 0.8;
+    font-size: 20px;
+    font-weight: 200;
+}
+
+#DragAndDropStatusBar.uploading .dragover-text {
+    display: none;
+}
+
+#DragAndDropStatusBar .uploading-text {
+    display: none;
+    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
+        color-stop(.25, rgba(255, 255, 255, .10)),
+        color-stop(.25, transparent),
+        color-stop(.5, transparent),
+        color-stop(.5, rgba(255, 255, 255, .10)),
+        color-stop(.75, rgba(255, 255, 255, .10)),
+        color-stop(.75, transparent),
+        to(transparent));
+    background-image:
+        -moz-linear-gradient(-45deg,
+            rgba(255, 255, 255, .10) 25%,
+            transparent 25%,
+            transparent 50%, rgba(255, 255, 255, .10) 50%,
+            rgba(255, 255, 255, .10) 75%,
+            transparent 75%, transparent
+        );
+    background-size: 50px 50px;
+    -moz-background-size: 50px 50px;
+    -webkit-background-size: 50px 50px;
+    -webkit-animation: animate-stripes 2s linear infinite;
+}
+
+#DragAndDropStatusBar.uploading .uploading-text {
+    display: block;
+}

client/js/views/app-view.js

@@ -11,6 +11,8 @@ var AppView = Backbone.View.extend({
 
         // remove drag-and-drop upload handler
         $('html').off('drop.picture_upload');
+        $('html').off('dragover.picture_upload');
+        $('html').off('dragleave.picture_upload');
 
         // delete dialog if exists
         if(window._bootstrap_dialog) {

client/js/views/channel-view.js

@@ -1,5 +1,6 @@
 var ChannelView = Backbone.View.extend({
     channel: null,
+    statusbar: null,
     initialize: function(channel) {
         this.channel = channel;
     },
@@ -13,18 +14,51 @@ var ChannelView = Backbone.View.extend({
             this.renderEmptyChannel();
         }
 
+        this.statusbar = $(ich.drag_and_drop_status_bar({})).appendTo('#content');
+
         // set drag-and-drop upload handler
         $('html').off('drop.picture_upload');
+        $('html').off('dragover.picture_upload');
+        $('html').off('dragleave.picture_upload');
         $('html').filedrop({
             namespace: 'picture_upload',
             url: '/channel/'+_this.channel+'/upload',
             paramname: 'picture_uploaded',
             allowedfiletypes: ['image/jpeg','image/png','image/gif'],
             maxfilesize: 100,
+            dragOver: function() {
+                _this.statusbar.css({bottom: 0});
+            },
+            dragLeave: function() {
+                _this.statusbar.css({bottom: -1*_this.statusbar.height()});
+            },
+            drop: function() {
+                // start loading
+                _this.statusbar.addClass('uploading');
+            },
             uploadFinished: function(i, file, response, time) {
                 if(response !== 'success') {
                     console.log('Internal Server Error:'+response);
                 }
+
+                // finish loading
+                _this.statusbar.removeClass('uploading').css({bottom: -1*_this.statusbar.height()});
+            },
+            error: function(err, file) {
+                switch(err) {
+                    case 'BrowserNotSupported':
+                        alert('Browser does not support html5 drag and drop');
+                        break;
+                    case 'FileTypeNotAllowed':
+                        alert('Only jpg, jpeg, gif and png supported.');
+                        break;
+                    default:
+                        alert(err);
+                        break;
+                }
+
+                // finish loading
+                _this.statusbar.removeClass('uploading').css({bottom: -1*_this.statusbar.height()});
             }
         });
     },

views/templates.jade

@@ -144,3 +144,8 @@ script#show_pictures_template(type='text/html')
 script#picture_thumbnail_template(type='text/html')
     li
         img(src='/picture/{{ pid }}/thumbnail', alt='{{ pid }}')
+
+script#drag_and_drop_status_bar(type='text/html')
+    #DragAndDropStatusBar
+        .dragover-text Drop the file to upload!
+        .uploading-text Uploading...