Changeset 12335

Timestamp:

02/09/08 21:53:48 (10 months ago)

Author:

peller

Message:

First stab at porting the old url 'insertImage' dialog feature from 0.4. Refs #2439 Uses same code as 'createLink' in LinkDialog? plugin. A fancy dojox.image plugin might extend this. Refs #5759. Also, cleanup code in LinkDialog?.js.

Location:

dijit/trunk

Files:

• Editor.js (modified) (2 diffs)
• tests/test_Editor.html (modified) (2 diffs)
• _editor/nls/LinkDialog.js (modified) (1 diff)
• _editor/plugins/LinkDialog.js (modified) (6 diffs)

dijit/trunk/Editor.js

@@ -364 +364 @@
                         p = new _p({ button: new dijit.ToolbarSeparator() });
                         break;
-                case "createLink":
-//                                      dojo['require']('dijit._editor.plugins.LinkDialog');
+                case "createLink": case "insertImage":
                         p = new dijit._editor.plugins.LinkDialog({ command: name });
                         break;
@@ -374 +373 @@
                         p = new dijit._editor.plugins.FontChoice({ command: name });
                         break;
-                case "toggleDir" :
+                case "toggleDir":
                         p = new dijit._editor.plugins.ToggleDir({ command: name});
         }

dijit/trunk/tests/test_Editor.html

@@ -18 +18 @@
                 dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
                 dojo.require("dijit._editor.plugins.EnterKeyHandling");
-//              dojo.require("dijit._editor.plugins.FontChoice");  // 'fontName','fontSize','formatBlock'
+                dojo.require("dijit._editor.plugins.FontChoice");  // 'fontName','fontSize','formatBlock'
                 dojo.require("dijit._editor.plugins.TextColor");
                 dojo.require("dijit._editor.plugins.LinkDialog");
@@ -62 +62 @@
                 <h3><label for="blah">blah entry</label></h3>
                 <textarea dojoType="dijit.Editor"
-                        plugins="['bold','italic','|','createLink','foreColor','hiliteColor']"
+                        plugins="['bold','italic','|','createLink','foreColor','hiliteColor','fontName','fontSize','insertImage']"
                         styleSheets="../../dojo/resources/dojo.css" id="blah">
                         This instance includes optional toolbar buttons which pull in additional ui (dijit) code.

dijit/trunk/_editor/nls/LinkDialog.js

@@ -1 +1 @@
 ({
-        title: "Link URL",
+        createLinkTitle: "Link Properties",
+        insertImageTitle: "Image Properties",
         url: "URL:",
-        text: "Text:",
-        set: "Set",
-        urlInvalidMessage: "Invalid URL.  Enter a full URL like 'http://www.dojotoolkit.org'"   
+        text: "Description:",
+        set: "Set"
 })

dijit/trunk/_editor/plugins/LinkDialog.js

@@ -11 +11 @@
 dojo.requireLocalization("dijit._editor", "LinkDialog");
 
-dojo.declare("dijit._editor.plugins.UrlTextBox",
-        dijit.form.ValidationTextBox,
-        {
-                // summary: the URL input box we use in our dialog
-
-                // regular expression for URLs, see dojox.regexp.url()
-                regExp: "((https?|ftps?)\\://|)(([0-9a-zA-Z]([-0-9a-zA-Z]{0,61}[0-9a-zA-Z])?\\.)+(arpa|aero|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|xxx|jobs|mobi|post|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|eu|es|et|fi|fj|fk|fm|fo|fr|ga|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sk|sl|sm|sn|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(((\\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])))(\\:(0|[1-9]\\d*))?(/([^?#\\s/]+/)*)?([^?#\\s/]+(\\?[^?#\\s/]*)?(#[A-Za-z][\\w.:-]*)?)?",
-
-                required: true,
-
-                postMixInProperties: function(){
-                        this.inherited("postMixInProperties", arguments);
-                        this.invalidMessage = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang).urlInvalidMessage;
-                },
-
-                getValue: function(){
-                        if(!/^(https?|ftps?)/.test(this.textbox.value)){
-                                this.textbox.value="http://"+this.textbox.value;
-                        }
-                        return this.textbox.value;
-                }
-        }
-);
-
 dojo.declare("dijit._editor.plugins.LinkDialog",
         dijit._editor._Plugin,
@@ -40 +16 @@
                 buttonClass: dijit.form.DropDownButton,
                 useDefaultCommand: false,
-                command: "createLink",
+                urlRegExp: "((https?|ftps?)\\://|)(([0-9a-zA-Z]([-0-9a-zA-Z]{0,61}[0-9a-zA-Z])?\\.)+(arpa|aero|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|xxx|jobs|mobi|post|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|eu|es|et|fi|fj|fk|fm|fo|fr|ga|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sk|sl|sm|sn|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(((\\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])))(\\:(0|[1-9]\\d*))?(/([^?#\\s/]+/)*)?([^?#\\s/]+(\\?[^?#\\s/]*)?(#[A-Za-z][\\w.:-]*)?)?",
                 linkDialogTemplate: [
                         "<table><tr><td>",
                         "<label for='urlInput'>${url}</label>",
                         "</td><td>",
-                        "<input dojoType=dijit._editor.plugins.UrlTextBox name='urlInput'>",
+                        "<input dojoType='dijit.form.ValidationTextBox' regExp='${urlRegExp}' required='true' name='urlInput'>",
                         "</td></tr><tr><td>",
                         "<label for='textInput'>${text}</label>",
                         "</td><td>",
-                        "<input dojoType=dijit.form.TextBox name='textInput'>",
+                        "<input dojoType='dijit.form.ValidationTextBox' required='true' name='textInput'>",
                         "</td></tr><tr><td colspan='2'>",
-                        "<button dojoType=dijit.form.Button type='submit'>${set}</button>",
+                        "<button dojoType='dijit.form.Button' type='submit'>${set}</button>",
                         "</td></tr></table>"
                 ].join(""),
@@ -57 +33 @@
                 constructor: function(){
                         var _this = this;
+                        this.tag = this.command == 'insertImage' ? 'img' : 'a';
                         var messages = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang);
-                        this.dropDown = new dijit.TooltipDialog({
-                                title: messages.title,
+                        var dropDown = (this.dropDown = new dijit.TooltipDialog({
+                                title: messages[this.command + "Title"],
                                 execute: dojo.hitch(this, "setValue"),
                                 onOpen: function(){
@@ -69 +46 @@
                                 },
                                 onClose: dojo.hitch(this, "_onCloseDialog")
-                        });
-                        this.dropDown.setContent(dojo.string.substitute(this.linkDialogTemplate, messages));
-                        this.dropDown.startup();
+                        }));
+                        messages.urlRegExp = this.urlRegExp;
+                        dropDown.setContent(dropDown.title + "<hr>" + dojo.string.substitute(this.linkDialogTemplate, messages));
+                        dropDown.startup();
                 },
 
@@ -79 +57 @@
                         this._onCloseDialog();
                         if(dojo.isIE){ //see #4151
-                                var a = dojo.withGlobal(this.editor.window, "getAncestorElement",dijit._editor.selection, ['a']);
+                                var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]);
                                 if(a){
-                                        dojo.withGlobal(this.editor.window, "selectElement",dijit._editor.selection, [a]);
+                                        dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a]);
                                 }
                         }
-                        var attstr='href="'+args.urlInput+'" _djrealurl="'+args.urlInput+'"';
-//                      console.log(args,this.editor,'<a '+attstr+'>'+args.textInput+'</a>');
-                        this.editor.execCommand('inserthtml', '<a '+attstr+'>'+args.textInput+'</a>');
-//                      this.editor.execCommand(this.command, args.urlInput);
+                        args.tag = this.tag;
+                        args.refAttr = this.tag == 'img' ? 'src' : 'href';
+                        //TODO: textInput should be formatted by escapeXml
+                        var template = "<${tag} ${refAttr}='${urlInput}' _djrealurl='${urlInput}'" +
+                                (args.tag == 'img' ? " alt='${textInput}'>" : ">${textInput}") +
+                                "</${tag}>";
+                        this.editor.execCommand('inserthtml', dojo.string.substitute(template, args));
                 },
 
-//              _savedSelection: null,
                 _onCloseDialog: function(){
                         // FIXME: IE is really messed up here!!
                         if(dojo.isIE){
-                                if(this._savedSelection){
-                                        var b=this._savedSelection;
-                                        this._savedSelection=null;
+                                if("_savedSelection" in this){
+                                        var b = this._savedSelection;
+                                        delete this._savedSelection;
                                         this.editor.focus();
                                         var range = this.editor.document.selection.createRange();
@@ -106 +86 @@
                         }
                 },
+
                 _onOpenDialog: function(){
-                        var a = dojo.withGlobal(this.editor.window, "getAncestorElement",dijit._editor.selection, ['a']);
-                        var url='',text='';
+                        var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]);
+                        var url, text;
                         if(a){
-                                url=a.getAttribute('_djrealurl');
-                                text=a.textContent||a.innerText;
-                                dojo.withGlobal(this.editor.window, "selectElement",dijit._editor.selection, [a,true]);
+                                url = a.getAttribute('_djrealurl');
+                                text = this.tag == 'img' ? a.getAttribute('alt') : 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);
+                                text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText);
                         }
                         // FIXME: IE is *really* b0rken
                         if(dojo.isIE){
-                                var range = this.editor.document.selection.createRange();
-                                this._savedSelection = range.getBookmark();
+                                this._savedSelection = this.editor.document.selection.createRange().getBookmark();
                         }
-                        this.dropDown.setValues({'urlInput':url,'textInput':text});
+                        this.dropDown.setValues({urlInput: url || '', textInput: text || ''});
                         //dijit.focus(this.urlInput);
-                },
+                }/*,
 
+//TODO we don't show this state anymore
                 updateState: function(){
                         // summary: change shading on button if we are over a link (or not)
 
                         var _e = this.editor;
-                        if(!_e){ return; }
-                        if(!_e.isLoaded){ return; }
+                        if(!_e || !_e.isLoaded){ return; }
                         if(this.button){
                                 // display button differently if there is an existing link associated with the current selection
-                                var hasA = dojo.withGlobal(this.editor.window, "hasAncestorElement",dijit._editor.selection, ['a']);
+                                var hasA = dojo.withGlobal(this.editor.window, "hasAncestorElement", dijit._editor.selection, [this.tag]);
                                 this.button.setAttribute('checked', hasA);
                         }
                 }
+*/
         }
 );