121 lines
2.9 KiB
JavaScript
121 lines
2.9 KiB
JavaScript
|
var _ = require('underscore');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var template = require('./enter-url.tpl');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Represents the TileJSON tab content.
|
||
|
|
*/
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'keydown .js-url': '_onKeydown',
|
||
|
|
'paste .js-url': '_onPaste'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
if (!opts.submitButton) throw new Error('submitButton is required');
|
||
|
|
if (!opts.tileJSONLayerModel) throw new Error('tileJSONLayerModel is required');
|
||
|
|
|
||
|
|
this._submitButton = opts.submitButton;
|
||
|
|
this._tileJSONLayerModel = opts.tileJSONLayerModel;
|
||
|
|
this._lastURL = '';
|
||
|
|
this._debouncedUpdate = _.debounce(this._update.bind(this), 150);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this._updateOkBtn();
|
||
|
|
this._disableOkBtn(true);
|
||
|
|
|
||
|
|
this.$el.html(
|
||
|
|
template()
|
||
|
|
);
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_onKeydown: function (e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
this._debouncedUpdate();
|
||
|
|
},
|
||
|
|
|
||
|
|
_onPaste: function (e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
this._debouncedUpdate();
|
||
|
|
},
|
||
|
|
|
||
|
|
_update: function () {
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this._disableOkBtn(true);
|
||
|
|
this._indicateIsValidating(true);
|
||
|
|
|
||
|
|
var url = this._urlWithHTTP();
|
||
|
|
|
||
|
|
if (url === this._lastURL) {
|
||
|
|
// Even if triggered nothing really changed so just update UI and return early
|
||
|
|
this._indicateIsValidating(false);
|
||
|
|
this._updateError();
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this._lastURL = url;
|
||
|
|
|
||
|
|
this._indicateIsValidating(true);
|
||
|
|
|
||
|
|
this._tileJSONLayerModel.setUrl(url);
|
||
|
|
|
||
|
|
this._tileJSONLayerModel.fetch({
|
||
|
|
success: function (mdl) {
|
||
|
|
if (url === self._lastURL) {
|
||
|
|
self.model.set('layer', mdl.newTileLayer());
|
||
|
|
self._disableOkBtn(false);
|
||
|
|
self._indicateIsValidating(false);
|
||
|
|
self._updateError();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function () {
|
||
|
|
if (url === self._lastURL) {
|
||
|
|
self._indicateIsValidating(false);
|
||
|
|
// Note that this text can not be longer, or it will exceed available space of the error label.
|
||
|
|
self._updateError(_t('components.modals.add-basemap.tilejson.invalid'));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
_updateOkBtn: function () {
|
||
|
|
this._submitButton.find('span').text(_t('components.modals.add-basemap.add-btn'));
|
||
|
|
},
|
||
|
|
|
||
|
|
_disableOkBtn: function (disable) {
|
||
|
|
this._submitButton.toggleClass('is-disabled', disable);
|
||
|
|
},
|
||
|
|
|
||
|
|
_updateError: function (msg) {
|
||
|
|
this.$('.js-error').text(msg)[msg ? 'addClass' : 'removeClass']('is-visible');
|
||
|
|
},
|
||
|
|
|
||
|
|
_indicateIsValidating: function (indicate) {
|
||
|
|
if (indicate) {
|
||
|
|
this.$('.js-idle').hide();
|
||
|
|
this.$('.js-validating').show();
|
||
|
|
} else {
|
||
|
|
this.$('.js-validating').hide();
|
||
|
|
this.$('.js-idle').show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// So don't try to be fetched relatively to current URL path later
|
||
|
|
_urlWithHTTP: function () {
|
||
|
|
var str = this.$('.js-url').val();
|
||
|
|
|
||
|
|
if (str.indexOf('http://') === -1 && str.indexOf('https://') === -1) {
|
||
|
|
return 'http://' + str;
|
||
|
|
} else {
|
||
|
|
return str;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|