cartodb-4.42/lib/assets/javascripts/cartodb/table/overlays/image.js

cdb.admin.overlays.Image = cdb.admin.overlays.Text.extend({

  className: "image overlay snap",

  events: {

    "mouseenter .text":  "_onMouseEnter",

    "click .close":      "_close",
    "click .content":    "_onClickEdit",
    "click .text":       "_onClickEdit",
    "dblclick .content": "_onDblClick",
    "dblclick .text":    "_onDblClick",

    "keyup .text":       "_onKeyUp",
    "paste .text":       "_onPaste"

  },

  initialize: function() {

    _.bindAll(this, "_close", "_onDblClick", "_onChangeMode", "_onKeyDown", "_onLoadSuccess", "_onLoadError");

    // Bind ESC key
    $(document).bind('keydown', this._onKeyDown);

    this.template = this.getTemplate('table/views/overlays/image');
    this.image_template =  _.template("<img src='<%- url %>' style='width: <%- width %>px'/>");

    this._setupModels();

    this.form_data = [{
      name: 'Box',
      form: {
        'box-color':  { type: 'color', value: '#000', extra: { tick: "left", picker_vertical_position: "down", picker_horizontal_position: "left" }},
        'box-opacity':  { type: 'simple_opacity', value: .7, min:0, max:1, inc: .1, disable_triggering: true },
      }

    }, {
      name: 'Width',
      form: {
        'box-width':  { type: 'simple_number', value: 300, min: 50, max: 2000, inc: 10, disable_triggering: true },
      }

    }];

  },

  // Setup the internal and custom model
  _setupModels: function() {

    var self  = this;
    var extra = this.model.get("extra");

    this.model.set({ url: extra.url }, { silent: true });

    var applyStyle = function() {
      self._applyStyle(true);
    };

    // Bindings
    this.model.bind('remove',   this.hide, this);
    this.model.bind('change:url',     this._setURL,          this);
    this.model.bind('change:style',   applyStyle,            this);
    this.model.bind('change:extra',   this._onChangeExtra,   this);
    this.model.bind('change:display', this._onChangeDisplay, this);
    this.model.bind('change:selected', this._onChangeSelected, this);

    // Internal model to store the editing state
    this.editModel = new cdb.core.Model({ mode: "" });
    this.editModel.bind('change:mode', this._onChangeMode, this);

    this.add_related_model(this.editModel);

  },

  // Element events 
  _onKeyUp: function(e) {

    var self = this;

    var temp      = "";
    var domString = "";

    if (this.timeout)      clearTimeout(this.timeout);
    if (this.keyUpTimeout) clearTimeout(this.keyUpTimeout);
    if (this.savingTimeout) clearTimeout(this.savingTimeout);

    var value = this.$text.html();

    if (cdb.Utils.stripHTML(value) == "") {

      this.keyUpTimeout = setTimeout(function() {

        self.model.set({ url: "" }, { silent: true });
        self._close();

      }, 600);

    }  else {


      if (cdb.Utils.isURL(value)) {
        this.model.set({ url: value }, { silent: true });
      }

      if (!this.$el.hasClass("hover") && this.$text.text()) {
        this.savingTimeout = setTimeout(function() {

          self._disableEditingMode();

        }, 500);

      }

    }

  },

  _onPaste: function(e) {

    var self = this;

    setTimeout(function() {
      var text = cdb.Utils.stripHTML(self.$text.text());

      if (cdb.Utils.isURL(text)) {
        self.model.set("url", text);
        self.editModel.set("mode", "loading");
      }

    }, 300);

  },

  _onMouseDown:      function() { },
  _onMouseEnterText: function() { },
  _onMouseLeaveText: function() { },

  /*
   * Applies style to the content of the overlay
   */

  _applyStyle: function(save) {

    var style      = this.model.get("style");

    var boxColor   = style["box-color"];
    var boxOpacity = style["box-opacity"];
    var boxWidth   = style["box-width"];

    this.$text.css(style);
    this.$text.css("font-size", style["font-size"] + "px");

    this.$el.css("z-index", style["z-index"]);

    var rgbaCol = 'rgba(' + parseInt(boxColor.slice(-6,-4),16)
    + ',' + parseInt(boxColor.slice(-4,-2),16)
    + ',' + parseInt(boxColor.slice(-2),16)
    +', ' + boxOpacity + ' )';

    this.$el.css("background-color", rgbaCol);
    this.$("img").css("width", boxWidth);

    if (save) this.model.save();

  },

  _enableEditingMode: function() {

    var self = this;
    var text = this.model.get("url");

    this.$el
    .removeClass("error")
    .addClass("editable disabled");

    this.$text.attr("contenteditable", true).focus();

    setTimeout(function() {

      var h = self.$text.outerHeight(true);
      var w = self.$text.width();

      self.$text.html(text);
      self.$text.css({ minWidth: w });

    }, 100);

  },

  _disableEditingMode: function() {

    var url       = this.model.get("url");
    var style     = this.model.get("style");
    var boxWidth  = style["box-width"];
    var extra     = this.model.get("extra");
    var img       = "<img src='" + url + "' style='width: " + boxWidth + "px'/>";

    this.$el.removeClass("editable disabled");

    this.editModel.set("mode", "");

    if (!this.error) this.$el.removeClass("error");
    else this.$el.addClass("error");

    this.$text.html(img);
    this.$text.attr("contenteditable", false);

    extra.url = url;

    extra.rendered_text = this.image_template({ url: url, width: boxWidth });

    if (extra.url !== extra.default_image_url) {
      extra.has_default_image = false;
    }

    this.model.set({ extra: extra }, { silent: true });

    this.model.save();

    this.$text.css({ height: "auto", minHeight: "0", minWidth: "0" });

  },

  _setURL: function() {
    this._loadImage(this.model.get("url"));
  },

  _loadImage: function(url) {

    var self = this;

    var success = function() {
      self._onLoadSuccess(url);
    };

    var error = function() {
      self._onLoadError(url);
    };

    $("<img/>")
    .load(success)
    .error(error)
    .attr("src", url);

  },

  _onLoadError: function(url) {
    this.$el.addClass('error');
    this.error = true;
  },

  _onLoadSuccess: function(url) {

    this.$el.removeClass("error");

    this.error = false;

    var style     = this.model.get("style");
    var boxWidth  = style["box-width"];
    var extra     = this.model.get("extra");
    var img       = this.image_template({ url: url, width: boxWidth });

    extra.rendered_text = img;

    this.model.set({ extra: extra }, { silent: true });

    this.$el.removeClass("editable disabled");

    this.$text.html(img);
    this.$text.attr("contenteditable", false);
    this.$text.css("height", "auto");

    this.editModel.set("mode", "");

    if (this.model.get("display")) {
      this.show();
    }

  },

  _addDropdown: function() {

    this.dropdown = new cdb.admin.OverlayPropertiesDropdown({
      tick: "left",
      target: this.$(".edit"),
      model: this.model,
      horizontal_position: "left",
      horizontal_offset: 26,
      vertical_offset: 24,
      template_base: 'table/views/overlays/properties_dropdown',
      form_data: this.form_data
    });

    var self = this;

    this.dropdown.on("saved", function() {
      self.dropdown.move();
    });

    this._bindDropdown();

    this.$el.append(this.dropdown.render().el);

  },

  _bindDropdown: function() {

    this.dropdown.bind("onDropdownShown", function() {
      this.$el.addClass("open");
    }, this);

    this.dropdown.bind("onDropdownHidden", function() {
      this.$el.removeClass("open");
    }, this);

    cdb.god.bind("closeDialogs", this.dropdown.hide, this.dropdown);

  },

  _onChangeMode: function() {

    var mode = this.editModel.get("mode");

    this.trigger('editing', mode === 'editable', this);

    if (mode === "editable") {
      this._enableEditingMode();
    } else {
      this._disableEditingMode();
    }

  },

  clean: function() {
    $(document).unbind('keydown', this._onKeyDown, this);
    cdb.core.View.prototype.clean.call(this);
  },

  render: function() {

    this._place();

    this.$el.append(this.template());

    this.$text = this.$(".content div.text");

    this._setURL();
    this._applyStyle(false);

    this.$el.addClass(this.model.get("device"));

    cdb.god.unbind("closeDialogs", this._onCloseDialogs, this);
    cdb.god.bind("closeDialogs", this._onCloseDialogs, this);

    return this;

  }

});