diff options
Diffstat (limited to 'js/dojo/dojox/editor/plugins/InsertAnchor.js')
| -rw-r--r-- | js/dojo/dojox/editor/plugins/InsertAnchor.js | 453 |
1 files changed, 453 insertions, 0 deletions
diff --git a/js/dojo/dojox/editor/plugins/InsertAnchor.js b/js/dojo/dojox/editor/plugins/InsertAnchor.js new file mode 100644 index 0000000..4669f9c --- /dev/null +++ b/js/dojo/dojox/editor/plugins/InsertAnchor.js @@ -0,0 +1,453 @@ +//>>built +define("dojox/editor/plugins/InsertAnchor", [ + "dojo", + "dijit", + "dojox", + "dijit/_base/manager", // TODO: change to dijit/registry, and change dijit.byId to registry.byId + "dijit/_editor/range", + "dijit/_Templated", + "dijit/TooltipDialog", + "dijit/form/ValidationTextBox", + "dijit/form/Select", + "dijit/form/Button", + "dijit/form/DropDownButton", + "dijit/_editor/range", + "dijit/_editor/selection", + "dijit/_editor/_Plugin", + "dojo/_base/connect", + "dojo/_base/declare", + "dojo/i18n", + "dojo/string", + "dojox/editor/plugins/ToolbarLineBreak", + "dojo/i18n!dojox/editor/plugins/nls/InsertAnchor", + "dojo/i18n!dijit/nls/common" +], function(dojo, dijit, dojox) { + +dojo.declare("dojox.editor.plugins.InsertAnchor", dijit._editor._Plugin, { + // summary: + // This plugin provides the basis for an insert anchor dialog for the + // dijit.Editor + // + // description: + // The command provided by this plugin is: + // * insertAnchor + + // htmlTemplate: [protected] String + // String used for templating the HTML to insert at the desired point. + htmlTemplate: "<a name=\"${anchorInput}\" class=\"dijitEditorPluginInsertAnchorStyle\">${textInput}</a>", + + // iconClassPrefix: [const] String + // The CSS class name for the button node icon. + iconClassPrefix: "dijitAdditionalEditorIcon", + + // linkDialogTemplate: [private] String + // Template for contents of TooltipDialog to pick URL + _template: [ + "<table><tr><td>", + "<label for='${id}_anchorInput'>${anchor}</label>", + "</td><td>", + "<input dojoType='dijit.form.ValidationTextBox' required='true' " + + "id='${id}_anchorInput' name='anchorInput' intermediateChanges='true'>", + "</td></tr><tr><td>", + "<label for='${id}_textInput'>${text}</label>", + "</td><td>", + "<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' " + + "name='textInput' intermediateChanges='true'>", + "</td></tr>", + "<tr><td colspan='2'>", + "<button dojoType='dijit.form.Button' type='submit' id='${id}_setButton'>${set}</button>", + "<button dojoType='dijit.form.Button' type='button' id='${id}_cancelButton'>${cancel}</button>", + "</td></tr></table>" + ].join(""), + + _initButton: function(){ + // Override _Plugin._initButton() to initialize DropDownButton and TooltipDialog. + var _this = this; + var messages = dojo.i18n.getLocalization("dojox.editor.plugins", "InsertAnchor", this.lang); + + // Build the dropdown dialog we'll use for the button + var dropDown = (this.dropDown = new dijit.TooltipDialog({ + title: messages["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); + } + })); + + this.button = new dijit.form.DropDownButton({ + label: messages["insertAnchor"], + showLabel: false, + iconClass: this.iconClassPrefix + " " + this.iconClassPrefix + "InsertAnchor", + tabIndex: "-1", + dropDown: this.dropDown + }); + + messages.id = dijit.getUniqueId(this.editor.id); + this._uniqueId = messages.id; + + this.dropDown.set('content', dropDown.title + + "<div style='border-bottom: 1px black solid;padding-bottom:2pt;margin-bottom:4pt'></div>" + + dojo.string.substitute(this._template, messages)); + + dropDown.startup(); + this._anchorInput = dijit.byId(this._uniqueId + "_anchorInput"); + 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._anchorInput){ + this.connect(this._anchorInput, "onChange", "_checkInput"); + } + if(this._textInput){ + this.connect(this._anchorInput, "onChange", "_checkInput"); + } + + //Register some filters to handle setting/removing the class tags on anchors. + this.editor.contentDomPreFilters.push(dojo.hitch(this, this._preDomFilter)); + this.editor.contentDomPostFilters.push(dojo.hitch(this, this._postDomFilter)); + this._setup(); + }, + + updateState: function(){ + // summary: + // Over-ride for button state control for disabled to work. + this.button.set("disabled", this.get("disabled")); + }, + + setEditor: function(editor){ + // summary: + // Over-ride for the setting of the editor. + // editor: Object + // The editor to configure for this plugin to use. + this.editor = editor; + this._initButton(); + }, + + _checkInput: function(){ + // summary: + // Function to check the input to the dialog is valid + // and enable/disable set button + // tags: + // private + var disable = true; + if(this._anchorInput.isValid()){ + disable = false; + } + this._setButton.set("disabled", disable); + }, + + _setup: function(){ + // summary: + // Over-ridable function that connects tag specific events. + this.editor.onLoadDeferred.addCallback(dojo.hitch(this, function(){ + this.connect(this.editor.editNode, "ondblclick", this._onDblClick); + setTimeout(dojo.hitch(this, function() { + this._applyStyles(); + }), 100); + })); + }, + + getAnchorStyle: function(){ + // summary: + // Over-ridable function for getting the style to apply to the anchor. + // The default is a dashed border with an anchor symbol. + // tags: + // public + var style = "@media screen {\n" + + "\t.dijitEditorPluginInsertAnchorStyle {\n" + + "\t\tbackground-image: url({MODURL}/images/anchor.gif);\n" + + "\t\tbackground-repeat: no-repeat;\n" + + "\t\tbackground-position: top left;\n" + + "\t\tborder-width: 1px;\n" + + "\t\tborder-style: dashed;\n" + + "\t\tborder-color: #D0D0D0;\n" + + "\t\tpadding-left: 20px;\n" + + "\t}\n" + + "}\n"; + + //Finally associate in the image locations based off the module url. + var modurl = dojo.moduleUrl(dojox._scopeName, "editor/plugins/resources").toString(); + if(!(modurl.match(/^https?:\/\//i)) && + !(modurl.match(/^file:\/\//i))){ + // We have to root it to the page location on webkit for some nutball reason. + // Probably has to do with how iframe was loaded. + var bUrl; + if(modurl.charAt(0) === "/"){ + //Absolute path on the server, so lets handle... + var proto = dojo.doc.location.protocol; + var hostn = dojo.doc.location.host; + bUrl = proto + "//" + hostn; + }else{ + bUrl = this._calcBaseUrl(dojo.global.location.href); + } + if(bUrl[bUrl.length - 1] !== "/" && modurl.charAt(0) !== "/"){ + bUrl += "/"; + } + modurl = bUrl + modurl; + } + return style.replace(/\{MODURL\}/gi, modurl); + }, + + _applyStyles: function(){ + // summary: + // Function to apply a style to inserted anchor tags so that + // they are obviously anchors. + if(!this._styled){ + try{ + //Attempt to inject our specialized style rules for doing this. + this._styled = true; + var doc = this.editor.document; + var style = this.getAnchorStyle(); + if(!dojo.isIE){ + var sNode = doc.createElement("style"); + sNode.appendChild(doc.createTextNode(style)); + doc.getElementsByTagName("head")[0].appendChild(sNode); + }else{ + var ss = doc.createStyleSheet(""); + ss.cssText = style; + } + }catch(e){ /* Squelch */ } + } + }, + + _calcBaseUrl: function(fullUrl) { + // summary: + // Internal function used to figure out the full root url (no relatives) + // for loading images in the styles in the iframe. + // fullUrl: String + // The full url to tear down to the base. + // tags: + // private + var baseUrl = null; + if (fullUrl !== null) { + // Check to see if we need to strip off any query parameters from the Url. + var index = fullUrl.indexOf("?"); + if (index != -1) { + fullUrl = fullUrl.substring(0,index); + } + + // Now we need to trim if necessary. If it ends in /, then we don't + // have a filename to trim off so we can return. + index = fullUrl.lastIndexOf("/"); + if (index > 0 && index < fullUrl.length) { + baseUrl = fullUrl.substring(0,index); + }else{ + baseUrl = fullUrl; + } + } + return baseUrl; //String + }, + + _checkValues: function(args){ + // summary: + // Function to check the values in args and 'fix' them up as needed. + // args: Object + // Content being set. + // tags: + // protected + if(args){ + if(args.anchorInput){ + args.anchorInput = args.anchorInput.replace(/"/g, """); + } + if(!args.textInput){ + // WebKit doesn't work with double-click select unless there's + // a space in the anchor text, so put a in the case of + // empty desc. + args.textInput = " "; + } + } + return args; + }, + + setValue: function(args){ + // summary: + // Callback from the dialog when user presses "set" button. + // tags: + // private + this._onCloseDialog(); + if(!this.editor.window.getSelection){ + // IE check without using user agent string. + 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() !== "a")){ + // 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, ["a"]); + } + if(a && (a.nodeName && a.nodeName.toLowerCase() === "a")){ + // 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 <a> 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)); + }, + + _onCloseDialog: function(){ + // summary: + // Handler for close event on the dialog + this.editor.focus(); + }, + + _getCurrentValues: function(a){ + // 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 anchor, text; + if(a && a.tagName.toLowerCase() === "a" && dojo.attr(a, "name")){ + anchor = dojo.attr(a, "name"); + 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 {anchorInput: anchor || '', textInput: text || ''}; //Object; + }, + + _onOpenDialog: function(){ + // 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. + var a; + if(!this.editor.window.getSelection){ + // 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() !== "a")){ + // 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, ["a"]); + } + }else{ + a = dojo.withGlobal(this.editor.window, + "getAncestorElement", dijit._editor.selection, ["a"]); + } + this.dropDown.reset(); + this._setButton.set("disabled", true); + this.dropDown.set("value", this._getCurrentValues(a)); + }, + + _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 === "a" && dojo.attr(t, "name")){ + this.editor.onDisplayChanged(); + dojo.withGlobal(this.editor.window, + "selectElement", + dijit._editor.selection, [t]); + 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(); + if(this.button.dropDown.focus){ + this.button.dropDown.focus(); + } + }), 10); + } + } + }, + + _preDomFilter: function(node){ + // summary: + // A filter to identify the 'a' tags and if they're anchors, + // apply the right style to them. + // node: + // The node to search from. + // tags: + // private + var ed = this.editor; + dojo.withGlobal(ed.window, function(){ + dojo.query("a", ed.editNode).forEach(function(a){ + if(dojo.attr(a, "name") && !dojo.attr(a, "href")){ + if(!dojo.hasClass(a,"dijitEditorPluginInsertAnchorStyle")){ + dojo.addClass(a, "dijitEditorPluginInsertAnchorStyle"); + } + } + }); + }); + }, + + _postDomFilter: function(node){ + // summary: + // A filter to identify the 'a' tags and if they're anchors, + // remove the class style that shows up in the editor from + // them. + // node: + // The node to search from. + // tags: + // private + var ed = this.editor; + dojo.withGlobal(ed.window, function(){ + dojo.query("a", node).forEach(function(a){ + if(dojo.attr(a, "name") && !dojo.attr(a, "href")){ + if(dojo.hasClass(a,"dijitEditorPluginInsertAnchorStyle")){ + dojo.removeClass(a, "dijitEditorPluginInsertAnchorStyle"); + } + } + }); + }); + return node; + } +}); + + +// Register this plugin. +dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){ + if(o.plugin){ return; } + var name = o.args.name; + if(name) { name = name.toLowerCase(); } + if(name === "insertanchor"){ + o.plugin = new dojox.editor.plugins.InsertAnchor(); + } +}); + +return dojox.editor.plugins.InsertAnchor; + +}); |