Changeset 13685

Show
Ignore:
Timestamp:
05/10/08 20:56:05 (5 days ago)
Author:
peller
Message:

Replace custom plugin example with something simpler and unique -- toggle html source. Refs #6224

Location:
dijit/trunk/tests/_editor
Files:
1 added
1 modified

Legend:

Unmodified
Added
Removed
  • dijit/trunk/tests/_editor/test_CustomPlugin.html

    r12588 r13685  
    99                @import "css/dijitTests.css"; 
    1010        </style> 
     11 
     12        <!-- required: a default dijit theme: --> 
     13        <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css" /> 
     14         
     15        <!-- required: dojo.js --> 
    1116        <script type="text/javascript" src="../../../dojo/dojo.js" 
    1217                djConfig="parseOnLoad: true, isDebug: true"></script> 
    13         <script type="text/javascript" src="../_testCommon.js"></script> 
     18         
     19        <!-- not needed, for testing alternate themes --> 
     20        <script type="text/javascript" src="_testCommon.js"></script> 
     21 
     22        <style> 
     23                .customIconHtmlToggle { 
     24                        background-image: url('customIcon.gif'); /* custom editor icons sprite image */ 
     25                        background-repeat: no-repeat; 
     26                        width: 18px; 
     27                        height: 18px; 
     28                        text-align: center; 
     29                } 
     30        </style> 
    1431 
    1532        <script type="text/javascript"> 
     
    1734                dojo.require("dojo.parser");    // scan page for widgets and instantiate them 
    1835 
    19  
    2036                dojo.require("dijit._Widget"); 
    2137                dojo.require("dijit._Templated"); 
    2238                dojo.require("dijit._editor._Plugin"); 
    23                 dojo.require("dijit.Dialog"); 
    24                 dojo.require("dijit.form.Button"); 
    25                 dojo.require("dijit.form.ValidationTextBox"); 
    26                 dojo.require("dojo.i18n"); 
    2739                dojo.require("dojo.string"); 
    28                 dojo.requireLocalization("dijit._editor", "LinkDialog"); 
    2940 
    30                 dojo.declare("myPlugin", 
     41                dojo.declare("MyPlugin", 
    3142                        dijit._editor._Plugin, 
    3243                        { 
    33                                 buttonClass: dijit.form.DropDownButton, 
     44                                buttonClass: dijit.form.ToggleButton, 
    3445                                useDefaultCommand: false, 
    35                                 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.:-]*)?)?", 
    36                                 linkDialogTemplate: [ 
    37                                         "<table><tr><td>", 
    38                                         "<label for='${id}_urlInput'>${url}</label>", 
    39                                         "</td><td>", 
    40                                         "<input dojoType='dijit.form.ValidationTextBox' regExp='${urlRegExp}' required='true' id='${id}_urlInput' name='urlInput'>", 
    41                                         "</td></tr><tr><td>", 
    42                                         "<label for='${id}_textInput'>${text}</label>", 
    43                                         "</td><td>", 
    44                                         "<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' name='textInput'>", 
    45                                         "</td></tr><tr><td colspan='2'>", 
    46                                         "<button dojoType='dijit.form.Button' type='submit'>${set}</button>", 
    47                                         "</td></tr></table>" 
    48                                 ].join(""), 
    49                  
    50                                 constructor: function(){ 
    51                                         var _this = this; 
    52                                         this.tag = this.command == 'insertImage' ? 'img' : 'a'; 
    53                                         var messages = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang); 
    54                                         var dropDown = (this.dropDown = new dijit.TooltipDialog({ 
    55                                                 title: messages[this.command + "Title"], 
    56                                                 execute: dojo.hitch(this, "setValue"), 
    57                                                 onOpen: function(){ 
    58                                                         _this._onOpenDialog(); 
    59                                                         dijit.TooltipDialog.prototype.onOpen.apply(this, arguments); 
    60                                                 }, 
    61                                                 onCancel: function(){ 
    62                                                         setTimeout(dojo.hitch(_this, "_onCloseDialog"),0); 
    63                                                 }, 
    64                                                 onClose: dojo.hitch(this, "_onCloseDialog") 
    65                                         })); 
    6646 
    67                                         this.button = new this.buttonClass({ 
    68                                                 label: "my plugin button", 
    69                                                 showLabel: true, 
    70                                                 iconClass: "", 
    71                                                 dropDown: this.dropDown, 
    72                                                 tabIndex: "-1" 
    73                                         }); 
     47                                _initButton: function(){ 
     48                                        this.command = "htmlToggle"; 
     49                                        this.iconClassPrefix = "customIcon"; 
     50                                        this.inherited(arguments); 
     51                                        delete this.command; // kludge so setEditor doesn't make the button invisible 
     52                                        this.connect(this.button, "onClick", this._toggleSource);                
     53                                }, 
    7454 
    75                                         messages.urlRegExp = this.urlRegExp; 
    76                                         messages.id = dijit.getUniqueId(this.declaredClass.replace(/\./g,"_")); 
    77                                         dropDown.setContent(dropDown.title + "<hr>" + dojo.string.substitute(this.linkDialogTemplate, messages)); 
    78                                         dropDown.startup(); 
     55                                destroy: function(f){ 
     56                                        this.inherited(arguments); 
     57                                        if(this.sourceArea){ dojo._destroyElement(this.sourceArea); } 
    7958                                }, 
    80                  
    81                                 setValue: function(args){ 
    82                                         // summary: callback from the dialog when user hits "set" button 
    83                                         //TODO: prevent closing popup if the text is empty 
    84                                         this._onCloseDialog(); 
    85                                         if(dojo.isIE){ //see #4151 
    86                                                 var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]); 
    87                                                 if(a){ 
    88                                                         dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a]); 
    89                                                 } 
     59 
     60                                _toggleSource: function(){ 
     61                                        this.source = !this.source; 
     62                                        if(!this.sourceArea){ 
     63                                                this.sourceArea = dojo.doc.createElement('textarea'); 
     64                                                this.sourceArea.style.position = 'absolute'; 
     65                                                dojo.place(this.sourceArea, this.editor.domNode, "last"); 
    9066                                        } 
    91                                         args.tag = this.tag; 
    92                                         args.refAttr = this.tag == 'img' ? 'src' : 'href'; 
    93                                         //TODO: textInput should be formatted by escapeXml 
    94                                         var template = "<${tag} ${refAttr}='${urlInput}' _djrealurl='${urlInput}'" + 
    95                                                 (args.tag == 'img' ? " alt='${textInput}'>" : ">${textInput}") + 
    96                                                 "</${tag}>"; 
    97                                         this.editor.execCommand('inserthtml', dojo.string.substitute(template, args)); 
    98                                 }, 
    99                  
    100                                 _onCloseDialog: function(){ 
    101                                         // FIXME: IE is really messed up here!! 
    102                                         if(dojo.isIE){ 
    103                                                 if("_savedSelection" in this){ 
    104                                                         var b = this._savedSelection; 
    105                                                         delete this._savedSelection; 
    106                                                         this.editor.focus(); 
    107                                                         var range = this.editor.document.selection.createRange(); 
    108                                                         range.moveToBookmark(b); 
    109                                                         range.select(); 
    110                                                 } 
     67                                        if(this.source){ 
     68                                                this.sourceArea.value = this.editor.getValue(); 
     69                                                dojo.marginBox(this.sourceArea, dojo.marginBox(this.editor.editingArea)); 
    11170                                        }else{ 
    112                                                 this.editor.focus(); 
     71                                                this.editor.setValue(this.sourceArea.value); 
     72                                                this.sourceArea.style.top = "-999px"; 
    11373                                        } 
    114                                 }, 
    115                  
    116                                 _onOpenDialog: function(){ 
    117                                         var a = dojo.withGlobal(this.editor.window, "getAncestorElement", dijit._editor.selection, [this.tag]); 
    118                                         var url, text; 
    119                                         if(a){ 
    120                                                 url = a.getAttribute('_djrealurl'); 
    121                                                 text = this.tag == 'img' ? a.getAttribute('alt') : a.textContent || a.innerText; 
    122                                                 dojo.withGlobal(this.editor.window, "selectElement", dijit._editor.selection, [a, true]); 
    123                                         }else{ 
    124                                                 text = dojo.withGlobal(this.editor.window, dijit._editor.selection.getSelectedText); 
    125                                         } 
    126                                         // FIXME: IE is *really* b0rken 
    127                                         if(dojo.isIE){ 
    128                                                 this._savedSelection = this.editor.document.selection.createRange().getBookmark(); 
    129                                         } 
    130                                         this.dropDown.reset(); 
    131                                         this.dropDown.setValues({urlInput: url || '', textInput: text || ''}); 
    132                                         //dijit.focus(this.urlInput); 
     74 
     75                                        this.editor.setDisabled(this.source); // conditionally disable toolbar 
    13376                                } 
    13477                        } 
     
    13881                dojo.subscribe(dijit._scopeName + ".Editor.getPlugin",null,function(o){ 
    13982                        if(o.plugin){ return; } 
    140                         if(o.args.name == "myPlugin"){ 
    141                                 return new myPlugin({}); 
     83                        if(o.args.name == "MyPlugin"){ 
     84                                return new MyPlugin({}); 
    14285                        } 
    14386                }); 
    14487        </script> 
    14588</head> 
    146 <body> 
    147         <div dojoType="dijit.Editor" id="editor1" extraPlugins="['myPlugin']"><p> 
    148         This editor should have my custom create link plugin 
     89<body class="tundra"> 
     90        <div dojoType="dijit.Editor" id="editor1" extraPlugins="['MyPlugin']"><p> 
     91        This editor should have my custom plugin 
    14992        </p></div> 
    15093</body>