dijit/_editor/plugins/LinkDialog.js

• Provides:

  • dijit._editor.plugins.LinkDialog

• dijit._editor.plugins.LinkDialog

  • type

    Function

  • chains:
    • dijit._editor._Plugin: (prototype)
    • dijit._editor._Plugin: (call)
  • summary

    This plugin provides the basis for an 'anchor' (link) dialog and an extension of it
    provides the image link dialog.

• dijit._editor.plugins.LinkDialog.buttonClass

  • summary

• dijit._editor.plugins.LinkDialog.useDefaultCommand

  • summary

• dijit._editor.plugins.LinkDialog.urlRegExp

  • tags: protected
  • type

    String

  • summary

    Used for validating input as correct URL.  While file:// urls are not terribly
    useful, they are technically valid.

• dijit._editor.plugins.LinkDialog.emailRegExp

  • tags: protected
  • type

    String

  • summary

    Used for validating input as correct email address.  Taken from dojox.validate

• dijit._editor.plugins.LinkDialog.htmlTemplate

  • tags: protected
  • type

    String

  • summary

    String used for templating the HTML to insert at the desired point.

• dijit._editor.plugins.LinkDialog.tag

  • tags: protected
  • type

    String

  • summary

    Tag used for the link type.

• dijit._editor.plugins.LinkDialog._hostRxp

  • summary

• dijit._editor.plugins.LinkDialog._userAtRxp

  • summary

• dijit._editor.plugins.LinkDialog.linkDialogTemplate

  • tags: protected
  • type

    String

  • summary

    Template for contents of TooltipDialog to pick URL

• dijit._editor.plugins.LinkDialog._initButton

  • type

    Function

  • source: [view]
    define("dijit/_editor/plugins/LinkDialog", ["dojo", "dijit", "dijit/_Widget", "dijit/_editor/_Plugin", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dijit/form/ValidationTextBox", "dijit/form/Select", "dijit/_editor/range", "dojo/i18n", "dojo/string", "i18n!dijit/nls/common", "i18n!dijit/_editor/nls/LinkDialog"], function(dojo, dijit) {
    
    
    dojo.declare("dijit._editor.plugins.LinkDialog", dijit._editor._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
    
    
     // Override _Plugin.buttonClass. This plugin is controlled by a DropDownButton
     // (which triggers a TooltipDialog).
     buttonClass: dijit.form.DropDownButton,
    
    
     // Override _Plugin.useDefaultCommand... processing is handled by this plugin, not by dijit.Editor.
     useDefaultCommand: false,
    
    
     // urlRegExp: [protected] String
     //  Used for validating input as correct URL. While file:// urls are not terribly
     //  useful, they are technically valid.
     urlRegExp: "((https?|ftps?|file)\\://|\./|/|)(/[a-zA-Z]{1,1}:/|)(((?:(?:[\\da-zA-Z](?:[-\\da-zA-Z]{0,61}[\\da-zA-Z])?)\\.)*(?:[a-zA-Z](?:[-\\da-zA-Z]{0,80}[\\da-zA-Z])?)\\.?)|(((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])|(0[xX]0*[\\da-fA-F]?[\\da-fA-F]\\.){3}0[xX]0*[\\da-fA-F]?[\\da-fA-F]|(0+[0-3][0-7][0-7]\\.){3}0+[0-3][0-7][0-7]|(0|[1-9]\\d{0,8}|[1-3]\\d{9}|4[01]\\d{8}|42[0-8]\\d{7}|429[0-3]\\d{6}|4294[0-8]\\d{5}|42949[0-5]\\d{4}|429496[0-6]\\d{3}|4294967[01]\\d{2}|42949672[0-8]\\d|429496729[0-5])|0[xX]0*[\\da-fA-F]{1,8}|([\\da-fA-F]{1,4}\\:){7}[\\da-fA-F]{1,4}|([\\da-fA-F]{1,4}\\:){6}((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])))(\\:\\d+)?(/(?:[^?#\\s/]+/)*(?:[^?#\\s/]{0,}(?:\\?[^?#\\s/]*)?(?:#.*)?)?)?",
    
    
     // emailRegExp: [protected] String
     //  Used for validating input as correct email address. Taken from dojox.validate
     emailRegExp: " "((?:(?:[\\da-zA-Z](?:[-\\da-zA-Z]{0,61}[\\da-zA-Z])?)\\.)+(?:[a-zA-Z](?:[-\\da-zA-Z]{0,6}[\\da-zA-Z])?)\\.?)|localhost|^[^-][a-zA-Z0-9_-]*>?", // host.
    
    
     // htmlTemplate: [protected] String
     //  String used for templating the HTML to insert at the desired point.
     htmlTemplate: "  " target=\"${targetSelect}\"" +
      ">${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: new RegExp("^((([^\\[:]+):)?([^@]+)@)?(\\[([^\\]]+)\\]|([^\\[:]*))(:([0-9]+))?$"),
    
    
     // _userAtRxp [private] RegExp
     //  Regular expression used to validate e-mail address fragment.
     _userAtRxp: new RegExp("^([!#-'*+\\-\\/-9=?A-Z^-~]+[.])*[!#-'*+\\-\\/-9=?A-Z^-~]+@", "i"),
    
    
     // linkDialogTemplate: [protected] String
     //  Template for contents of TooltipDialog to pick URL
     linkDialogTemplate: [
      "

    ",   "${url}",   "	",   "  "id='${id}_urlInput' name='urlInput' intermediateChanges='true'/>",   "
    ",   "${text}",   "	",   "  "name='textInput' intermediateChanges='true'/>",   "
    ",   "${target}",   "	",   "",   "${currentWindow}",   "${newWindow}",   "${topWindow}",   "${parentWindow}",   "",   "
    ",   "${set}",   "${buttonCancel}",   "

    "
     ].join(""),
    
    
     _initButton: function(){
      // Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog.
      var _this = this;
      this.tag = this.command == 'insertImage' ? 'img' : 'a';
      var messages = dojo.mixin(dojo.i18n.getLocalization("dijit", "common", this.lang),
       dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang));
      var dropDown = (this.dropDown = new dijit.TooltipDialog({
       title: messages[this.command + "Title"],
       execute: dojo.hitch(this, "setValue"),
       onOpen: function(){
        _this._onOpenDialog();
        dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
       },
       onCancel: function(){
        setTimeout(dojo.hitch(_this, "_onCloseDialog"),0);
       }
      }));
      messages.urlRegExp = this.urlRegExp;
      messages.id = dijit.getUniqueId(this.editor.id);
      this._uniqueId = messages.id;
      this._setContent(dropDown.title +
       "

    " +
       dojo.string.substitute(this.linkDialogTemplate, messages));
      dropDown.startup();
      this._urlInput = dijit.byId(this._uniqueId + "_urlInput");
      this._textInput = dijit.byId(this._uniqueId + "_textInput");
      this._setButton = dijit.byId(this._uniqueId + "_setButton");
      this.connect(dijit.byId(this._uniqueId + "_cancelButton"), "onClick", function(){
       this.dropDown.onCancel();
      });
      if(this._urlInput){
       this.connect(this._urlInput, "onChange", "_checkAndFixInput");
      }
      if(this._textInput){
       this.connect(this._textInput, "onChange", "_checkAndFixInput");
      }
    
    
      // Build up the dual check for http/https/file:, and mailto formats.
      this._urlRegExp = new RegExp("^" + this.urlRegExp + "$", "i");
      this._emailRegExp = new RegExp("^" + this.emailRegExp + "$", "i");
      this._urlInput.isValid = dojo.hitch(this, function(){
       // Function over-ride of isValid to test if the input matches a url or a mailto style link.
       var value = this._urlInput.get("value");
       return this._urlRegExp.test(value) || this._emailRegExp.test(value);
      });
    
    
      this._connectTagEvents();
      this.inherited(arguments);
  • chains:
    • dijit.TooltipDialog.prototype.onOpen: (call)
  • summary

• dijit._editor.plugins.LinkDialog._checkAndFixInput

  • type

    Function

  • source: [view]
      var self = this;
      var url = this._urlInput.get("value");
      var fixupUrl = function(url){
       var appendHttp = false;
       var appendMailto = false;
       if(url && url.length > 1){
        url = dojo.trim(url);
        if(url.indexOf("mailto:") !== 0){
         if(url.indexOf("/") > 0){
          if(url.indexOf("://") === -1){
           // Check that it doesn't start with / or ./, which would
           // imply 'target server relativeness'
           if(url.charAt(0) !== '/' && url.indexOf("./") !== 0){
            if(self._hostRxp.test(url)){
             appendHttp = true;
            }
           }
          }
         }else if(self._userAtRxp.test(url)){
          // If it looks like a foo@, append a mailto.
          appendMailto = true;
         }
        }
       }
       if(appendHttp){
        self._urlInput.set("value", "http://" + url);
       }
       if(appendMailto){
        self._urlInput.set("value", "mailto:" + url);
       }
       self._setButton.set("disabled", !self._isValid());
      };
      if(this._delayedCheck){
       clearTimeout(this._delayedCheck);
       this._delayedCheck = null;
      }
      this._delayedCheck = setTimeout(function(){
       fixupUrl(url);
      }, 250);
  • summary

    A function to listen for onChange events and test the input contents
    for valid information, such as valid urls with http/https/ftp and if
    not present, try and guess if the input url is relative or not, and if
    not, append http:// to it.  Also validates other fields as determined by
    the internal _isValid function.

• dijit._editor.plugins.LinkDialog._connectTagEvents

  • type

    Function

  • source: [view]
      this.editor.onLoadDeferred.addCallback(dojo.hitch(this, function(){
       this.connect(this.editor.editNode, "ondblclick", this._onDblClick);
      }));
  • summary

    Over-ridable function that connects tag specific events.

• dijit._editor.plugins.LinkDialog._isValid

  • type

    Function

  • source: [view]
      return this._urlInput.isValid() && this._textInput.isValid();
  • summary

    Internal function to allow validating of the inputs
    for a link to determine if set should be disabled or not

  • tags:

• dijit._editor.plugins.LinkDialog._setContent

  • type

    Function

  • parameters:
    • staticPanel: (typeof )
  • source: [view]
      this.dropDown.set({
       parserScope: "dojo",  // make parser search for dojoType/data-dojo-type even if page is multi-version
       content: staticPanel
      });
  • summary

    Helper for _initButton above.   Not sure why it's a separate method.

• dijit._editor.plugins.LinkDialog._checkValues

  • type

    Function

  • parameters:
    • args: (typeof Object)

      Content being set.

  • source: [view]
      if(args && args.urlInput){
       args.urlInput = args.urlInput.replace(/"/g, """);
      }
      return args;
  • summary

    Function to check the values in args and 'fix' them up as needed.

  • tags:

• dijit._editor.plugins.LinkDialog.setValue

  • type

    Function

  • parameters:
    • args: (typeof )
  • source: [view]
      this._onCloseDialog();
      if(dojo.isIE < 9){ //see #4151
       var sel = dijit.range.getSelection(this.editor.window);
       var range = sel.getRangeAt(0);
       var a = range.endContainer;
       if(a.nodeType === 3){
        // Text node, may be the link contents, so check parent.
        // This plugin doesn't really support nested HTML elements
        // in the link, it assumes all link content is text.
        a = a.parentNode;
       }
       if(a && (a.nodeName && a.nodeName.toLowerCase() !== this.tag)){
        // Stll nothing, one last thing to try on IE, as it might be 'img'
        // and thus considered a control.
        a = dojo.withGlobal(this.editor.window,
         "getSelectedElement", dijit._editor.selection, [this.tag]);
       }
       if(a && (a.nodeName && a.nodeName.toLowerCase() === this.tag)){
        // Okay, we do have a match. IE, for some reason, sometimes pastes before
        // instead of removing the targetted paste-over element, so we unlink the
        // old one first. If we do not the tag remains, but it has no content,
        // so isn't readily visible (but is wrong for the action).
        if(this.editor.queryCommandEnabled("unlink")){
         // Select all the link childent, then unlink. The following insert will
         // then replace the selected text.
         dojo.withGlobal(this.editor.window,
          "selectElementChildren", dijit._editor.selection, [a]);
         this.editor.execCommand("unlink");
        }
       }
      }
      // make sure values are properly escaped, etc.
      args = this._checkValues(args);
      this.editor.execCommand('inserthtml',
       dojo.string.substitute(this.htmlTemplate, args));
  • summary

    Callback from the dialog when user presses "set" button.

  • tags:

• dijit._editor.plugins.LinkDialog._onCloseDialog

  • type

    Function

  • source: [view]
      this.editor.focus();
  • summary

    Handler for close event on the dialog

• dijit._editor.plugins.LinkDialog._getCurrentValues

  • type

    Function

  • parameters:
    • a: (typeof The)

      anchor/link to process for data for the dropdown.

  • source: [view]
      var url, text, target;
      if(a && a.tagName.toLowerCase() === this.tag){
       url = a.getAttribute('_djrealurl') || a.getAttribute('href');
       target = a.getAttribute('target') || "_self";
       text = a.textContent || a.innerText;
       dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a, true]);
      }else{
       text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText);
      }
      return {urlInput: url || '', textInput: text || '', targetSelect: target || ''}; //Object;
  • summary

    Over-ride for getting the values to set in the dropdown.

  • tags:
  • returns

    Object;

• dijit._editor.plugins.LinkDialog._onOpenDialog

  • type

    Function

  • source: [view]
      var a;
      if(dojo.isIE < 9){
       // IE is difficult to select the element in, using the range unified
       // API seems to work reasonably well.
       var sel = dijit.range.getSelection(this.editor.window);
       var range = sel.getRangeAt(0);
       a = range.endContainer;
       if(a.nodeType === 3){
        // Text node, may be the link contents, so check parent.
        // This plugin doesn't really support nested HTML elements
        // in the link, it assumes all link content is text.
        a = a.parentNode;
       }
       if(a && (a.nodeName && a.nodeName.toLowerCase() !== this.tag)){
        // Stll nothing, one last thing to try on IE, as it might be 'img'
        // and thus considered a control.
        a = dojo.withGlobal(this.editor.window,
         "getSelectedElement", dijit._editor.selection, [this.tag]);
       }
      }else{
       a = dojo.withGlobal(this.editor.window,
        "getAncestorElement", dijit._editor.selection, [this.tag]);
      }
      this.dropDown.reset();
      this._setButton.set("disabled", true);
      this.dropDown.set("value", this._getCurrentValues(a));
  • summary

    Handler for when the dialog is opened.
    If the caret is currently in a URL then populate the URL's info into the dialog.

• dijit._editor.plugins.LinkDialog._onDblClick

  • type

    Function

  • parameters:
    • e: (typeof Object)

      The double-click event.

  • source: [view]
      if(e && e.target){
       var t = e.target;
       var tg = t.tagName? t.tagName.toLowerCase() : "";
       if(tg === this.tag && dojo.attr(t,"href")){
        dojo.withGlobal(this.editor.window,
          "selectElement",
          dijit._editor.selection, [t]);
        this.editor.onDisplayChanged();
    
        
        setTimeout(dojo.hitch(this, function(){
         // Focus shift outside the event handler.
         // IE doesn't like focus changes in event handles.
         this.button.set("disabled", false);
         this.button.openDropDown();
        }), 10);
       }
      }
  • 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.

  • tags:

• dijit._editor.plugins.LinkDialog.dropDown

  • summary

• dijit._editor.plugins.LinkDialog._uniqueId

  • summary

• dijit._editor.plugins.LinkDialog._urlInput

  • summary

• dijit._editor.plugins.LinkDialog._textInput

  • summary

• dijit._editor.plugins.LinkDialog._setButton

  • summary

• dijit._editor.plugins.LinkDialog._urlRegExp

  • summary

• dijit._editor.plugins.LinkDialog._emailRegExp

  • summary

• dijit._editor.plugins.LinkDialog._urlInput.isValid

  • summary

• dijit._editor.plugins.LinkDialog._delayedCheck

  • summary

• dijit._editor.plugins.ImgLinkDialog

  • type

    Function

  • chains:
    • dijit._editor.plugins.LinkDialog: (prototype)
    • dijit._editor.plugins.LinkDialog: (call)
  • summary

    This plugin extends LinkDialog and adds in a plugin for handling image links.
    provides the image link dialog.

  • description

    The command provided by this plugin is:
    * insertImage

• dijit._editor.plugins.ImgLinkDialog.linkDialogTemplate

  • tags: protected
  • type

    String

  • summary

    Over-ride for template since img dialog doesn't need target that anchor tags may.

• dijit._editor.plugins.ImgLinkDialog.htmlTemplate

  • tags: protected
  • type

    String

  • summary

    String used for templating the <img> HTML to insert at the desired point.

• dijit._editor.plugins.ImgLinkDialog.tag

  • tags: protected
  • type

    String

  • summary

    Tag used for the link type (img).

• dijit._editor.plugins.ImgLinkDialog._getCurrentValues

  • type

    Function

  • parameters:
    • img: (typeof )
  • source: [view]
      var url, text;
      if(img && img.tagName.toLowerCase() === this.tag){
       url = img.getAttribute('_djrealurl') || img.getAttribute('src');
       text = img.getAttribute('alt');
       dojo.withGlobal(this.editor.window,
        "selectElement", dijit._editor.selection, [img, true]);
      }else{
       text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText);
      }
      return {urlInput: url || '', textInput: text || ''}; //Object;
  • summary

    Over-ride for getting the values to set in the dropdown.
    a:
    The anchor/link to process for data for the dropdown.

  • tags:
  • returns

    Object;

• dijit._editor.plugins.ImgLinkDialog._isValid

  • type

    Function

  • source: [view]
      return this._urlInput.isValid();
  • summary

    Over-ride for images.  You can have alt text of blank, it is valid.

  • tags:

• dijit._editor.plugins.ImgLinkDialog._connectTagEvents

  • type

    Function

  • source: [view]
      this.inherited(arguments);
      this.editor.onLoadDeferred.addCallback(dojo.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.connect(this.editor.editNode, "onmousedown", this._selectTag);
      }));
  • summary

    Over-ridable function that connects tag specific events.

• dijit._editor.plugins.ImgLinkDialog._selectTag

  • type

    Function

  • parameters:
    • e: (typeof Event)

      The mousedown event.

  • source: [view]
      if(e && e.target){
       var t = e.target;
       var tg = t.tagName? t.tagName.toLowerCase() : "";
       if(tg === this.tag){
        dojo.withGlobal(this.editor.window,
         "selectElement",
         dijit._editor.selection, [t]);
       }
      }
  • 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.

  • tags:

• dijit._editor.plugins.ImgLinkDialog._checkValues

  • type

    Function

  • parameters:
    • args: (typeof Object)

      Content being set.

  • source: [view]
      if(args && args.urlInput){
       args.urlInput = args.urlInput.replace(/"/g, """);
      }
      if(args && args.textInput){
       args.textInput = args.textInput.replace(/"/g, """);
      }
      return args;
  • summary

    Function to check the values in args and 'fix' them up as needed
    (special characters in the url or alt text)

  • tags:

• dijit._editor.plugins.ImgLinkDialog._onDblClick

  • type

    Function

  • parameters:
    • e: (typeof Object)

      The double-click event.

  • source: [view]
      if(e && e.target){
       var t = e.target;
       var tg = t.tagName? t.tagName.toLowerCase() : "";
       if(tg === this.tag && dojo.attr(t,"src")){
        dojo.withGlobal(this.editor.window,
          "selectElement",
          dijit._editor.selection, [t]);
        this.editor.onDisplayChanged();
        setTimeout(dojo.hitch(this, function(){
         // Focus shift outside the event handler.
         // IE doesn't like focus changes in event handles.
         this.button.set("disabled", false);
         this.button.openDropDown();
        }), 10);
       }
      }
  • 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.

  • tags:

• o.plugin

  • summary

• dijit._editor.plugins

  • type

    Object

  • summary

• dijit._editor

  • type

    Object

  • summary

• dijit

  • type

    Object

  • summary