Initial commit

lib/assets/javascripts/builder/editor/export-image-pane/footer/footer-view.js

@@ -0,0 +1,53 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var template = require('./footer.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var LOADING = 'loading';
+
+var REQUIRED_OPTS = [
+  'userModel',
+  'configModel',
+  'formModel'
+];
+
+module.exports = CoreView.extend({
+  className: 'Editor-FooterInfoEditor',
+
+  events: {
+    'click .js-ok': '_finish'
+  },
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this.model = new Backbone.Model({ state: '' });
+
+    this.listenTo(this.model, 'change:state', this.render);
+    this.listenTo(this._formModel, 'change:errors', this.render);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template({
+      isLoading: this._isLoading(),
+      isDisabled: !(this._formModel.canExport() && !this._isLoading())
+    }));
+
+    return this;
+  },
+
+  stopLoader: function (e) {
+    this.model.unset('state');
+  },
+
+  _isLoading: function () {
+    return this.model.get('state') === LOADING;
+  },
+
+  _finish: function (e) {
+    this.killEvent(e);
+    this.model.set('state', LOADING);
+    this.trigger('finish', this);
+  }
+});

lib/assets/javascripts/builder/editor/export-image-pane/footer/footer.tpl

@@ -0,0 +1,14 @@
+<button class="CDB-Button CDB-Button--loading CDB-Button--primary js-ok track-ImageExport track-export
+  <% if (isLoading || isDisabled) { %> is-disabled <% } %>
+  <% if (isLoading) { %> is-loading <% } %>
+  "
+  <% if (isDisabled) { %> disabled <% } %>>
+  <div class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase u-flex">
+    <%- _t('editor.maps.export-image.export') %>
+  </div>
+  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
+    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
+      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
+    </svg>
+  </div>
+</button>