define([
"require",
"dojo/_base/array",
"dojo/_base/declare", // declare
"dojo/dom-attr", // domAttr.get
"dojo/keys", // keys.ENTER
"dojo/_base/lang", // lang.delegate lang.hitch lang.trim
"dojo/on",
"dojo/sniff", // has("ie")
"dojo/query", // query
"dojo/string", // string.substitute
"../_Plugin",
"../../form/DropDownButton",
"../range"
], function(require, array, declare, domAttr, keys, lang, on, has, query, string,
_Plugin, DropDownButton, rangeapi){
// module:
// dijit/_editor/plugins/LinkDialog
var LinkDialog = declare("dijit._editor.plugins.LinkDialog", _Plugin, {
// summary:
// This plugin provides the basis for an 'anchor' (link) dialog and an extension of it
// provides the image link dialog.
// description:
// The command provided by this plugin is:
//
// - createLink
// allowUnsafeHtml: boolean
// If false (default), the link description will be filtered to prevent HTML content.
// If true no filtering is done, allowing for HTML content within the link element.
// The filter can be specified with the 'linkFilter' option.
allowUnsafeHtml: false,
// linkFilter: function or array of replacement pairs
// If 'allowUnsafeHtml' is false then this filter will be applied to the link Description value.
// function: the function will be invoked with the string value of the Description field and its
// return value will be used
// array: each array item should be an array of two values to pass to String#replace
linkFilter: [
[/?", // host.
// htmlTemplate: [protected] String
// String used for templating the HTML to insert at the desired point.
htmlTemplate: "${textInput}",
// tag: [protected] String
// Tag used for the link type.
tag: "a",
// _hostRxp [private] RegExp
// Regular expression used to validate url fragments (ip address, hostname, etc)
_hostRxp: /^((([^\[:]+):)?([^@]+)@)?(\[([^\]]+)\]|([^\[:]*))(:([0-9]+))?$/,
// _userAtRxp [private] RegExp
// Regular expression used to validate e-mail address fragment.
_userAtRxp: /^([!#-'*+\-\/-9=?A-Z^-~]+[.])*[!#-'*+\-\/-9=?A-Z^-~]+@/i,
// linkDialogTemplate: [protected] String
// Template for contents of TooltipDialog to pick URL
linkDialogTemplate: [
"
"
].join(""),
// htmlTemplate: [protected] String
// String used for templating the `` HTML to insert at the desired point.
htmlTemplate: "",
// tag: [protected] String
// Tag used for the link type (img).
tag: "img",
_getCurrentValues: function(img){
// summary:
// Over-ride for getting the values to set in the dropdown.
// a:
// The anchor/link to process for data for the dropdown.
// tags:
// protected
var url, text;
if(img && img.tagName.toLowerCase() === this.tag){
url = img.getAttribute('_djrealurl') || img.getAttribute('src');
text = img.getAttribute('alt');
this.editor.selection.selectElement(img, true);
}else{
text = this.editor.selection.getSelectedText();
}
return {urlInput: url || '', textInput: text || ''}; //Object
},
_isValid: function(){
// summary:
// Over-ride for images. You can have alt text of blank, it is valid.
// tags:
// protected
return this._urlInput.isValid();
},
_connectTagEvents: function(){
// summary:
// Over-ridable function that connects tag specific events.
this.inherited(arguments);
this.editor.onLoadDeferred.then(lang.hitch(this, function(){
// Use onmousedown instead of onclick. Seems that IE eats the first onclick
// to wrap it in a selector box, then the second one acts as onclick. See #10420
this.own(on(this.editor.editNode, "mousedown", lang.hitch(this, "_selectTag")));
}));
},
_selectTag: function(e){
// summary:
// A simple event handler that lets me select an image if it is clicked on.
// makes it easier to select images in a standard way across browsers. Otherwise
// selecting an image for edit becomes difficult.
// e: Event
// The mousedown event.
// tags:
// private
if(e && e.target){
var t = e.target;
var tg = t.tagName ? t.tagName.toLowerCase() : "";
if(tg === this.tag){
this.editor.selection.selectElement(t);
}
}
},
_checkValues: function(args){
// summary:
// Function to check the values in args and 'fix' them up as needed
// (special characters in the url or alt text)
// args: Object
// Content being set.
// tags:
// protected
if(args && args.urlInput){
args.urlInput = args.urlInput.replace(/"/g, """);
}
if(args && args.textInput){
args.textInput = args.textInput.replace(/"/g, """);
}
return args;
},
_onDblClick: function(e){
// summary:
// Function to define a behavior on double clicks on the element
// type this dialog edits to select it and pop up the editor
// dialog.
// e: Object
// The double-click event.
// tags:
// protected.
if(e && e.target){
var t = e.target;
var tg = t.tagName ? t.tagName.toLowerCase() : "";
if(tg === this.tag && domAttr.get(t, "src")){
var editor = this.editor;
this.editor.selection.selectElement(t);
editor.onDisplayChanged();
// Call onNormalizedDisplayChange() now, rather than on timer.
// On IE, when focus goes to the first in the TooltipDialog, the editor loses it's selection.
// Later if onNormalizedDisplayChange() gets called via the timer it will disable the LinkDialog button
// (actually, all the toolbar buttons), at which point clicking the will close the dialog,
// since (for unknown reasons) focus.js ignores disabled controls.
if(editor._updateTimer){
editor._updateTimer.remove();
delete editor._updateTimer;
}
editor.onNormalizedDisplayChanged();
var button = this.button;
setTimeout(function(){
// Focus shift outside the event handler.
// IE doesn't like focus changes in event handles.
button.set("disabled", false);
button.loadAndOpenDropDown().then(function(){
if(button.dropDown.focus){
button.dropDown.focus();
}
});
}, 10);
}
}
}
});
// Register these plugins
_Plugin.registry["createLink"] = function(args){
var pluginOptions = {
command: "createLink",
allowUnsafeHtml: ("allowUnsafeHtml" in args) ? args.allowUnsafeHtml : false
};
if("linkFilter" in args){
pluginOptions.linkFilter = args.linkFilter;
}
return new LinkDialog(pluginOptions);
};
_Plugin.registry["insertImage"] = function(){
return new ImgLinkDialog({command: "insertImage"});
};
// Export both LinkDialog and ImgLinkDialog
// TODO for 2.0: either return both classes in a hash, or split this file into two separate files.
// Then the documentation for the module can be applied to the hash, and will show up in the API doc.
LinkDialog.ImgLinkDialog = ImgLinkDialog;
return LinkDialog;
});