Open link in new window


(Jay Pfaffman) #1

I have some code that used to open navigation links in a new window but doesn’t now. I’m perplexed.


<script type="text/discourse-plugin" version="0.2">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://testing.mysite.com/new-topic?category_id=3',
                        text:'Comment on New Site',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'http://www.mysite.com',
                        text:'Old Site',
                        target:'_blank'
                    })
                ])
            ]);
        }
});
</script>

What am I missing?


Logo Resize & Open Links in Header in New Tab?
(Angus McLeod) #2

The clicks are being intercepted in the click method in the home-logo widget, which prevents the default action and routes internally.

One option is to do your own routing by using a javascript action instead of using the default a action.

Another option is to fulfil one of the conditions in the wantsNewWindow method.

As to why it’s happening now and not before…I’m not sure. Could be a number of reasons.


(Sydney) #3

one way I found that works is to replace home-logo: after with header-buttons: after

Like this:

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-buttons:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('a.blog-link', {href:'https://blog.example.com', target:'_blank'}, 'Visit our blog');
        }
});
</script>

Problem with this is that it shifts the member profile, menu and search icons over towards the logo, and puts the header links after those. It works to open links in new tabs, but messes with the design. Any ideas to resolve that @angus?


(Angus McLeod) #4

Change the target of decorateWidget to header-contents:before and your code will both put a link where you want it to, and open the link in a new tab :slight_smile:


(Sydney) #5

@angus OMG you ROCK! Thank you SO much! :grin:
such a simple mistake on my end -smh-