big revamp of admin
This commit is contained in:
John Bintz
parent
a69a0a6ea2
commit
0ca3eee9cf
158
admin.inc
Normal file
158
admin.inc
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
<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">
|
||||||
|
<div id="top-information">
|
||||||
|
<p><?php printf(__('<strong>Keyboard Navigation</strong> Version %s', 'keyboard-navigation'), $plugin_data['Version']) ?></p>
|
||||||
|
|
||||||
|
<p><?php _e('Copyright © 2008-2009', 'keyboard-navigation') ?> <a href="<?php echo $plugin_data['AuthorURI'] ?>">John Bintz</a> | <?php _e('Released under the GNU GPL', 'keyboard-navigation') ?></p>
|
||||||
|
|
||||||
|
<p><?php _e('Need some sane defaults for your theme? Click one of the links below to populate the selectors on the left:', 'keyboard-navigation') ?></p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" class="pre-populate comicpress_25"><?php _e('Default ComicPress 2.5 Theme', 'keyboard-navigation') ?></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form method="post">
|
||||||
|
<input type="hidden" name="kbnav[module]" value="options" />
|
||||||
|
<input type="hidden" name="kbnav[_nonce]" value="<?php echo $nonce ?>" />
|
||||||
|
<table class="form-table">
|
||||||
|
<?php foreach ($this->fields as $field => $name) { ?>
|
||||||
|
<tr>
|
||||||
|
<th scope="row"><?php echo $name ?></td>
|
||||||
|
<td><input type="text"
|
||||||
|
name="kbnav[selectors][<?php echo $field ?>]"
|
||||||
|
value="<?php echo $options['selectors'][$field] ?>" /></td>
|
||||||
|
</tr>
|
||||||
|
<?php } ?>
|
||||||
|
<tr>
|
||||||
|
<th scope="row"><?php _e('Highlight selected elements on theme?', 'keyboard-navigation') ?></th>
|
||||||
|
<td>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"
|
||||||
|
name="kbnav[highlight]"
|
||||||
|
value="yes"
|
||||||
|
<?php echo $options['highlight'] ? "checked" : "" ?> />
|
||||||
|
<em><?php _e('(overlay yellow boxes on selected theme elements, and show missing selector alerts in Firebug console or in alert dialogs)', 'keyboard-navigation') ?></em>
|
||||||
|
</label>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2" align="center">
|
||||||
|
<input type="submit" class="button" value="<?php _e('Update Fields', 'keyboard-navigation') ?>" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var pre_population_sets = {
|
||||||
|
'comicpress_25': {
|
||||||
|
previous: "div#menunav a span.prev",
|
||||||
|
next: "div#menunav a span.next",
|
||||||
|
first: "",
|
||||||
|
last: "div#header h1 a"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$$('a.pre-populate').each(function(link) {
|
||||||
|
Event.observe(link, 'click', function(e) {
|
||||||
|
for (set in pre_population_sets) {
|
||||||
|
if (link.hasClassName(set)) {
|
||||||
|
var ok = true;
|
||||||
|
var asked = false;
|
||||||
|
var targets = {};
|
||||||
|
for (key in pre_population_sets[set]) {
|
||||||
|
targets[key] = $$('input[name*=' + key + ']').pop();
|
||||||
|
if (!asked) {
|
||||||
|
if (targets[key]) {
|
||||||
|
if (targets[key].value != pre_population_sets[set][key]) {
|
||||||
|
ok = confirm("<?php _e('Overwrite your existing settings?', 'keyboard-navigation') ?>");
|
||||||
|
asked = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (ok) {
|
||||||
|
for (key in pre_population_sets[set]) {
|
||||||
|
if (targets[key]) { targets[key].value = pre_population_sets[set][key]; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Event.stop(e);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<h3><?php _e('How does this work?', 'keyboard-navigation') ?></h3>
|
||||||
|
<p>
|
||||||
|
<?php _e('<strong>Keyboard Navigation</strong> uses CSS Selectors to find the hyperlinks on the page that define the previous and next links on the page,', 'keyboard-navigation') ?>
|
||||||
|
<?php _e('and then uses JavaScript to assign the act of hitting the left and right arrow keys on the keyboard to clicking those links.', 'keyboard-navigation') ?>
|
||||||
|
<?php _e('This is exactly the same approach that you would use to style a specific element on the page:', 'keyboard-navigation') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="image-holder">
|
||||||
|
<img src="<?php echo $plugin_dir_url ?>/images/keyboard-navigation-next-page-id.png" alt="<?php _e('Firebug display of a simple targeting procedure', 'keyboard-navigation') ?>" />
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<?php _e('Targeting the <a href="next-page"> on this page is quite easy — provide the CSS selector for the id of the element:', 'keyboard-navigation') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<strong>a#next-link</strong>
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<?php _e('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:', 'keyboard-navigation') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<strong>div.nav div#next-link-holder a</strong>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<br class="clear" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<?php _e('<strong>Keyboard Navigation</strong> extends this slightly so that, if the target element is not a <a href> tag,', 'keyboard-navigation') ?>
|
||||||
|
<?php _e('Keyboard Navigation will move up through the tree from the found element until an <a href> is found:', 'keyboard-navigation') ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="image-holder">
|
||||||
|
<img src="<?php echo $plugin_dir_url ?>/images/keyboard-navigation-next-page-traverse.png" alt="<?php _e('Firebug display of a more complicated targeting procedure', 'keyboard-navigation') ?>" />
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
<?php _e('You have two approaches for identifying the <a href="next-page"> tag:', 'keyboard-navigation') ?>
|
||||||
|
</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<?php _e('Using CSS 3 selectors, you can use <code>nth-child</code>:', 'keyboard-navigation') ?>
|
||||||
|
<blockquote>
|
||||||
|
<strong>div#menunav a:nth-child(2)</strong>
|
||||||
|
</blockquote>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<?php _e('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">:', 'keyboard-navigation') ?>
|
||||||
|
<blockquote>
|
||||||
|
<strong>div#menunav a span.next</strong>
|
||||||
|
</blockquote>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<br class="clear" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<?php _e('<strong>Keyboard Navigation</strong> requires that the visitor have JavaScript enabled. This plugin uses', 'keyboard-navigation') ?>
|
||||||
|
<?php _e('the Prototype JavaScript library, and including it will increase the size of your total site download. Additionally,', 'keyboard-navigation') ?>
|
||||||
|
<?php _e('if other plugins <strong>load their own copies of the Prototype library</strong>, both plugins <strong>will break</strong>.', 'keyboard-navigation') ?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
119
keyboard-navigation.php
Normal file
119
keyboard-navigation.php
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<?php
|
||||||
|
/*
|
||||||
|
Plugin Name: Keyboard Navigation
|
||||||
|
Plugin URI: http://www.coswellproductions.com/wordpress/wordpress-plugins/
|
||||||
|
Description: Attach keyboard navigation to blog entries.
|
||||||
|
Version: 1.0
|
||||||
|
Author: John Bintz
|
||||||
|
Author URI: http://www.coswellproductions.org/wordpress/
|
||||||
|
|
||||||
|
Copyright 2008-2009 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
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
class KeyboardNavigation {
|
||||||
|
function init() {
|
||||||
|
wp_enqueue_script('prototype');
|
||||||
|
|
||||||
|
add_action('wp_footer', array(&$this, "footer"));
|
||||||
|
add_action('admin_menu', array(&$this, "admin_menu"));
|
||||||
|
add_action('admin_head', array(&$this, "admin_head"));
|
||||||
|
|
||||||
|
$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['kbnav'])) {
|
||||||
|
if (is_array($_POST['kbnav'])) {
|
||||||
|
if (isset($_POST['kbnav']['_nonce'])) {
|
||||||
|
if (wp_verify_nonce($_POST['kbnav']['_nonce'], 'keyboard-navigation')) {
|
||||||
|
if (isset($_POST['kbnav']['module'])) {
|
||||||
|
$method = "handle_update_" . $_POST['kbnav']['module'];
|
||||||
|
if (method_exists($this, $method)) { $this->{$method}($_POST['kbnav']); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_update_options($info) {
|
||||||
|
$options = array();
|
||||||
|
|
||||||
|
foreach (array('selectors', 'highlight') as $field) {
|
||||||
|
if (isset($info[$field])) { $options[$field] = $info[$field]; }
|
||||||
|
}
|
||||||
|
|
||||||
|
update_option('keyboard-navigation-options', $options);
|
||||||
|
|
||||||
|
$this->messages[] = __('Options updated.', 'keyboard-navigation');
|
||||||
|
}
|
||||||
|
|
||||||
|
function KeyboardNavigation() {}
|
||||||
|
|
||||||
|
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 admin_menu() {
|
||||||
|
add_options_page('Keyboard Navigation', __("Keyboard Navigation", 'keyboard-navigation'), 'edit_themes', 'keyboard-navigation', array($this, "link_editor"));
|
||||||
|
}
|
||||||
|
|
||||||
|
function admin_head() {
|
||||||
|
global $plugin_page;
|
||||||
|
|
||||||
|
if ($plugin_page == plugin_basename(dirname(__FILE__))) {
|
||||||
|
echo '<link rel="stylesheet" href="' . plugin_dir_url(__FILE__) . '/styles.css" type="text/css" />';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function link_editor() {
|
||||||
|
$plugin_dir_url = plugin_dir_url(__FILE__);
|
||||||
|
$nonce = wp_create_nonce('keyboard-navigation');
|
||||||
|
$options = get_option('keyboard-navigation-options');
|
||||||
|
if (!is_array($options)) { $options = array(); }
|
||||||
|
|
||||||
|
$plugin_data = get_plugin_data(__FILE__);
|
||||||
|
|
||||||
|
include(dirname(__FILE__) . '/admin.inc');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$keyboard_navigation = new KeyboardNavigation();
|
||||||
|
add_action('init', array(&$keyboard_navigation, 'init'));
|
||||||
|
|
||||||
|
?>
|
||||||
@ -1,220 +0,0 @@
|
|||||||
<?php
|
|
||||||
/*
|
|
||||||
Plugin Name: Keyboard Navigation
|
|
||||||
Plugin URI: http://www.coswellproductions.com/wordpress/keyboard-navigation/
|
|
||||||
Description: Attach keyboard navigation to blog entries.
|
|
||||||
Version: 0.3
|
|
||||||
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.2</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. Additionally,
|
|
||||||
if other plugins <strong>load their own copies of the Prototype library</strong>, both plugins <strong>will break</strong>.</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"));
|
|
||||||
|
|
||||||
?>
|
|
||||||
34
styles.css
34
styles.css
@ -7,10 +7,8 @@ div.image-holder {
|
|||||||
overflow: hidden
|
overflow: hidden
|
||||||
}
|
}
|
||||||
|
|
||||||
div.image-holder div {
|
div.image-holder div p {
|
||||||
float: left;
|
margin-top: 0
|
||||||
display: inline;
|
|
||||||
width: 440px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.image-holder img {
|
div.image-holder img {
|
||||||
@ -24,26 +22,22 @@ div#top-holder {
|
|||||||
}
|
}
|
||||||
|
|
||||||
div#top-holder form {
|
div#top-holder form {
|
||||||
float: left;
|
margin-right: 300px
|
||||||
display: inline;
|
}
|
||||||
width: 650px;
|
|
||||||
|
div#top-holder th {
|
||||||
|
padding-left: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
div#top-holder form input[type="text"] {
|
div#top-holder form input[type="text"] {
|
||||||
width: 440px
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
div#top-holder form input[type="submit"] {
|
div#top-information {
|
||||||
width: 250px
|
float: right;
|
||||||
}
|
|
||||||
|
|
||||||
div#top-holder div {
|
|
||||||
float: left;
|
|
||||||
display: inline;
|
display: inline;
|
||||||
width: 295px;
|
width: 270px;
|
||||||
border: solid #ddd 1px;
|
border: solid #ddd 1px;
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #dfe
|
background: #dfe
|
||||||
}
|
}
|
||||||
@ -51,3 +45,9 @@ div#top-holder div {
|
|||||||
div#top-holder div p {
|
div#top-holder div p {
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div#top-holder .form-table {
|
||||||
|
clear: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear { clear: both }
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<?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