dojox/drawing/ui/dom/Toolbar.js

  • Provides:

    • dojox.drawing.ui.dom.Toolbar

  • dojox.drawing.ui.dom.Toolbar

    • type
      Function
    • parameters:
      • props: (typeof )
      • node: (typeof )
    • source: [view]
      dojo.provide("dojox.drawing.ui.dom.Toolbar");
      dojo.deprecated("dojox.drawing.ui.dom.Toolbar", "It may not even make it to the 1.4 release.", 1.4);


      (function(){

       
       dojo.declare("dojox.drawing.ui.dom.Toolbar", [], {
        // NOTE:
        //   dojox.drawing.Toolbar is DEPRECATED.
        //   The intention never was to use HTML as buttons for a Drawing.
        //   This was implemented in order to finish the project for which
        //   Drawing was developed.
        //   Instead use: drawing/ui/Toolbar.js
        //
        // summary:
        // Creates a Toolbar to be used with a DojoX Drawing.
        // description:
        // Currently works in markup only. A class is required with
        // either horizontal or vertical as a class (IE prevented using
        // either as a default). Assign an attribute of 'drawingId' with
        // the id of the DojoX Drawing to which this is assigned.
        // The node children will be assigned as the Tools in the toolbar.
        // Plugins can also be assigned.
        // The Toolbar is largely self contained and has no real public
        // methods or events. the Drawing object should be used.
        //
        // example:
        // | 

        // |  
       Line

        // |  
       Rect

        // |  
      Zoom

        // | 

        //
        // TODO: Toolbar works in markup only. Need programmatic.
        // NOTE: There are plans to make the toolbar out of dojox.gfx vectors.
        //   This may change the APIs in the future.
        //
        // baseClass:String
        //  The CSS style to apply to the toolbar node
        baseClass:"drawingToolbar",
        // buttonClass:String
        //  The CSS style to apply to each button node
        buttonClass:"drawingButton",
        // iconClass:String
        //  The CSS style to apply to each button icon node
        iconClass:"icon",
        //
        constructor: function(props, node){
         // props is null from markup
         dojo.addOnLoad(this, function(){
          this.domNode = dojo.byId(node);
          dojo.addClass(this.domNode, this.baseClass);
          this.parse();
         });
    • summary
  • dojox.drawing.ui.dom.Toolbar.baseClass
       
    • summary
  • dojox.drawing.ui.dom.Toolbar.buttonClass
       
    • type
      String
    • summary
      The CSS style to apply to each button node
  • dojox.drawing.ui.dom.Toolbar.iconClass
       
    • type
      String
    • summary
      The CSS style to apply to each button icon node
  • dojox.drawing.ui.dom.Toolbar.createIcon
       
    • type
      Function
    • parameters: 
      • node: (typeof HTMLNode)
        The button node.
      • constr: (typeof ? Function)
        Function
Optional. If not supplied, an icon is not created.
Information for each icon is derived from
the ToolsSetup object defined at the end
of each tool. See: stencil._Base
    • source: [view] 
                    
      

                       var setup = constr && constr.setup ? constr.setup : {};
         if(setup.iconClass){
          var icon = setup.iconClass ? setup.iconClass : "iconNone";
          var tip = setup.tooltip ? setup.tooltip : "Tool";

          
          var iNode = dojo.create("div", {title:tip}, node);
          dojo.addClass(iNode, this.iconClass);
          dojo.addClass(iNode, icon);

         
          dojo.connect(node, "mouseup", function(evt){
           dojo.stopEvent(evt);
           dojo.removeClass(node, "active");
          });
          dojo.connect(node, "mouseover", function(evt){
           dojo.stopEvent(evt);
           dojo.addClass(node, "hover");
          });
          dojo.connect(node, "mousedown", this, function(evt){
           dojo.stopEvent(evt);
           dojo.addClass(node, "active");
          });

          
          dojo.connect(node, "mouseout", this, function(evt){
           dojo.stopEvent(evt);
           dojo.removeClass(node, "hover");
          });
         }
                    
      
                    
    • summary
      Internal. Creates an icon node for each button.
arguments:
  • dojox.drawing.ui.dom.Toolbar.createTool
       
    • type
      Function
    • parameters: 
      • node: (typeof HTMLNode)
        The button node.
    • source: [view] 
                    
      

                       node.innerHTML = "";
         var type = dojo.attr(node, "tool");
         this.toolNodes[type] = node;
         dojo.attr(node, "tabIndex", 1);
         var constr = dojo.getObject(type);

         
         this.createIcon(node, constr);

         
         this.drawing.registerTool(type, constr);
         dojo.connect(node, "mouseup", this, function(evt){
          dojo.stopEvent(evt);
          dojo.removeClass(node, "active");
          this.onClick(type);
         });
         dojo.connect(node, "mouseover", function(evt){
          dojo.stopEvent(evt);
          dojo.addClass(node, "hover");
         });
         dojo.connect(node, "mousedown", this, function(evt){
          dojo.stopEvent(evt);
          dojo.addClass(node, "active");
         });

         
         dojo.connect(node, "mouseout", this, function(evt){
          dojo.stopEvent(evt);
          dojo.removeClass(node, "hover");
         });
                    
      
                    
    • summary
      Creates a button on the Toolbar that is
a Tool, not a Plugin. Tools draw Stencils,
Plugins do actions.
arguments:
  • dojox.drawing.ui.dom.Toolbar.parse
       
    • type
      Function
    • source: [view] 
                    
      

                       var drawingId = dojo.attr(this.domNode, "drawingId");
         this.drawing = dojox.drawing.util.common.byId(drawingId);
         !this.drawing && console.error("Drawing not found based on 'drawingId' in Toolbar. ");
         this.toolNodes = {};
         var _sel;
         dojo.query(">", this.domNode).forEach(function(node, i){
          node.className = this.buttonClass;
          var tool = dojo.attr(node, "tool");
          var action = dojo.attr(node, "action");
          var plugin = dojo.attr(node, "plugin");
          if(tool){
           if(i==0 || dojo.attr(node, "selected")=="true"){
            _sel = tool;
           }
           this.createTool(node);

           
          }else if(plugin){

           

           

           

           
           var p = {name:plugin, options:{}},
            opt = dojo.attr(node, "options");
           if(opt){
            p.options = eval("("+opt+")");
           }
           p.options.node = node;
           node.innerHTML = "";
         this.drawing.addPlugin(p);

           

           

           

           

           
           this.createIcon(node, dojo.getObject(dojo.attr(node, "plugin")));
          }

          
         }, this);
         this.drawing.initPlugins();
         dojo.connect(this.drawing, "setTool", this, "onSetTool");
         this.drawing.setTool(_sel);
                    
      
                    
    • summary
      Initializing method that reads the dom node and its
children for tools and plugins.
  • dojox.drawing.ui.dom.Toolbar.onClick
       
    • type
      Function
    • parameters: 
      • type: (typeof String)
        Fully qualified name of class. ex:
dojox.drawing.tools.Ellipse
    • source: [view] 
                    
      

                       this.drawing.setTool(type);
                    
      
                    
    • summary
      Event fired from clicking a Tool, not a PLugin.
Plugin clicks are handled within the plugin's class.
arguments:
  • dojox.drawing.ui.dom.Toolbar.onSetTool
       
    • type
      Function
    • parameters: 
      • type: (typeof String)
    • source: [view] 
                    
      

                       for(var n in this.toolNodes){
          if(n == type){
           dojo.addClass(this.toolNodes[type], "selected");
           this.toolNodes[type].blur();
          }else{
           dojo.removeClass(this.toolNodes[n], "selected");
          }

          
         }
                    
      
                    
    • summary
      handles buttons clicks and selects or deselects
  • dojox.drawing.ui.dom.Toolbar.drawing
       
    • summary
  • dojox.drawing.ui.dom.Toolbar.toolNodes
       
    • summary
  • dojox.drawing.ui.dom.Toolbar.domNode
       
    • summary
  • dojox.drawing.ui.dom
       
    • type
      Object
    • summary
  • dojox.drawing.ui
       
    • type
      Object
    • summary
  • dojox.drawing
       
    • type
      Object
    • summary
  • dojox
       
    • type
      Object
    • summary