Initial commit

lib/assets/javascripts/builder/components/modals/add-basemap/nasa/nasa-model.js

@@ -0,0 +1,107 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var moment = require('moment');
+var NASAView = require('./nasa-view');
+var CustomBaselayerModel = require('builder/data/custom-baselayer-model');
+
+var TYPES = {
+  day: {
+    url: 'http://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_CorrectedReflectance_TrueColor/default/<%- date %>/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpeg',
+    limit: '2012-05-01',
+    default: '2012-05-01',
+    attribution: '<a href="http://earthdata.nasa.gov/gibs" target="_blank">NASA EOSDIS GIBS</a>',
+    name: 'NASA Terra',
+    maxZoom: 9,
+    minZoom: 1
+  },
+  night: {
+    url: 'http://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/<%- date %>/GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpeg',
+    limit: '2012-05-01',
+    default: '2012-05-02',
+    attribution: '<a href="http://earthdata.nasa.gov/gibs" target="_blank">NASA EOSDIS GIBS</a>',
+    name: 'NASA Earth at night',
+    maxZoom: 8,
+    minZoom: 1
+  }
+};
+
+/**
+ * View model for NASA tab content.
+ */
+
+module.exports = Backbone.Model.extend({
+
+  defaults: {
+    name: 'nasa',
+    label: 'NASA',
+    layer: undefined, // gets set on dayOrNight/date changes
+    layerType: 'day',
+    date: undefined, // for date picker
+    current: undefined,
+    format: 'Y-m-d' // YYYY-MM-DD
+  },
+
+  initialize: function () {
+    this._initBinds();
+  },
+
+  createView: function (opts) {
+    if (!opts.submitButton) throw new Error('submitButton is required');
+
+    this._submitButton = opts.submitButton;
+
+    var utc = new Date().getTimezoneOffset();
+    var today = moment(new Date()).utcOffset(utc).format('YYYY-MM-DD');
+    var yesterday = moment(new Date()).utcOffset(utc).subtract(1, 'days').format('YYYY-MM-DD');
+
+    this.set({
+      current: today,
+      date: yesterday
+    });
+
+    return new NASAView({
+      model: this,
+      submitButton: this._submitButton
+    });
+  },
+
+  hasAlreadyAddedLayer: function (userLayers) {
+    var urlTemplate = this.get('layer').get('urlTemplate');
+    return _.any(userLayers.isCustomCategory(), function (customLayer) {
+      return customLayer.get('urlTemplate') === urlTemplate;
+    });
+  },
+
+  _initBinds: function () {
+    this.bind('change:date change:layerType', this._onChange, this);
+  },
+
+  _onChange: function () {
+    var dateStr = this.get('date');
+    var layerType = this.get('layerType');
+
+    var url = _.template(TYPES[layerType].url)({
+      date: dateStr
+    });
+
+    var name = TYPES[layerType].name;
+
+    if (layerType === 'day') {
+      name = name + ' ' + dateStr;
+    }
+
+    var layer = new CustomBaselayerModel({
+      urlTemplate: url,
+      attribution: TYPES[layerType].attribution,
+      maxZoom: TYPES[layerType].maxZoom,
+      minZoom: TYPES[layerType].minZoom,
+      name: name,
+      category: 'NASA',
+      type: 'Tiled'
+    });
+    layer.set('className', layer._generateClassName(url));
+
+    this.set('layer', layer);
+  }
+
+});

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

@@ -0,0 +1,106 @@
+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);
+  }
+
+});

lib/assets/javascripts/builder/components/modals/add-basemap/nasa/nasa.tpl

@@ -0,0 +1,22 @@
+<div class="u-flex u-alignCenter Modal-basemapContainer">
+  <h3 class="CDB-Text CDB-Size-large u-mainTextColor Modal-titleBasemap"><%- _t('components.modals.add-basemap.nasa.select') %></h3>
+  <div class="CDB-Text u-flex u-alignCenter">
+    <div class="Form-rowData Form-rowData--short Form-rowData--alignLeft">
+      <div class="Form-rowData Form-rowData--full">
+        <div class="RadioButton js-day">
+          <button type="button" class="RadioButton-input <% if (layerType === 'day') { %>is-checked<% } %>"></button>
+          <label class="Metadata-label Metadata-label--auto CDB-Text CDB-Size-small is-semibold u-upperCase u-ellipsis" for="nasa-type-day"><%- _t('components.modals.add-basemap.nasa.day') %></label>
+        </div>
+      </div>
+      <div class="Form-rowData Form-rowData--full">
+        <div class="RadioButton js-night">
+          <button type="button" class="RadioButton-input <% if (layerType === 'night') { %>is-checked<% } %>"/></button>
+          <label class="Metadata-label Metadata-label--auto CDB-Text CDB-Size-small is-semibold u-upperCase u-ellipsis" for="nasa-type-night"><%- _t('components.modals.add-basemap.nasa.night') %></label>
+        </div>
+      </div>
+    </div>
+    <div class="Form-rowData Form-rowData--short">
+      <div class="js-datePicker" data-title="<%- _t('components.modals.add-basemap.nasa.cant-select') %>"></div>
+    </div>
+  </div>
+</div>