initial commit
This commit is contained in:
John Bintz
commit
65bc4e4213
BIN
images/keyboard-navigation-next-page-id.png
Normal file
BIN
images/keyboard-navigation-next-page-id.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
images/keyboard-navigation-next-page-traverse.png
Normal file
BIN
images/keyboard-navigation-next-page-traverse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
75
keyboard_navigation.js
Normal file
75
keyboard_navigation.js
Normal file
@ -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; });
|
||||
}
|
||||
});
|
||||
};
|
||||
219
keyboard_navigation.php
Normal file
219
keyboard_navigation.php
Normal file
@ -0,0 +1,219 @@
|
||||
<?php
|
||||
/*
|
||||
Plugin Name: Keyboard Navigation
|
||||
Plugin URI: http://www.coswellproductions.com/wordpress/keyboard-navigation/
|
||||
Description: Attach keyboard navigation to blog entries.
|
||||
Version: 0.1
|
||||
Author: John Bintz
|
||||
Author URI: http://www.coswellproductions.org/wordpress/
|
||||
|
||||
Copyright 2008 John Bintz (email : jcoswell@coswellproductions.org)
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 2 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License
|
||||
along with this program; if not, write to the Free Software
|
||||
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
|
||||
*/
|
||||
|
||||
require_once('wordpress_pathfinding.php');
|
||||
|
||||
class KeyboardNavigation {
|
||||
function KeyboardNavigation() {
|
||||
$this->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(); ?>
|
||||
<script type="text/javascript" src="<?php echo $plugin_url_root ?>/keyboard_navigation.js"></script>
|
||||
<script type="text/javascript">
|
||||
var keyboard_navigation_fields = {};
|
||||
<?php foreach (array_keys($this->fields) as $field) {
|
||||
$selector = get_option("keyboard-navigation-selector-${field}");
|
||||
if (!empty($selector)) { ?>
|
||||
keyboard_navigation_fields['<?php echo $field ?>'] = "<?php echo addslashes($selector) ?>";
|
||||
<?php }
|
||||
} ?>
|
||||
|
||||
var highlight_selectors = <?php echo (WP_ADMIN && (get_option("keyboard-navigation-highlight-selected-elements") == 1)) ? "true" : "false" ?>;
|
||||
|
||||
var results = KeyboardNavigation.get_hrefs(keyboard_navigation_fields, highlight_selectors);
|
||||
if (results != false) { KeyboardNavigation.add_events(results); }
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
function set_up_menu() {
|
||||
add_options_page('Keyboard Navigation', __("Keyboard Navigation", 'keyboard-navigation'), 5, __FILE__, array($this, "link_editor"));
|
||||
}
|
||||
|
||||
function link_editor() {
|
||||
$plugin_url_root = pathfinding_get_admin_url() . '/' . pathfinding_get_plugin_path(); ?>
|
||||
<link rel="stylesheet" href="<?php echo $plugin_url_root ?>/styles.css" type="text/css" />
|
||||
<div class="wrap">
|
||||
<?php if (count($this->messages) > 0) { ?>
|
||||
<div class="updated fade">
|
||||
<?php foreach ($this->messages as $message) { ?>
|
||||
<p><?php echo $message ?></p>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<h2><?php _e("Keyboard Navigation", "keyboard-navigation") ?></h2>
|
||||
|
||||
<div id="top-holder">
|
||||
<form action="" method="post">
|
||||
<input type="hidden" name="action" value="update-fields" />
|
||||
<table class="form-table">
|
||||
<?php foreach ($this->fields as $field => $name) { ?>
|
||||
<tr>
|
||||
<th scope="row"><?php echo $name ?></td>
|
||||
<td><input size="30" type="text" id="selector-<?php echo $field ?>" name="selector-<?php echo $field ?>" value="<?php echo get_option("keyboard-navigation-selector-${field}") ?>" /></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<tr>
|
||||
<th scope="row">Highlight selected elements on theme?</th>
|
||||
<td>
|
||||
<input type="checkbox" name="highlight-selected-elements" value="yes" <?php echo (get_option("keyboard-navigation-highlight-selected-elements") == 1) ? "checked" : "" ?> />
|
||||
<em>(overlay yellow boxes on selected theme elements, and show missing selector alerts in Firebug console or in alert dialogs)</em>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" align="center">
|
||||
<input type="submit" value="Update Fields" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
|
||||
<div id="top-information">
|
||||
<p><strong>Keyboard Navigation</strong> Version 0.1</p>
|
||||
|
||||
<p>Copyright © 2008 <a href="mailto:john@claritycomic.com?Subject=Keyboard+Navigation+Comments">John Bintz</a> |
|
||||
Released under the GNU GPL</p>
|
||||
|
||||
<p>Need some sane defaults for your theme? Click one of the links below to populate the selectors on the left:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#" class="pre-populate comicpress">Default ComicPress 2.5 Theme</a></li>
|
||||
</ul>
|
||||
|
||||
<p>Are you a theme author? Send your theme's navigation defaults to <a href="mailto:john@claritycomic.com?Subject=Keyboard+Navigation+Sane+Defaults">John Bintz</a> and get them included!</p>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var pre_population_sets = {
|
||||
'comicpress': {
|
||||
previous: "div#menunav a span.prev",
|
||||
next: "div#menunav a span.next",
|
||||
first: "",
|
||||
last: "div#header h1 a"
|
||||
}
|
||||
};
|
||||
$$('a.pre-populate').each(function(e) {
|
||||
Event.observe(e, 'click', function(evt) {
|
||||
for (set in pre_population_sets) {
|
||||
if (e.hasClassName(set)) {
|
||||
var ok = true;
|
||||
for (key in pre_population_sets[set]) {
|
||||
var target = $('selector-' + key);
|
||||
if (target) {
|
||||
if (target.value != pre_population_sets[set][key]) {
|
||||
ok = confirm("Overwrite your existing settings?"); break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (ok) {
|
||||
for (key in pre_population_sets[set]) {
|
||||
var target = $('selector-' + key);
|
||||
if (target) { target.value = pre_population_sets[set][key]; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Event.stop(evt);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<h3>How does this work?</h3>
|
||||
<p><strong>Keyboard Navigation</strong> 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:</p>
|
||||
|
||||
<div class="image-holder">
|
||||
<img src="<?php echo $plugin_url_root ?>/images/keyboard-navigation-next-page-id.png" alt="Firebug display of a simple targeting procedure" />
|
||||
<div>
|
||||
<p>Targeting the <a href="next-page"> on this page is quite easy — provide the CSS selector for the id of the element:</p>
|
||||
|
||||
<blockquote>
|
||||
<strong>a#next-link</strong>
|
||||
</blockquote>
|
||||
|
||||
<p>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:</p>
|
||||
|
||||
<blockquote>
|
||||
<strong>div.nav div#next-link-holder a</strong>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><strong>Keyboard Navigation</strong> 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:</p>
|
||||
|
||||
<div class="image-holder">
|
||||
<img src="<?php echo $plugin_url_root ?>/images/keyboard-navigation-next-page-traverse.png" alt="Firebug display of a more complicated targeting procedure" />
|
||||
<div>
|
||||
<p>You have two approaches for identifying the <a href="next-page"> tag:</p>
|
||||
<ul>
|
||||
<li>Using CSS3 selectors, you can use <code>nth-child</code>:
|
||||
<blockquote>
|
||||
<strong>div#menunav a:nth-child(2)</strong>
|
||||
</blockquote>
|
||||
</li>
|
||||
<li>Using more familiar CSS syntax, target the <span class="next"> element, and <strong>Keyboard Navigation</strong> will move up through the DOM tree until it finds <a href="next-page">:
|
||||
<blockquote>
|
||||
<strong>div#menunav a span.next</strong>
|
||||
</blockquote>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p><strong>Keyboard Navigation</strong> 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.</p>
|
||||
</div>
|
||||
<?php }
|
||||
}
|
||||
|
||||
$keyboard_navigation = new KeyboardNavigation();
|
||||
|
||||
wp_enqueue_script('prototype');
|
||||
add_action('wp_footer', array($keyboard_navigation, "footer"));
|
||||
add_action('admin_menu', array($keyboard_navigation, "set_up_menu"));
|
||||
|
||||
?>
|
||||
12
readme.txt
Normal file
12
readme.txt
Normal file
@ -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.
|
||||
53
styles.css
Normal file
53
styles.css
Normal file
@ -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
|
||||
}
|
||||
24
wordpress_pathfinding.php
Normal file
24
wordpress_pathfinding.php
Normal file
@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
function pathfinding_get_home_url() {
|
||||
if (function_exists('get_current_site')) { // WPMU
|
||||
$site = get_current_site();
|
||||
return preg_replace('#/$#', '', "http://" . $site->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__)));
|
||||
}
|
||||
|
||||
?>
|
||||
Loading…
Reference in New Issue
Block a user