164 lines
5.2 KiB
JavaScript
164 lines
5.2 KiB
JavaScript
var LinkTooltip, 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');
|
|
|
|
LinkTooltip = (function(_super) {
|
|
__extends(LinkTooltip, _super);
|
|
|
|
LinkTooltip.DEFAULTS = {
|
|
maxLength: 50,
|
|
styles: {
|
|
'.link-tooltip-container': {
|
|
'padding': '5px 10px'
|
|
},
|
|
'.link-tooltip-container input.input': {
|
|
'width': '170px'
|
|
},
|
|
'.link-tooltip-container input.input, .link-tooltip-container a.done, .link-tooltip-container.editing a.url, .link-tooltip-container.editing a.change': {
|
|
'display': 'none'
|
|
},
|
|
'.link-tooltip-container.editing input.input, .link-tooltip-container.editing a.done': {
|
|
'display': 'inline-block'
|
|
}
|
|
},
|
|
template: '<span class="title">Visit URL: </span> <a href="#" class="url" target="_blank" href="about:blank"></a> <input class="input" type="text"> <span> - </span> <a href="javascript:;" class="change">Change</a> <a href="javascript:;" class="done">Done</a>'
|
|
};
|
|
|
|
function LinkTooltip(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);
|
|
LinkTooltip.__super__.constructor.call(this, this.quill, this.options);
|
|
dom(this.container).addClass('link-tooltip-container');
|
|
this.textbox = this.container.querySelector('.input');
|
|
this.link = this.container.querySelector('.url');
|
|
this.initListeners();
|
|
}
|
|
|
|
LinkTooltip.prototype.initListeners = function() {
|
|
this.quill.on(this.quill.constructor.events.SELECTION_CHANGE, (function(_this) {
|
|
return function(range) {
|
|
var anchor;
|
|
if (!((range != null) && range.isCollapsed())) {
|
|
return;
|
|
}
|
|
anchor = _this._findAnchor(range);
|
|
if (anchor) {
|
|
_this.setMode(anchor.href, false);
|
|
return _this.show(anchor);
|
|
} else {
|
|
_this.range = null;
|
|
return _this.hide();
|
|
}
|
|
};
|
|
})(this));
|
|
dom(this.container.querySelector('.done')).on('click', _.bind(this.saveLink, this));
|
|
dom(this.container.querySelector('.change')).on('click', (function(_this) {
|
|
return function() {
|
|
return _this.setMode(_this.link.href, true);
|
|
};
|
|
})(this));
|
|
this.initTextbox(this.textbox, this.saveLink, this.hide);
|
|
return this.quill.onModuleLoad('toolbar', (function(_this) {
|
|
return function(toolbar) {
|
|
return toolbar.initFormat('link', _.bind(_this._onToolbar, _this));
|
|
};
|
|
})(this));
|
|
};
|
|
|
|
LinkTooltip.prototype.saveLink = function() {
|
|
var anchor, url;
|
|
url = this._normalizeURL(this.textbox.value);
|
|
if (this.range != null) {
|
|
if (this.range.isCollapsed()) {
|
|
anchor = this._findAnchor(this.range);
|
|
if (anchor != null) {
|
|
anchor.href = url;
|
|
}
|
|
} else {
|
|
this.quill.formatText(this.range, 'link', url, 'user');
|
|
}
|
|
}
|
|
return this.setMode(url, false);
|
|
};
|
|
|
|
LinkTooltip.prototype.setMode = function(url, edit) {
|
|
var text;
|
|
if (edit == null) {
|
|
edit = false;
|
|
}
|
|
if (edit) {
|
|
this.textbox.value = url;
|
|
_.defer((function(_this) {
|
|
return function() {
|
|
_this.textbox.focus();
|
|
return _this.textbox.setSelectionRange(url.length, url.length);
|
|
};
|
|
})(this));
|
|
} else {
|
|
this.link.href = url;
|
|
text = url.length > this.options.maxLength ? url.slice(0, this.options.maxLength) + '...' : url;
|
|
dom(this.link).text(text);
|
|
}
|
|
return dom(this.container).toggleClass('editing', edit);
|
|
};
|
|
|
|
LinkTooltip.prototype._findAnchor = function(range) {
|
|
var leaf, node, offset, _ref;
|
|
_ref = this.quill.editor.doc.findLeafAt(range.start, true), leaf = _ref[0], offset = _ref[1];
|
|
if (leaf != null) {
|
|
node = leaf.node;
|
|
}
|
|
while (node != null) {
|
|
if (node.tagName === 'A') {
|
|
return node;
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
LinkTooltip.prototype._onToolbar = function(range, value) {
|
|
var nativeRange;
|
|
if (!(range && !range.isCollapsed())) {
|
|
return;
|
|
}
|
|
if (value) {
|
|
this.setMode(this._suggestURL(range), true);
|
|
nativeRange = this.quill.editor.selection._getNativeRange();
|
|
return this.show(nativeRange);
|
|
} else {
|
|
return this.quill.formatText(range, 'link', false, 'user');
|
|
}
|
|
};
|
|
|
|
LinkTooltip.prototype._normalizeURL = function(url) {
|
|
if (!/^(https?:\/\/|mailto:)/.test(url)) {
|
|
url = 'http://' + url;
|
|
}
|
|
return url;
|
|
};
|
|
|
|
LinkTooltip.prototype._suggestURL = function(range) {
|
|
var text;
|
|
text = this.quill.getText(range);
|
|
return this._normalizeURL(text);
|
|
};
|
|
|
|
return LinkTooltip;
|
|
|
|
})(Tooltip);
|
|
|
|
Quill.registerModule('link-tooltip', LinkTooltip);
|
|
|
|
module.exports = LinkTooltip;
|