From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 28 Nov 2009 02:09:49 +0000 (+0000)
Subject: normal link tags to refer keys to other pages
X-Git-Tag: v1.3~81
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/132eb3a630a1f5966a133bbc6538996ae31326b1

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 4bc142c..cca8333 100644
--- 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 2529b0b..139c94c 100644
--- 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 fef9ef2..7b885dc 100644
--- 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 1bc01cb..2f2729e 100644
--- 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 826a7da..f1a2e9a 100644
--- 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 35b4cc0..e953f5b 100644
--- 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 */