normal link tags to refer keys to other pages

Prefer standard HTML feature to Javascript onclick.

Link tags including (outside) the entire list items would allow further
customisation, but is only allowed as of HTML5, and currently renders
incorrectly in at least Opera 9.25, Safari 4.0.4, and MSIE 7.0.

diff --git a/Shiar_Sheet/Keyboard.pm b/Shiar_Sheet/Keyboard.pm
index 4bc142c2c1153a4f87703b0cf087259a27df6750..cca8333547d448d2dfbe98a34289d38bbf08da8c 100644 (file)
--- a/Shiar_Sheet/Keyboard.pm
+++ b/Shiar_Sheet/Keyboard.pm
@@ -5,7 +5,7 @@ use warnings;
 no  warnings 'uninitialized';  # save some useless checks for more legible code
 use Carp;
 
-our $VERSION = 'v1.04';
+our $VERSION = 'v1.05';
 
 my @casedesc = (undef, qw/shift ctrl meta/, 'shift meta');
 my @rowdesc = qw(numeric top home bottom);
@@ -91,17 +91,17 @@ sub print_key {
           $keytxt .= "<small>$self->{sign}->{motion}</small>" if $flags =~ s/ ?\bargm\b//;  # motion argument
           $keytxt =~ s{\^(?=.)}{<small>^</small>};  # element around ctrl-identifier
           $keytxt =~ s{\+(?=.)}{<small>+</small>};  # meta
+       my $keyhint = defined($mnem) && qq{ title="$mnem"};
+          $keytxt  = "<b$keyhint>$keytxt</b>";
+          $keytxt .= ' '.$desc if defined $desc;
+          $keytxt = qq{<a href="/$1">$keytxt</a>} if $flags =~ s/ ?\blink(\S*)//;
        my $onclick = $flags =~ s/ ?\bmode(\S*)// && defined $self->{keys}{$1} && sprintf(
                ' onclick="setmode(%s)"',
                $1 eq '' ? '' : sprintf(q{'mode%s'}, escapeclass($1))
        );
-       $onclick .= sprintf(q{ onclick="document.location='%s'"}, $1)
-               if $flags =~ s/ ?\blink(\S*)//;
-       my $keyhint = defined($mnem) && qq{ title="$mnem"};
        $flags .= ' chr'.ord(substr $key, -1) if $key ne '^0';
 
-       print qq{\t\t<li class="$flags"$onclick><b$keyhint>$keytxt</b>};
-       print ' ', $desc if defined $desc;
+       print qq{\t\t<li class="$flags"$onclick>$keytxt};
        print "\n";
 }
 

diff --git a/base.css b/base.css
index 2529b0b1664ad88de3a3c6258bbd60624e3bb9a9..139c94cce350e6cebc01e4ff58c15b54449a87e3 100644 (file)
--- a/base.css
+++ b/base.css
@@ -139,6 +139,13 @@ ul.keys li b[title] { /* mnemonic hover */
 ul.keys li[onclick]:hover { /* link */
        cursor: pointer;
 }
+ul.keys li a { /* key link */
+       color: inherit;
+       text-decoration: none;
+       display: block;
+       height: 100%;
+}
+
 ul.keys.meta li b,
 ul.keys.ctrl li b,
 ul.keys.lead li b { /* char with ctrl or leading key */
@@ -387,14 +394,14 @@ td.di-a:hover                                      {background: #CF8}
 .mv {background: #ECE}   /* visual mode */
 .me {background: #CCF}   /* key mode */
 
-.pm[onclick]:hover {background: #7E7}
-.po[onclick]:hover {background: #CE6}
-.ci[onclick]:hover {background: #5ED}
-.mi[onclick]:hover {background: #F97}
-.mo[onclick]:hover {background: #F88}
-.me[onclick]:hover {background: #99F}
-.mv[onclick]:hover {background: #D9D}
-.co[onclick]:hover {background: #EE4}
+.pm a:hover, .pm[onclick]:hover {background: #7E7}
+.po a:hover, .po[onclick]:hover {background: #CE6}
+.ci a:hover, .ci[onclick]:hover {background: #5ED}
+.mi a:hover, .mi[onclick]:hover {background: #F97}
+.mo a:hover, .mo[onclick]:hover {background: #F88}
+.me a:hover, .me[onclick]:hover {background: #99F}
+.mv a:hover, .mv[onclick]:hover {background: #D9D}
+.co a:hover, .co[onclick]:hover {background: #EE4}
 
 .no {
        background: #EEE;

diff --git a/circus.css b/circus.css
index fef9ef211c796ac35a2d6d88fc1086120f7a4572..7b885dc98ad18688306be7cad4c72e72ebef3dea 100644 (file)
--- a/circus.css
+++ b/circus.css
@@ -11,14 +11,23 @@
 .mv {background: #E8E} /* visual mode */
 .me {background: #9AF} /* key mode */
 
-.pm[onclick]:hover {background: #000; color: #7E7}
-.po[onclick]:hover {background: #000; color: #CE6}
-.ci[onclick]:hover {background: #000; color: #8FD}
-.co[onclick]:hover {background: #000; color: #FF7}
-.mi[onclick]:hover {background: #000; color: #FFA070}
-.mo[onclick]:hover {background: #000; color: #F77}
-.me[onclick]:hover {background: #000; color: #99F}
-.mv[onclick]:hover {background: #000; color: #E8E}
+{background: #000; color: #7E7}
+{background: #000; color: #CE6}
+{background: #000; color: #8FD}
+{background: #000; color: #FF7}
+{background: #000; color: #FFA070}
+{background: #000; color: #F77}
+{background: #000; color: #99F}
+{background: #000; color: #E8E}
+
+.pm a:hover, .pm[onclick]:hover {background: #000; color: #7E7}
+.po a:hover, .po[onclick]:hover {background: #000; color: #CE6}
+.ci a:hover, .ci[onclick]:hover {background: #000; color: #8FD}
+.co a:hover, .co[onclick]:hover {background: #000; color: #FF7}
+.mi a:hover, .mi[onclick]:hover {background: #000; color: #FFA070}
+.mo a:hover, .mo[onclick]:hover {background: #000; color: #F77}
+.me a:hover, .me[onclick]:hover {background: #000; color: #99F}
+.mv a:hover, .mv[onclick]:hover {background: #000; color: #E8E}
 
 dl.legend dt.ext,
 ul.keys li.ext {

diff --git a/dark.css b/dark.css
index 1bc01cb12b8455c6f076c124d4cf9be4cef564c1..2f2729ebc25b910950e85940cf8857fe86a9c5dd 100644 (file)
--- a/dark.css
+++ b/dark.css
@@ -30,14 +30,14 @@ dl.legend-options dt {background: #333}
 .me {background: #205} /* mode */
 .no {background: #222} /* unassigned */
 
-.pm[onclick]:hover,
-.po[onclick]:hover,
-.ci[onclick]:hover,
-.co[onclick]:hover,
-.mi[onclick]:hover,
-.mo[onclick]:hover,
-.mv[onclick]:hover,
-.me[onclick]:hover {
+.pm a:hover, .pm[onclick]:hover,
+.po a:hover, .po[onclick]:hover,
+.ci a:hover, .ci[onclick]:hover,
+.co a:hover, .co[onclick]:hover,
+.mi a:hover, .mi[onclick]:hover,
+.mo a:hover, .mo[onclick]:hover,
+.mv a:hover, .mv[onclick]:hover,
+.me a:hover, .me[onclick]:hover {
        color: #000; /* on default (light) background hover */
 } /* mode link */
 

diff --git a/mono.css b/mono.css
index 826a7dab08883fa070a9f244ba3e7ac27bcea448..f1a2e9a3c6fb00b86dceaeb4069306a9a2d7c350 100644 (file)
--- a/mono.css
+++ b/mono.css
@@ -12,7 +12,8 @@ body .mv {background: #444; color: #FFF}   /* visual mode */
 body .mo {background: #000; color: #FFF}   /* mode */
 body .me {background: #000; color: #AAA}   /* key mode */
 
-body ul.keys li[onclick]:hover {
+body ul.keys li[onclick]:hover,
+body ul.keys li a:hover {
        background: #888;
        color: #000;
        border-color: #444;

diff --git a/red.css b/red.css
index 35b4cc0cb9adcfea28c8dfae4ab92f70c6f6e7ac..e953f5b8fcb87521eee5dd8f4d0e8b371205611d 100644 (file)
--- a/red.css
+++ b/red.css
@@ -67,15 +67,15 @@ dt.pm, dt.mv,
 #mutt .ci, #mutt .me,
 .no                {font-style: normal}
 
-.ci[onclick]:hover,
-.pm[onclick]:hover,
-.po[onclick]:hover,
-.co[onclick]:hover,
-.cp[onclick]:hover,
-.mi[onclick]:hover,
-.mo[onclick]:hover,
-.mv[onclick]:hover,
-.me[onclick]:hover {
+.ci a:hover, .ci[onclick]:hover,
+.pm a:hover, .pm[onclick]:hover,
+.po a:hover, .po[onclick]:hover,
+.co a:hover, .co[onclick]:hover,
+.cp a:hover, .cp[onclick]:hover,
+.mi a:hover, .mi[onclick]:hover,
+.mo a:hover, .mo[onclick]:hover,
+.mv a:hover, .mv[onclick]:hover,
+.me a:hover, .me[onclick]:hover {
        background: #800;
        color: #FF0;
 } /* mode link */