89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
|
/* global Image */
|
||
|
|
|
||
|
|
var template = require('builder/components/mosaic/mosaic-item.tpl');
|
||
|
|
var MosaicItemView = require('builder/components/mosaic/mosaic-item-view');
|
||
|
|
var BasemapMosaicRemoveView = require('./basemap-mosaic-remove-view');
|
||
|
|
|
||
|
|
var DEFAULT_SUBDOMAIN = 'a';
|
||
|
|
var DEFAULT_X_POSITION = 30;
|
||
|
|
var DEFAULT_Y_POSISTION = 24;
|
||
|
|
var DEFAULT_ZOOM = 6;
|
||
|
|
var DEFAULT_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAZ9JREFUWAntWUtugzAUNKbAJl1EYtcz9Ba5UE6SC+UWPUN3SNlkw78zVhJRCeIXbCup6ic5gP08Ho/x40ESBauq6iNJkgPKDpdb1j3RTuM4HlH2ZVl+JySXpukXygaksiViRVEsNd3qu65Tfd/frpdO8jxXEGO2GcTUMAxtXddnYH1qKqe1fof3IrlZpECVJA6xMgiyMdzws0N5CzTealiIlpGbBsKz77nZSYAc67ck+NIWCbouj1cFL/eNK6df/UW7FztKMT7ZTOJDDMQ5RUyJGYK2IMyBm6ax4nFQGxZBEIStWFcH2TSu3pZjiCX2StDCf1VzJLhKtkmnqOBEjFWn/0tBaaB+REoTqJkJ2wxJpM3FtPvGMgQlabrkCUEcCcF7Kf9UBT5xvN6DIZbYK8Hp7H2dR4KuSkYFo4KPKBAiYTWBmoHznvEdQpKm82ljw+I4DObElJghaJu59AWHA9qw6CMlR9+4i6mCi0UFXdRj3z+hIL8Ju040VP+TBrkjtn0bagQH3JbcSHB/+WDNCgc8r11bZOdncjPfWV/5b4gfOaaYLUG/QVoAAAAASUVORK5CYII=';
|
||
|
|
var DEFAULT_NAME = _t('editor.layers.basemap.custom-basemap');
|
||
|
|
|
||
|
|
module.exports = MosaicItemView.extend({
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||
|
|
|
||
|
|
this._basemapsCollection = opts.basemapsCollection;
|
||
|
|
this._disabled = opts.disabled;
|
||
|
|
|
||
|
|
this._initBinds();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.$el.html(
|
||
|
|
template({
|
||
|
|
name: this._getName(),
|
||
|
|
template: this.model.get('template')(this._getImageURL())
|
||
|
|
})
|
||
|
|
);
|
||
|
|
this.$el.addClass('js-' + this.model.getValue());
|
||
|
|
this.$el.toggleClass('is-selected', !!this.model.get('selected'));
|
||
|
|
|
||
|
|
this._initViews();
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initViews: function () {
|
||
|
|
var basemapMosaicRemoveView = new BasemapMosaicRemoveView({
|
||
|
|
model: this.model,
|
||
|
|
basemapsCollection: this._basemapsCollection
|
||
|
|
});
|
||
|
|
this.addView(basemapMosaicRemoveView);
|
||
|
|
this.$el.append(basemapMosaicRemoveView.render().el);
|
||
|
|
},
|
||
|
|
|
||
|
|
_getImageURL: function () {
|
||
|
|
var self = this;
|
||
|
|
var url = this._lowerXYZ();
|
||
|
|
|
||
|
|
var image = new Image();
|
||
|
|
image.onerror = function () {
|
||
|
|
self.$('.js-thumbnailImg').attr('src', DEFAULT_IMG);
|
||
|
|
};
|
||
|
|
image.src = url;
|
||
|
|
|
||
|
|
return url;
|
||
|
|
},
|
||
|
|
|
||
|
|
_getSubdomain: function () {
|
||
|
|
var subdomains = this.model.get('subdomains'); // eg: 'abcd' or '1234'
|
||
|
|
|
||
|
|
return (subdomains && subdomains.length) ? subdomains[0] : DEFAULT_SUBDOMAIN;
|
||
|
|
},
|
||
|
|
|
||
|
|
_lowerXYZ: function () {
|
||
|
|
return this.model.get('urlTemplate')
|
||
|
|
.replace('{s}', this._getSubdomain())
|
||
|
|
.replace('{z}', DEFAULT_ZOOM)
|
||
|
|
.replace('{x}', DEFAULT_X_POSITION)
|
||
|
|
.replace('{y}', DEFAULT_Y_POSISTION);
|
||
|
|
},
|
||
|
|
|
||
|
|
_getName: function () {
|
||
|
|
var name = this.model.getName();
|
||
|
|
|
||
|
|
if (!name) {
|
||
|
|
name = this.model.get('order') ? DEFAULT_NAME + ' ' + this.model.get('order') : DEFAULT_NAME;
|
||
|
|
} else {
|
||
|
|
name.replace(/_/g, '');
|
||
|
|
}
|
||
|
|
|
||
|
|
return name;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|