This is the first bit of code that I have created that I think is good enough to share. I didn’t come up with this on my own, I drew inspiration from this blog post, and had some help from V1 over at the Adobe Spry Forum.
This simple bit of JavaScript will give your external links on your page an icon to indicate that you will be leaving the site. I previously would have done this using a CSS selector that targeted all links in a paragraph that had the target attribute set to “_blank”, but I wanted a fool-proof way of doing this without having to remember to set the target.
How does it work?
It works by manipulating the DOM using the Spry Dom Utils JS. It creates an observer that on page load adds the class called “external” to all links that are on a different domain.
To use it, just put this in your head section:
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script> <script src="SpryAssets/SpryExternalLinkIcon.js" type="text/javascript"></script> <link href="SpryAssets/SpryExternalLinkIcon.css" rel="stylesheet" type="text/css" />
The first file is from the current Spry library.
The second is my custom code, and the third is a small bit of CSS.
This is SpryExternalLinkIcon.js:
function externalLinkIcon(){
Spry.$$("a").forEach(function(href) {
if( href.hostname != window.location.host ){
Spry.Utils.addClassName( href, 'external');}
});
}
Spry.Utils.addLoadListener(externalLinkIcon);
This is SpryExternalLinkIcon.css
.external {
background: url('external.png') 100% 60% no-repeat;
padding: 0 15px 0 0;
}
Now any link that is on a different domain will get assigned the class “external”, which in turns puts an external link icon at the end of it.
Demo
You can see what I have been talking about here: http://www.dooza.tv/spry/SpryExternalLinkIcon.html
Download
You can download the files here: http://www.dooza.tv/spry/SpryExternalLinkIcon.zip
Conclusion
Using JavaScript to add this icon is progressive enhancement, the page doesn’t break, the link still works, but in browsers with JavaScript support you get the added functionality of an icon that helps the visitor recognise an external link. The visitor might want to open the link in another tab or window, knowing its an external link before having to click it will save time.
I would love to hear your opinions on this little bit of code that I have presented here. There aren’t many Spry tutorials or blogs about, which is a shame, its got potential.
What’s the deal with spry anyhoo? is Adobe still active on the project?
There is certainly development happening, its not as quick as some would like, but there should be some news in the new year. Hopefully 1.7 or even 2 is around the corner.
There seems to be more community involvement, which is vital for these projects to succeed. There are some great volunteers but more are needed.
Even if the Adobe or the Spry team decides to stop the development of the framework (which i can guarantee you they are not ) there will be community members like me, that will fork the code base.
Im aware of the fact that Spry haven’t been updated in a long while. But when you look at the demos and functionality. It is still standing. While other librarys constantly fighting bug reports. The amount of bugs that is found in the Spry library is actually quite small.
Of course there are a few nuts and bolts here and there. But it all works and I think that is actually the power of Spry and made me decide to use Spry for enterprise developments.
Oh and to be back on topic. You can actually write the code a bit shorter and without introducing a new global in to window (externalLinkIcon). The more globals that get introduced, the slower your application will run.
Spry.Utils.AddLoadListener( function(){
Spry.$$(“a”).forEach(function(href) {
if( href.hostname != window.location.host ){
Spry.Utils.addClassName( href, ‘external’);
}
});
});
As you will see in the snippet above, it eliminates the use of the externalLinkIcon function by directly including it in the addLoadListener function.
Hi Arnout, I would love to see a fork of Spry happen, we might see some worthwhile developments. I know you have lots of ideas up your sleeves, and I am sure I would do what I can.
Thank you for the updated code, I will update mine with your code and credit you for it. I still have lots to learn from you!
Hi,
I would love to fork Spry, but I rather see Spry opening there source so we can contribute on that as third party developers.
This way we don’t need to fork but we can just update the current code base.
They said no to that because they are “selling” Spry with DW. So they cant accept third party code. ( Which is odd to me because the Adobe Flex framework is also sold but they do allow contributors ).
But i’m actually considering writing a SpryData 2.0 version. At work we have allot of SpryData implementations running. We use it main search engine, and it powers our autosuggest. But also our complete management section is actually powered about with Spry Data sets.
But there are some features missing. Or features can be enchanted.
The Spry team is working hard on a Spry Widget “framework” overhaul. So I rather wait to see what they come up with the Spry widgets so I can adjust my code on their new changes.
I think patience is what we need at the moment, but at the same time Adobe needs to know that the community is ready and willing to help. I am sure they are fully aware of your contributions Arnout, as you are doing a fantastic job.
Is it worth blogging about the features that you feel could easily be enhanced/added? We could maybe stir up some interest in the community and see what they think.