Initial commit

lib/assets/javascripts/builder/components/modals/add-layer/footer/footer-view.js

@@ -0,0 +1,95 @@
+var CoreView = require('backbone/core-view');
+var GuessingTogglerView = require('./guessing-toggler-view');
+var PrivacyTogglerView = require('./privacy-toggler-view');
+var template = require('./footer.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'privacyModel',
+  'guessingModel',
+  'createModel',
+  'userModel',
+  'configModel'
+];
+
+/**
+ * Footer view for the add layer modal.
+ */
+module.exports = CoreView.extend({
+  events: {
+    'click .js-ok': '_finish'
+  },
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.html(
+      template({
+        canFinish: this._createModel.canFinish(),
+        listing: this._createModel.get('listing')
+      })
+    );
+
+    this._initViews();
+
+    return this;
+  },
+
+  _initViews: function () {
+    var guessingTogglerView = new GuessingTogglerView({
+      guessingModel: this._guessingModel,
+      userModel: this._userModel,
+      createModel: this._createModel,
+      configModel: this._configModel
+    });
+    this.$('.js-footer-info').append(guessingTogglerView.render().el);
+    this.addView(guessingTogglerView);
+
+    var privacyTogglerView = new PrivacyTogglerView({
+      privacyModel: this._privacyModel,
+      userModel: this._userModel,
+      createModel: this._createModel,
+      configModel: this._configModel
+    });
+    this.$('.js-footerActions').prepend(privacyTogglerView.render().el);
+    this.addView(privacyTogglerView);
+  },
+
+  _initBinds: function () {
+    this.listenTo(this._createModel.getUploadModel(), 'change', this.render);
+    this.listenTo(this._createModel.getSelectedDatasetsCollection(), 'all', this._update);
+    this.listenTo(this._createModel, 'change', this._update);
+  },
+
+  _update: function () {
+    var contentPane = this._createModel.get('contentPane');
+    var listing = this._createModel.get('listing');
+    if (contentPane === 'listing' && listing !== 'scratch') {
+      this.render().show();
+    } else {
+      this.hide();
+    }
+  },
+
+  _finish: function (e) {
+    this.killEvent(e);
+    if (this._createModel.canFinish()) {
+      // Set proper guessing values before starting the upload
+      // if dialog is in import section
+      if (this._createModel.get('listing') === 'import') {
+        var uploadModel = this._createModel.getUploadModel();
+        uploadModel.setPrivacy(this._privacyModel.get('privacy'));
+        uploadModel.setGuessing(this._guessingModel.get('guessing'));
+      }
+      this._userModel.updateTableCount();
+      this._createModel.finish();
+    }
+  }
+
+});

lib/assets/javascripts/builder/components/modals/add-layer/footer/footer.tpl

@@ -0,0 +1,11 @@
+<div class="CreateDialog-footerShadow"></div>
+<div class="CreateDialog-footerLine"></div>
+<div class="CreateDialog-footerInner u-flex u-justifySpace u-alignCenter">
+  <div class="js-footer-info CreateDialog-footerInfo u-secondaryTextColor">
+  </div>
+  <div class="CreateDialog-footerActions js-footerActions">
+    <button class="js-ok CDB-Button CDB-Button--primary <%- canFinish ? '' : 'is-disabled' %>">
+      <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small u-upperCase"><%- _t('components.modals.add-layer.footer.add-layer') %></span>
+    </button>
+  </div>
+</div>

lib/assets/javascripts/builder/components/modals/add-layer/footer/guessing-toggler-view.js

@@ -0,0 +1,55 @@
+var CoreView = require('backbone/core-view');
+var template = require('./guessing-toggler.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'createModel',
+  'guessingModel',
+  'configModel',
+  'userModel'
+];
+
+/**
+* Manages if upcoming import should guess or not.
+ * Expected to be rendered in the footer of a create dialog.
+ */
+
+module.exports = CoreView.extend({
+
+  events: {
+    'click .js-toggle': '_toggle'
+  },
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initBinds();
+  },
+
+  render: function () {
+    var htmlStr = '';
+    if (this._createModel.showGuessingToggler()) {
+      var uploadModel = this._createModel.getUploadModel();
+      htmlStr = template({
+        isGuessingEnabled: this._guessingModel.get('guessing'),
+        importState: this._createModel.getImportState(),
+        isUploadValid: uploadModel.isValidToUpload(),
+        customHosted: this._configModel.get('cartodb_com_hosted'),
+        isTwitterDeprecatedForUser: !this._userModel.hasOwnTwitterCredentials()
+      });
+    }
+    this.$el.html(htmlStr);
+    return this;
+  },
+
+  _initBinds: function () {
+    this._createModel.bind('change', this.render, this);
+    this._guessingModel.bind('change', this.render, this);
+    this.add_related_model(this._createModel);
+  },
+
+  _toggle: function () {
+    var value = !this._guessingModel.get('guessing');
+    this._guessingModel.set('guessing', value);
+  }
+});

lib/assets/javascripts/builder/components/modals/add-layer/footer/guessing-toggler.tpl

@@ -0,0 +1,21 @@
+<% if (importState !== "twitter") { %>
+  <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl js-toggle">
+    <input class="CDB-Checkbox" type="checkbox" <%- isGuessingEnabled ? 'checked' : '' %>>
+    <span class="u-iBlock CDB-Checkbox-face"></span>
+    <label class="u-iBlock u-lSpace"><%- _t('components.modals.add-layer.footer.guessing-desc') %></label>
+  </div>
+<% } else if (isTwitterDeprecatedForUser) { %>
+  <div class="CDB-Text CDB-Size-medium">
+    <span class="Dialog-footerWarning">
+      <%- _t('components.modals.add-layer.footer.deprecated-connector') %>
+    </span>
+    <%= _t('components.modals.add-layer.footer.twitter-contact-support') %>
+  </div>
+<% } else if (!customHosted) { %>
+  <span class="CDB-Text CDB-Size-medium">
+    <%- _t('components.modals.add-layer.footer.twitter-how-to-historical') %>
+    <a href="mailto:support@carto.com">
+      <%- _t('components.modals.add-layer.footer.contact-team') %>
+    </a>
+  </span>
+<% } %>

lib/assets/javascripts/builder/components/modals/add-layer/footer/privacy-toggler-view.js

@@ -0,0 +1,89 @@
+var CoreView = require('backbone/core-view');
+var $ = require('jquery');
+var template = require('./privacy-toggler.tpl');
+var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var publicPrivacy = 'PUBLIC';
+var privatePrivacy = 'PRIVATE';
+
+var REQUIRED_OPTS = [
+  'createModel',
+  'privacyModel',
+  'configModel',
+  'userModel'
+];
+
+/**
+ *  Change the privacy of the new dataset.
+ *  - If the user can't change the privacy, it will refer to the upgrade page
+ *   unless app is the "open source" version
+ *
+ */
+
+module.exports = CoreView.extend({
+  events: {
+    'click': '_onClick'
+  },
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    if (this._createModel.showPrivacyToggler()) {
+      var canChangePrivacy = this._userModel.canCreatePrivateDatasets();
+      var privacy = this._privacyModel.get('privacy');
+      var isPublic = privacy === publicPrivacy;
+      var nextPrivacy = isPublic ? privatePrivacy : publicPrivacy;
+      var icon = isPublic ? 'unlock' : 'lock';
+      var upgradeUrl = this._configModel.get('upgrade_url') || window.upgrade_url;
+      var canUpgrade = !this._configModel.get('cartodb_com_hosted') && !canChangePrivacy && upgradeUrl;
+
+      this.$el.html(
+        template({
+          privacy: privacy,
+          isDisabled: !canChangePrivacy,
+          canUpgrade: canUpgrade,
+          nextPrivacy: nextPrivacy,
+          upgradeUrl: upgradeUrl,
+          icon: icon
+        })
+      );
+
+      this._initViews();
+    }
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this._privacyModel.bind('change:privacy', this.render, this);
+  },
+
+  _initViews: function () {
+    // Tooltip
+    this.addView(
+      new TipsyTooltipView({
+        el: this.$('.js-toggler'),
+        html: true,
+        title: function () {
+          return $(this).attr('data-title');
+        }
+      })
+    );
+  },
+
+  _onClick: function () {
+    if (this._userModel.canCreatePrivateDatasets()) {
+      var privacy = this._privacyModel.get('privacy');
+      this._privacyModel.set('privacy', privacy === publicPrivacy ? privatePrivacy : publicPrivacy);
+    }
+  }
+
+});

lib/assets/javascripts/builder/components/modals/add-layer/footer/privacy-toggler.tpl

@@ -0,0 +1,17 @@
+<% if (canUpgrade) { %>
+  <a href="<%- upgradeUrl %>" class="PrivacyToggler js-toggler PrivacyToggler--<%- privacy %> is-disabled"
+    data-title="<%- _t('components.modals.add-layer.footer.privacy-change-not-allowed') %>">
+    <i class="CDB-IconFont CDB-IconFont-<%- icon %>"></i>
+  </a>
+<% } else {%>
+  <button type="button" class="PrivacyToggler js-toggler PrivacyToggler--<%- privacy %> <%- isDisabled ? 'is-disabled' : '' %>"
+    data-title="
+      <% if (!isDisabled) { %>
+        <%- _t('components.modals.add-layer.footer.privacy-change', { privacy: privacy.toLowerCase() }) %>.<br /><%- _t('components.modals.add-layer.footer.privacy-click', { nextPrivacy: nextPrivacy.toLowerCase() }) %>.
+      <% } else { %>
+        <%- _t('components.modals.add-layer.footer.privacy-change-banned') %>
+      <% } %>
+    ">
+    <i class="CDB-IconFont CDB-IconFont-<%- icon %>"></i>
+  </button>
+<% } %>