107 lines
2.6 KiB
JavaScript
107 lines
2.6 KiB
JavaScript
|
var $ = require('jquery');
|
||
|
|
var moment = require('moment');
|
||
|
|
var CoreView = require('backbone/core-view');
|
||
|
|
var DatePickerView = require('builder/components/date-picker/date-picker-view');
|
||
|
|
var EditFieldModel = require('builder/components/date-picker/edit-field-model');
|
||
|
|
var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
|
||
|
|
var template = require('./nasa.tpl');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Represents the NASA tab content
|
||
|
|
*/
|
||
|
|
|
||
|
|
module.exports = CoreView.extend({
|
||
|
|
|
||
|
|
options: {
|
||
|
|
dateFormat: 'YYYY-MM-DD'
|
||
|
|
},
|
||
|
|
|
||
|
|
events: {
|
||
|
|
'click .js-day': '_onChangeToDay',
|
||
|
|
'click .js-night': '_onChangeToNight'
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function (opts) {
|
||
|
|
if (!opts.submitButton) throw new Error('submitButton is required');
|
||
|
|
|
||
|
|
this._submitButton = opts.submitButton;
|
||
|
|
this.dateModel = new EditFieldModel({
|
||
|
|
value: this.model.get('date'),
|
||
|
|
type: 'date'
|
||
|
|
});
|
||
|
|
|
||
|
|
this._initBinds();
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function () {
|
||
|
|
this.clearSubViews();
|
||
|
|
|
||
|
|
this._updateOkBtn();
|
||
|
|
this._disableOkBtn(false);
|
||
|
|
|
||
|
|
this.$el.html(
|
||
|
|
template({
|
||
|
|
layerType: this.model.get('layerType')
|
||
|
|
})
|
||
|
|
);
|
||
|
|
|
||
|
|
this._renderDatePicker();
|
||
|
|
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_initBinds: function () {
|
||
|
|
this.model.bind('change:layerType', function () {
|
||
|
|
this.dateModel.set('readOnly', this.model.get('layerType') === 'night');
|
||
|
|
this.render();
|
||
|
|
}, this);
|
||
|
|
this.dateModel.bind('change:value', function () {
|
||
|
|
var date = moment(this.dateModel.get('value')).format(this.options.dateFormat);
|
||
|
|
this.model.set('date', date);
|
||
|
|
}, this);
|
||
|
|
this.add_related_model(this.dateModel);
|
||
|
|
},
|
||
|
|
|
||
|
|
_renderDatePicker: function () {
|
||
|
|
// Date picker
|
||
|
|
var datepicker = this.datepicker = new DatePickerView({
|
||
|
|
className: 'DatePicker DatePicker--withBorder',
|
||
|
|
model: this.dateModel
|
||
|
|
});
|
||
|
|
this._$datePicker().html(datepicker.render().el);
|
||
|
|
this.addView(datepicker);
|
||
|
|
|
||
|
|
// Disabled tooltip
|
||
|
|
if (this.dateModel.get('readOnly')) {
|
||
|
|
var tooltip = new TipsyTooltipView({
|
||
|
|
el: this._$datePicker(),
|
||
|
|
title: function (e) {
|
||
|
|
return $(this).attr('data-title');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.addView(tooltip);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
_onChangeToNight: function () {
|
||
|
|
this.model.set('layerType', 'night');
|
||
|
|
},
|
||
|
|
|
||
|
|
_onChangeToDay: function () {
|
||
|
|
this.model.set('layerType', 'day');
|
||
|
|
},
|
||
|
|
|
||
|
|
_$datePicker: function () {
|
||
|
|
return this.$('.js-datePicker');
|
||
|
|
},
|
||
|
|
|
||
|
|
_updateOkBtn: function () {
|
||
|
|
this._submitButton.find('span').text(_t('components.modals.add-basemap.add-btn'));
|
||
|
|
},
|
||
|
|
|
||
|
|
_disableOkBtn: function (disable) {
|
||
|
|
this._submitButton.toggleClass('is-disabled', disable);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|