Added drag and drop plugin.

dragdrop/LICENSE

@@ -0,0 +1,20 @@
+Copyright (C) 2014 Mojo Lingo LLC
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

dragdrop/README.md

@@ -0,0 +1,19 @@
+# Drag and Drop
+
+A plugin for Candy Chat to allow drag and drop file uploads.
+
+Requires jquery-fileupload/basic.
+
+## Usage
+
+Include the JavaScript file:
+
+```HTML
+<script type="text/javascript" src="candyshop/dragdrop/dragdrop.js"></script>
+```
+
+To enable this plugin, add its `init` method after you `init` Candy, but before `Candy.connect()`:
+
+```JavaScript
+CandyShop.DragDrop.init();
+```

dragdrop/dragdrop.css

@@ -0,0 +1,49 @@
+.message-form-dropzone {
+  display: none;
+}
+
+.message-form-dropzone.show {
+  background: palegreen;
+  border: 2px dashed rgb(52, 167, 52);
+  display: initial;
+  font-weight: bold;
+  height: 30px;
+  line-height: 50px;
+  margin-bottom: 5px;
+  text-align: center;
+  width: 100%;
+}
+
+.message-form-dropzone.show.in.hover {
+  background: rgb(202, 235, 202);
+  border-color: rgb(98, 196, 98);
+}
+
+.message-form-dropzone {
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  opacity: 1;
+}
+
+.roomtype-lobby .message-form-dropzone {
+  display: none !important;
+}
+
+#fileupload {
+  display: none;
+}
+
+/* Style progress bar. */
+.file-progress-bar {
+  background: rgba(23, 99, 176, 0.24);
+  height: 20px;
+  width: 100%;
+}
+
+.file-progress-bar .bar {
+  background: #1763b0;
+  height: 100%;
+}

dragdrop/dragdrop.js

@@ -0,0 +1,106 @@
+//= require jquery-fileupload/basic
+
+/** File: dragdrop.js
+ * Candy Plugin Drag and Drop
+ * Author: Melissa Adamaitis <madamei@mojolingo.com>
+ */
+
+var CandyShop = (function(self) { return self; }(CandyShop || {}));
+
+CandyShop.DragDrop = (function(self, Candy, $) {
+  /** Object: about
+   *
+   * Contains:
+   *  (String) name - Candy Plugin Drag and Drop
+   *  (Float) version - 1.0
+   */
+  self.about = {
+    name: 'Candy Plugin Drag and Drop',
+    version: '1.0'
+  };
+
+  /**
+   * Initializes the CreateRoom plugin with the default settings.
+   */
+  self.init = function(){
+    $('#fileupload').fileupload({
+      drop: function (e, data) {
+        // Show that the image is loading.
+        Candy.View.Pane.Chat.Modal.show(self.Template.loading, false, true);
+      },
+      done: function (e, data) {
+        // Put the file url in the form input area.
+        $('.room-pane:visible .message-form input[name="message"]').val(window.location.origin + data.result.path);
+        // On image upload completion, remove the loading modal.
+        Candy.View.Pane.Chat.Modal.hide();
+      },
+      error: function(jqXHR, textStatus, errorThrown) {
+        Candy.View.Pane.Chat.Modal.show(Mustache.to_html(self.Template.failedUpload,
+          {errorMessage: errorThrown, statusCode: jqXHR.status}), true, false);
+      },
+      progressall: function (e, data) {
+        var progress = parseInt(data.loaded / data.total * 100, 10);
+        $('.file-progress-bar .bar').css('width', progress + '%');
+      }
+    });
+
+    $(Candy).on('candy:view.room.after-add', function() {
+      // Add the dropzone.
+      $('.message-form-wrapper').before(self.Template.dropzone);
+    });
+
+    // Bind on dragover.
+    $(document).bind('dragover', function (e) {
+      var dropZone = $('.room-pane:visible .message-form-dropzone'),
+        timeout = window.dropZoneTimeout;
+
+      dropZone.addClass('show');
+
+      if (!timeout) {
+        dropZone.addClass('in');
+      } else {
+        clearTimeout(timeout);
+      }
+
+      var found = false,
+        node = e.target;
+
+      do {
+        if (node === dropZone[0]) {
+          found = true;
+          break;
+        }
+        node = node.parentNode;
+      } while (node !== null);
+
+      if (found) {
+        dropZone.addClass('hover');
+      } else {
+        dropZone.removeClass('hover');
+      }
+
+      window.dropZoneTimeout = setTimeout(function () {
+        window.dropZoneTimeout = null;
+        dropZone.removeClass('in hover show');
+      }, 100);
+    });
+
+    $(document).bind('drop', function(e) {
+      // On a successful drop, put it in the input bar.
+      $('.room-pane:visible .message-form-dropzone').removeClass('in hover show');
+    });
+
+    // Prevent the default browser action.
+    $(document).bind('drop dragover', function (e) {
+      e.preventDefault();
+    });
+  };
+
+  self.Template = {
+    dropzone: '<div class="message-form-dropzone"></div>',
+    failedUpload: '<h4>File Upload Error</h4><p>{{statusCode}}: {{errorMessage}}</p>',
+    loading: '<h4>Loading...</h4><div class="file-progress-bar"><div class="bar" style="width: 0%"></div></div>'
+  };
+
+  return self;
+}(CandyShop.DragDrop || {}, Candy, jQuery));