Initial commit

lib/assets/javascripts/dashboard/components/mapcard-preview-view.js

@@ -0,0 +1,144 @@
+var $ = require('jquery');
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var TEMPLATES = {
+  // Using <%= %> instead of <%- %> because if not / characters (for example) will be escaped
+  regular: '<%- protocol %>://<%= mapsApiResource %>/api/v1/map/static/named/<%- tpl %>/<%- width %>/<%- height %>.png<%= authTokens %>',
+  cdn: '<%- protocol %>://<%- cdn %>/<%- username %>/api/v1/map/static/named/<%- tpl %>/<%- width %>/<%- height %>.png<%= authTokens %>'
+};
+
+var REQUIRED_OPTS = [
+  'config',
+  'visId',
+  'mapsApiResource',
+  'username'
+];
+
+/**
+ *  MapCard previews
+ *
+ */
+
+module.exports = CoreView.extend({
+  options: {
+    width: 300,
+    height: 170,
+    privacy: 'PUBLIC',
+    className: '',
+    authTokens: []
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  load: function () {
+    this._startLoader();
+    this._loadFromVisId();
+
+    return this;
+  },
+
+  _generateImageTemplate: function () {
+    return 'tpl_' + this._visId.replace(/-/g, '_');
+  },
+
+  _loadFromVisId: function () {
+    var protocol = this._isHTTPS() ? 'https' : 'http';
+    var cdnConfig = this._config.get('cdn_url');
+    var template = _.template(cdnConfig ? TEMPLATES['cdn'] : TEMPLATES['regular']);
+
+    var options = {
+      protocol: protocol,
+      username: this._username,
+      mapsApiResource: this._mapsApiResource,
+      tpl: this._generateImageTemplate(),
+      width: this.options.width,
+      height: this.options.height,
+      authTokens: this._generateAuthTokensParams()
+    };
+
+    if (cdnConfig) {
+      options = _.extend(options, {
+        cdn: cdnConfig[protocol]
+      });
+    }
+
+    var url = template(options);
+
+    this._loadImage({}, url);
+  },
+
+  _generateAuthTokensParams: function () {
+    var authTokens = this.options.authTokens;
+    if (authTokens && authTokens.length > 0) {
+      return '?' + _.map(authTokens, function (t) { return 'auth_token=' + t; }).join('&');
+    } else {
+      return '';
+    }
+  },
+
+  _isHTTPS: function () {
+    return location.protocol.indexOf('https') === 0;
+  },
+
+  loadURL: function (url) {
+    var $img = $('<img class="MapCard-preview" src="' + url + '" />');
+    this.$el.append($img);
+
+    if (this.options.className) {
+      $img.addClass(this.options.className);
+    }
+
+    $img.fadeIn(250);
+  },
+
+  showError: function () {
+    this._onError();
+  },
+
+  _startLoader: function () {
+    this.$el.addClass('is-loading');
+  },
+
+  _stopLoader: function () {
+    this.$el.removeClass('is-loading');
+  },
+
+  _onSuccess: function (url) {
+    this._stopLoader();
+    this.loadURL(url);
+    this.trigger('loaded', url);
+  },
+
+  _onError: function () {
+    this._stopLoader();
+    this.$el.addClass('has-error');
+    var $error = $('<div class="MapCard-error" />');
+    this.$el.append($error);
+    $error.fadeIn(250);
+    this.trigger('error');
+  },
+
+  _loadImage: function (error, url) {
+    var self = this;
+    var img = new Image();
+
+    img.onerror = function () {
+      self._onError(error);
+    };
+
+    img.onload = function () {
+      self._onSuccess(url);
+    };
+
+    try {
+      img.src = url;
+    } catch (err) {
+      this._onError(err);
+    }
+  }
+
+});