change drag and drop UI refs #1335

codefirst · Oct 13, 2012 · d50ae00 · d50ae00
1 parent ce73c20
commit d50ae00
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 60 deletions.
diff --git a/app/assets/javascripts/jquery-dropUploader.js b/app/assets/javascripts/jquery-dropUploader.js
@@ -2,54 +2,10 @@
  * jQuery Plugin for HTML5 File API.
  */
 (function($, document, undefined){
-    /**
-     * add event handler for File API.
-     * @params {function} options.onDragstart function fired on dragstart (default: yes)
-     * @params {function} options.onProgress function fired on progress (default: yes)
-     * @params {function} options.onComplete function fired on complete
-     * @params {function} options.onMouseover function fired on mouseover (default: yes)
-     * @params {function} options.onMouseout function fired on mouseout (default: yes)
-     * @params {function} options.onError function fired on error
-     * @params {String} options.action action name in posting formdata (default: empty)
-     * @params {String} options.fieldName file field name in posting formdata (default: file)
-     * @params {String} options.mimetypeFieldName mime field name in posting formdata (default: mimetype)
-     * @params {Hash} options.params other parameters in posting formdata
-     * @return TODO
-     */
     $.fn.dropUploader = function(options){
         var self       = this;
         var options    = options;
 
-        /**
-         * _onDragstart
-         * @param {Object} elm
-         */
-        var _onDragstart = function(elm){
-            if(typeof options['onDragstart'] === 'function'){
-                options['onDragstart']();
-            }
-            else{
-                $(elm).css({
-                    "border" : "5px dotted #cccccc"
-                });
-            }
-        }
-
-        /**
-         * _onMouseout
-         * @param {Object} elm
-         */
-        var _onMouseout = function(elm){
-            if(typeof options['onMouseout'] === 'function'){
-                options['onMouseout']();
-            }
-            else{
-                $(elm).css({
-                    "border" : ""
-                });
-            }
-        }
-
         /**
          * _getAction
          * @param {string} action
@@ -81,19 +37,33 @@
             if(window.addEventListener){
                 elm.addEventListener(
                     'dragenter',
-                    function(e){
-                        _onDragstart(this);
-                        e.preventDefault();
-                    },
-                    false
+                    (options['onDragenter'] || function(){}),
+                    options['bubbling']
+                );
+                elm.addEventListener(
+                    'dragend',
+                    (options['onDragend'] || function(){}),
+                    options['bubbling']
+                );
+                elm.addEventListener(
+                    'dragover',
+                    (options['onDragover'] || function(){}),
+                    options['bubbling']
+                );
+                elm.addEventListener(
+                    'dragstart',
+                    (options['onDragstart'] || function(){}),
+                    options['bubbling']
                 );
                 elm.addEventListener(
                     'dragleave',
-                    function(e){
-                        _onMouseout(this);
-                        e.preventDefault();
-                    },
-                    false
+                    (options['onDragleave'] || function(){}),
+                    options['bubbling']
+                );
+                elm.addEventListener(
+                    'dragcancel',
+                    (options['onDragcancel'] || function(){}),
+                    options['bubbling']
                 );
                 elm.addEventListener(
                     'drop',
@@ -162,9 +132,9 @@
                             data.append(mimetypeFieldName, file.type);
                             xhr.send(data);
                         }
-                        _onMouseout(this);
+                        options['onDragleave'](e);
                     },
-                    false
+                    options['bubbling']
                 );
             }
         });

diff --git a/app/assets/javascripts/room.js b/app/assets/javascripts/room.js
@@ -109,12 +109,33 @@ $(function() {
     // ------------------------------
     // File DnD
     // ------------------------------
+    var uploadConfig = {
+        onDragenter : function(e){
+            $('.droppable').css({"display":"block"});
+            setTimeout(function(){
+                $('.droppable').css({"opacity":"1"});
+            }, 0);
+        }
+    };
+    $('body').dropUploader(uploadConfig);
     var uploadConfig = {
         action : AsakusaSatellite.url.message,
+        onDragleave : function(e){
+            $('.droppable').css({"opacity":"0"});
+            setTimeout(function(){
+                $('.droppable').css({"display":"none"});
+            },200);
+        },
+        onDragcancel : this['onDragleave'],
+        onDragover :
+        function(e){
+            e.preventDefault();
+            e.stopPropagation();
+        },
         params : [{ room_id : AsakusaSatellite.current.room},
-            { authenticity_token: AsakusaSatellite.form_auth }]
-    };
-    $('.message-list').dropUploader(uploadConfig);
-    $('#message').dropUploader(uploadConfig);
+                  { authenticity_token: AsakusaSatellite.form_auth }
+                 ]
+    }
+    $('.droppable').dropUploader(uploadConfig);
 });
 
diff --git a/app/assets/stylesheets/main.css.sass.erb b/app/assets/stylesheets/main.css.sass.erb
@@ -41,6 +41,19 @@ body
   :font-size 80%
   :border-top 1px solid #ccc
 
+.droppable
+  :position fixed
+  :left 0px
+  :top 0px
+  :width 100%
+  :height 100%
+  :z-index 1000
+  :display none
+  :opacity 0
+  :box-shadow 0px 0px 10px 5px #e2949b inset
+  :-moz-transition opacity 0.2s linear
+  :-webkit-transition opacity 0.2s linear
+
 .yield
   :width 660px
   :margin auto

diff --git a/app/views/chat/room.html.haml b/app/views/chat/room.html.haml
@@ -18,6 +18,7 @@
      =text_area_tag :message, '', :class => :text, :autofocus=>true, :placeholder=> t('placeholder_message')
      =submit_tag t(:send), :class => 'submit red button large', :id => 'send'
 .chat_room_bottom= raw(call_hook(:chat_room_bottom, :room => @room))
+.droppable
 
 = content_for :javascripts do
  - AsakusaSatellite::MessagePusher.jsFiles.each do|file|