commit 65bc4e4213c12093471d667787c50650409ed2d1 Author: John Bintz Date: Sun Nov 9 15:39:12 2008 -0500 initial commit diff --git a/images/keyboard-navigation-next-page-id.png b/images/keyboard-navigation-next-page-id.png new file mode 100644 index 0000000..d4f83bb Binary files /dev/null and b/images/keyboard-navigation-next-page-id.png differ diff --git a/images/keyboard-navigation-next-page-traverse.png b/images/keyboard-navigation-next-page-traverse.png new file mode 100644 index 0000000..c83b7ff Binary files /dev/null and b/images/keyboard-navigation-next-page-traverse.png differ diff --git a/keyboard_navigation.js b/keyboard_navigation.js new file mode 100644 index 0000000..7b1c11f --- /dev/null +++ b/keyboard_navigation.js @@ -0,0 +1,75 @@ +var KeyboardNavigation = {}; + +KeyboardNavigation.get_hrefs = function(fields, admin_mode) { + var found_properties = {}; + var any_found = false; + var missing_properties = []; + + for (key in fields) { + if (fields.hasOwnProperty(key)) { + var instructions = fields[key]; + var found_nodes = $$(instructions); + var is_found = false; + if (found_nodes.length > 0) { + var top_node = $(found_nodes[0]); + while (top_node) { + if (top_node.href) { + found_properties[key] = top_node.href; is_found = true; + if (admin_mode) { + var highlight_a = new Element("a", { "title": key + ": " + instructions, "href": top_node.href, "style": "display: block; position: absolute; border: solid #f00 1px; background-color: #ff0; z-index: 1" }); + highlight_a.setOpacity(0.5); + highlight_a.clonePosition(top_node); + document.body.appendChild(highlight_a); + } + any_found = true; break; + } + top_node = top_node.parentNode; + } + } + + if (!is_found) { + missing_properties.push(key + ": " + instructions); + } + } + } + + if (missing_properties.length > 0) { + var message = "[Keyboard Navigation] Missing selectors:\n\n" + missing_properties.join("\n"); + if (top.console) { + top.console.log(message); + } else { + alert(message); + } + } + + if (any_found) { + return found_properties; + } else { + return false; + } +}; + +KeyboardNavigation.add_events = function(hrefs) { + Event.observe(document, 'keyup', function(e) { + var prop_to_use = null; + switch (e.keyCode) { + case 37: + prop_to_use = (e.shiftKey) ? "first" : "previous"; + break; + case 39: + prop_to_use = (e.shiftKey) ? "last" : "next"; + break; + } + if (prop_to_use) { + if (hrefs[prop_to_use]) { document.location.href = hrefs[prop_to_use]; } + } + }, true); + + var i,il; + ["input","textarea","select"].each(function(type) { + var all_type = document.getElementsByTagName(type); + for (i = 0, il = all_type.length; i < il; ++i) { + Event.observe(all_type[i], 'keyup', function(e) { Event.stop(e); return false; }); + } + }); +}; \ No newline at end of file diff --git a/keyboard_navigation.php b/keyboard_navigation.php new file mode 100644 index 0000000..f65922c --- /dev/null +++ b/keyboard_navigation.php @@ -0,0 +1,219 @@ +messages = array(); + $this->fields = array( + 'previous' => __("Previous [Left arrow]", 'keyboard-navigation'), + 'next' => __("Next [Right arrow]", 'keyboard-navigation'), + 'first' => __("First [Shift-Left arrow]", 'keyboard-navigation'), + 'last' => __("Last [Shift-Right arrow]", 'keyboard-navigation'), + ); + + if (isset($_POST['action'])) { + if ($_POST['action'] == "update-fields") { + $any_updated = false; + foreach (array_keys($this->fields) as $field) { + if (isset($_POST["selector-${field}"])) { + update_option("keyboard-navigation-selector-${field}", $_POST["selector-${field}"]); + $any_updated = true; + } + } + update_option("keyboard-navigation-highlight-selected-elements", ($_POST['highlight-selected-elements'] ? "1" : "0")); + if ($any_updated) { $this->messages[] = "Selectors updated."; } + } + } + } + + function footer() { + $plugin_url_root = pathfinding_get_admin_url() . '/' . pathfinding_get_plugin_path(); ?> + + + + +
+ messages) > 0) { ?> +
+ messages as $message) { ?> +

+ +
+ +

+ +
+
+ + + fields as $field => $name) { ?> + + + + + + + + + + + +
+ " />
Highlight selected elements on theme? + /> + (overlay yellow boxes on selected theme elements, and show missing selector alerts in Firebug console or in alert dialogs) +
+ +
+
+ +
+

Keyboard Navigation Version 0.1

+ +

Copyright © 2008 John Bintz | + Released under the GNU GPL

+ +

Need some sane defaults for your theme? Click one of the links below to populate the selectors on the left:

+ + + +

Are you a theme author? Send your theme's navigation defaults to John Bintz and get them included!

+
+
+ +

How does this work?

+

Keyboard Navigation uses CSS3 Selectors to find the hyperlinks on the page that define the previous and next links on the page, and then uses JavaScript to assign the act of hitting the left and right arrow keys on the keyboard to clicking those links. This is exactly the same approach that you would use to style a specific element on the page:

+ +
+ Firebug display of a simple targeting procedure +
+

Targeting the <a href="next-page"> on this page is quite easy — provide the CSS selector for the id of the element:

+ +
+ a#next-link +
+ +

If the <a href> does not have an id, but does have a class, or is the only child of a particular element, you can use syntax like:

+ +
+ div.nav div#next-link-holder a +
+
+
+ +

Keyboard Navigation extends this slightly so that, if the target element is not a <a href> tag, Keyboard Navigation will move up through the tree from the found element until an <a href> is found:

+ +
+ Firebug display of a more complicated targeting procedure +
+

You have two approaches for identifying the <a href="next-page"> tag:

+
    +
  • Using CSS3 selectors, you can use nth-child: +
    + div#menunav a:nth-child(2) +
    +
    • +
  • Using more familiar CSS syntax, target the <span class="next"> element, and Keyboard Navigation will move up through the DOM tree until it finds <a href="next-page">: +
    + div#menunav a span.next +
    +
    • +
+
+
+ +

Keyboard Navigation requires that the visitor have JavaScript enabled. This plugin uses + the Prototype JavaScript library, and including it will increase the size of your total site download.

+
+ \ No newline at end of file diff --git a/readme.txt b/readme.txt new file mode 100644 index 0000000..3781f0e --- /dev/null +++ b/readme.txt @@ -0,0 +1,12 @@ +=== Keyboard Navigation === +Contributors: johncoswell +Tags: comicpress, webcomics, posts, plugin, navigation +Requires at least: 2.5.1 +Tested up to: 2.6.3 +Stable tag: 0.1 + +Keyboard Navigation easily adds JavaScript-based keyboard navigation to a WordPress site. + +== Description == + +Keyboard Navigation uses CSS3 Selectors (via the Prototype JS library) to pluck navigational elements out of your pages and assign them to keyboard shortcuts. This sort of navigation is ideal for sites which have small, sequential archives (such as Webcomic sites). The plugin offers one assistive feature: you can enable the highlighting of the hyperlink elements that are being used to generate the navigation, and you can send selection errors to the Firebug console or to alert() messages. \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..08fc114 --- /dev/null +++ b/styles.css @@ -0,0 +1,53 @@ +td.field { + font-weight: bold; + padding-right: 10px +} + +div.image-holder { + overflow: hidden +} + +div.image-holder div { + float: left; + display: inline; + width: 440px; +} + +div.image-holder img { + float: left; + display: inline; + margin-right: 10px; +} + +div#top-holder { + overflow: hidden +} + +div#top-holder form { + float: left; + display: inline; + width: 650px; +} + +div#top-holder form input[type="text"] { + width: 440px +} + +div#top-holder form input[type="submit"] { + width: 250px +} + +div#top-holder div { + float: left; + display: inline; + width: 295px; + border: solid #ddd 1px; + margin-left: 10px; + margin-top: 10px; + padding: 10px; + background: #dfe +} + +div#top-holder div p { + margin-top: 0 +} \ No newline at end of file diff --git a/wordpress_pathfinding.php b/wordpress_pathfinding.php new file mode 100644 index 0000000..69eb990 --- /dev/null +++ b/wordpress_pathfinding.php @@ -0,0 +1,24 @@ +domain . $site->path); + } else { + return get_option('home'); + } +} + +function pathfinding_get_admin_url() { + if (function_exists('get_current_site')) { // WPMU + return cpm_get_home_url(); + } else { + return get_option('siteurl'); + } +} + +function pathfinding_get_plugin_path() { + return (defined("MUPLUGINDIR") ? MUPLUGINDIR : PLUGINDIR) . '/' . preg_replace('#^.*/([^\/]*)#', '\\1', dirname(plugin_basename(__FILE__))); +} + +?> \ No newline at end of file