diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb index 8b5f4974c..196215789 100644 --- a/app/assets/javascripts/protocols/steps.js.erb +++ b/app/assets/javascripts/protocols/steps.js.erb @@ -497,150 +497,6 @@ }); } - global.DroppedFiles = (function() { - var droppedFiles = []; - var filesValid = true; - var totalSize = 0; - - function init(files, action) { - for(var i = 0; i < files.length; i++) { - droppedFiles.push(files[i]); - } - if(action === 'select') { - listItems(); - } - } - - function filesStatus() { - return filesValid; - } - - function listItems() { - $('.panel-step-attachment-new').remove(); - dragNdropAssetsOff(); - for(var i = 0; i < droppedFiles.length; i++) { - $('#new-step-assets') - .append(_uploadedAseetPreview(droppedFiles[i], i)) - .promise() - .done(function() { - _removeItemHandler(i); - }); - } - _validateTotalSize(); - dragNdropAssetsInit(); - } - - function appendFilesToForm(ev) { - var regex = /step\[assets_attributes\]\[[0-9]*\]\[id\]/; - var prevEls = $('input').filter(function() { - return this.name.match(regex); - }); - - var fd = new FormData($(ev.target).closest('form').get(0)); - for(var i = 0; i < droppedFiles.length; i++) { - var index = i + prevEls.length; - var name = 'step[assets_attributes][' + index + '][file]'; - fd.append(name, droppedFiles[i]); - } - droppedFiles = []; - filesValid = true; - totalSize = 0; - dragNdropAssetsOff(); - return fd; - } - - function _validateFilesSize(file) { - if((file.size/1048576) > <%= Constants::FILE_MAX_SIZE_MB %> && filesValid ) { - return "

<%= I18n.t 'general.file.size_exceeded', file_size: Constants::FILE_MAX_SIZE_MB %>

"; - } - totalSize += parseInt(file.size/1048576); - return ''; - } - - function _validateTotalSize() { - if(totalSize > <%= Constants::FILE_MAX_SIZE_MB %>) { - filesValid = false; - $.each($('.panel-step-attachment-new'), function() { - $(this) - .find('.panel-body') - .append("

<%= I18n.t('general.file.total_size', size: Constants::FILE_MAX_SIZE_MB) %>

"); - }); - } else { - $('.dnd-error').remove(); - filesValid = true; - } - } - - function _uploadedAseetPreview(asset, i) { - var html = '
'; - html += '
'; - html += ''; - html += 'File'; - html += '
'; - html += ''; - html += '
'; - html += '
'; - html += ' '; - html += truncateLongString(asset.name, - <%= Constants::FILENAME_TRUNCATION_LENGTH %>); - html += _validateFilesSize(asset); - html += '
'; - return html; - } - - function _removeItemHandler(id) { - $('[data-item-id="' + id +'"]').off('click').on('click', function(e) { - e.preventDefault(); - e.stopImmediatePropagation(); - e.stopPropagation(); - var $el = $(this); - var index = $el.data('item-id'); - totalSize -= parseInt(droppedFiles[index]/1048576); - droppedFiles.splice(parseInt(index), 1); - $el.closest('.panel-step-attachment-new').remove(); - _validateTotalSize(); - }); - } - - return Object.freeze({ - init: init, - appendFilesToForm: appendFilesToForm, - listItems: listItems, - filesStatus: filesStatus - }) - })(); - - global.dragNdropAssetsInit = function() { - var in_window = true; - - $('body').on('drag dragstart dragend dragover dragenter dragleave drop', - function(e) { - e.preventDefault(); - e.stopPropagation(); - }).on('dragover', function() { - in_window = true; - $('.is-dragover').show(); - }).on('dragleave', function() { - in_window = false; - setTimeout(function() { - if(!in_window) { - $('.is-dragover').hide(); - } - }, 5000); - - }).on('drop', function(e) { - $('.is-dragover').hide(); - DroppedFiles.init(e.originalEvent.dataTransfer.files); - DroppedFiles.listItems(); - }); - - } - - global.dragNdropAssetsOff = function() { - $('body').off('drag dragstart dragend dragover dragenter dragleave drop'); - $('.is-dragover').hide(); - } - // New step AJAX function newStepHandler() { $("[data-action='new-step']").off().on('click', function(event) { @@ -695,9 +551,6 @@ $form.clearFormErrors(); $form.removeBlankFileForms(); - // var $fileInputs = $form.find("input[type=file]"); - // var filesValid = filesValidator(ev, $fileInputs, FileTypeEnum.FILE, true); - // debugger; var $checklists = $form.find(".nested_step_checklists"); var checklistsValid = checklistsValidator(ev, $checklists, editMode); var $nameInput = $form.find("#step_name"); @@ -707,7 +560,7 @@ var descriptionValid = textValidator(ev, $descrTextarea, 0, <%= Constants::TEXT_MAX_LENGTH %>); - if (DroppedFiles.filesStatus() && + if (DragNDrop.filesStatus() && checklistsValid && nameValid && descriptionValid) { @@ -721,12 +574,11 @@ setTimeout(function() { initStepsComments(); - animateSpinner(null, false); SmartAnnotation.preventPropagation('.atwho-user-popover'); }, 1000); animateSpinner(null, true); - var data = DroppedFiles.appendFilesToForm(ev); + var data = DragNDrop.appendFilesToForm(ev); data.append('step[description]', TinyMCE.getContent()); $.ajax({ url: $form.attr('action'), diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js.erb b/app/assets/javascripts/sitewide/drag_n_drop.js.erb new file mode 100644 index 000000000..d11098ad0 --- /dev/null +++ b/app/assets/javascripts/sitewide/drag_n_drop.js.erb @@ -0,0 +1,151 @@ +(function(global) { + 'use strict'; + + global.DragNDrop = (function() { + var droppedFiles = []; + var filesValid = true; + var totalSize = 0; + + function init(files, action) { + for(var i = 0; i < files.length; i++) { + droppedFiles.push(files[i]); + } + if(action === 'select') { + listItems(); + } + } + + // return the status of files if they are ready to submit + function filesStatus() { + return filesValid; + } + + // loops through a list of files and display each file in a separate panel + function listItems() { + $('.panel-step-attachment-new').remove(); + _dragNdropAssetsOff(); + for(var i = 0; i < droppedFiles.length; i++) { + $('#new-step-assets') + .append(_uploadedAseetPreview(droppedFiles[i], i)) + .promise() + .done(function() { + _removeItemHandler(i); + }); + } + _validateTotalSize(); + dragNdropAssetsInit(); + } + + // appent the files to the form before submit + function appendFilesToForm(ev) { + var regex = /step\[assets_attributes\]\[[0-9]*\]\[id\]/; + var prevEls = $('input').filter(function() { + return this.name.match(regex); + }); + + var fd = new FormData($(ev.target).closest('form').get(0)); + for(var i = 0; i < droppedFiles.length; i++) { + var index = i + prevEls.length; + var name = 'step[assets_attributes][' + index + '][file]'; + fd.append(name, droppedFiles[i]); + } + droppedFiles = []; + filesValid = true; + totalSize = 0; + _dragNdropAssetsOff(); + return fd; + } + + function _validateFilesSize(file) { + if((file.size/1048576) > <%= Constants::FILE_MAX_SIZE_MB %> && filesValid) { + return "

<%= I18n.t 'general.file.size_exceeded', file_size: Constants::FILE_MAX_SIZE_MB %>

"; + } + totalSize += parseInt(file.size/1048576); + return ''; + } + + function _validateTotalSize() { + if(totalSize > <%= Constants::FILE_MAX_SIZE_MB %>) { + filesValid = false; + $.each($('.panel-step-attachment-new'), function() { + $(this) + .find('.panel-body') + .append("

<%= I18n.t('general.file.total_size', size: Constants::FILE_MAX_SIZE_MB) %>

"); + }); + } else { + $('.dnd-error').remove(); + filesValid = true; + } + } + + function _uploadedAseetPreview(asset, i) { + var html = '
'; + html += '
'; + html += ''; + html += 'File'; + html += '
'; + html += ''; + html += '
'; + html += '
'; + html += ' '; + html += truncateLongString(asset.name, + <%= Constants::FILENAME_TRUNCATION_LENGTH %>); + html += _validateFilesSize(asset); + html += '
'; + return html; + } + + function _removeItemHandler(id) { + $('[data-item-id="' + id +'"]').off('click').on('click', function(e) { + e.preventDefault(); + e.stopImmediatePropagation(); + e.stopPropagation(); + var $el = $(this); + var index = $el.data('item-id'); + totalSize -= parseInt(droppedFiles[index]/1048576); + droppedFiles.splice(parseInt(index), 1); + $el.closest('.panel-step-attachment-new').remove(); + _validateTotalSize(); + }); + } + + function _dragNdropAssetsOff() { + $('body').off('drag dragstart dragend dragover dragenter dragleave drop'); + $('.is-dragover').hide(); + } + + return Object.freeze({ + init: init, + appendFilesToForm: appendFilesToForm, + listItems: listItems, + filesStatus: filesStatus + }) + })(); + + global.dragNdropAssetsInit = function() { + var in_window = true; + + $('body').on('drag dragstart dragend dragover dragenter dragleave drop', + function(e) { + e.preventDefault(); + e.stopPropagation(); + }).on('dragover', function() { + in_window = true; + $('.is-dragover').show(); + }).on('dragleave', function() { + in_window = false; + setTimeout(function() { + if(!in_window) { + $('.is-dragover').hide(); + } + }, 5000); + + }).on('drop', function(e) { + $('.is-dragover').hide(); + DragNDrop.init(e.originalEvent.dataTransfer.files); + DragNDrop.listItems(); + }); + } + +})(window); diff --git a/app/helpers/tiny_mce_helper.rb b/app/helpers/tiny_mce_helper.rb index 0b9da187e..62431604d 100644 --- a/app/helpers/tiny_mce_helper.rb +++ b/app/helpers/tiny_mce_helper.rb @@ -18,6 +18,7 @@ module TinyMceHelper end def generate_image_tag_from_token(text) + return unless text regex = /\[~tiny_mce_id:([0-9a-zA-Z]+)\]/ text.gsub(regex) do |el| match = el.match(regex) diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index d4ebcd9de..a0d90b9d0 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/app/views/my_modules/protocols.html.erb @@ -1,7 +1,7 @@ <% provide(:head_title, t("my_modules.protocols.head_title", project: h(@project.name), module: h(@my_module.name)).html_safe) %>
- Drop to add to Step + <%=t 'assets.drag_n_drop.drop_label' %>
<%= render partial: "shared/sidebar" %> <%= render partial: "shared/secondary_navigation" %> diff --git a/app/views/protocols/edit.html.erb b/app/views/protocols/edit.html.erb index 4a599f79f..6d7267509 100644 --- a/app/views/protocols/edit.html.erb +++ b/app/views/protocols/edit.html.erb @@ -1,5 +1,9 @@ <% provide(:head_title, t("protocols.edit.head_title")) %> +
+ <%=t 'assets.drag_n_drop.drop_label' %> +
+ <%= render partial: "protocols/breadcrumbs.html.erb", locals: { teams: @teams, current_team: @protocol.team, diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb index 8fa02775d..3925da662 100644 --- a/app/views/steps/_empty_step.html.erb +++ b/app/views/steps/_empty_step.html.erb @@ -43,9 +43,9 @@
- Drag & drop files here or