dojox/drawing/plugins/drawing/GreekPalette.js

  • Provides:

    • dojox.drawing.plugins.drawing.GreekPalette
  • Requires:

    • dojox.drawing.library.greek in common
    • dijit._Widget in common in project dijit
    • dijit._Templated in common in project dijit
    • dijit._PaletteMixin in common in project dijit
    • dojo.i18n in common in project dojo
  • dojox.drawing.plugins.drawing.GreekPalette

    • type
      Function
    • chains:
      • dijit._Widget: (prototype)
      • dijit._Widget: (call)
      • dijit._Templated: (call)
      • dijit._PaletteMixin: (call)
    • mixins:
      • dijit._Templated.prototype: (prototype)
      • dijit._PaletteMixin.prototype: (prototype)
    • 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'}]" >
  • dojox.drawing.plugins.drawing.GreekPalette.postMixInProperties

    • type
      Function
    • source: [view]
      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:
       // | 
       //    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;
    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.onChange

    • type
      Function
    • parameters:
      • val: (typeof )
    • source: [view]
        var textBlock = this._textBlock;
        dijit.popup.close(this);
        textBlock.insertText(this._pushChangeTo,val);
        textBlock._dropMode = false;
    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.onCancel

    • type
      Function
    • parameters:
      • closeAll: (typeof Boolean)
    • source: [view]
        dijit.popup.close(this);
        this._textBlock._dropMode = false;
    • summary
      attach point for notification about when the user cancels the current menu
  • dojox.drawing.plugins.drawing.GreekPalette.id

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.templateString

    • type
      String
    • summary
      The template of this widget.  Using dojoxEntityPalette classes
      in order to allow easy transfer of css
  • dojox.drawing.plugins.drawing.GreekPalette.baseClass

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.showPreview

    • tags: public
    • type
      Boolean
    • summary
      Whether the preview pane will be displayed, to show details about the selected entity.
  • dojox.drawing.plugins.drawing.GreekPalette.dyeClass

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.paletteClass

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.cellClass

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.buildRendering

    • type
      Function
    • source: [view]
        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);
    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._onCellMouseEnter

    • type
      Function
    • parameters:
      • e: (typeof The)
        event.
    • source: [view]
        if(this.showPreview){
         this._displayDetails(e.target);
        }
    • summary
      Simple function to handle updating the display at the bottom of
      the palette.
    • tags:
  • dojox.drawing.plugins.drawing.GreekPalette._onCellClick

    • type
      Function
    • parameters:
      • evt: (typeof Event)
        The event.
    • source: [view]
        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);
    • summary
      Handler for click, enter key &amp; space key. Selects the cell.
    • tags:
  • dojox.drawing.plugins.drawing.GreekPalette.postCreate

    • type
      Function
    • source: [view]
        this.inherited(arguments);


        if(!this.showPreview){
         dojo.style(this.previewNode,"display","none");
        }
    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._setCurrent

    • type
      Function
    • parameters:
      • node: (typeof DOMNode)
    • source: [view]
        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);
        }
    • 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:
  • dojox.drawing.plugins.drawing.GreekPalette._displayDetails

    • type
      Function
    • parameters:
      • cell: (typeof DOMNode)
    • source: [view]
        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="";
        }
    • summary
      Display the details of the currently focused entity in the preview pane
  • dojox.drawing.plugins.drawing.GreekPalette._preparePalette

    • type
      Function
    • parameters:
      • choices: (typeof String[][)
        id's for each cell of the palette, used to create Dye JS object for each cell
      • titles: (typeof String[)
        Localized tooltip for each cell
    • source: [view]
        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;
    • summary
      Subclass must call _preparePalette() from postCreate(), passing in the tooltip
      for each cell
  • dojox.drawing.plugins.drawing.GreekPalette._navigateByArrow

    • type
      Function
    • parameters:
      • evt: (typeof )
    • source: [view]
        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);
        }
    • 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:
  • dojox.drawing.plugins.drawing.GreekPalette._palette

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._textBlock._dropMode

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._currentFocus

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.previewNode.innerHTML

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette.descNode.innerHTML

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._cells

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._xDim

    • summary
  • dojox.drawing.plugins.drawing.GreekPalette._yDim

    • summary
  • dojox.drawing.plugins.Greeks

    • type
      Function
    • summary
      Construct JS object representing an entity (associated w/a cell
      in the palette)
      value: String
      alias name: 'cent', 'pound' ..
    • parameters:
      • alias: (typeof String)
    • source: [view]
         this._alias = alias;
  • dojox.drawing.plugins.Greeks.getValue

    • type
      Function
    • source: [view]
         return this._alias;
    • summary
      Returns HTML representing the character, like &amp;amp;
  • dojox.drawing.plugins.Greeks.fillCell

    • type
      Function
    • parameters:
      • cell: (typeof DOMNode)
    • source: [view]
      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:
       // | 
       //    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: '
      \n' +
         ' \n' +
         '  \n' +
         '   \n' +
         '    \n' +
         '   \n' +
         '   \n' +
         '    \n' +
         '   \n' +
         '  \n' +
         ' 
      \n' +
         '     \n' +
         '      \n' +
         '    
      \n' +
         '    
      \n'+
         '     \n' +
         '      \n' +
         '       \n' +
         '        \n' +
         '       \n' +
         '      \n' +
         '     
      Type:
      \n' +
         '    
      \n' +
         '
      ',




       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+";";
    • summary
  • dojox.drawing.plugins.Greeks._alias

    • summary
  • dojox.drawing.plugins.drawing

    • type
      Object
    • summary
  • dojox.drawing.plugins

    • type
      Object
    • summary
  • dojox.drawing

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary