Initial commit
This commit is contained in:
zhongjin
+6
@@ -0,0 +1,6 @@
|
||||
<div class="js-selector">
|
||||
<div class="Editor-HeaderInfo-title u-bSpace--m">
|
||||
<h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large"><%- _t('editor.layers.basemap.category.title-label') %></h2>
|
||||
</div>
|
||||
<p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m js-highlight"><%- _t('editor.layers.basemap.category.select-category') %></p>
|
||||
</div>
|
||||
Executable
+32
@@ -0,0 +1,32 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./basemap-categories.tpl');
|
||||
var CarouselFormView = require('builder/components/carousel-form-view');
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.categoriesCollection) throw new Error('categoriesCollection is required');
|
||||
|
||||
this._categoriesCollection = opts.categoriesCollection;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
|
||||
this.$el.html(template());
|
||||
|
||||
this._renderCarousel();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_renderCarousel: function () {
|
||||
var view = new CarouselFormView({
|
||||
collection: this._categoriesCollection,
|
||||
template: require('./basemap-carousel.tpl')
|
||||
});
|
||||
this.addView(view);
|
||||
this.$('.js-select').append(view.render().el);
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+4
@@ -0,0 +1,4 @@
|
||||
<div class="Editor-HeaderInfo">
|
||||
<div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
|
||||
<div class="Editor-HeaderInfo-inner CDB-Text js-select"></div>
|
||||
</div>
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
var _ = require('underscore');
|
||||
var Backbone = require('backbone');
|
||||
var DEBOUNCE_TIME = 650;
|
||||
|
||||
module.exports = Backbone.Model.extend({
|
||||
|
||||
initialize: function (attrs, opts) {
|
||||
if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
|
||||
this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
this._disabled = opts.disabled;
|
||||
|
||||
this._generateSchema();
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this._onChange = this._onChange.bind(this);
|
||||
this.bind('change', _.debounce(this._onChange, DEBOUNCE_TIME), this);
|
||||
},
|
||||
|
||||
_onChange: function () {
|
||||
if (this.hasChanged('color')) {
|
||||
var color = this.get('color').color.fixed;
|
||||
this._updatePlainBasemap(color);
|
||||
}
|
||||
},
|
||||
|
||||
_updatePlainBasemap: function (color) {
|
||||
var plainBasemap = this._basemapsCollection.find(function (mdl) {
|
||||
return mdl.get('className') === 'plain';
|
||||
});
|
||||
var isAlreadySelected = plainBasemap.get('selected');
|
||||
|
||||
plainBasemap.set({
|
||||
color: color,
|
||||
image: '',
|
||||
maxZoom: 32
|
||||
});
|
||||
|
||||
if (isAlreadySelected) {
|
||||
this._layerDefinitionsCollection.setBaseLayer(plainBasemap.toJSON());
|
||||
} else {
|
||||
this._basemapsCollection.updateSelected(plainBasemap.getValue());
|
||||
}
|
||||
},
|
||||
|
||||
_generateSchema: function () {
|
||||
this.schema = {
|
||||
color: {
|
||||
type: 'Fill',
|
||||
title: _t('editor.layers.basemap.style.color'),
|
||||
options: [],
|
||||
editorAttrs: {
|
||||
color: {
|
||||
hidePanes: ['value'],
|
||||
disableOpacity: true
|
||||
},
|
||||
disabled: this._disabled
|
||||
},
|
||||
validators: ['required']
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
var Backbone = require('backbone');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./basemap-form.tpl');
|
||||
var BasemapFormModel = require('./basemap-form-model');
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
|
||||
this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
this._disabled = opts.disabled;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
this.$el.html(template());
|
||||
|
||||
this._generateForms();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_generateForms: function () {
|
||||
if (this._formView) {
|
||||
this._formView.remove();
|
||||
}
|
||||
|
||||
var color = {
|
||||
color: {
|
||||
fixed: '',
|
||||
opacity: 1
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof this.model.get('color') === 'string') {
|
||||
color.color.fixed = this.model.get('color');
|
||||
}
|
||||
|
||||
this._formModel = new BasemapFormModel({
|
||||
color: color,
|
||||
image: this.model.get('image') || ''
|
||||
}, {
|
||||
basemapsCollection: this._basemapsCollection,
|
||||
layerDefinitionsCollection: this._layerDefinitionsCollection,
|
||||
disabled: this._disabled
|
||||
});
|
||||
|
||||
this._formView = new Backbone.Form({
|
||||
model: this._formModel
|
||||
});
|
||||
|
||||
this._formView.bind('change', function () {
|
||||
this.commit();
|
||||
});
|
||||
|
||||
this.$('.js-form').append(this._formView.render().$el);
|
||||
},
|
||||
|
||||
clean: function () {
|
||||
if (this._formView) {
|
||||
this._formView.remove();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
<div class="js-selector">
|
||||
<div class="Editor-HeaderInfo-title u-bSpace--m">
|
||||
<h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large"><%- _t('editor.layers.infowindow.style.title-label') %></h2>
|
||||
</div>
|
||||
<p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m js-highlight"><%- _t('editor.layers.infowindow.style.select-style') %></p>
|
||||
</div>
|
||||
|
||||
<div class="js-form"></div>
|
||||
Executable
+36
@@ -0,0 +1,36 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./basemap-header.tpl');
|
||||
|
||||
var DEFAULT_NAME = _t('editor.layers.basemap.custom-basemap');
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.category) throw new Error('category is required');
|
||||
|
||||
this.category = opts.category;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(
|
||||
template({
|
||||
title: _t('editor.layers.basemap.title-label'),
|
||||
description: this._getName()
|
||||
})
|
||||
);
|
||||
return this;
|
||||
},
|
||||
|
||||
_getName: function () {
|
||||
var name = this.model.getName();
|
||||
|
||||
if (!name) {
|
||||
name = DEFAULT_NAME;
|
||||
} else {
|
||||
name = this.model.getName().replace(/_/g, '') + ' ' + _t('editor.layers.basemap.by') + ' ' + this.category;
|
||||
}
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
});
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
<ul class="Editor-breadcrumb">
|
||||
<li class="Editor-breadcrumbItem CDB-Text CDB-Size-medium u-actionTextColor">
|
||||
<button class="js-back">
|
||||
<i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large u-rSpace"></i>
|
||||
|
||||
<span class="Editor-breadcrumbLink">
|
||||
<%- _t('back') %>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="Editor-breadcrumbItem CDB-Text CDB-Size-medium">
|
||||
<span class="Editor-breadcrumbSep"> / </span>
|
||||
<%- _t('editor.layers.breadcrumb.basemap-options') %>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="Editor-HeaderInfo u-alignStart">
|
||||
<div class="Editor-HeaderInfo-inner">
|
||||
<div class="Editor-HeaderInfo-title u-bSpace">
|
||||
<h2 class="Editor-HeaderInfo-titleText CDB-Text CDB-Size-huge is-light u-ellipsis"><%- description %></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Executable
+1
@@ -0,0 +1 @@
|
||||
<img src="data:image/png;base64,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" />
|
||||
Executable
+6
@@ -0,0 +1,6 @@
|
||||
<svg width="23px" height="25px" viewBox="1383 664 23 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(1383.000000, 664.000000)">
|
||||
<path d="M19.04725,12.691 C19.12525,12.504 19.08225,12.289 18.93925,12.146 L9.93925,3.146 C9.84125,3.049 9.71325,3 9.58525,3 L9.58525,2.5 C9.58525,1.122 8.46325,0 7.08525,0 C5.70725,0 4.58525,1.122 4.58525,2.5 L4.58525,7.793 L0.73125,11.647 C-0.24375,12.622 -0.24375,14.208 0.73125,15.183 L5.40325,19.854 C5.87525,20.326 6.50325,20.586 7.17125,20.586 C7.83925,20.586 8.46625,20.326 8.93925,19.854 L15.79225,13 L18.58525,13 C18.78725,13 18.97025,12.878 19.04725,12.691 L19.04725,12.691 Z M5.58525,2.5 C5.58525,1.673 6.25825,1 7.08525,1 C7.91225,1 8.58525,1.673 8.58525,2.5 L8.58525,3.793 L5.58525,6.793 L5.58525,2.5 L5.58525,2.5 Z M15.58525,12 C15.45225,12 15.32525,12.053 15.23125,12.146 L8.23125,19.146 C7.66525,19.712 6.67625,19.712 6.11025,19.146 L1.43825,14.475 C0.85325,13.89 0.85325,12.938 1.43825,12.353 L5.38925,8.401 C5.42025,8.377 5.44725,8.351 5.47125,8.32 L8.58525,5.207 L8.58525,10.5 C8.58525,10.776 8.80925,11 9.08525,11 C9.36125,11 9.58525,10.776 9.58525,10.5 L9.58525,4.207 L17.37825,12 L15.58525,12 L15.58525,12 Z" id="Shape" fill="#AAAAAA"></path>
|
||||
<path d="M20.01225,15.241 C19.83125,14.942 19.33825,14.942 19.15825,15.241 C18.89425,15.674 16.58525,19.522 16.58525,21 C16.58525,22.654 17.93125,24 19.58525,24 C21.23925,24 22.58525,22.654 22.58525,21 C22.58525,19.522 20.27625,15.674 20.01225,15.241 L20.01225,15.241 Z M19.58525,23 C18.48225,23 17.58525,22.103 17.58525,21 C17.58525,20.225 18.68125,18.061 19.58525,16.485 C20.48925,18.061 21.58525,20.225 21.58525,21 C21.58525,22.103 20.68825,23 19.58525,23 L19.58525,23 Z" id="Shape" fill="#AAAAAA"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
Executable
+3
@@ -0,0 +1,3 @@
|
||||
<svg width="22px" height="24px" viewBox="966 769 22 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M973.5,791.5 L966.5,786.5 L966.5,770.5 L973.5,775.5 L980.5,770.5 L987.5,775.5 L987.5,791.5 L980.5,786.5 L973.5,791.5 Z M973.5,775.5 L973.5,791.5 L973.5,775.5 Z M980.5,786.5 L980.5,770.531 L980.5,786.5 Z" id="Shape" stroke="#AAAAAA" stroke-width="1" fill="none"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 437 B |
Executable
+1
@@ -0,0 +1 @@
|
||||
<p class="CDB-Text CDB-Size-small u-upperCase u-altTextColor">Google maps</p>
|
||||
Executable
+1
File diff suppressed because one or more lines are too long
Executable
+1
@@ -0,0 +1 @@
|
||||
<p class="CDB-Text CDB-Size-small u-upperCase u-altTextColor">Mapbox</p>
|
||||
Executable
+1
@@ -0,0 +1 @@
|
||||
<p class="CDB-Text CDB-Size-small u-upperCase u-altTextColor">nasa</p>
|
||||
Executable
+1
File diff suppressed because one or more lines are too long
+1
@@ -0,0 +1 @@
|
||||
<p class="CDB-Text CDB-Size-small u-upperCase u-altTextColor">tilejson</p>
|
||||
Executable
+1
@@ -0,0 +1 @@
|
||||
<p class="CDB-Text CDB-Size-small u-upperCase u-altTextColor">wms/wmts</p>
|
||||
+85
@@ -0,0 +1,85 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var BasemapCategoriesView = require('./basemap-categories-view');
|
||||
var BasemapSelectView = require('./basemap-select-view');
|
||||
var template = require('./basemap-inner.tpl');
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
className: 'Editor-inner',
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.categoriesCollection) throw new Error('categoriesCollection is required');
|
||||
if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
if (!opts.customBaselayersCollection) throw new Error('customBaselayersCollection is required');
|
||||
if (!opts.modals) throw new Error('modals is required');
|
||||
|
||||
this._categoriesCollection = opts.categoriesCollection;
|
||||
this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
this._customBaselayersCollection = opts.customBaselayersCollection;
|
||||
this._modals = opts.modals;
|
||||
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this.model.bind('change:disabled', function () {
|
||||
this._renderSelect();
|
||||
}, this);
|
||||
|
||||
this._basemapsCollection.bind('add remove', function () {
|
||||
this._renderSelect();
|
||||
}, this);
|
||||
this.add_related_model(this._basemapsCollection);
|
||||
|
||||
this._categoriesCollection.bind('change:selected', this._renderSelect, this);
|
||||
this.add_related_model(this._categoriesCollection);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
this.$el.html(template());
|
||||
|
||||
this._initViews();
|
||||
return this;
|
||||
},
|
||||
|
||||
_initViews: function () {
|
||||
this._renderCategories();
|
||||
this._renderSelect();
|
||||
},
|
||||
|
||||
_renderCategories: function () {
|
||||
if (this._categoriesView) {
|
||||
this.removeView(this._categoriesView);
|
||||
this._categoriesView.clean();
|
||||
}
|
||||
|
||||
this._categoriesView = new BasemapCategoriesView({
|
||||
categoriesCollection: this._categoriesCollection
|
||||
});
|
||||
|
||||
this.addView(this._categoriesView);
|
||||
this.$('.js-basemapCategory').html(this._categoriesView.render().el);
|
||||
},
|
||||
|
||||
_renderSelect: function () {
|
||||
if (this._selectView) {
|
||||
this.removeView(this._selectView);
|
||||
this._selectView.clean();
|
||||
}
|
||||
|
||||
this._selectView = new BasemapSelectView({
|
||||
layerDefinitionsCollection: this._layerDefinitionsCollection,
|
||||
basemapsCollection: this._basemapsCollection,
|
||||
customBaselayersCollection: this._customBaselayersCollection,
|
||||
selectedCategoryVal: this._categoriesCollection.getSelectedValue(),
|
||||
modals: this._modals,
|
||||
disabled: this.model.get('disabled')
|
||||
});
|
||||
this.addView(this._selectView);
|
||||
this.$('.js-basemapSelect').html(this._selectView.render().el);
|
||||
}
|
||||
|
||||
});
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
<div class="js-basemapCategory"></div>
|
||||
<div class="js-basemapSelect"></div>
|
||||
+188
@@ -0,0 +1,188 @@
|
||||
var _ = require('underscore');
|
||||
var basemapProvidersAndCategories = require('builder/data/basemap-providers-and-categories');
|
||||
var mosaicThumbnail = require('builder/components/mosaic/mosaic-thumbnail.tpl');
|
||||
var BasemapModel = require('./basemap-model');
|
||||
|
||||
var DEFAULT_SUBDOMAIN = 'a';
|
||||
var DEFAULT_X_POSITION = 30;
|
||||
var DEFAULT_Y_POSISTION = 24;
|
||||
var DEFAULT_ZOOM = 6;
|
||||
|
||||
// 'CartoDB', 'Stamen', 'Here'
|
||||
|
||||
var createLeafletBasemapModel = function (category, basemap, baseLayerDefinition, assetsBaseURL) {
|
||||
var value;
|
||||
var currentValue;
|
||||
var label;
|
||||
var imageURL;
|
||||
|
||||
var type = basemapProvidersAndCategories.getLayerType(category);
|
||||
value = basemap.className;
|
||||
currentValue = baseLayerDefinition.get('className');
|
||||
label = basemap.name;
|
||||
imageURL = lowerXYZ(basemap.urlTemplate, basemap.subdomains);
|
||||
|
||||
_.extend(basemap, {
|
||||
type: type,
|
||||
name: basemap.name,
|
||||
category: category,
|
||||
selected: currentValue === value,
|
||||
val: value,
|
||||
label: label,
|
||||
template: function () {
|
||||
return mosaicThumbnail({
|
||||
imgURL: imageURL
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return new BasemapModel(basemap);
|
||||
};
|
||||
|
||||
var lowerXYZ = function (urlTemplate, subdomains) {
|
||||
return urlTemplate
|
||||
.replace('{s}', getSubdomain(subdomains))
|
||||
.replace('{z}', DEFAULT_ZOOM)
|
||||
.replace('{x}', DEFAULT_X_POSITION)
|
||||
.replace('{y}', DEFAULT_Y_POSISTION);
|
||||
};
|
||||
|
||||
var getSubdomain = function (subdomains) {
|
||||
return (subdomains && subdomains.length) ? subdomains[0] : DEFAULT_SUBDOMAIN;
|
||||
};
|
||||
|
||||
// Google Maps
|
||||
|
||||
var createGoogleMapsBasemapModel = function (category, basemapAttrs, baseLayerDefinition, assetsBaseURL) {
|
||||
var value;
|
||||
var currentValue;
|
||||
var label;
|
||||
var imageURL;
|
||||
|
||||
var type = basemapProvidersAndCategories.getLayerType(category);
|
||||
var generateValue = function (baseType, baseName) {
|
||||
var value = baseType;
|
||||
if (baseName) {
|
||||
value = value + '_' + baseName;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
value = generateValue(basemapAttrs.baseType, basemapAttrs.baseName);
|
||||
currentValue = generateValue(baseLayerDefinition.get('baseType'), baseLayerDefinition.get('baseName'));
|
||||
label = basemapAttrs.name.replace('GMaps ', '');
|
||||
imageURL = [
|
||||
assetsBaseURL,
|
||||
'unversioned/images/google-maps-basemap-icons',
|
||||
value + '.jpg'
|
||||
].join('/');
|
||||
|
||||
_.extend(basemapAttrs, {
|
||||
type: type,
|
||||
name: basemapAttrs.name,
|
||||
category: category,
|
||||
selected: currentValue === value,
|
||||
val: value,
|
||||
label: label,
|
||||
template: function () {
|
||||
return mosaicThumbnail({
|
||||
imgURL: imageURL
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return new BasemapModel(basemapAttrs);
|
||||
};
|
||||
|
||||
// Custom
|
||||
|
||||
var createCustomBasemapModel = function (category, customBaseLayerAttrs, baseLayerDefinition, configModel) {
|
||||
var name = customBaseLayerAttrs.name ? customBaseLayerAttrs.name : 'Custom basemap ' + customBaseLayerAttrs.order;
|
||||
var className = customBaseLayerAttrs.className;
|
||||
var urlTemplate = customBaseLayerAttrs.urlTemplate;
|
||||
|
||||
return new BasemapModel({
|
||||
id: customBaseLayerAttrs.id,
|
||||
urlTemplate: urlTemplate,
|
||||
minZoom: customBaseLayerAttrs.minZoom || 0,
|
||||
maxZoom: customBaseLayerAttrs.maxZoom || 21,
|
||||
name: name,
|
||||
className: className,
|
||||
attribution: customBaseLayerAttrs.attribution,
|
||||
category: category || 'Custom',
|
||||
tms: customBaseLayerAttrs.tms,
|
||||
selected: baseLayerDefinition.get('className') === className,
|
||||
val: className,
|
||||
label: name,
|
||||
template: function (imgURL) {
|
||||
return mosaicThumbnail({
|
||||
imgURL: imgURL
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Color
|
||||
|
||||
var createColorBasemapModel = function (category, basemapAttrs, baseLayerDefinition, configModel) {
|
||||
return new BasemapModel({
|
||||
default: false,
|
||||
color: basemapAttrs.color || '',
|
||||
image: basemapAttrs.image || '',
|
||||
maxZoom: 32,
|
||||
className: 'plain',
|
||||
category: 'Color',
|
||||
type: 'Plain',
|
||||
selected: baseLayerDefinition.get('className') === 'plain',
|
||||
val: 'plain',
|
||||
label: 'plain',
|
||||
template: function () {
|
||||
return 'plain';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Factory
|
||||
|
||||
var CATEGORY_CARTODB = 'CARTO';
|
||||
var CATEGORY_STAMEN = 'Stamen';
|
||||
var CATEGORY_HERE = 'Here';
|
||||
var CATEGORY_GMAPS = 'GMaps';
|
||||
var CATEGORY_CUSTOM = 'Custom';
|
||||
var CATEGORY_NASA = 'NASA';
|
||||
var CATEGORY_TILEJSON = 'TileJSON';
|
||||
var CATEGORY_MAPBOX = 'Mapbox';
|
||||
var CATEGORY_WMS = 'WMS';
|
||||
var CATEGORY_COLOR = 'Color';
|
||||
|
||||
var CREATE_METHODS = {};
|
||||
CREATE_METHODS[CATEGORY_CARTODB] = createLeafletBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_STAMEN] = createLeafletBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_HERE] = createLeafletBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_GMAPS] = createGoogleMapsBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_CUSTOM] = createCustomBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_NASA] = createCustomBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_TILEJSON] = createCustomBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_MAPBOX] = createCustomBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_WMS] = createCustomBasemapModel;
|
||||
CREATE_METHODS[CATEGORY_COLOR] = createColorBasemapModel;
|
||||
|
||||
var BasemapModelFactory = function (layerDefinitionsCollection, configModel) {
|
||||
if (!layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!configModel) throw new Error('configModel is required');
|
||||
|
||||
this._layerDefinitionsCollection = layerDefinitionsCollection;
|
||||
this._configModel = configModel;
|
||||
};
|
||||
|
||||
BasemapModelFactory.prototype.createBasemapModel = function (basemapCategory, basemapAttrs) {
|
||||
var baseLayer = this._layerDefinitionsCollection.getBaseLayer();
|
||||
var assetsBaseURL = this._configModel.get('app_assets_base_url');
|
||||
|
||||
var createMethod = CREATE_METHODS[basemapCategory];
|
||||
if (!createMethod) {
|
||||
throw new Error("Can't create basemapModel for basemap of type: " + basemapCategory);
|
||||
}
|
||||
return createMethod(basemapCategory, basemapAttrs, baseLayer, assetsBaseURL);
|
||||
};
|
||||
|
||||
module.exports = BasemapModelFactory;
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
var Backbone = require('backbone');
|
||||
|
||||
module.exports = Backbone.Model.extend({
|
||||
|
||||
defaults: {
|
||||
default: false,
|
||||
minZoom: 0,
|
||||
maxZoom: 21,
|
||||
name: '',
|
||||
category: 'Custom',
|
||||
type: 'Tiled',
|
||||
selected: false,
|
||||
val: '',
|
||||
label: '',
|
||||
template: function () {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
getName: function () {
|
||||
return this.get('label') || this.getValue();
|
||||
},
|
||||
|
||||
getValue: function () {
|
||||
return this.get('val');
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+74
@@ -0,0 +1,74 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('builder/components/mosaic/mosaic-item.tpl');
|
||||
var AddBasemapView = require('builder/components/modals/add-basemap/add-basemap-view');
|
||||
var AddBasemapModel = require('builder/components/modals/add-basemap/add-basemap-model');
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
className: 'Mosaic-item Mosaic-item--dashed',
|
||||
|
||||
tagName: 'li',
|
||||
|
||||
events: {
|
||||
'mouseenter': '_onMouseEnter',
|
||||
'mouseleave': '_onMouseLeave',
|
||||
'click': '_onClick'
|
||||
},
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!opts.modals) throw new Error('modals is required');
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
if (!opts.customBaselayersCollection) throw new Error('customBaselayersCollection is required');
|
||||
if (!opts.mosaicModel) throw new Error('mosaicModel is required');
|
||||
|
||||
this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
this._customBaselayersCollection = opts.customBaselayersCollection;
|
||||
this._modals = opts.modals;
|
||||
this._currentTab = opts.currentTab;
|
||||
this._mosaicModel = opts.mosaicModel;
|
||||
|
||||
this.add_related_model(this._mosaicModel);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(
|
||||
template({
|
||||
name: this.model.getName(),
|
||||
template: this.model.get('template')()
|
||||
})
|
||||
);
|
||||
return this;
|
||||
},
|
||||
|
||||
_onMouseEnter: function () {
|
||||
this._mosaicModel.set('highlightedAdd', true);
|
||||
},
|
||||
|
||||
_onMouseLeave: function () {
|
||||
this._mosaicModel.set('highlightedAdd', false);
|
||||
},
|
||||
|
||||
_onClick: function () {
|
||||
var self = this;
|
||||
|
||||
var modal = this._modals.create(function (modalModel) {
|
||||
var addBasemapModel = new AddBasemapModel({}, {
|
||||
layerDefinitionsCollection: self._layerDefinitionsCollection,
|
||||
basemapsCollection: self._basemapsCollection,
|
||||
customBaselayersCollection: self._customBaselayersCollection,
|
||||
currentTab: self._currentTab
|
||||
});
|
||||
|
||||
return new AddBasemapView({
|
||||
modalModel: modalModel,
|
||||
createModel: addBasemapModel
|
||||
});
|
||||
}, {
|
||||
breadcrumbsEnabled: true
|
||||
});
|
||||
modal.show();
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+59
@@ -0,0 +1,59 @@
|
||||
var BasemapMosaicView = require('./basemap-mosaic-view');
|
||||
var BasemapMosaicModel = require('./basemap-mosaic-model');
|
||||
var MosaicFormView = require('builder/components/mosaic-form-view');
|
||||
|
||||
/**
|
||||
* Mosaic form view
|
||||
*/
|
||||
|
||||
module.exports = MosaicFormView.extend({
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.collection) throw new Error('Mosaic collection is required');
|
||||
if (!opts.template) throw new Error('template is required');
|
||||
if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
if (!opts.customBaselayersCollection) throw new Error('customBaselayersCollection is required');
|
||||
if (!opts.modals) throw new Error('modals is required');
|
||||
|
||||
this.template = opts.template;
|
||||
this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
this._customBaselayersCollection = opts.customBaselayersCollection;
|
||||
this._modals = opts.modals;
|
||||
this._disabled = opts.disabled;
|
||||
this._currentTab = opts.currentTab;
|
||||
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
_initViews: function () {
|
||||
this.mosaic = new BasemapMosaicView({
|
||||
model: new BasemapMosaicModel(),
|
||||
collection: this.collection,
|
||||
layerDefinitionsCollection: this._layerDefinitionsCollection,
|
||||
basemapsCollection: this._basemapsCollection,
|
||||
customBaselayersCollection: this._customBaselayersCollection,
|
||||
modals: this._modals,
|
||||
disabled: this._disabled,
|
||||
currentTab: this._currentTab
|
||||
});
|
||||
this.mosaic.model.bind('change:highlightedAdd', this._onChangeHighlighted, this);
|
||||
|
||||
if (!this.$('.js-selector').length) throw new Error('HTML element with js-selector class is required');
|
||||
|
||||
this.$('.js-selector').append(this.mosaic.render().el);
|
||||
this.addView(this.mosaic);
|
||||
},
|
||||
|
||||
_onChangeHighlighted: function () {
|
||||
var item = this.collection.getHighlighted() || this.mosaic.model.getHighlighted() || this.collection.getSelected();
|
||||
if (item) {
|
||||
var $el = this.$('.js-highlight');
|
||||
if ($el) {
|
||||
$el.text(item.getName());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+88
@@ -0,0 +1,88 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+22
@@ -0,0 +1,22 @@
|
||||
var Backbone = require('backbone');
|
||||
|
||||
/*
|
||||
* List item model
|
||||
*
|
||||
*/
|
||||
|
||||
module.exports = Backbone.Model.extend({
|
||||
|
||||
defaults: {
|
||||
highlightedAdd: false
|
||||
},
|
||||
|
||||
getHighlighted: function () {
|
||||
return this.get('highlightedAdd') && this;
|
||||
},
|
||||
|
||||
getName: function () {
|
||||
return 'Add';
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+86
@@ -0,0 +1,86 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./basemap-mosaic-remove.tpl');
|
||||
var CustomListCollection = require('builder/components/custom-list/custom-list-collection');
|
||||
var ContextMenuView = require('builder/components/context-menu/context-menu-view');
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
tagName: 'span',
|
||||
className: 'Mosaic-remove CDB-Shape-threePoints is-white is-small js-Mosaic-remove',
|
||||
|
||||
events: {
|
||||
'click': '_onToggleContextMenuClicked'
|
||||
},
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(template());
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_hasContextMenu: function () {
|
||||
return this._menuView;
|
||||
},
|
||||
|
||||
_hideContextMenu: function () {
|
||||
this.removeView(this._menuView);
|
||||
this._menuView.clean();
|
||||
delete this._menuView;
|
||||
},
|
||||
|
||||
_showContextMenu: function (position) {
|
||||
this._menuItems = new CustomListCollection([{
|
||||
label: _t('editor.layers.basemap.remove-baselayer'),
|
||||
val: 'remove-baselayer',
|
||||
destructive: true
|
||||
}]);
|
||||
|
||||
var triggerElementID = 'context-menu-trigger-' + this.model.cid;
|
||||
this.$('.js-Mosaic-remove').attr('id', triggerElementID);
|
||||
this._menuView = new ContextMenuView({
|
||||
collection: this._menuItems,
|
||||
triggerElementID: triggerElementID,
|
||||
position: position
|
||||
});
|
||||
|
||||
this._menuItems.bind('change:selected', function (menuItem) {
|
||||
if (menuItem.get('val') === 'remove-baselayer') {
|
||||
this._deleteBaselayer();
|
||||
}
|
||||
}, this);
|
||||
this.add_related_model(this._menuItems);
|
||||
|
||||
this._menuView.model.bind('change:visible', function (model, isContextMenuVisible) {
|
||||
if (this._hasContextMenu() && !isContextMenuVisible) {
|
||||
this._hideContextMenu();
|
||||
}
|
||||
}, this);
|
||||
|
||||
this._menuView.show();
|
||||
this.addView(this._menuView);
|
||||
},
|
||||
|
||||
_deleteBaselayer: function () {
|
||||
this._basemapsCollection.remove(this.model);
|
||||
},
|
||||
|
||||
_onToggleContextMenuClicked: function (e) {
|
||||
this.killEvent(e);
|
||||
|
||||
if (this._hasContextMenu()) {
|
||||
this._hideContextMenu();
|
||||
} else {
|
||||
this._showContextMenu({
|
||||
x: e.pageX + 215, // CustomList--small width
|
||||
y: e.pageY
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
Executable
+3
@@ -0,0 +1,3 @@
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
<div class="CDB-Shape-threePointsItem"></div>
|
||||
Executable
+61
@@ -0,0 +1,61 @@
|
||||
var template = require('builder/components/mosaic/mosaic.tpl');
|
||||
var MosaicView = require('builder/components/mosaic/mosaic-view');
|
||||
var MosaicItemModel = require('builder/components/mosaic/mosaic-item-model');
|
||||
var BasemapMosaicItemView = require('./basemap-mosaic-item-view');
|
||||
var MosaicAddItemView = require('./basemap-mosaic-add-item-view');
|
||||
|
||||
module.exports = MosaicView.extend({
|
||||
|
||||
initialize: function (opts) {
|
||||
if (!opts.layerDefinitionsCollection) throw new Error('layerDefinitionsCollection is required');
|
||||
if (!opts.basemapsCollection) throw new Error('basemapsCollection is required');
|
||||
if (!opts.customBaselayersCollection) throw new Error('customBaselayersCollection is required');
|
||||
if (!opts.modals) throw new Error('modals is required');
|
||||
|
||||
this._layerDefinitionsCollection = opts.layerDefinitionsCollection;
|
||||
this._basemapsCollection = opts.basemapsCollection;
|
||||
this._customBaselayersCollection = opts.customBaselayersCollection;
|
||||
this._modals = opts.modals;
|
||||
this._disabled = opts.disabled;
|
||||
this._currentTab = opts.currentTab;
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
this.$el.html(template());
|
||||
this._renderList();
|
||||
this._createAddItem();
|
||||
return this;
|
||||
},
|
||||
|
||||
_createItem: function (mdl) {
|
||||
var view = new BasemapMosaicItemView({
|
||||
model: mdl,
|
||||
disabled: this._disabled,
|
||||
basemapsCollection: this._basemapsCollection
|
||||
});
|
||||
this.$('.js-mosaic').append(view.render().el);
|
||||
this.addView(view);
|
||||
},
|
||||
|
||||
_createAddItem: function () {
|
||||
var view = new MosaicAddItemView({
|
||||
model: new MosaicItemModel({
|
||||
label: 'Add',
|
||||
val: 'add',
|
||||
template: function () {
|
||||
return '<div class="Mosaic-button">+</div>';
|
||||
}
|
||||
}),
|
||||
layerDefinitionsCollection: this._layerDefinitionsCollection,
|
||||
basemapsCollection: this._basemapsCollection,
|
||||
customBaselayersCollection: this._customBaselayersCollection,
|
||||
mosaicModel: this.model,
|
||||
modals: this._modals,
|
||||
currentTab: this._currentTab
|
||||
});
|
||||
this.$('.js-mosaic').append(view.render().el);
|
||||
this.addView(view);
|
||||
}
|
||||
|
||||
});
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
<div class="js-selector">
|
||||
<div class="Editor-HeaderInfo-title u-bSpace--m">
|
||||
<h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large"><%- _t('editor.layers.basemap.style.title-label') %></h2>
|
||||
</div>
|
||||
<p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m js-highlight"><%- _t('editor.layers.basemap.style.select-style') %></p>
|
||||
</div>
|
||||
Executable
+114
@@ -0,0 +1,114 @@
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./basemap-select.tpl');
|
||||
var MosaicFormView = require('builder/components/mosaic-form-view');
|
||||
var BasemapFormView = require('./basemap-form-view');
|
||||
var MosaicCollection = require('builder/components/mosaic/mosaic-collection');
|
||||
var BasemapMosaicFormView = require('./basemap-mosaic-form-view');
|
||||
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
|
||||
var REQUIRED_OPTS = [
|
||||
'layerDefinitionsCollection',
|
||||
'basemapsCollection',
|
||||
'customBaselayersCollection',
|
||||
'selectedCategoryVal',
|
||||
'modals'
|
||||
];
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
|
||||
initialize: function (opts) {
|
||||
checkAndBuildOpts(opts, REQUIRED_OPTS, this);
|
||||
|
||||
this._baseLayer = this._layerDefinitionsCollection.getBaseLayer();
|
||||
this._disabled = opts.disabled;
|
||||
|
||||
this._initCollection();
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.clearSubViews();
|
||||
this.$el.html(template());
|
||||
|
||||
var category = this._selectedCategoryVal.toLowerCase();
|
||||
|
||||
switch (category) {
|
||||
case 'color':
|
||||
this._renderForm();
|
||||
break;
|
||||
case 'custom':
|
||||
this._renderCustomMosaic();
|
||||
break;
|
||||
case 'nasa':
|
||||
case 'tilejson':
|
||||
case 'mapbox':
|
||||
case 'wms':
|
||||
this._renderCustomMosaic(category);
|
||||
break;
|
||||
default:
|
||||
this._renderMosaic();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_initCollection: function () {
|
||||
this._filteredBasemapsCollection = new MosaicCollection(
|
||||
this._basemapsCollection.findByCategory(this._selectedCategoryVal)
|
||||
);
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this._filteredBasemapsCollection.bind('change:selected', function (mdl) {
|
||||
if (mdl.get('selected')) {
|
||||
var value = mdl.getValue();
|
||||
|
||||
this._changeBasemap(value);
|
||||
}
|
||||
}, this);
|
||||
this.add_related_model(this._filteredBasemapsCollection);
|
||||
},
|
||||
|
||||
_changeBasemap: function (value) {
|
||||
var basemap = this._basemapsCollection.getByValue(value);
|
||||
|
||||
this._layerDefinitionsCollection.setBaseLayer(basemap.toJSON());
|
||||
},
|
||||
|
||||
_renderMosaic: function () {
|
||||
var view = new MosaicFormView({
|
||||
collection: this._filteredBasemapsCollection,
|
||||
template: require('./basemap-mosaic.tpl'),
|
||||
disabled: this._disabled
|
||||
});
|
||||
this.addView(view);
|
||||
this.$('.js-select').append(view.render().el);
|
||||
},
|
||||
|
||||
_renderCustomMosaic: function (category) {
|
||||
var view = new BasemapMosaicFormView({
|
||||
collection: this._filteredBasemapsCollection,
|
||||
template: require('./basemap-mosaic.tpl'),
|
||||
layerDefinitionsCollection: this._layerDefinitionsCollection,
|
||||
basemapsCollection: this._basemapsCollection,
|
||||
customBaselayersCollection: this._customBaselayersCollection,
|
||||
modals: this._modals,
|
||||
disabled: this._disabled,
|
||||
currentTab: category
|
||||
});
|
||||
this.addView(view);
|
||||
this.$('.js-select').append(view.render().el);
|
||||
},
|
||||
|
||||
_renderForm: function () {
|
||||
var view = new BasemapFormView({
|
||||
model: this._baseLayer,
|
||||
basemapsCollection: this._basemapsCollection,
|
||||
layerDefinitionsCollection: this._layerDefinitionsCollection,
|
||||
disabled: this._disabled
|
||||
});
|
||||
this.addView(view);
|
||||
this.$('.js-select').append(view.render().el);
|
||||
}
|
||||
|
||||
});
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
<div class="Editor-HeaderInfo">
|
||||
<div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
|
||||
<div class="Editor-HeaderInfo-inner CDB-Text js-select"></div>
|
||||
</div>
|
||||
Executable
+78
@@ -0,0 +1,78 @@
|
||||
var Backbone = require('backbone');
|
||||
var BasemapModel = require('./basemap-model');
|
||||
var _ = require('underscore');
|
||||
|
||||
/*
|
||||
* Basemap collection, extends Mosaic collection
|
||||
*/
|
||||
|
||||
module.exports = Backbone.Collection.extend({
|
||||
|
||||
model: BasemapModel,
|
||||
|
||||
initialize: function () {
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this.bind('change:selected', this._onSelectedChange, this);
|
||||
},
|
||||
|
||||
_onSelectedChange: function (changedModel, isSelected) {
|
||||
if (isSelected) {
|
||||
this.each(function (m) {
|
||||
if (m.cid !== changedModel.cid && m.get('selected')) {
|
||||
m.set('selected', false);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
findByCategory: function (category) {
|
||||
return this.where({ category: category });
|
||||
},
|
||||
|
||||
getDefaultCategory: function () {
|
||||
var defaultCategory = this.findWhere({ default: true });
|
||||
defaultCategory = defaultCategory || this.first();
|
||||
|
||||
return defaultCategory.get('category');
|
||||
},
|
||||
|
||||
getCategories: function () {
|
||||
var categories = this.chain()
|
||||
.map(function (model) { return model.get('category'); })
|
||||
.concat('Custom')
|
||||
.concat('NASA')
|
||||
.concat('TileJSON')
|
||||
.concat('Mapbox')
|
||||
.concat('WMS')
|
||||
.uniq()
|
||||
.value();
|
||||
|
||||
return categories;
|
||||
},
|
||||
|
||||
getSelected: function () {
|
||||
return this.findWhere({ selected: true });
|
||||
},
|
||||
|
||||
updateSelected: function (value) {
|
||||
var newSelected = this.getByValue(value);
|
||||
newSelected.set({ selected: true });
|
||||
},
|
||||
|
||||
updateCategory: function (value, category) {
|
||||
var newCategory = this.getByValue(value);
|
||||
newCategory.set({ category: category });
|
||||
},
|
||||
|
||||
getByValue: function (value) {
|
||||
return _.first(this.where({ val: value }));
|
||||
},
|
||||
|
||||
getThumbnailImage: function (urlTemplate, subdomains) {
|
||||
return this._lowerXYZ(urlTemplate, subdomains);
|
||||
}
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user