SiteEdit 2009 & JavaScript trickery

Problem

Recently I was preparing a demo for a prospect. Part of what I was doing involved making one of their product pages siteeditable. The page in question contained a lot of content, but the presentation was simplified through the use of tabs. The client had used prototype to achieve this, although I don’t believe this had any specific impact on the problem this caused. I wanted to be able to edit all of the content from all of the tabs, however this was proving somewhat difficult – only the first visible tab was outlined correctly, and when other tabs were selected the original outlining remained. I needed to find a way to make all of the content visible.

Analysis

Reading the description of the problem no doubt there are those of you who are saying “easy, just change the design to show all the tabbed content all of the time” and , of course, this is one solution that would work. However, I wanted to maintain the integrity of the design, so I needed a solution that would only make the tabbed content temporarily available.

The direction I needed to go in was obvious – with JavaScript being used to hide the content in the tabs, and with SiteEdit being largely JavaScript-based, my solution was to be a JavaScript solution. So far so good, but how was I going to get my JavaScript to run only when I wanted it to? With maintaining the design integrity still clear in my mind I decided I needed a solution that would only trigger when SiteEdit was active, so I  needed a way to identify when this was true.

Fortunately working for SDL means that I have access to resources in R&D that are not only in a position to offer advice, but are also happy to do so. After a flurry of emails, and a couple of false starts (apparently it’s really easy to determine if you’re viewing the staging site through the SE proxy or not), the pieces of the puzzle began to fall in to place.

Solution

My solution used SiteEdit events to capture when the Component Presentation was selected (clicked) – literally the “componentPresentationClicked” event:

function pageInit() {
    // Special functionality when CP selected
    var onComponentPresentationClicked = function() {
        // Code goes here
    }

    // if SiteEdit is active (Page is viewed through proxy) attach special functionality
    if (typeof(top.$SeEventManager) != "undefined") {
        var m = top.$SeEventManager.getInstance();
        m.Subscribe("componentPresentationClicked", onComponentPresentationClicked);

        try {
            Event.observe(window, 'unload', function() {
                m.Unsubscribe("componentPresentationClicked", onComponentPresentationClicked);
            });
        } catch (err) {
            // probably should do something here...
        }
    }
}

document.observe("dom:loaded",function() { pageInit(); });

In the end it was straight-forward to achieve, although I’ve since learned that there might be a more appropriate event to hook in to, but hopefully this will be useful information. And don’t forget, if you’re trying anything like this then Firebug is your friend 😉

Advertisements

14 responses to “SiteEdit 2009 & JavaScript trickery

  1. Very interesting stuff Jeremy, thanks!.
    Can you elaborate a bit more on the code you put inside the “onComponentPresentationClicked” function?
    Yoav.

  2. Honestly, no. Not trying to be obstructive here, it just wasn’t very interesting. If I remember correctly it was something along the lines of “don’t hide the tab container divs” 😉

  3. Sorry, my bad, first read I thought you might have been interacting with SE from that function but this makes perfect sense now. 🙂

  4. I have a custom button created in the ribbon of tridion.

    If an item either Component/Page has been selected i need to get the info whether the item is localized or not. Based on that custom button will be enabled/disabled.

    For getting the tcmid of the selected component/page i am currently writing as

    selection.getItem(0); in my javascript.

    Similarly, how can i get the localized info of the selected item(Component/Page)

    I tried selection.getItem(0).isLocalized but it didnt work.

    Please suggest me.

  5. I have tried var tcmid = selection.getItem(0);
    Component comp= new Component(tcmid);
    var loc = comp.isLocalized;
    console.log(loc); also many chances with isLocalized. Could anyone help me out in getting the localized information of selected component.(true/false).

  6. I have created buttons in the tridion ribbon using usercontrol. I am able to see the buttons in the ribbon in disabled mode always.
    Please let me know how i can make them enable.
    Please suggest me. Thanks in Advance.

  7. Hi

    I am new to Tridion, just finished the installation and now trying to build and upload .net assembly, using visual studio add-in to upload assembly, m getting “Type mismatch” error in out put window of visual studio, can you help me to find out the solution?

    • I’m no longer an active part of the SDL Tridion community. You should try the Tridion StackExchange site, or try to identify the author of the plugin you’re using.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s