wdi-dashboard/node_modules/quilljs/lib/modules/image-tooltip.js

var Delta, ImageTooltip, Quill, Tooltip, dom, _,
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

Quill = require('../quill');

Tooltip = require('./tooltip');

_ = Quill.require('lodash');

dom = Quill.require('dom');

Delta = Quill.require('delta');

ImageTooltip = (function(_super) {
  __extends(ImageTooltip, _super);

  ImageTooltip.DEFAULTS = {
    styles: {
      '.image-tooltip-container': {
        'margin': '25px',
        'padding': '10px',
        'width': '300px'
      },
      '.image-tooltip-container:after': {
        'clear': 'both',
        'content': '""',
        'display': 'table'
      },
      '.image-tooltip-container .preview': {
        'margin': '10px 0px',
        'position': 'relative',
        'border': '1px dashed #000',
        'height': '200px'
      },
      '.image-tooltip-container .preview span': {
        'display': 'inline-block',
        'position': 'absolute',
        'text-align': 'center',
        'top': '40%',
        'width': '100%'
      },
      '.image-tooltip-container img': {
        'bottom': '0',
        'left': '0',
        'margin': 'auto',
        'max-height': '100%',
        'max-width': '100%',
        'position': 'absolute',
        'right': '0',
        'top': '0'
      },
      '.image-tooltip-container .input': {
        'box-sizing': 'border-box',
        'width': '100%'
      },
      '.image-tooltip-container a': {
        'border': '1px solid black',
        'box-sizing': 'border-box',
        'display': 'inline-block',
        'float': 'left',
        'padding': '5px',
        'text-align': 'center',
        'width': '50%'
      }
    },
    template: '<input class="input" type="textbox"> <div class="preview"> <span>Preview</span> </div> <a href="javascript:;" class="cancel">Cancel</a> <a href="javascript:;" class="insert">Insert</a>'
  };

  function ImageTooltip(quill, options) {
    this.quill = quill;
    this.options = options;
    this.options.styles = _.defaults(this.options.styles, Tooltip.DEFAULTS.styles);
    this.options = _.defaults(this.options, Tooltip.DEFAULTS);
    ImageTooltip.__super__.constructor.call(this, this.quill, this.options);
    this.preview = this.container.querySelector('.preview');
    this.textbox = this.container.querySelector('.input');
    dom(this.container).addClass('image-tooltip-container');
    this.initListeners();
  }

  ImageTooltip.prototype.initListeners = function() {
    dom(this.container.querySelector('.insert')).on('click', _.bind(this.insertImage, this));
    dom(this.container.querySelector('.cancel')).on('click', _.bind(this.hide, this));
    dom(this.textbox).on('input', _.bind(this._preview, this));
    this.initTextbox(this.textbox, this.insertImage, this.hide);
    return this.quill.onModuleLoad('toolbar', (function(_this) {
      return function(toolbar) {
        return toolbar.initFormat('image', _.bind(_this._onToolbar, _this));
      };
    })(this));
  };

  ImageTooltip.prototype.insertImage = function() {
    var index, url;
    url = this._normalizeURL(this.textbox.value);
    if (this.range == null) {
      this.range = new Range(0, 0);
    }
    if (this.range) {
      this.preview.innerHTML = '<span>Preview</span>';
      this.textbox.value = '';
      index = this.range.end;
      this.quill.insertEmbed(index, 'image', url, 'user');
      this.quill.setSelection(index + 1, index + 1);
    }
    return this.hide();
  };

  ImageTooltip.prototype._onToolbar = function(range, value) {
    if (value) {
      if (!this.textbox.value) {
        this.textbox.value = 'http://';
      }
      this.show();
      this.textbox.focus();
      return _.defer((function(_this) {
        return function() {
          return _this.textbox.setSelectionRange(_this.textbox.value.length, _this.textbox.value.length);
        };
      })(this));
    } else {
      return this.quill.deleteText(range, 'user');
    }
  };

  ImageTooltip.prototype._preview = function() {
    var img;
    if (!this._matchImageURL(this.textbox.value)) {
      return;
    }
    if (this.preview.firstChild.tagName === 'IMG') {
      return this.preview.firstChild.setAttribute('src', this.textbox.value);
    } else {
      img = this.preview.ownerDocument.createElement('img');
      img.setAttribute('src', this.textbox.value);
      return this.preview.replaceChild(img, this.preview.firstChild);
    }
  };

  ImageTooltip.prototype._matchImageURL = function(url) {
    return /^https?:\/\/.+\.(jp?g|gif|png)$/.test(url);
  };

  ImageTooltip.prototype._normalizeURL = function(url) {
    if (!/^https?:\/\//.test(url)) {
      url = 'http://' + url;
    }
    return url;
  };

  return ImageTooltip;

})(Tooltip);

Quill.registerModule('image-tooltip', ImageTooltip);

module.exports = ImageTooltip;