Initial commit

lib/assets/javascripts/builder/components/modals/map-metadata/footer/footer-view.js

@@ -0,0 +1,45 @@
+var CoreView = require('backbone/core-view');
+var template = require('./footer.tpl');
+
+module.exports = CoreView.extend({
+
+  tagName: 'ul',
+  className: 'Modal-listActions u-flex u-alignCenter ',
+
+  events: {
+    'click .js-save': '_save',
+    'click .js-close': '_close'
+  },
+
+  initialize: function (opts) {
+    if (!opts.visMetadataModel) throw new Error('visMetadataModel is required');
+    if (!opts.onSaveAction) throw new Error('onSaveAction is required');
+
+    this._visMetadataModel = opts.visMetadataModel;
+    this._onSaveAction = opts.onSaveAction;
+    this._onCloseAction = opts.onCloseAction;
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this._visMetadataModel.on('change', this.render, this);
+  },
+
+  render: function () {
+    this.$el.html(
+      template({
+        canFinish: this._visMetadataModel.isValid()
+      })
+    );
+    return this;
+  },
+
+  _save: function () {
+    this._visMetadataModel.isValid() && this._onSaveAction();
+  },
+
+  _close: function () {
+    this._onCloseAction && this._onCloseAction();
+  }
+
+});

lib/assets/javascripts/builder/components/modals/map-metadata/footer/footer.tpl

@@ -0,0 +1,15 @@
+<li class="Modal-listActionsitem">
+  <button class="CDB-Button CDB-Button--secondary CDB-Button--big js-close">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
+      <%- _t('components.modals.maps-metadata.cancel-btn') %>
+    </span>
+  </button>
+</li>
+<li class="Modal-listActionsitem">
+  <button class="CDB-Button CDB-Button--primary CDB-Button--big js-save <%- canFinish ? '' : 'is-disabled' %>">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase ">
+      <%- _t('components.modals.maps-metadata.save-btn') %>
+    </span>
+  </button>
+</li>
+

lib/assets/javascripts/builder/components/modals/map-metadata/form/form-view.js

@@ -0,0 +1,130 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var templateForm = require('./form.tpl');
+require('builder/components/form-components/index');
+var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+var utils = require('builder/helpers/utils');
+
+var REQUIRED_OPTS = [
+  'visDefinitionModel',
+  'visMetadataModel'
+];
+
+module.exports = CoreView.extend({
+  className: 'Metadata-form',
+
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(templateForm());
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    this._addInputView();
+    this._addTextareaView();
+    this._addTagsView();
+    this._addTooltip();
+  },
+
+  _addInputView: function () {
+    this._inputView = new Backbone.Form.editors.Text({
+      key: 'name',
+      model: this._visMetadataModel,
+      schema: {
+        options: this._visDefinitionModel.get('name'),
+        editorAttrs: {
+          placeholder: _t('components.modals.maps-metadata.form.name-placeholder')
+        }
+      }
+    });
+    this._inputView.on('change', this._commitView, this);
+
+    this.$('.js-name-field').append(this._inputView.render().$el);
+  },
+
+  _addTextareaView: function () {
+    this._textareaView = new Backbone.Form.editors.TextArea({
+      className: 'CDB-Textarea Metadata-textarea',
+      key: 'description',
+      model: this._visMetadataModel,
+      schema: {
+        options: this._visDefinitionModel.get('description'),
+        editorAttrs: {
+          placeholder: _t('components.modals.maps-metadata.form.description-placeholder')
+        }
+      }
+    });
+
+    this._textareaView.on('change', this._commitView, this);
+
+    this.$('.js-description-field').append(this._textareaView.render().$el);
+  },
+
+  _addTagsView: function () {
+    this._taglistView = new Backbone.Form.editors.Taglist({
+      key: 'tags',
+      model: this._visMetadataModel,
+      schema: {
+        options: {
+          tags: this._visDefinitionModel.get('tags') || []
+        }
+      }
+    });
+
+    this._taglistView.on('change', this._commitView, this);
+
+    this.$('.js-tags-field').append(this._taglistView.render().$el);
+    this.addView(this._taglistView);
+  },
+
+  _addTooltip: function () {
+    var title = this.$('.js-markdown').data('tooltip');
+    this._removeTooltip();
+
+    this._tooltip = new TipsyTooltipView({
+      el: this.$('.js-markdown'),
+      html: true,
+      title: function () {
+        return title;
+      }
+    });
+  },
+
+  _commitView: function (view) {
+    view.commit();
+    // Commit moves values from form to model. We need to override model value after commit()
+    if (view.model.changed.hasOwnProperty('name')) {
+      this._sanitizeName(view.model.get('name'));
+    }
+  },
+
+  _sanitizeName: function (name) {
+    this._visMetadataModel.set('name', utils.sanitizeHtml(name));
+  },
+
+  _removeTooltip: function () {
+    if (this._tooltip) {
+      this._tooltip.clean();
+    }
+  },
+
+  _removeBinds: function () {
+    this._inputView && this._inputView.off('change', this._commitView, this);
+    this._textareaView && this._textareaView.off('change', this._commitView, this);
+    this._taglistView && this._taglistView.off('change', this._commitView, this);
+  },
+
+  clean: function () {
+    this._removeBinds();
+    CoreView.prototype.clean.call(this);
+  }
+});

lib/assets/javascripts/builder/components/modals/map-metadata/form/form.tpl

@@ -0,0 +1,24 @@
+<div class="u-tSpace-xl CDB-Text u-flex js-name-field">
+  <label class="Metadata-label CDB-Text CDB-Size-medium is-semibold u-upperCase u-ellipsis"><%- _t('components.modals.maps-metadata.form.name') %></label>
+</div>
+
+<div class="u-tSpace-xl CDB-Text u-flex">
+  <label class="Metadata-label CDB-Text CDB-Size-medium is-semibold u-upperCase u-ellipsis"><%- _t('components.modals.maps-metadata.form.description') %></label>
+  <div class="u-grow">
+    <div class="js-description-field u-bSpace"></div>
+    <div class="Markdown">
+      <span class="Markdown-tooltip js-markdown" data-tooltip="<em>_italics_</em><br/><b>*bold*</b><br/>[link](http://link.com)">
+        <span class="Markdown-icon">
+          <i class="Markdown-icon-text">M</i>
+          <i class="Markdown-icon-char">￬</i>
+        </span>
+        <%- _t('components.modals.maps-metadata.form.markdown') %>
+      </span>
+    </div>
+  </div>
+
+</div>
+
+<div class="u-tSpace-xl CDB-Text u-flex u-alignCenter js-tags-field">
+  <label class="Metadata-label CDB-Text CDB-Size-medium is-semibold u-upperCase u-ellipsis"><%- _t('components.modals.maps-metadata.form.tags') %></label>
+</div>

lib/assets/javascripts/builder/components/modals/map-metadata/map-metadata-error.tpl

@@ -0,0 +1,24 @@
+<div class="IntermediateInfo">
+  <div class="Dialog-header Modal-header js-header">
+    <div class="Dialog-headerIcon Dialog-headerIcon--negative">
+      <i class="CDB-IconFont CDB-IconFont-cockroach"></i>
+    </div>
+    <h2 class="CDB-Text CDB-Size-large u-bSpace u-errorTextColor"><%- _t('components.modals.maps-metadata.error.title') %></h2>
+    <h3 class="CDB-Text CDB-Size-medium u-secondaryTextColor"><%= error %></h3>
+  </div>
+
+  <div class="Modal-body">
+    <div class="Modal-body-inner">
+
+      <div class="js-footer">
+        <ul class="Modal-actions is-narrow">
+          <li class="Modal-actions-button">
+            <button class="CDB-Button CDB-Button--primary js-back">
+              <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase"><%- _t('components.modals.maps-metadata.back-btn') %></span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

lib/assets/javascripts/builder/components/modals/map-metadata/map-metadata-view.js

@@ -0,0 +1,161 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var VisMetadataModel = require('builder/data/vis-metadata-model');
+var template = require('./map-metadata.tpl');
+var FooterView = require('./footer/footer-view');
+var templateError = require('./map-metadata-error.tpl');
+var templateLoading = require('builder/components/loading/render-loading');
+var FormView = require('./form/form-view');
+var saveMetadata = require('./save-metadata-map');
+var errorParser = require('builder/helpers/error-parser');
+var Notifier = require('builder/components/notifier/notifier');
+var utils = require('builder/helpers/utils');
+
+/**
+ * Add layer dialog, typically used from editor
+ */
+module.exports = CoreView.extend({
+  events: {
+    'click .js-back': '_onBackFromError'
+  },
+
+  className: 'Dialog-content Dialog-content--expanded',
+
+  initialize: function (opts) {
+    if (!opts.modalModel) throw new TypeError('modalModel is required');
+    if (!opts.visDefinitionModel) throw new TypeError('visDefinitionModel is required');
+
+    this._modalModel = opts.modalModel;
+    this._visDefinitionModel = opts.visDefinitionModel;
+
+    this._visMetadataModel = new VisMetadataModel({
+      name: this._visDefinitionModel.get('name'),
+      description: this._visDefinitionModel.get('description'),
+      tags: this._visDefinitionModel.get('tags')
+    });
+
+    this._stateModel = new Backbone.Model({
+      status: 'show'
+    });
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    if (this._hasError()) {
+      this._renderError();
+    } else if (this._isLoading()) {
+      this._renderLoading();
+    } else {
+      this.$el.html(template());
+      this._initViews();
+    }
+    return this;
+  },
+
+  _initViews: function () {
+    var formView = new FormView({
+      visDefinitionModel: this._visDefinitionModel,
+      visMetadataModel: this._visMetadataModel
+    });
+
+    this.$('.js-content').append(formView.render().el);
+    this.addView(formView);
+
+    var footerView = new FooterView({
+      visMetadataModel: this._visMetadataModel,
+      onSaveAction: this._onSave.bind(this),
+      onCloseAction: this._onClose.bind(this)
+    });
+
+    this.$('.js-footer').append(footerView.render().el);
+    this.addView(footerView);
+  },
+
+  _renderError: function () {
+    var error = this._stateModel.get('error');
+    this.$el.html(templateError({
+      error: _t('components.modals.maps-metadata.error.subtitle', {error: error})
+    }));
+  },
+
+  _renderLoading: function () {
+    this.$el.html(
+      templateLoading({
+        title: _t('components.modals.maps-metadata.loading')
+      })
+    );
+  },
+
+  _initBinds: function () {
+    this._stateModel.on('change:status', this.render, this);
+    this.add_related_model(this._stateModel);
+  },
+
+  _hasError: function () {
+    return this._stateModel.get('status') === 'error';
+  },
+
+  _isLoading: function () {
+    return this._stateModel.get('status') === 'loading';
+  },
+
+  _onSave: function () {
+    this._stateModel.set({status: 'loading'});
+
+    saveMetadata({
+      onSuccess: this._onSuccessSave.bind(this),
+      onError: this._onErrorSave.bind(this),
+      visDefinitionModel: this._visDefinitionModel,
+      name: this._getMetadataName(),
+      description: this._getMetadataDescription(),
+      tags: this._getMetadataTags()
+    });
+  },
+
+  _onSuccessSave: function () {
+    var self = this;
+    Notifier.addNotification({
+      status: 'success',
+      info: _t('components.modals.maps-metadata.success', {
+        name: self._getMetadataName()
+      }),
+      closable: true,
+      delay: Notifier.DEFAULT_DELAY
+    });
+
+    this._modalModel.destroy();
+  },
+
+  _onClose: function () {
+    this._modalModel.destroy();
+  },
+
+  _onErrorSave: function (e) {
+    this._stateModel.set({
+      status: 'error',
+      error: errorParser(e)
+    });
+  },
+
+  _onBackFromError: function () {
+    this._stateModel.set({status: 'show'});
+  },
+
+  _getMetadataName: function () {
+    return utils.sanitizeHtml(this._visMetadataModel.get('name'));
+  },
+
+  _getMetadataDescription: function () {
+    return utils.sanitizeHtml(this._visMetadataModel.get('description'));
+  },
+
+  _getMetadataTags: function () {
+    return _.map(this._visMetadataModel.get('tags'), function (tag) {
+      return utils.sanitizeHtml(tag);
+    });
+  }
+});

lib/assets/javascripts/builder/components/modals/map-metadata/map-metadata.tpl

@@ -0,0 +1,22 @@
+<div class="u-flex u-justifyCenter">
+  <div class="Modal-inner Modal-inner--grid u-flex u-justifyCenter">
+    <div class="Modal-icon">
+      <svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <g id="Group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <path d="M16,13 L17,13 L17,5.5 C17,5.433 16.986,5.368 16.961,5.308 C16.936,5.247 16.899,5.192 16.853,5.146 L11.854,0.147 C11.808,0.101 11.753,0.064 11.692,0.039 C11.632,0.014 11.567,0 11.5,0 L0.5,0 C0.224,0 0,0.224 0,0.5 L0,21.5 C0,21.776 0.224,22 0.5,22 L9.5,22 L9.5,21 L1,21 L1,1 L11,1 L11,5.5 C11,5.776 11.224,6 11.5,6 L16,6 L16,13 L16,13 Z M12,1.707 L15.293,5 L12,5 L12,1.707 L12,1.707 Z" id="Shape" fill="#2E3C43"></path>
+              <path d="M23.854,14.646 L21.354,12.146 C21.166,11.958 20.834,11.958 20.647,12.146 L13.146,19.648 C13.089,19.705 13.054,19.773 13.03,19.845 C13.028,19.852 13.021,19.857 13.019,19.865 L12.019,23.365 C11.969,23.539 12.018,23.727 12.146,23.856 C12.241,23.951 12.369,24.002 12.5,24.002 C12.546,24.002 12.592,23.996 12.637,23.983 L16.137,22.983 C16.144,22.981 16.149,22.974 16.157,22.972 C16.229,22.948 16.297,22.913 16.354,22.856 L23.855,15.354 C24.05,15.158 24.05,14.842 23.854,14.646 L23.854,14.646 Z M16,21.795 L14.207,20.002 L19.001,15.207 L20.794,17 L16,21.795 L16,21.795 Z M13.747,20.957 L15.045,22.255 L13.228,22.775 L13.747,20.957 L13.747,20.957 Z M21.501,16.293 L19.708,14.5 L21.001,13.207 L22.794,15 L21.501,16.293 L21.501,16.293 Z" id="Shape" fill="#2E3C43"></path>
+          </g>
+      </svg>
+    </div>
+    <div>
+      <h2 class="CDB-Text CDB-Size-huge is-light u-bSpace--xl">
+        <%- _t('components.modals.maps-metadata.modal-title') %>
+      </h2>
+      <p class="CDB-Text CDB-Size-large u-altTextColor">
+        <%- _t('components.modals.maps-metadata.modal-desc') %>
+      </p>
+      <div class="Modal-listTextItem js-content"></div>
+      <div class="js-footer"></div>
+    </div>
+  </div>
+</div>

lib/assets/javascripts/builder/components/modals/map-metadata/save-metadata-map.js

@@ -0,0 +1,31 @@
+var TITLE_SUFIX = require('builder/components/modals/visualization-title-suffix-metadata');
+
+module.exports = function (opts) {
+  if (!opts.visDefinitionModel) throw new Error('visDefinitionModel is required');
+  if (!opts.name) throw new Error('name is required');
+
+  var visDefinitionModel = opts.visDefinitionModel;
+  var successCallback = opts.onSuccess;
+  var errorCallback = opts.onError;
+  var name = opts.name;
+  var description = opts.description;
+  var tags = opts.tags;
+
+  var oldName = visDefinitionModel.get('name');
+
+  visDefinitionModel.save({
+    name: name,
+    description: description,
+    tags: tags
+  }, {
+    wait: true,
+    success: function (mdl, attrs) {
+      document.title = name + TITLE_SUFIX;
+      successCallback && successCallback();
+    },
+    error: function (mdl, e) {
+      document.title = oldName + TITLE_SUFIX;
+      errorCallback && errorCallback(e);
+    }
+  });
+};