[Dojo-checkins] asaelh - r22636 - in dojox/trunk/drawing: plugins/drawing resources tools
dojo-checkins-admin at dojotoolkit.org
dojo-checkins-admin at dojotoolkit.org
Fri Jul 30 23:49:03 EDT 2010
Author: asaelh
Date: Fri Jul 30 20:48:56 2010
New Revision: 22636
Added:
dojox/trunk/drawing/plugins/drawing/GreekPalette.js
dojox/trunk/drawing/resources/GreekPalette.css
Modified:
dojox/trunk/drawing/tools/TextBlock.js
Log:
Fixes #11513 - fixed Palette for textBlock greek help \!strict
Added: dojox/trunk/drawing/plugins/drawing/GreekPalette.js
==============================================================================
--- (empty file)
+++ dojox/trunk/drawing/plugins/drawing/GreekPalette.js Fri Jul 30 20:48:56 2010
@@ -0,0 +1,325 @@
+dojo.provide("dojox.drawing.plugins.drawing.GreekPalette");
+
+dojo.require("dojox.drawing.library.greek");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dijit._PaletteMixin");
+dojo.require("dojo.i18n");
+
+dojo.requireLocalization("dojox.editor.plugins", "latinEntities");
+
+dojo.declare("dojox.drawing.plugins.drawing.GreekPalette",
+ [dijit._Widget, dijit._Templated, dijit._PaletteMixin],
+ {
+ // summary:
+ // This plugin uses the palette dijit in order to give
+ // tips for non-english (mostly greek for now) letters.
+ // description:
+ // Grid showing all available entity options which the
+ // user can pick from. The library loaded for use by the picker
+ // is found in dojox.drawing.library.greek. Adding characters
+ // there will automatically add them to the palette.
+ //
+ // This works as a popup and as such its onChange and onCancel
+ // close it. TextBlock manages it, since it's what uses the assist
+ // so opening it happens there. In order to activate the plugin
+ // add it to the dojox.drawing.Drawing node as shown below:
+ //
+ // example:
+ // | <div dojoType="dojox.drawing.Drawing" id="drawing" jsId="myDrawing" class="drawing"
+ // plugins="[{'name':'dojox.drawing.plugins.drawing.GreekPalette'}]" >
+
+ postMixInProperties: function(){
+ // Convert hash of entities into two-dimensional rows/columns table (array of arrays)
+ var choices = dojox.drawing.library.greek;
+ var numChoices = 0;
+ var entityKey;
+ for(entityKey in choices){numChoices++;}
+ var choicesPerRow = Math.floor(Math.sqrt(numChoices));
+ var numRows = choicesPerRow;
+ var currChoiceIdx = 0;
+ var rows = [];
+ var row = [];
+ for(entityKey in choices){
+ currChoiceIdx++;
+ row.push(entityKey);
+ if(currChoiceIdx % numRows === 0){
+ rows.push(row);
+ row = [];
+ }
+ }
+ if(row.length > 0){
+ rows.push(row);
+ }
+ this._palette = rows;
+ },
+
+ onChange: function(val){
+ var textBlock = this._textBlock;
+ dijit.popup.close(this);
+ textBlock.insertText(this._pushChangeTo,val);
+ textBlock._dropMode = false;
+ },
+
+ onCancel: function(/*Boolean*/ closeAll){
+ // summary:
+ // attach point for notification about when the user cancels the current menu
+ dijit.popup.close(this);
+ this._textBlock._dropMode = false;
+ },
+
+ id: "dropdown",
+
+ // templateString: String
+ // The template of this widget. Using dojoxEntityPalette classes
+ // in order to allow easy transfer of css
+ templateString: '<div class="dojoxEntityPalette">\n' +
+ ' <table>\n' +
+ ' <tbody>\n' +
+ ' <tr>\n' +
+ ' <td>\n' +
+ ' <table class="dijitPaletteTable">\n' +
+ ' <tbody dojoAttachPoint="gridNode"></tbody>\n' +
+ ' </table>\n' +
+ ' </td>\n' +
+ ' </tr>\n' +
+ ' <tr>\n' +
+ ' <td>\n'+
+ ' <table dojoAttachPoint="previewPane" class="dojoxEntityPalettePreviewTable">\n' +
+ ' <tbody>\n' +
+ ' <tr>\n' +
+ ' <td class="dojoxEntityPalettePreviewDetailEntity">Type: <span class="dojoxEntityPalettePreviewDetail" dojoAttachPoint="previewNode"></span></td>\n' +
+ ' </tr>\n' +
+ ' </tbody>\n' +
+ ' </table>\n' +
+ ' </td>\n' +
+ ' </tr>\n' +
+ ' </tbody>\n' +
+ ' </table>\n' +
+ '</div>',
+
+
+ baseClass: "dojoxEntityPalette",
+
+ // showPreview: [public] Boolean
+ // Whether the preview pane will be displayed, to show details about the selected entity.
+ showPreview: true,
+
+ dyeClass: 'dojox.drawing.plugins.Greeks',
+
+ // domNodeClass [protected] String
+ paletteClass: 'editorLatinEntityPalette',
+
+ cellClass: "dojoxEntityPaletteCell",
+
+ buildRendering: function(){
+ this.inherited(arguments);
+
+ var i18n = dojo.i18n.getLocalization("dojox.editor.plugins", "latinEntities");
+
+ this._preparePalette(
+ this._palette,
+ i18n
+ );
+
+ var cells = dojo.query(".dojoxEntityPaletteCell", this.gridNode);
+ dojo.forEach(cells, function(cellNode){
+ this.connect(cellNode, "onmouseenter", "_onCellMouseEnter");
+ }, this);
+ },
+
+ _onCellMouseEnter: function(e){
+ // summary:
+ // Simple function to handle updating the display at the bottom of
+ // the palette.
+ // e:
+ // The event.
+ // tags:
+ // private
+ if(this.showPreview){
+ this._displayDetails(e.target);
+ }
+ },
+
+ _onCellClick: function(/*Event*/ evt){
+ // summary:
+ // Handler for click, enter key & space key. Selects the cell.
+ // evt:
+ // The event.
+ // tags:
+ // private
+ var target = evt.type == "click" ? evt.currentTarget : this._currentFocus,
+ value = this._getDye(target).getValue();
+
+ // First focus the clicked cell, and then send onChange() notification.
+ // onChange() (via _setValueAttr) must be after the focus call, because
+ // it may trigger a refocus to somewhere else (like the Editor content area), and that
+ // second focus should win.
+ // Use setTimeout because IE doesn't like changing focus inside of an event handler.
+ this._setCurrent(target);
+ setTimeout(dojo.hitch(this, function(){
+ dijit.focus(target);
+ this._setValueAttr(value, true);
+ }));
+
+ // workaround bug where hover class is not removed on popup because the popup is
+ // closed and then there's no onblur event on the cell
+ dojo.removeClass(target, "dijitPaletteCellHover");
+
+ dojo.stopEvent(evt);
+ },
+
+ postCreate: function(){
+ this.inherited(arguments);
+
+ if(!this.showPreview){
+ dojo.style(this.previewNode,"display","none");
+ }
+ },
+
+ _setCurrent: function(/*DOMNode*/ node){
+ // summary:
+ // Sets which node is the focused cell.
+ // description:
+ // At any point in time there's exactly one
+ // cell with tabIndex != -1. If focus is inside the palette then
+ // focus is on that cell.
+ //
+ // After calling this method, arrow key handlers and mouse click handlers
+ // should focus the cell in a setTimeout().
+ // tags:
+ // protected
+ if("_currentFocus" in this){
+ // Remove tabIndex on old cell
+ dojo.attr(this._currentFocus, "tabIndex", "-1");
+ dojo.removeClass(this._currentFocus,"dojoxEntityPaletteCellHover");
+ }
+
+ // Set tabIndex of new cell
+ this._currentFocus = node;
+ if(node){
+ dojo.attr(node, "tabIndex", this.tabIndex);
+ dojo.addClass(this._currentFocus,"dojoxEntityPaletteCellHover");
+ }
+ if(this.showPreview){
+ this._displayDetails(node);
+ }
+ },
+
+ _displayDetails: function(/*DOMNode*/ cell){
+ // summary:
+ // Display the details of the currently focused entity in the preview pane
+ var dye = this._getDye(cell);
+ if(dye){
+ var ehtml = dye.getValue();
+ var ename = dye._alias;
+ //console.warn("Greek help: ",dye._alias);
+ this.previewNode.innerHTML=ehtml;
+ }else{
+ this.previewNode.innerHTML="";
+ this.descNode.innerHTML="";
+ }
+ },
+
+ _preparePalette: function(choices, titles) {
+ // summary:
+ // Subclass must call _preparePalette() from postCreate(), passing in the tooltip
+ // for each cell
+ // choices: String[][]
+ // id's for each cell of the palette, used to create Dye JS object for each cell
+ // titles: String[]
+ // Localized tooltip for each cell
+
+ this._cells = [];
+ var url = this._blankGif;
+
+ var dyeClassObj = dojo.getObject(this.dyeClass);
+
+ for(var row=0; row < choices.length; row++){
+ var rowNode = dojo.create("tr", {tabIndex: "-1"}, this.gridNode);
+ for(var col=0; col < choices[row].length; col++){
+ var value = choices[row][col];
+ if(value){
+ var cellObject = new dyeClassObj(value);
+
+ var cellNode = dojo.create("td", {
+ "class": this.cellClass,
+ tabIndex: "-1",
+ title: titles[value]
+ });
+
+ // prepare cell inner structure
+ cellObject.fillCell(cellNode, url);
+
+ this.connect(cellNode, "ondijitclick", "_onCellClick");
+ this._trackMouseState(cellNode, this.cellClass);
+
+ dojo.place(cellNode, rowNode);
+
+ cellNode.index = this._cells.length;
+
+ // save cell info into _cells
+ this._cells.push({node:cellNode, dye:cellObject});
+ }
+ }
+ }
+ this._xDim = choices[0].length;
+ this._yDim = choices.length;
+
+ },
+
+ _navigateByArrow: function(evt){
+ // summary:
+ // This is a departure from the dijit, the textBlock needs
+ // navigation without losing focus, this allows that
+ // increment:
+ // How much the key is navigated.
+ // tags:
+ // private
+ var keyIncrementMap = {
+ 38: -this._xDim,
+ // The down key the index is increase by the x dimension.
+ 40: this._xDim,
+ // Right and left move the index by 1.
+ 39: this.isLeftToRight() ? 1 : -1,
+ 37: this.isLeftToRight() ? -1 : 1
+ };
+
+ var increment = keyIncrementMap[evt.keyCode];
+ var newFocusIndex = this._currentFocus.index + increment;
+ if(newFocusIndex < this._cells.length && newFocusIndex > -1){
+ var focusNode = this._cells[newFocusIndex].node;
+ this._setCurrent(focusNode);
+ }
+ }
+});
+
+dojo.declare("dojox.drawing.plugins.Greeks",
+ null,
+ {
+ // summary:
+ // Represents a character.
+ // Initialized using an alias for the character (like cent) rather
+ // than with the character itself.
+
+ constructor: function(/*String*/ alias){
+ // summary:
+ // Construct JS object representing an entity (associated w/a cell
+ // in the palette)
+ // value: String
+ // alias name: 'cent', 'pound' ..
+ this._alias = alias;
+ },
+
+ getValue: function(){
+ // summary:
+ // Returns HTML representing the character, like &
+ //
+ return this._alias;
+ },
+
+ fillCell: function(/*DOMNode*/ cell){
+ // Deal with entities that have keys which are reserved words.
+ cell.innerHTML = "&"+this._alias+";";
+ }
+});
\ No newline at end of file
Added: dojox/trunk/drawing/resources/GreekPalette.css
==============================================================================
--- (empty file)
+++ dojox/trunk/drawing/resources/GreekPalette.css Fri Jul 30 20:48:56 2010
@@ -0,0 +1,57 @@
+/*
+ This is directly from @import "../plugins/resources/css/InsertEntity.css";
+ It's here because certain details may change over time. The classes
+ remain the same so applying the original will be easy in case of change.
+*/
+
+.dojoxEntityPalette {
+ /* outer node of the dropdown */
+ border: 1px solid #999;
+ background: #fff;
+ -moz-border-radius: 3pt;
+}
+
+.dojoxEntityPaletteCell {
+ /* individual cell of the drop down */
+ border: 1px dotted gray;
+ width: 20px; /* todo: don't hardcode width/height; it's neither nececessary nor a11y safe */
+ line-height: 18px;
+ overflow: hidden;
+ z-index: 10;
+ text-align: center;
+}
+
+.dojoxEntityPaletteCellHover, .dojoxEntityPaletteCellActive, .dojoxEntityPaletteCellFocused {
+ width: 18px;
+ line-height: 16px;
+ overflow: hidden;
+ cursor: default;
+ border:1px dashed #000;
+ outline:1px dashed #dedede;
+}
+
+
+.dojoxEntityPalettePreviewTable {
+ table-layout: auto;
+ font-size: 1em;
+ width: 100%;
+}
+
+.dojoxEntityPalettePreviewHeader {
+ font-size: .8em;
+ padding: 3px 3px 3px 3px;
+}
+
+.dojoxEntityPalettePreviewDetailEntity {
+ font-size: .8em;
+ font-weight: bold;
+}
+
+.dojoxEntityPalettePreviewDetail {
+ font-size: .8em;
+ padding: 3px 3px 3px 3px;
+}
+
+.dijit_a11y .dojoxEntityPaletteCell {
+ background-color:transparent !important;
+}
Modified: dojox/trunk/drawing/tools/TextBlock.js
==============================================================================
--- dojox/trunk/drawing/tools/TextBlock.js (original)
+++ dojox/trunk/drawing/tools/TextBlock.js Fri Jul 30 20:48:56 2010
@@ -293,7 +293,7 @@
popup:dropdown,
around:this.parentNode,
orient:{'BL':'TL'}
- })
+ });
}
if(!this._dropMode){
this._blockExec = false;
More information about the Dojo-checkins
mailing list