dojox/editor/plugins/Breadcrumb.js

• Provides:

  • dojox.editor.plugins.Breadcrumb

• dojox.editor.plugins._BreadcrumbMenuTitle

  • type

    Function

  • chains:
    • dijit._Widget: (prototype)
    • dijit._Widget: (call)
    • dijit._Templated: (call)
    • dijit._Contained: (call)
  • mixins:
    • dijit._Templated.prototype: (prototype)
    • dijit._Contained.prototype: (prototype)
  • summary

    SImple internal, non-clickable, menu entry to act as a menu title bar.

• dojox.editor.plugins._BreadcrumbMenuTitle.templateString

  • summary

• dojox.editor.plugins._BreadcrumbMenuTitle.menuTitle

  • summary

• dojox.editor.plugins._BreadcrumbMenuTitle.postCreate

  • type

    Function

  • source: [view]
      dojo.setSelectable(this.domNode, false);
      var label = this.id+"_text";
      dijit.setWaiState(this.domNode, "labelledby", label);
  • summary

• dojox.editor.plugins._BreadcrumbMenuTitle._setMenuTitleAttr

  • type

    Function

  • parameters:
    • str: (typeof )
  • source: [view]
      this.title.innerHTML = str;
  • summary

• dojox.editor.plugins._BreadcrumbMenuTitle._getMenuTitleAttr

  • type

    Function

  • parameters:
    • str: (typeof )
  • source: [view]
      return this.title.innerHTML;
  • summary

• dojox.editor.plugins._BreadcrumbMenuTitle.title.innerHTML

  • summary

• dojox.editor.plugins.Breadcrumb

  • type

    Function

  • chains:
    • dijit._editor._Plugin: (prototype)
    • dijit._editor._Plugin: (call)
  • summary

    This plugin provides Breadcrumb cabability to the editor.  When
    As you move around the editor, it updates with your current indention
    depth.

• dojox.editor.plugins.Breadcrumb._menu

  • tags: private
  • type

    The

  • summary

    popup menu that is displayed.

• dojox.editor.plugins.Breadcrumb.breadcrumbBar

  • tags: protected
  • type

    The

  • summary

    toolbar containing the breadcrumb.

• dojox.editor.plugins.Breadcrumb.setEditor

  • type

    Function

  • parameters:
    • editor: (typeof Object)

      The editor to configure for this plugin to use.

  • source: [view]
      this.editor = editor;
      this._buttons = [];
      this.breadcrumbBar = new dijit.Toolbar();
    
    
      var strings = dojo.i18n.getLocalization("dojox.editor.plugins", "Breadcrumb");
      this._titleTemplate = strings.nodeActions;
    
    
      dojo.place(this.breadcrumbBar.domNode, editor.footer);
      this.editor.onLoadDeferred.addCallback(dojo.hitch(this, function(){
       this._menu = new dijit.Menu({});
       dojo.addClass(this.breadcrumbBar.domNode, "dojoxEditorBreadcrumbArrow");
       var self = this;
       var body = new dijit.form.ComboButton({
        showLabel: true,
        label: "body",
        _selNode: editor.editNode,
        dropDown: this._menu,
        onClick: dojo.hitch(this, function(){
         this._menuTarget = editor.editNode;
         this._selectContents();
        })
       });
    
       
       // Build the menu
       this._menuTitle = new dojox.editor.plugins._BreadcrumbMenuTitle({menuTitle: strings.nodeActions});
       this._selCMenu = new dijit.MenuItem({label: strings.selectContents, onClick: dojo.hitch(this, this._selectContents)});
       this._delCMenu = new dijit.MenuItem({label: strings.deleteContents, onClick: dojo.hitch(this, this._deleteContents)});
       this._selEMenu = new dijit.MenuItem({label: strings.selectElement, onClick: dojo.hitch(this, this._selectElement)});
       this._delEMenu = new dijit.MenuItem({label: strings.deleteElement, onClick: dojo.hitch(this, this._deleteElement)});
       this._moveSMenu = new dijit.MenuItem({label: strings.moveStart, onClick: dojo.hitch(this, this._moveCToStart)});
       this._moveEMenu = new dijit.MenuItem({label: strings.moveEnd, onClick: dojo.hitch(this, this._moveCToEnd)});
    
    
       this._menu.addChild(this._menuTitle);
       this._menu.addChild(this._selCMenu);
       this._menu.addChild(this._delCMenu);
       this._menu.addChild(new dijit.MenuSeparator({}));
       this._menu.addChild(this._selEMenu);
       this._menu.addChild(this._delEMenu);
       this._menu.addChild(new dijit.MenuSeparator({}));
       this._menu.addChild(this._moveSMenu);
       this._menu.addChild(this._moveEMenu);
    
    
       body._ddConnect = dojo.connect(body, "openDropDown", dojo.hitch(this, function(){
        this._menuTarget = body._selNode;
        this._menuTitle.set("menuTitle", dojo.string.substitute(this._titleTemplate,{
          "nodeName": "<body>"
        }));
        this._selEMenu.set("disabled", true);
        this._delEMenu.set("disabled", true);
        this._selCMenu.set("disabled", false);
        this._delCMenu.set("disabled", false);
        this._moveSMenu.set("disabled", false);
        this._moveEMenu.set("disabled", false);
       }));
       this.breadcrumbBar.addChild(body);
       this.connect(this.editor, "onNormalizedDisplayChanged", "updateState");
      }));
      this.breadcrumbBar.startup();
      if(dojo.isIE){
       // Sometimes IE will mess up layout and needs to be poked.
    setTimeout(dojo.hitch(this, function(){this.breadcrumbBar.domNode.className = this.breadcrumbBar.domNode.className;}), 100);
      }
  • summary

    Over-ride for the setting of the editor.

• dojox.editor.plugins.Breadcrumb._selectContents

  • type

    Function

  • source: [view]
      this.editor.focus();
      if(this._menuTarget){
       var nodeName = this._menuTarget.tagName.toLowerCase();
       switch(nodeName){
        case 'br':
        case 'hr':
        case 'img':
        case 'input':
        case 'base':
        case 'meta':
        case 'area':
        case 'basefont':
          break;
        default:
         try{
          dojo.withGlobal(this.editor.window,
           "collapse", dijit._editor.selection, [null]);
          dojo.withGlobal(this.editor.window,
           "selectElementChildren", dijit._editor.selection, [this._menuTarget]);
          this.editor.onDisplayChanged();
         }catch(e){/*squelch*/}
       }
      }
  • summary

    Internal function for selecting the contents of a node.

• dojox.editor.plugins.Breadcrumb._deleteContents

  • type

    Function

  • source: [view]
      if(this._menuTarget){
       this.editor.beginEditing();
       this._selectContents();
       dojo.withGlobal(this.editor.window,
        "remove", dijit._editor.selection, [this._menuTarget]);
       this.editor.endEditing();
       this._updateBreadcrumb();
       this.editor.onDisplayChanged();
      }
  • summary

    Internal function for selecting the contents of a node.

• dojox.editor.plugins.Breadcrumb._selectElement

  • type

    Function

  • source: [view]
      this.editor.focus();
      if(this._menuTarget){
       dojo.withGlobal(this.editor.window,
        "collapse", dijit._editor.selection, [null]);
       dojo.withGlobal(this.editor.window,
        "selectElement", dijit._editor.selection, [this._menuTarget]);
       this.editor.onDisplayChanged();
    
       
      }
  • summary

    Internal function for selecting the contents of a node.

• dojox.editor.plugins.Breadcrumb._deleteElement

  • type

    Function

  • source: [view]
      if(this._menuTarget){
       this.editor.beginEditing();
       this._selectElement();
       dojo.withGlobal(this.editor.window,
        "remove", dijit._editor.selection, [this._menuTarget]);
       this.editor.endEditing();
       this._updateBreadcrumb();
       this.editor.onDisplayChanged();
      }
  • summary

    Internal function for selecting the contents of a node.

• dojox.editor.plugins.Breadcrumb._moveCToStart

  • type

    Function

  • source: [view]
      this.editor.focus();
      if(this._menuTarget){
       this._selectContents();
       dojo.withGlobal(this.editor.window,
        "collapse", dijit._editor.selection, [true]);
      }
  • summary

    Internal function for selecting the contents of a node.

• dojox.editor.plugins.Breadcrumb._moveCToEnd

  • type

    Function

  • source: [view]
      this.editor.focus();
      if(this._menuTarget){
       this._selectContents();
       dojo.withGlobal(this.editor.window,
        "collapse", dijit._editor.selection, [false]);
      }
  • summary

    Internal function for selecting the contents of a node.

• dojox.editor.plugins.Breadcrumb._updateBreadcrumb

  • type

    Function

  • source: [view]
      var ed = this.editor;
      if(ed.window){
       var sel = dijit.range.getSelection(ed.window);
       if(sel && sel.rangeCount > 0){
        var range = sel.getRangeAt(0);
    
    
        // Check the getSelectedElement call. Needed when dealing with img tags.
        var node = dojo.withGlobal(ed.window,
         "getSelectedElement", dijit._editor.selection) || range.startContainer;
        //var node = range.startContainer;
        var bcList = [];
    
    
        // Make sure we get a selection within the editor document,
        // have seen cases on IE where this wasn't true.
        if(node && node.ownerDocument === ed.document){
         while(node && node !== ed.editNode && node != ed.document.body && node != ed.document){
          if(node.nodeType === 1){
           bcList.push({type: node.tagName.toLowerCase(), node: node});
          }
          node = node.parentNode;
         }
         bcList = bcList.reverse();
    
    
         while(this._buttons.length){
          var db = this._buttons.pop();
          dojo.disconnect(db._ddConnect);
          this.breadcrumbBar.removeChild(db);
         }
         this._buttons = [];
    
    
         var i;
         var self = this;
         for(i = 0; i < bcList.length; i++){
          var bc = bcList[i];
          var b = new dijit.form.ComboButton({
           showLabel: true,
           label: bc.type,
           _selNode: bc.node,
           dropDown: this._menu,
           onClick: function(){
            self._menuTarget = this._selNode;
            self._selectContents();
           }
          });
          b._ddConnect = dojo.connect(b, "openDropDown", dojo.hitch(b, function(){
           self._menuTarget = this._selNode;
           var nodeName = self._menuTarget.tagName.toLowerCase();
           var title = dojo.string.substitute(self._titleTemplate,{
            "nodeName": "<" + nodeName + ">"
           });
           self._menuTitle.set("menuTitle", title);
           switch(nodeName){
            case 'br':
            case 'hr':
            case 'img':
            case 'input':
            case 'base':
            case 'meta':
            case 'area':
            case 'basefont':
             self._selCMenu.set("disabled", true);
             self._delCMenu.set("disabled", true);
             self._moveSMenu.set("disabled", true);
             self._moveEMenu.set("disabled", true);
             self._selEMenu.set("disabled", false);
             self._delEMenu.set("disabled", false);
             break;
            default:
             self._selCMenu.set("disabled", false);
             self._delCMenu.set("disabled", false);
             self._selEMenu.set("disabled", false);
             self._delEMenu.set("disabled", false);
             self._moveSMenu.set("disabled", false);
             self._moveEMenu.set("disabled", false);
           }
          }));
          this._buttons.push(b);
          this.breadcrumbBar.addChild(b);
         }
         if(dojo.isIE){
          // Prod it to fix layout.
          this.breadcrumbBar.domNode.className = this.breadcrumbBar.domNode.className;
         }
    
         
        }
       }
      }
  • summary

    Function to trigger updating of the breadcrumb

  • tags:

• dojox.editor.plugins.Breadcrumb.updateState

  • type

    Function

  • source: [view]
      if(dojo.style(this.editor.iframe, "display") === "none" || this.get("disabled")){
       dojo.style(this.breadcrumbBar.domNode, "display", "none");
      }else{
       if(dojo.style(this.breadcrumbBar.domNode, "display") === "none"){
        dojo.style(this.breadcrumbBar.domNode, "display", "block");
       }
       this._updateBreadcrumb();
    
    
       // Some themes do padding, so we have to resize again after display.
       var size = dojo.marginBox(this.editor.domNode);
       this.editor.resize({h: size.h});
      }
  • summary

    Over-ride of updateState to hide the toolbar when the iframe is not visible.
    Also triggers the breadcrumb update.

• dojox.editor.plugins.Breadcrumb.destroy

  • type

    Function

  • source: [view]
      if(this.breadcrumbBar){
       this.breadcrumbBar.destroyRecursive();
       this.breadcrumbBar = null;
      }
      if(this._menu){
       this._menu.destroyRecursive();
       delete this._menu;
      }
      this._buttons = null;
      delete this.editor.breadcrumbBar;
      this.inherited(arguments);
  • summary

    Over-ride to clean up the breadcrumb toolbar.

• dojox.editor.plugins.Breadcrumb.editor

  • summary

• dojox.editor.plugins.Breadcrumb._buttons

  • summary

• dojox.editor.plugins.Breadcrumb._titleTemplate

  • summary

• dojox.editor.plugins.Breadcrumb._menuTarget

  • summary

• dojox.editor.plugins.Breadcrumb._menuTitle

  • summary

• dojox.editor.plugins.Breadcrumb._selCMenu

  • summary

• dojox.editor.plugins.Breadcrumb._delCMenu

  • summary

• dojox.editor.plugins.Breadcrumb._selEMenu

  • summary

• dojox.editor.plugins.Breadcrumb._delEMenu

  • summary

• dojox.editor.plugins.Breadcrumb._moveSMenu

  • summary

• dojox.editor.plugins.Breadcrumb._moveEMenu

  • summary

• dojox.editor.plugins.Breadcrumb.breadcrumbBar.domNode.className

  • summary

• dojox.editor.plugins.Breadcrumb.setEditor.editor

  • type

    Object

  • summary

    The editor to configure for this plugin to use.

• name

  • summary

• o.plugin

  • summary

• dojox.editor.plugins

  • type

    Object

  • summary

• dojox.editor

  • type

    Object

  • summary

• dojox

  • type

    Object

  • summary