diff --git a/dragdrop/LICENSE b/dragdrop/LICENSE new file mode 100644 index 0000000..c8d3f9e --- /dev/null +++ b/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. diff --git a/dragdrop/README.md b/dragdrop/README.md new file mode 100644 index 0000000..28d6173 --- /dev/null +++ b/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 + +``` + +To enable this plugin, add its `init` method after you `init` Candy, but before `Candy.connect()`: + +```JavaScript +CandyShop.DragDrop.init(); +``` diff --git a/dragdrop/dragdrop.css b/dragdrop/dragdrop.css new file mode 100644 index 0000000..5254511 --- /dev/null +++ b/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%; +} diff --git a/dragdrop/dragdrop.js b/dragdrop/dragdrop.js new file mode 100644 index 0000000..4bb670d --- /dev/null +++ b/dragdrop/dragdrop.js @@ -0,0 +1,106 @@ +//= require jquery-fileupload/basic + +/** File: dragdrop.js + * Candy Plugin Drag and Drop + * Author: Melissa Adamaitis + */ + +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: '
', + failedUpload: '

File Upload Error

{{statusCode}}: {{errorMessage}}

', + loading: '

Loading...

' + }; + + return self; +}(CandyShop.DragDrop || {}, Candy, jQuery));