Issue Details (XML | Word | Printable)

Key: MDL-17922
Type: Sub-task Sub-task
Status: Resolved Resolved
Resolution: Fixed
Priority: Minor Minor
Assignee: Sam Hemelryk
Reporter: Tim Hunt
Votes: 0
Watchers: 5
Operations

Add/Edit UI Mockup to this issue
If you were logged in you would be able to see more operations.
Moodle
MDL-16583

JavaScript for setting target=XX on links based on a CSS class

Created: 16/Jan/09 09:54 AM   Updated: 21/Sep/09 02:00 PM
Return to search
Component/s: Accessibility
Affects Version/s: 2.0
Fix Version/s: 2.0

Issue Links:
Relates
 

Participants: Caio SBA, Dan Poltawski, David Horat, Sam Hemelryk and Tim Hunt
Security Level: None
Resolved date: 21/Sep/09
Affected Branches: MOODLE_20_STABLE
Fixed Branches: MOODLE_20_STABLE


 Description  « Hide
So we can get the effect of target="_blank" without invalid HTML.

http://dialnet.unirioja.es/js/procesarLinks.js may have useful inspiration.

 All   Comments   Change History   Version Control      Sort Order: Ascending order - Click to sort in descending order
Caio SBA added a comment - 17/Jan/09 10:52 AM
Yes, you can do that. In my opinion, the best way is to add a 'rel="external"' attribute to the link tag. And you can achieve the effect of target="_blank" with the following Javascript function:

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for ( var i=0; i < anchors.length; i++ ) {
var anchor = anchors[i];
if ( anchor.getAttribute("href") && anchor.getAttribute("rel") == "external" ) { anchor.target = "_blank"; }
}
}
window.onload = externalLinks;

We can modify the function to set other values to the target attribute, mapping the "rel" value with the "target" one:

function externalLinks() {
var map = { "external" : "_blank", "same" : "_self" }
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for ( var i=0; i < anchors.length; i++ ) {
var anchor = anchors[i];
if ( anchor.getAttribute("href") && anchor.getAttribute("rel") == "external" ) { anchor.target = map[anchor.getAttribute("rel")]; }
}
}
window.onload = externalLinks;

If you don't want to use the target anyway, it's possible to use window.open instead:

function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for ( var i=0; i < anchors.length; i++ ) {
var anchor = anchors[i];
if ( anchor.getAttribute("href") && anchor.getAttribute("rel") == "external" ) { window.open(anchor.getAttribute("href")); }
}
}
window.onload = externalLinks;

Hope it helps!


David Horat added a comment - 17/Jan/09 10:21 PM
Caio´s idea is much more semantically correct.

Tim Hunt added a comment - 17/Jan/09 10:55 PM
Actually, that is not true. The goal is not to open all external links in a new window. This is intended for things like help buttons, that need to pop up a window. rel="XXX" may be an appropriate way to do that, but I cannot immediately think of a semantically valid rel value that covers all cases.

Still, an interesting idea. Thanks for suggesting it.


David Horat added a comment - 17/Jan/09 10:57 PM
You can specify for example: 'rel="help"' and all the ones with help will be opened in a new window. Because it is a link which has a help relationship with the page which contains the link.

Caio SBA added a comment - 17/Jan/09 11:00 PM
David, you took the words right out of my mouth! The idea is exactly this.
Isn't it enought, Tim?

Tim Hunt added a comment - 18/Jan/09 07:12 PM
No. That deals with help files, which is just one case. What about all the others? I can think of at least half a dozen different types, and that is just off the top of my head.

In Moodle, most of these links are produced from a link_to_popup_window function, which does not know why it is being called.


David Horat added a comment - 18/Jan/09 07:31 PM
Then, if we want to make Moodle more semantically accurate we will need to know why it is being called.

For every call to the function "link_to_popup_window", we would have to categorize that link adding a "rel" parameter. Make a list of categories. And make them all use this new method.


Caio SBA added a comment - 18/Jan/09 10:59 PM
Yes, we could modify the "link_to_popup_window" function to add a "rel" parameter to the link according to its behaviour. Each value of the "rel" parameter would perform some action, and we can treat this in the Javascript.

Dan Poltawski added a comment - 19/Jan/09 05:35 PM
Just to point to a discussion I started about the related problem:
http://moodle.org/mod/forum/discuss.php?d=75515

Sam Hemelryk added a comment - 21/Sep/09 02:00 PM
This has been since resolved as part of the deprecation of the `link_to_popup_window` function.
You can now create a new popup_action and using OUTPUT->link to display it. This will automatically attach JS events to display the href in a popup.