[Snippet] Access Keys with DropMenu

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Kunal Kapoor]

Attached is a file called snippet.dropmenu.accesskeys.zip with all the necessaries to get Access Keys up and running in DropMenu.

Step 1: Create a TV as illustrated in tv.accesskey.gif.
Step 2: Ensure all your templates are ticked at the bottom.
Step 3: Replace your DropMenu with the contents of snippet.dropmenu.accesskeys.txt.

If you have modified your DropMenu and you want to include the changes in this file, you can see all changes made to the DropMenu snippet in FileComparisonReport.html.

Hope it helps.
[edit]
I have updated the snippet to use the isset() function inside the inline if statements. FileComparisonReport.html outlines the changes made.
[/edit]
[anotherEdit]
As per Briggsy's request, here are the details for the TV used (sorry for not being clearer about it before.):

Variable Name: accessKey (This is with a capital K and all other letters are lowercase.)
Caption: Access Key [Alt+?]
Description: Define a single charater that will act as a shortcut key to this document when called in the [[DropMenu]] Snippet.
Input Type: Text
Input Option Values:
Default Value:
Widget:
Sort Order: 0 (Or whatever is convenient for you.)

Ensure that all your templates are ticked that documents use which require an Access Key.
[/anotherEdit]
[evenMoreEdits]
Thanks to garryn, he has fixed the issue that Briggsy noticed here. garryn's post about the fix is found here. Many thanks mate.

The .zip file is updated again!
[/evenMoreEdits]
Extra keywords for search: accesskey, accesskeys.

[davidm]

Waow that was fast
Thanks for this and the clear/concise instructions Kunal...

It sure will help and I sure will test it ! But right now it's 2 a.m and I'll finally get some sleep before I get down to taking a peek...

I'll do that this weekend and report

[Briggsy]

hmmm, I followed the instructions and pasted the snippet code, created the TV and enabled for the template. Then I went to a page in the admin panel and assigned the leter "n" (without the qoutes) to the TV.

Howver alt+n doesn't do anything when viewing the page and there appears to be no mention of the access key in the page source. Any idea what I've done wrong?

[sottwell]

Worked fine for me, except on my Mac it's the ctrl key not the alt key.

Pasted new version of DropMenu (named it DropMenuAK to keep it distinct from other modded versions and the original).
Created the TV, and made sure to check the box for access for my template.
Edited each page and gave each one a unique letter to use.

Alt+key didn't work, so tried command+key - oops, didn't work either, command+w still closes the active window, so re-opened my test site in a new tab and tried ctrl and works great.

To have the relevant character underlined, you can use the <u>x</u> tags.  If you want it to validate, you have to <span style="text-decoration:underline">x</span>, or <span class='ak'>x</span> and style the span in the CSS file.  You can't do this in the Menu Title field because it won't accept that many characters.  You have to use the Title and leave the Menu Title blank.  Or you could use something like this: <em>x</em> and then in the CSS file style the em tag as desired.  With a little care that would all fit in the Menu Title.

It would be possible to have the code automatically put the tags around the first occurance of that character in the menu text string.

[garryn]

Hmm, I seem to be having the same problem as Briggsys.

I followed the instructions to the letter but, for some reason, I'm not getting anything returned from the getTemplateVarOutput call.

Has there been a fix for that in the past or anything? Just before I dig any deeper ...

[sottwell]

Well, I can't say much about that, since it works in my case, I'm sorry to say.

Aside from that (admittedly a show stopper there!) I've hacked further to add underlining to the relevant character.

Line 230:

Code:

// add accessKey tags
                $linkText = $child[$textOfLinks];
                $keyCharacter = $accessKey['accessKey'];
                $pos = strpos($linkText, $keyCharacter);
                if ($pos !== false) {
                   $startTag = '<span style="text-decoration:underline">';
                   $endTag = "</span>";
                  $replace = $startTag . $keyCharacter . $endTag;
                  $linkText = substr_replace($linkText, $replace, $pos, strlen($keyCharacter));
                }
                // end of accessKey tags

then in lines 248, 258 and 264 (or the three places where the <a> tags are generated, your line numbering may vary a little) replace the three occurrances of $child[$textOfLinks] with $linkText; this is just before the closing </a> tags in all three lines.  Don't replace the one occurrance in line ~264 where a link is not created.

Code:

$itm .= ($child['alias'] > '0' && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? $child[$textOfLinks] : '<a '.(($accessKey['accessKey']) ? 'accesskey="'.$accessKey['accessKey'].'" ' : '').'href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].(($accessKey['accessKey']) ? ' [Alt+'.$accessKey['accessKey'].']' : '').'">'.$linkText.'</a>';

[Kunal Kapoor]

I've noticed that because I wasn't using the isset() function in my inline if statements, an accesskey of 0 (zero) would not work. I have changed this and I have updated the .zip file above.

This seems like a good link for standard accesskeys:
http://www.clagnut.com/blog/193/

[Briggsy]

This link is to the NZ Governments E site which assists all NZ Govt departments to be consistant with their sites etc. These Access Keys are being adopted by NZ Government Sites and slowly some Private sector sites as well.

I guess this will provide some form of natioanl pseudo standard for all NZ sites

http://www.e.govt.nz/accessibility.

[garryn]

Just to follow up on the problems I was having ...

I found that I was running the snippet uncached ([! !]) and that was causing my problem. Calling the snippet cached ([[ ]]) seems to have done the trick.

However, I am getting the issue that Susan reported about not being able to run two different versions of the snippet on the same page, it seems to be an either/or situation. The full post is here.

[Briggsy]

Stil not working for me 

Only have one instance of the snippet and it is called uncached from the template. Any sugestions?

[garryn]

Hi Briggsy,

Try running the snippet cached, all my problems were because I was calling it uncached.

Cheers, Garry

[Briggsy]

Hi Briggsy,

Try running the snippet cached, all my problems were because I was calling it uncached.

Cheers, Garry

hey garry, sorry my mistake I am calling it cached [[DropMenuAccessKey? textOfLinks=menutitle &titleOfLinks=longtitle]]

I have tried uncached as well, and with page set to cached and uncached.

I also put the [*accesskey*] TV in the template in both the Head and in the Body and neither helped

[Kunal Kapoor]

This may sound really silly, and you have probably already checked it, but is your template variable called accesskey or accessKey (as in my specification)? I think they are case sensitive. It sounds like a problem with your TV if you can't even call it in the template directly.

[Briggsy]

This may sound really silly, and you have probably already checked it, but is your template variable called accesskey or accessKey (as in my specification)? I think they are case sensitive. It sounds like a problem with your TV if you can't even call it in the template directly.

yea it was a case isssue, doh. Thanks it works now

Can I suggest you make the cases more obvious? All lower case except for the "K" is hard to see the case is different, espically from the GIF example.

[Kunal Kapoor]

Can I suggest you make the cases more obvious? All lower case except for the "K" is hard to see the case is different, espically from the GIF example.

Apologies. I have a naming convention that all my snippets and TVs and Plugins begin with a lower case and then use CamelCasing for the rest of the word. It's just the way I work. I will amend my first post and write out the details of the TV.

In fact, what I could do is modify [[DropMenu]] in such a way that you can define the appropriate TV in a snippet call (e.g. [[DropMenu? &accesskeytv=`accesskeys`]]) with a default value set of accessKey. I'll get to work on this at some point today if everyone thinks it to be a good idea.