Disabling click events in XPM editing (Razor)

Question

I've been trying to solve this for some time now, but I can't come up with something that works properly.

You see, on our site there are a lot of clickable images or divs present, provided with componentlinks that fall over the entire image. If you activate XPM and try to select the component, it will fire its component link click event, and route you to the correct page.

I've been searching for a quick solution to disable this behaviour only when editing, and so far I've come up with a couple of workarounds that quite frankly aren't what I'm looking for.

You can for instance use the fantastic Razor Mediator condition (IsSiteEditEnabled), however, this function always resolves to true if the publication/page/server you're currently are is enabled for site edit. This means that if you insert template-specific code such as

@if(!IsSiteEditEnabled){
<a tridion:href="#"> other code, ending in closing of </a>...
}

Will NOT output a link when site edit (XPM) is NOT activated, but can be activated. Staging servers, in short.

Unless there is no other option, I'm going to need a Live publication server to make the code work, but this will pose the problem that editors will think links are broken on the staging servers.

I have the feeling that there is something that I'm missing here. I believe that this issue might've been encountered by someone like you :)

this is one of the blocks

<article class="block-2x2 banner">
    <tcdl:ComponentField name="component_link"></tcdl:ComponentField>
    @if(!IsSiteEditEnabled){
        @:<a tridion:href="@Fields.component_link">
        }
        <div class="image-container">
            <tcdl:ComponentField name="image"><img src="@Fields.image" alt="@Fields.image.altText"></tcdl:ComponentField>
        </div>
        <div class="hgroup">
            <h4 class="primary-title">@RenderComponentField("header", 0)</h4>
            <h5 class="secondary-title">@RenderComponentField("title", 0)</h5>
        </div>
    @if(!IsSiteEditEnabled){</a>}
</article>

Hemispheroid

It seems this questions might need a bounty... – Hemispheroid

I think you might need more than a bounty - I am really confused by your question - Perhaps consider rephrasing it. Why do you want to disable the links? Is it because the prevent you from editing the components? – Synchrotron

Well, the entire component is one big click banner. So what that means, in order to edit it on the site, you need focus of said component by yes- clicking on it. Because it has a link, you will be redirected to another page and editing is impossible. – Hemispheroid

Answer 1

You might consider just putting in some form of else like this:

@if(!IsSiteEditEnabled){
   <a tridion:href="#"> other code, ending in closing of </a>...
}else{
   <a href="#" onclick="alert('Image links not supported in XPM');"></a>
}

This should at least explain why the links are not working for your editors. Although I have not tested if this actually solves your problem.

It would be cleaner to just add a class="NoClickImageLink" attribute, and add a JavaScript action to all tags with that class when the page loads which associates the onclic event with the tag..

Synchrotron

This is essentially is the right way to go, but the problem is that the Staging site will not have links active. This also means when SiteEdit can be enabled, but is not active at the moment. Editors will need to navigate through the addressbar url to get to a page they want to see. – Hemispheroid

I think your only option is to either add a text link in SiteEdit mode to allow navigation, or add a special div/marker to allow editing of your component. Achieving both of your goals at the same time seems impossible to achieve. – Synchrotron

This approach requires template changes which make it not a preferable solution. Since XPM is largely client side code you could also find the solution there. – Cyclorama

Answer 2

When using JQuery you can prevent anchor links to work by using this code:

$('a').click(function(event) {
    event.preventDefault();
});

$(this) would reference the clicked element which you can then verify in the case you need some anchor links to keep working.

This code can be injected in the case you are editing with XPM and would greatly simplify your templates.

PS. I didn't test this suggestion.

Cyclorama

Answer 3

As XPM is purely client side... I guess you must do it using some trick like what I describe at; http://tcm4lex.wordpress.com/2013/07/04/javascript-detection-of-experience-manager/

The article is written from my experience with XPM on Tridion 2013 but can be a good starting point anyway. Once you have that way to detect when the page is in edit mode, you can do some Javascript trick like the one Arjen describes above.

Pongid

tcm4lex.wordpress.com is no longer available. The authors have deleted this site. – Motive