Initial commit

lib/assets/javascripts/builder/components/modals/add-basemap/mapbox/mapbox-view.js

@@ -0,0 +1,117 @@
+var CoreView = require('backbone/core-view');
+var ViewFactory = require('builder/components/view-factory');
+var renderLoading = require('builder/components/loading/render-loading');
+var enterUrl = require('./enter-url.tpl');
+
+/**
+ * Represents the Mapbox tab content.
+ */
+
+module.exports = CoreView.extend({
+
+  events: {
+    'keydown': '_onKeyDown',
+    'keyup': '_onKeyUp'
+  },
+
+  initialize: function (opts) {
+    if (!opts.submitButton) throw new Error('submitButton is required');
+    if (!opts.modalFooter) throw new Error('modalFooter is required');
+
+    this._submitButton = opts.submitButton;
+    this._modalFooter = opts.modalFooter;
+    this._onClickBinded = this._onClickOK.bind(this);
+
+    this._bindSubmitButton();
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    var view;
+
+    switch (this.model.get('currentView')) {
+      case 'validatingInputs':
+        this._disableModalFooter(true);
+
+        view = ViewFactory.createByHTML(
+          renderLoading({
+            title: _t('components.modals.add-basemap.validating')
+          })
+        );
+        break;
+      case 'enterURL':
+      default:
+        this._disableModalFooter(false);
+
+        view = ViewFactory.createByHTML(
+          enterUrl({
+            url: this.model.get('url'),
+            lastErrorMsg: this.model.get('lastErrorMsg')
+          })
+        );
+    }
+    this.addView(view);
+    this.$el.append(view.render().el);
+
+    this._updateOkBtn();
+    this._onKeyUp();
+    return this;
+  },
+
+  _initBinds: function () {
+    this.model.bind('change', this.render, this);
+  },
+
+  _hasValues: function () {
+    return this._urlVal();
+  },
+
+  _urlVal: function () {
+    return this.$('.js-url').val();
+  },
+
+  _onClickOK: function (e) {
+    this.killEvent(e);
+
+    if (this._hasValues()) {
+      var url = this._urlVal();
+
+      this.model.validateInputs(url);
+    }
+  },
+
+  _disableModalFooter: function (disable) {
+    this._modalFooter.toggleClass('is-disabled', disable);
+  },
+
+  _updateOkBtn: function () {
+    this._submitButton.find('span').text(_t('components.modals.add-basemap.add-btn'));
+  },
+
+  _onKeyDown: function (e) {
+    e.stopPropagation();
+
+    this.$('.js-error').removeClass('is-visible');
+  },
+
+  _onKeyUp: function (e) {
+    e && e.stopPropagation();
+    this._submitButton.toggleClass('is-disabled', !this._hasValues());
+  },
+
+  _bindSubmitButton: function () {
+    this._submitButton.on('click', this._onClickBinded);
+  },
+
+  _unBindSubmitButton: function () {
+    this._submitButton.off('click', this._onClickBinded);
+  },
+
+  clean: function () {
+    this._unBindSubmitButton();
+    CoreView.prototype.clean.call(this);
+  }
+
+});