Initial commit

lib/assets/javascripts/dashboard/components/mamufas-import/mamufas-import-dialog-view.js

@@ -0,0 +1,26 @@
+const CoreView = require('backbone/core-view');
+const template = require('./mamufas-import-dialog.tpl');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+/**
+ *  Dialog for drop actions using mamufas
+ *
+ */
+
+const REQUIRED_OPTS = [
+  'modalModel'
+];
+
+module.exports = CoreView.extend({
+  className: 'Dialog-contentWrapper MamufasDialog',
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    this.$('.Dialog-content').addClass('Dialog-content--expanded');
+    this.$el.append(template());
+    return this;
+  }
+});

lib/assets/javascripts/dashboard/components/mamufas-import/mamufas-import-dialog.tpl

@@ -0,0 +1,18 @@
+<div class="CDB-Text Dialog-header MamufasDialog-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--neutral">
+    <i class="CDB-IconFont CDB-IconFont-step"></i>
+  </div>
+  <p class="Dialog-headerTitle">Drag and drop your data to this window</p>
+  <p class="Dialog-headerText">Drop your file to connect a new dataset.</p>
+</div>
+<div class="Dialog-body Dialog-body--expanded MamufasDialog-body">
+  <div class="MamufasDialog-dropZone">
+    <i class="CDB-IconFont CDB-IconFont-addDocument MamufasDialog-dropZoneIcon"></i>
+  </div>
+</div>
+<div class="CDB-Text Dialog-footer Dialog-footer--expanded MamufasDialog-footer">
+  <p class="MamufasDialog-footerInfo">
+    <i class="CDB-IconFont CDB-IconFont-info MamufasDialog-footerInfoIcon"></i>
+    Files like CSV, GPX, XLS and many more are supported
+  </p>
+</div>

lib/assets/javascripts/dashboard/components/mamufas-import/mamufas-import-view.js

@@ -0,0 +1,132 @@
+// require('dragster');
+const Dropzone = require('dropzone');
+const Backbone = require('backbone');
+const CoreView = require('backbone/core-view');
+const ModalsServiceModel = require('builder/components/modals/modals-service-model');
+const MamufasDialog = require('./mamufas-import-dialog-view');
+
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'userModel'
+];
+
+/**
+ *  Big mamufas to import files
+ *  using drag and drop
+ *
+ */
+
+module.exports = CoreView.extend({
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    this._modals = new ModalsServiceModel();
+    this.model = new Backbone.Model({ visible: false });
+  },
+
+  render: function () {
+    return this;
+  },
+
+  _createDragster: function () {
+    if (this.dragster) {
+      this._destroyDragster();
+    }
+    this.dragster = new Dragster(this.$el[0]); // eslint-disable-line
+  },
+
+  _createDropzone: function () {
+    if (this.dropzone) {
+      this._destroyDropzone();
+    }
+    this.dropzone = new Dropzone(this.$el[0], {
+      url: ':)',
+      autoProcessQueue: false,
+      previewsContainer: false
+    });
+  },
+
+  _destroyDragster: function () {
+    if (this.dragster) {
+      this.dragster.removeListeners();
+      this.dragster.reset();
+      delete this.dragster;
+    }
+  },
+
+  _destroyDropzone: function () {
+    if (this.dropzone) {
+      this.dropzone.destroy();
+      delete this.dropzone;
+    }
+  },
+
+  _initBinds: function () {
+    let mamufasDialog;
+    let modalModel;
+
+    this.$el.on('dragster:enter', () => {
+      modalModel = this._modals.create(function (model) {
+        mamufasDialog = new MamufasDialog({
+          modalModel: model
+        });
+
+        return mamufasDialog;
+      });
+
+      this.trigger('dialogOpened');
+    });
+
+    this.$el.on('dragster:leave', e => {
+      modalModel.destroy();
+      this.trigger('dialogClosed');
+    });
+
+    this.dropzone.on('drop', event => {
+      this.dragster.dragleave(event);
+      modalModel.destroy();
+      this.dropzone.removeFile(event);
+
+      let files = event.dataTransfer.files;
+
+      if (files && files.length > 0) {
+        if (files.length === 1) {
+          files = files[0];
+        }
+
+        this.trigger('fileDropped', files, this);
+      }
+
+      this.trigger('dialogClosed');
+    });
+  },
+
+  _removeBinds: function () {
+    this.$el.off('dragster:enter');
+    this.$el.off('dragster:leave');
+  },
+
+  enable: function () {
+    if (!this.model.get('visible')) {
+      this._createDragster();
+      this._createDropzone();
+      this._initBinds();
+      this.model.set('visible', true);
+    }
+  },
+
+  disable: function () {
+    if (this.model.get('visible')) {
+      this._removeBinds();
+      this._destroyDragster();
+      this._destroyDropzone();
+      this.model.set('visible', false);
+    }
+  },
+
+  clean: function () {
+    this._removeBinds();
+  }
+});