//>>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: "${textInput}", // 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: [ "", "
", "", "", "", "
", "", "", "", "
", "", "", "
" ].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 + "
" + 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 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; });