YUI: Editor: Buttons En/Disabled by Another Button

This example adds 3 buttons to the Editor's toolbar. The first is always enabled (like a toggle switch), the other 2 are always disabled. When you click on the first button, the other 2 will activate while the first button is selected. Once the first button get's deselected the other 2 buttons will disable and deselect.

Jump to the code

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.

The Javascript

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

myEditor.on('toolbarLoaded', function() {
            //Cache the selected state with some private vars
            var sel1 = false,
                sel2 = false,
                sel3 = false;

//Listen for the button1 click then activate the other buttons
            this.toolbar.on('button1Click', function() {
                //If the button is selected reverse our logic
                if (this.isSelected('button1')) {
                    sel1 = false;
                    sel2 = false;
                    sel3 = false;
                    this.deselectButton('button1');
                    this.deselectButton('button2');
                    this.deselectButton('button3');
                    this.disableButton('button2');
                    this.disableButton('button3');
                } else {
                    sel1 = true;
                    this.selectButton('button1');
                    this.enableButton('button2');
                    this.enableButton('button3');
                }
                return false;
            });
            //Listen for the button2 click and select itself, since we are returning false we need to manually select the button
            this.toolbar.on('button2Click', function() {
                //If it's selected, reverse our logic
                if (this.isSelected('button2')) {
                    sel2 = false;
                    this.deselectButton('button2');
                } else {
                    sel2 = true;
                    this.selectButton('button2');
                }
                return false;
            });
            //Listen for the button3 click and select itself, since we are returning false we need to manually select the button
            this.toolbar.on('button3Click', function() {
                //If it's selected, reverse our logic
                if (this.isSelected('button3')) {
                    sel3 = false;
                    this.deselectButton('button3');
                } else {
                    sel3 = true;
                    this.selectButton('button3');
                }
                return false;
            });
            //Listen for the afterNodeChange and re-enable/select the buttons that were previously selected
            this.on('afterNodeChange', function() {
                if (sel1) {
                    this.toolbar.selectButton('button1');
                    this.toolbar.enableButton('button2');
                    this.toolbar.enableButton('button3');
                }
                if (sel2) {
                    this.toolbar.selectButton('button2');
                }
                if (sel3) {
                    this.toolbar.selectButton('button3');
                }
            });
        });
        myEditor.render();
})();