How to specify the availability of a custom tab or group
The availability of a custom tab or group can be easily defined by creating a custom command, which returns true or false.
var customCommand = {
getAvailable: function(scope) {
return true;
},
execute: function() {
return false;
}
}
Editor.addCommand("CustomCommand", customCommand);
<x:overlay xmlns="http://xopus.com/2009/lui">
<ribbon-tab id="CustomTab" after="HomeTab" availability="CustomCommand">
<ribbon-group id="CustomGroup" label="Formatting">
<ribbon-bigbutton role="strong" />
<ribbon-bigbutton role="emphasis" />
<ribbon-bigbutton role="underline" />
</ribbon-group>
</ribbon-tab>
</x:overlay>
<x:javascript>
var customCommand = {
execute: function () {
return false;
},
getAvailable: function (scope) {
var ancestors = scope.get("ancestors");
for (var i = ancestors.length-1; i >= 0; i--) {
var elname = ancestors[i] && ancestors[i].getLocalName();
if (elname == "p") {
return true;
}
}
return false;
}
};
Editor.addCommand("CustomCommand", customCommand);
</x:javascript>
Notice the use of the built-in scope variable ancestors in the line:
var ancestors = scope.get("ancestors");By taking advantage of the built-in scope variable ancestors, the getAvailable method will be executed whenever the context changes, i.e. when there is a change to the scope variable.