Javascript on ribbon group - tridion

Question

I managed to get a new ribbon group by following the article mentioned in How to create the custom buttons horizontally one below the other in ribbon of Tridion
I'm now trying to get a Javascript running whenever something changes in the Gui (hiding/showing buttons).
I have this in the configuration:
<!-- In the cfg:groups part -->
<cfg:group name="ClientGuiMods.ContentGroup" description="">
<cfg:fileset>
<cfg:file type="script">/Scripts/CreateRibbonGroup.js</cfg:file>
</cfg:fileset>
<cfg:dependencies>
<cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
</cfg:dependencies>
</cfg:group>
<!-- In the ribbontoolbars add part -->
<ext:extension pageid="HomePage" name="Content" assignid="ContentGroupId">
<ext:group>~/Scripts/ContentGroup.ascx</ext:group>
<ext:dependencies>
<cfg:dependency>ClientGuiMods.ContentGroup</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="DashboardView">
<ext:control id="DashboardToolbar" />
</ext:view>
</ext:apply>
</ext:extension>
And this in the Javascript:
Type.registerNamespace("ClientGuiMods");
ClientGuiMods.ContentGroup = function ContentGroup(element)
{
console.log('RibbonGroupCreated');
Tridion.OO.enableInterface(this, "ClientGuiMods.ContentGroup");
this.addInterface("Tridion.Controls.RibbonItemsGroup", [element]);
};
I've tried different arguments for this.addInterface(), but it never gets called. Is this the correct way? Or is there maybe another way to get a script called on the Home ribbon toolbar?

Answer 1

I never really looked at the group as anything other than a container for commands (read buttons). So the only interface I used is Tridion.Cme.Command on the button JavaScript.
But I think what you are looking for is the ControlResource which you can specify in your ContentGroup.ascx.cs
using Tridion.Web.UI.Core;
using Tridion.Web.UI.Controls;
using Tridion.Web.UI.Core.Controls;
namespace ClientGuiMods
{
[ControlResources("ClientGuiMods.ContentGroup")]
public class ContentGroup : TridionUserControl
{
}
}
Now, you can use the Tridion.ControlBase interface in your JavaScript.
Type.registerNamespace("ClientGuiMods");
ClientGuiMods.ContentGroup = function ContentGroup(element) {
console.log('RibbonGroupCreated');
Tridion.OO.enableInterface(this, "ClientGuiMods.ContentGroup");
this.addInterface("Tridion.ControlBase", [element]);
};
ClientGuiMods.ContentGroup.prototype.initialize = function ContentGroup$initialize() {
// the control is initialized here, we can use the following properties now
var props = this.properties;
var controls = props.controls;
var container = this.getElement();
};

Answer 2

#Bart, I tried the solution, but couln't get that to work.
Digging a bit further in the Javascripts in chrome I found there is no hook to fire any extra Javascript as a RibbonGroup (correct me if I'm wrong).
I did however find a way to get to the 'HomePage' RibbonPage and get it to fire events from there.
The extra thing I need is a "c:pagetype='Homepage'" on the RibbonPage named HomePage in the DOM, which isn't there by default. This can be set by including a load event script at the end.
So now my script looks like this.
Type.registerNamespace("ClientGuiMods");
ClientGuiMods.CreateRibbonPage = function CreateRibbonPage(element)
{
Tridion.OO.enableInterface(this, "ClientGuiMods.CreateRibbonPage");
this.addInterface("Tridion.Controls.RibbonPage", [element]);
};
ClientGuiMods.CreateRibbonPage.prototype.updateState = function CreateRibbonPage$updateState(stateObject)
{
//...
//Ribbonpage logic to update the state of your buttons and groups
};
console.log('Homepage: ' + document.getElementById('HomePage')); //.setAttribute('c:pagetype', 'HomePage');
var ClientScripts = {
registerHomepage: function() {
console.log('adding c:pagetype att');
var homepage = document.getElementById('HomePage');
if (homepage) {
homepage.setAttribute('c:pagetype', 'HomePage');
}
}
}
if (document.addEventListener && !Tridion.Utils.Dom.isIE)
$evt.addEventHandler(window, "DOMContentLoaded", ClientScripts.registerHomepage);
else
$evt.addEventHandler(window, "readystatechange", ClientScripts.registerHomepage);
Tridion.Controls.Deck.registerPageType(ClientGuiMods.CreateRibbonPage, "HomePage");

Answer 3

I might be off mark here, but it sounds like you have a series of buttons under the same group, and you want to have them behave consistently in terms of availability.
I had a similar case where I need to fire the same event on Save, Save & Close and Save & New operations. What I ended up doing was to write the code as a Save command extension (broadly based off Jaime's details here) and then, from the SaveClose and SaveNew extensions I would call the Save._isEnabled and Save._isAvailable functions to determine whether my commands were available, and the Save._execute whenever the editors clicks on SaveClose & SaveNew.
Not as elegant as Peter's suggestion though, but got the job done.