Initial commit

lib/assets/javascripts/builder/components/modals/add-basemap/tilejson/enter-url.tpl

@@ -0,0 +1,12 @@
+<div class="u-flex u-alignCenter Modal-basemapContainer">
+  <h3 class="CDB-Text CDB-Size-large u-mainTextColor Modal-titleBasemap"><%- _t('components.modals.add-basemap.tilejson.insert') %></h3>
+  <div class="CDB-Text u-flex u-alignCenter">
+    <label class="Metadata-label Metadata-label--auto  CDB-Text CDB-Size-small is-semibold u-upperCase u-ellipsis"><%- _t('components.modals.add-basemap.xyz.enter') %></label>
+    <div class="Form-rowData Form-rowData--longer">
+      <input type="text" class="has-icon CDB-InputText CDB-Text js-url" value="" placeholder="<%- _t('components.modals.add-basemap.xyz.eg') %> http://domain.com/tiles.json?foo=bar">
+      <i class="CDB-IconFont CDB-IconFont-dribbble Form-inputIcon js-idle"></i>
+      <i class="Spinner XYZPanel-inputIcon Spinner--formIcon Form-inputIcon js-validating" style="display: none;"></i>
+      <div class="XYZPanel-error CDB-InfoTooltip CDB-InfoTooltip--left is-error CDB-Text CDB-Size-medium CDB-InfoTooltip-text js-error"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+var Backbone = require('backbone');
+var CustomBaselayerModel = require('builder/data/custom-baselayer-model');
+
+/**
+ * Model to representing a TileJSON endpoint
+ * See https://github.com/mapbox/tilejson-spec/tree/master/2.1.0 for details
+ */
+
+module.exports = Backbone.Model.extend({
+
+  url: function () {
+    return this.get('tilejson_url');
+  },
+
+  newTileLayer: function () {
+    if (!this._isFetched()) throw new Error('no tiles, have fetch been called and returned a successful resultset?');
+
+    var url = this._urlTemplate();
+
+    var layer = new CustomBaselayerModel({
+      urlTemplate: url,
+      attribution: this.get('attribution'),
+      maxZoom: this.get('maxzoom'),
+      minZoom: this.get('minzoom'),
+      name: this._name(),
+      bounding_boxes: this.get('bounds'),
+      tms: this.get('scheme') === 'tms',
+      category: 'TileJSON',
+      type: 'Tiled'
+    });
+    layer.set('className', layer._generateClassName(url));
+
+    return layer;
+  },
+
+  setUrl: function (url) {
+    this.set('tilejson_url', url);
+  },
+
+  _isFetched: function () {
+    return this.get('tiles').length > 0;
+  },
+
+  _urlTemplate: function () {
+    return this.get('tiles')[0];
+  },
+
+  _name: function () {
+    return this.get('name') || this.get('description');
+  }
+
+});

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

@@ -0,0 +1,38 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var TileJSONView = require('./tilejson-view');
+var TileJSONLayerModel = require('./tilejson-layer-model');
+
+/**
+ * View model for TileJSON tab content.
+ */
+module.exports = Backbone.Model.extend({
+
+  defaults: {
+    name: 'tilejson',
+    label: 'TileJSON',
+    layer: undefined // will be set when valid
+  },
+
+  createView: function (opts) {
+    if (!opts.submitButton) throw new Error('submitButton is required');
+
+    this._submitButton = opts.submitButton;
+
+    var tileJSONLayerModel = new TileJSONLayerModel();
+
+    return new TileJSONView({
+      model: this,
+      submitButton: this._submitButton,
+      tileJSONLayerModel: tileJSONLayerModel
+    });
+  },
+
+  hasAlreadyAddedLayer: function (userLayers) {
+    var urlTemplate = this.get('layer').get('urlTemplate');
+    return _.any(userLayers.isCustomCategory(), function (customLayer) {
+      return customLayer.get('urlTemplate') === urlTemplate;
+    });
+  }
+
+});

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

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