Initial commit

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

@@ -0,0 +1,198 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var SelectLayerView = require('./select-layer-view');
+var ViewFactory = require('builder/components/view-factory');
+var ErrorView = require('builder/components/error/error-view');
+var renderLoading = require('builder/components/loading/render-loading');
+var enterUrl = require('./enter-url.tpl');
+var $ = require('jquery');
+
+/**
+ * Represents the WMS/WMTS tab category.
+ * Current state is defined by presence (or lack of) layers
+ */
+module.exports = CoreView.extend({
+
+  events: {
+    'keydown .js-search-input': '_onKeyDown',
+    'submit .js-search-form': 'killEvent',
+    'keydown .js-url': '_onKeydown',
+    'paste .js-url': '_onPaste',
+    'click .js-clean-search': '_onCleanSearchClick',
+    'click .js-search-link': '_submitSearch'
+  },
+
+  initialize: function (opts) {
+    if (!opts.customBaselayersCollection) throw new Error('customBaselayersCollection is required');
+    if (!opts.submitButton) throw new Error('submitButton is required');
+    if (!opts.modalFooter) throw new Error('modalFooter is required');
+
+    this._customBaselayersCollection = opts.customBaselayersCollection;
+    this._submitButton = opts.submitButton;
+    this._modalFooter = opts.modalFooter;
+    this._debouncedUpdate = _.debounce(this._update.bind(this), 150);
+    this._onClickBinded = this._onClickOK.bind(this);
+
+    this._bindSubmitButton();
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this._updateOkBtn();
+    this._disableOkBtn(true);
+
+    var view;
+
+    switch (this.model.get('currentView')) {
+      case 'savingLayer':
+        this._disableModalFooter(true);
+
+        view = ViewFactory.createByHTML(
+          renderLoading({
+            title: _t('components.modals.add-basemap.saving')
+          })
+        );
+        break;
+      case 'selectLayer':
+        this._disableModalFooter(true);
+
+        view = new SelectLayerView({
+          model: this.model,
+          customBaselayersCollection: this._customBaselayersCollection
+        });
+        break;
+      case 'saveFail':
+        this._disableModalFooter(true);
+
+        view = new ErrorView({
+          title: _t('components.modals.add-basemap.add-basemap-error')
+        });
+        break;
+      case 'fetchingLayers':
+        this._disableModalFooter(true);
+
+        view = ViewFactory.createByHTML(
+          renderLoading({
+            title: _t('components.modals.add-basemap.fetching')
+          })
+        );
+        break;
+      case 'enterURL':
+      default:
+        this._disableModalFooter(false);
+
+        view = ViewFactory.createByHTML(
+          enterUrl({
+            layersFetched: this.model.get('layersFetched'),
+            layers: this.model.wmsLayersCollection
+          })
+        );
+        break;
+    }
+    this.addView(view);
+    this.$el.append(view.render().el);
+
+    this.$('.js-search-input').focus();
+
+    return this;
+  },
+
+  _showCleanSearchButton: function () {
+    this.$('.js-clean-search').show();
+  },
+
+  _hideCleanSearchButton: function () {
+    this.$('.js-clean-search').hide();
+  },
+
+  _initBinds: function () {
+    this.model.bind('change', this.render, this);
+    this.model.bind('change', this._onChangeSearchQuery, this);
+    this.model.bind('layersFetched', this.render, this);
+  },
+
+  _onKeydown: function (e) {
+    e.stopPropagation();
+
+    this._debouncedUpdate();
+  },
+
+  _onPaste: function (e) {
+    e.stopPropagation();
+
+    this._debouncedUpdate();
+  },
+
+  _update: function (e) {
+    this._disableOkBtn(!this.$('.js-url').val());
+    this.$('.js-error').removeClass('is-visible'); // resets error state when changed
+  },
+
+  _disableOkBtn: function (disable) {
+    this._submitButton.toggleClass('is-disabled', disable);
+  },
+
+  _onKeyDown: function (e) {
+    var enterPressed = (e.keyCode === $.ui.keyCode.ENTER);
+
+    if (enterPressed) {
+      this.killEvent(e);
+
+      this._submitSearch();
+    }
+  },
+
+  _submitSearch: function (e) {
+    this.killEvent(e);
+
+    this.model.set('searchQuery', this.$('.js-search-input').val());
+  },
+
+  _onChangeSearchQuery: function () {
+    var searchQuery = this.model.get('searchQuery');
+
+    if (!searchQuery) {
+      this._hideCleanSearchButton();
+    }
+  },
+
+  _onCleanSearchClick: function (e) {
+    this.killEvent(e);
+
+    this.model.set('searchQuery', '');
+  },
+
+  _onClickOK: function (e) {
+    this.killEvent(e);
+
+    var url = this.$('.js-url').val();
+
+    if (url) {
+      this.model.fetchLayers(url);
+    }
+  },
+
+  _disableModalFooter: function (disable) {
+    this._modalFooter.toggleClass('is-disabled', disable);
+  },
+
+  _updateOkBtn: function () {
+    this._submitButton.find('span').text(_t('components.modals.add-basemap.get-layers'));
+  },
+
+  _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);
+  }
+
+});