scinote-web/app/assets/javascripts/sitewide/drag_n_drop.js.erb

(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 "<p><%= I18n.t 'general.file.size_exceeded', file_size: Constants::FILE_MAX_SIZE_MB %></p>";
      }
      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("<p class='dnd-error'><%= I18n.t('general.file.total_size', size: Constants::FILE_MAX_SIZE_MB) %></p>");
        });
      } else {
        $('.dnd-error').remove();
        filesValid = true;
      }
    }

    function _uploadedAseetPreview(asset, i) {
      var html = '<div class="panel panel-default panel-step-attachment-new">';
      html += '<div class="panel-heading">';
      html += '<span class="glyphicon glyphicon-file"></span>';
      html += 'File';
      html += '<div class="pull-right">';
      html += '<a data-item-id="' + i + '" href="#">';
      html += '<span class="glyphicon glyphicon-remove"></span></a></div></div>';
      html += '<div class="panel-body">';
      html += '<label class="control-label">';
      html += '<%= I18n.t 'assets.drag_n_drop.file_label' %></label> ';
      html += truncateLongString(asset.name,
                                 <%= Constants::FILENAME_TRUNCATION_LENGTH %>);
      html += _validateFilesSize(asset);
      html += '</div></div>';
      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);