switched admin over to jquery

classes/ComicPressAdmin.inc

@@ -88,7 +88,7 @@ class ComicPressAdmin {
 		switch ($plugin_page) {
 			case 'comicpress/render_admin':
 				wp_enqueue_style('cp-admin', plugin_dir_url(dirname(__FILE__)) . '/css/cp-admin.css');
-				wp_enqueue_script('cp-admin', plugin_dir_url(dirname(__FILE__)) . '/js/Storyline.js', array('jquery', 'jquery-ui-dialog'));
+				wp_enqueue_script('cp-admin', plugin_dir_url(dirname(__FILE__)) . '/js/Storyline.js', array('jquery', 'jquery-ui-sortable', 'jquery-ui-tabs'));
 				add_action('admin_footer', array(&$this, 'admin_footer'));
 				break;
 			case 'comicpress/comicpress_docs':
@@ -375,14 +375,14 @@ class ComicPressAdmin {
 					case 'image_types':
 						if (is_array($info['image_types'])) {
 							$this->comicpress->comicpress_options['image_types'] = array();
-							$defined_default = null;
+							$defined_default = isset($info['image_types']['_default']) ? $info['image_types']['_default'] : null;
+							unset($info['image_types']['_default']);
 							foreach ($info['image_types'] as $type => $image_info) {
 								if (is_array($image_info)) {
 									$new_value = array();
 									$new_type = $type;
 									foreach ($image_info as $field => $field_value) {
 										switch ($field) {
-											case 'default':	$defined_default = $type; break;
 											case 'dimensions':
 												if (is_array($field_value)) {
 													if (count(array_intersect(array('width', 'height'), array_keys($field_value))) == 2) {

classes/partials/_comic-image-types.inc

@@ -6,7 +6,6 @@
 		<?php } ?>
 	</div>
 	<a id="add-new-image-type" href="#">[+] Add a new image type</a>
-	<script type="text/javascript">ComicImageTypes.setup()</script>
 
 	<input class="button-primary" type="submit" value="<?php _e('Submit Updated ComicPress Options', 'comicpress') ?>" />
 </div>

classes/partials/_image-type-editor.inc

@@ -13,7 +13,7 @@
 			<th scope="row">Default image type?</th>
 			<td>
 				<label>
-					<input type="checkbox" name="cp[image_types][<?php echo $type ?>][default]" value="yes" <?php echo (!empty($info['default'])) ? 'checked="checked"' : '' ?> />
+					<input type="radio" name="cp[image_types][_default]" value="<?php echo esc_attr($type) ?>" <?php echo (!empty($info['default'])) ? 'checked="checked"' : '' ?> />
 					<em>(<?php _e('When using a ComicPress tag without specifying a type, this one will be used', 'comicpress') ?>)</em>
 				</label>
 			</td>

classes/partials/_storyline-order.inc

@@ -10,7 +10,6 @@
 			?>
 		</div>
 	</div>
-	<script type="text/javascript">Storyline.setup()</script>
 	<p><em><?php _e('(drag and drop desired order. categories can be modified on the Posts -> Categories page)', 'comicpress') ?></em></p>
 
 	<input class="button-primary" type="submit" value="<?php _e('Submit Updated ComicPress Options', 'comicpress') ?>" />

classes/partials/options-admin.inc

@@ -5,95 +5,93 @@
 		<input type="hidden" name="cp[action]" value="comicpress-options" />
 		<input type="hidden" name="cp[_action_nonce]" value="<?php echo esc_attr($action_nonce) ?>" />
 
-		<?php include('_storyline-order.inc') ?>
+		<div id="comicpress-admin-holder">
+			<?php include('_storyline-order.inc') ?>
 
-		<h3><?php _e('Category Groups', 'comicpress') ?></h3>
+			<h3><?php _e('Category Groups', 'comicpress') ?></h3>
 
-		<div id="comicpress-category-groups-holder" class="comicpress-holder">
+			<div id="comicpress-category-groups-holder" class="comicpress-holder">
-			<div id="category-groups-holder">
+				<div id="category-groups-holder">
-				<?php
+					<?php
-					foreach ($this->comicpress->comicpress_options['category_groupings'] as $name => $category_ids) {
+						foreach ($this->comicpress->comicpress_options['category_groupings'] as $name => $category_ids) {
-						$key = $name;
+							$key = $name;
-						include('_category-grouping-editor.inc');
+							include('_category-grouping-editor.inc');
-					}
+						}
-				?>
+					?>
+				</div>
+				<a id="add-new-category-group" href="#">[+] Add a new category group</a>
+				<br />
+				<input class="button-primary" type="submit" value="<?php _e('Submit Updated ComicPress Options', 'comicpress') ?>" />
 			</div>
-			<a id="add-new-category-group" href="#">[+] Add a new category group</a>
+
-			<script type="text/javascript">CategoryGroupings.setup()</script>
+			<?php include('_comic-image-types.inc') ?>
-			<br />
+
-			<input class="button-primary" type="submit" value="<?php _e('Submit Updated ComicPress Options', 'comicpress') ?>" />
+			<h3><?php _e('Enabled Backends', 'comicpress') ?></h3>
+			<div id="comicpress-enabled-backends-holder" class="comicpress-holder">
+				<table class="widefat">
+					<?php foreach ($backends as $backend) {
+						$obj = new $backend(); ?>
+						<tr>
+							<th scope="row">
+								<label>
+									<input type="checkbox"
+												 name="cp[enabled_backends][<?php echo esc_attr($backend) ?>]"
+												 value="yes"
+												 <?php echo in_array($backend, $this->comicpress->comicpress_options['enabled_backends']) ? 'checked="checked"' : '' ?> />
+									<?php echo esc_html(preg_replace('#^ComicPressBackend(.*)Factory$#', '\1', $backend)) ?>
+								</label>
+							</th>
+							<td>
+								<?php echo esc_html($obj->description) ?>
+							</td>
+						</tr>
+					<?php } ?>
+				</table>
+
+				<p>
+					<?php _e("Disable backends you're not using to save system resources.", 'comicpress') ?>
+				</p>
+				<input class="button-primary" type="submit" value="<?php _e('Submit Updated ComicPress Options', 'comicpress') ?>" />
+			</div>
+
+			<?php do_action('comicpress-options-admin') ?>
 		</div>
-
-		<?php include('_comic-image-types.inc') ?>
-
-		<h3><?php _e('Enabled Backends', 'comicpress') ?></h3>
-		<div id="comicpress-enabled-backends-holder" class="comicpress-holder">
-			<table class="widefat">
-				<?php foreach ($backends as $backend) {
-					$obj = new $backend(); ?>
-					<tr>
-						<th scope="row">
-							<label>
-								<input type="checkbox"
-											 name="cp[enabled_backends][<?php echo esc_attr($backend) ?>]"
-											 value="yes"
-											 <?php echo in_array($backend, $this->comicpress->comicpress_options['enabled_backends']) ? 'checked="checked"' : '' ?> />
-								<?php echo esc_html(preg_replace('#^ComicPressBackend(.*)Factory$#', '\1', $backend)) ?>
-							</label>
-						</th>
-						<td>
-							<?php echo esc_html($obj->description) ?>
-						</td>
-					</tr>
-				<?php } ?>
-			</table>
-
-			<p>
-				<?php _e("Disable backends you're not using to save system resources.", 'comicpress') ?>
-			</p>
-			<input class="button-primary" type="submit" value="<?php _e('Submit Updated ComicPress Options', 'comicpress') ?>" />
-		</div>
-
-		<?php do_action('comicpress-options-admin') ?>
 	</form>
 </div>
 <script type="text/javascript">
-	(function() {
+	(function($) {
-		var tab_holder = new Element('div', { className: 'comicpress-tab-holder' });
+		var tab_holder = $('<div class="comicpress-tab-holder"><ul /></div>');
-		$$('.comicpress-admin > h2').pop().insert({after: tab_holder});
 
-		var show_tab = function(which) {
+		$('#comicpress-admin-holder').prepend(tab_holder);
-			tab_holder.childElements().each(function(t) {
-				var is_same = (t.id == which);
-				t[is_same ? 'addClassName' : 'removeClassName']('active');
-				$('comicpress-' + t.id.replace(/^comicpress-tab-/, ''))[is_same ? 'show' : 'hide']();
-			});
-		};
 
-		$$('.comicpress-admin > form > h3').each(function(t) {
+		$('#comicpress-admin-holder h3').each(function() {
-			var id_suffix = t.innerHTML.replace(/\s+/g, '_');
+			var id = 'comicpress-' + $(this).html().replace(/\s+/g, '_');
-			var holder = new Element("div", { className: 'comicpress-admin-section', id: 'comicpress-' + id_suffix });
-			t.insert({before: holder});
 
-			holder.insert(t.next().remove());
+			var tab = $('<a>')
-			holder.insert({top: t.remove()});
+				.attr('href', '#' + id)
+				.wrap('<li />')
+				.html($(this).html())
+				.parent();
 
-			var tab = new Element("a", { href: "#", id: 'comicpress-tab-' + id_suffix }).update(t.innerHTML);
+			tab_holder.find('ul').append(tab);
-			tab_holder.insert(tab);
 
-			tab.observe('click', function(e) {
+			var holder = $('<div class="comicpress-admin-section" />').attr('id', id);
-				Event.stop(e);
+
-				show_tab(e.target.id)
+			$(this).before(holder).add($(this).next()).each(function() {
+				$(holder).append($(this).clone());
+				$(this).remove();
 			});
 		});
 
-		tab_holder.childElements().pop().addClassName('last');
+		$(tab_holder).find('ul li:last').addClass('last').end().tabs();
 
-		show_tab(tab_holder.childElements().shift().id);
+		$(document).ready(function() {
-
-		Event.observe(document, 'dom:loaded', function() {
 			ComicPressAdmin.image_type_editor_nonce = '<?php echo wp_create_nonce('comicpress-get-new-image-type-editor') ?>';
 			ComicPressAdmin.category_group_editor_nonce = '<?php echo wp_create_nonce('comicpress-get-new-category-group-editor') ?>';
+
+			ComicImageTypes.setup();
+			CategoryGroupings.setup();
+			Storyline.setup();
 		});
-	}());
+	}(jQuery));
 </script>

css/cp-admin.css

@@ -235,7 +235,14 @@ tr.highlighted td {
 /* Options */
 
 .comicpress-tab-holder {
-	padding: 2px 0
+	padding: 3px 0;
+	overflow: hidden
+}
+
+.comicpress-tab-holder li {
+	float: left;
+	display: inline;
+	margin: 0
 }
 
 .comicpress-tab-holder a {
@@ -247,19 +254,14 @@ tr.highlighted td {
 	border-width: 1px 0 0 1px;
 }
 
-.comicpress-tab-holder a.last {
+.comicpress-tab-holder .last a {
 	border-right-width: 1px;
 }
 
-.comicpress-tab-holder a.active {
+.ui-tabs-selected a {
 	background-color: white
 }
 
-.comicpress-admin form {
-	border: solid black 1px;
-	padding: 0 10px 10px;
-}
-
 .category-group-holder ul ul {
 	margin-left: 20px
 }
@@ -277,3 +279,12 @@ tr.highlighted td {
 .category-group-holder .selected {
 	background-color: #99ccbb
 }
+
+.comicpress-admin-section {
+	border: solid black 1px;
+	padding: 10px
+}
+
+.comicpress-admin-section h3 {
+	margin-top: 0
+}

js/Storyline.js

@@ -2,147 +2,118 @@ var Storyline = {};
 var ComicImageTypes = {};
 var CategoryGroupings = {};
 
-(function() {
+(function($) {
+	$.fn.setupAjax = function(action, nonce, target, onLoad) {
+		$(this).click(function() {
+			$.post(
+					ComicPressAdmin.ajax_uri,
+					{
+						'cp[_nonce]': ComicPressAdmin.nonce,
+						'cp[action]': action,
+						'cp[_action_nonce]': nonce
+					},
+					function(data) {
+						var type = $(data).hide();
+						$(target).append(type);
+						type.slideDown(250);
+						if (onLoad) { onLoad(); }
+					}
+				);
+
+			return false;
+		});
+
+		return this;
+	};
+
+	$.fn.setupRemover = function(message, parentSearch) {
+		$(this).unbind('click')
+		.click(function() {
+			if (confirm(message)) {
+				$(this).parents(parentSearch).slideUp(250, function() { $(this).remove(); });
+			}
+			return false;
+		});
+
+		return this;
+	};
+
 	Storyline.get_order = function() {
 		var order = [];
-		$$('#storyline-sorter .cp-category-info').each(function(info) {
+		$('.cp-category-info').each(function() {
-			var matches = info.id.match(/category_([0-9\-]+)/);
+			order.push(
-			if (matches) { order.push(matches[1].replace(/\-/g,'/')); }
+			  $(this)
+			  	.attr('id')
+			  	.replace('category_', '')
+			  	.replace(/\-/g,'/')
+			);
 		});
-		$$('input[name*=storyline_order]').pop().value = order.join(',');
+		$('input[name*=storyline_order]').val(order.join(','));
 	};
 
 	Storyline.setup = function() {
-		var i = 0;
+		$('.cp-children').sortable({
-		var depths = {};
+			axis: 'y',
-		$$('.cp-children').each(function(ch) {
+			stop: Storyline.get_order
-			ch.id = 'children-' + i;
+		}).disableSelection();
-			var depth = ch.ancestors().length;
-			if (!depths[depth]) { depths[depth] = []; }
-			depths[depth].push(ch);
-			++i;
-		});
-
-		depths = $H(depths);
-
-		depths.keys().sort(function(a,b) { return b - a; }).each(function(depth) {
-			depths.get(depth).each(function(ch) {
-				Sortable.create(ch.id, {
-					tag: 'div',
-					handle: 'span',
-					onUpdate: Storyline.get_order
-				});
-			});
-		});
 
 		Storyline.get_order();
 	};
 
-	ComicImageTypes.setup_checkboxes = function() {
+	ComicImageTypes.setup_editors = function() {
-		var checkboxes = $$('input[name*=default][name*=image_types]');
+		$('.delete-image-type').setupRemover(
-		checkboxes.each(function(c) {
+			'Are you sure? Your templates may break after deleting this image type.',
-			c.stopObserving('change');
+			'.image-type-holder'
-			c.observe('change', function(e) {
+		);
-				checkboxes.each(function(ch) {
-					if (e.target != ch) { ch.checked = false; }
-				});
-			});
-		});
 	};
 
 	ComicImageTypes.setup = function() {
-		$$('.image-type-holder').each(function(ith) {
+		ComicImageTypes.setup_editors();
-			var closer = ith.select('.delete-image-type').pop();
-			if (closer) {
-				closer.observe('click', function(e) {
-					Event.stop(e);
-					if (confirm('Are you sure? Your templates may break after deleting this image type.')) {
-						new Effect.Fade(ith, {
-							from: 1,
-							to: 0,
-							afterFinish: function() {
-								ith.parentNode.removeChild(ith);
-							}
-						});
-					}
-				});
-			}
-		});
 
-		ComicImageTypes.setup_checkboxes();
+		$('#add-new-image-type').setupAjax(
-
+			'get-new-image-type-editor',
-		$('add-new-image-type').observe('click', function(e) {
+			ComicPressAdmin.image_type_editor_nonce,
-			Event.stop(e);
+			'#image-type-container',
-			new Ajax.Updater('image-type-container', ComicPressAdmin.ajax_uri, {
+			ComicImageTypes.setup_editors
-				method: 'get',
+		);
-				parameters: {
-					'cp[_nonce]': ComicPressAdmin.nonce,
-					'cp[action]': 'get-new-image-type-editor',
-					'cp[_action_nonce]': ComicPressAdmin.image_type_editor_nonce
-				},
-				insertion: 'bottom',
-				onComplete: function() {
-					ComicImageTypes.setup_checkboxes();
-				}
-			});
-		});
 	};
 
 	CategoryGroupings.highlight_child_levels = function(e) {
-		(function($) {
+		$('.category-group-holder input[type=checkbox]').attr('disabled', false);
-			$('.category-group-holder input[type=checkbox]').attr('disabled', false);
 
-			$('.category-group-holder li')
+		$('.category-group-holder li')
-	    	.removeClass('selected')
+    	.removeClass('selected')
-	    	.each(function() {
+    	.each(function() {
-	    		if ($(this).find('input[type=checkbox]:first').is('*:checked')) {
+    		if ($(this).find('input[type=checkbox]:first').is('*:checked')) {
-	    			$(this).addClass('selected').find('input[type=checkbox]').not("*:first").attr('disabled', true);
+    			$(this).addClass('selected').find('input[type=checkbox]').not("*:first").attr('disabled', true);
-	    		}
+    		}
-	    	});
+    	});
 
-			$('.category-group-holder').each(function() {
+		$('.category-group-holder').each(function() {
-				$(this).find('.empty-group-warning')[($(this).find('input:checked').length == 0) ? 'show' : 'hide'](250);
+			$(this).find('.empty-group-warning')[($(this).find('input:checked').length == 0) ? 'show' : 'hide'](250);
-			});
+		});
-		}(jQuery))
 	}
 
 	CategoryGroupings.setup_editors = function() {
-		(function($) {
+		$('.category-group-holder input[type=checkbox], .category-group-holder label')
-			$('.category-group-holder input[type=checkbox], .category-group-holder label')
+			.unbind('click')
-				.unbind('click')
+			.click(CategoryGroupings.highlight_child_levels);
-				.click(CategoryGroupings.highlight_child_levels);
 
-			$('.delete-category-group-holder')
+		$('.delete-category-group-holder').setupRemover(
-				.unbind('click')
+			'Are you sure?',
-				.click(function() {
+			'.category-group-holder'
-					if (confirm('Are you sure?')) {
+		);
-						$(this).parents('.category-group-holder').remove();
-					}
-				});
-		}(jQuery))
 	}
 
 	CategoryGroupings.setup = function() {
 		CategoryGroupings.setup_editors();
 		CategoryGroupings.highlight_child_levels();
 
-		(function($) {
+		$('#add-new-category-group').setupAjax(
-			$('#add-new-category-group').click(function() {
+			'get-new-category-group-editor',
-				$.post(
+			ComicPressAdmin.category_group_editor_nonce,
-					ComicPressAdmin.ajax_uri,
+			'#category-groups-holder',
-					{
+			CategoryGroupings.setup_editors
-						'cp[_nonce]': ComicPressAdmin.nonce,
+		);
-						'cp[action]': 'get-new-category-group-editor',
-						'cp[_action_nonce]': ComicPressAdmin.category_group_editor_nonce
-					},
-					function(data) {
-						$('#category-groups-holder').append(data);
-						CategoryGroupings.setup_editors();
-					}
-				);
-
-				return false;
-			});
-		}(jQuery));
 	}
-}())
+}(jQuery))

test/ComicPressAdminTest.php

@@ -52,9 +52,10 @@ class ComicPressAdminTest extends PHPUnit_Framework_TestCase {
 	    	),
 	    	array(
 	    		'image_types' => array(
+	    			'_default' => 'archive',
 	    			'comic' => array('dimensions' => array('width' => '500', 'height' => '50')),
-	    			'archive' => array('default' => 'yes', 'dimensions' => array('width' => '100', 'height' => '100')),
+	    			'archive' => array('dimensions' => array('width' => '100', 'height' => '100')),
-	    	)
+	    		)
 	    	),
 	    	array(
     			'image_types' => array(

test/selenium/TestCategoryGroupings.html

@@ -71,6 +71,11 @@
 	<td>Are you sure?</td>
 	<td></td>
 </tr>
+<tr>
+	<td>waitForElementNotPresent</td>
+	<td>//div[@id=&quot;category-groups-holder&quot;]/div[${current_count}]</td>
+	<td></td>
+</tr>
 <tr>
 	<td>storeXpathCount</td>
 	<td>//div[@id=&quot;category-groups-holder&quot;]/div</td>

test/selenium/TestComicImageTypes.html

@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="" />
+<title>TestComicImageTypes</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">TestComicImageTypes</td></tr>
+</thead><tbody>
+<tr>
+	<td>open</td>
+	<td>/wp-admin</td>
+	<td></td>
+</tr>
+<tr>
+	<td>clickAndWait</td>
+	<td>link=ComicPress</td>
+	<td></td>
+</tr>
+<tr>
+	<td>click</td>
+	<td>comicpress-tab-Comic_Image_Types</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertVisible</td>
+	<td>comicpress-Comic_Image_Types</td>
+	<td></td>
+</tr>
+<tr>
+	<td>storeXpathCount</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div</td>
+	<td>current_count</td>
+</tr>
+<tr>
+	<td>click</td>
+	<td>add-new-image-type</td>
+	<td></td>
+</tr>
+<tr>
+	<td>storeEval</td>
+	<td>storedVars['current_count']++</td>
+	<td></td>
+</tr>
+<tr>
+	<td>waitForElementPresent</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div[${current_count}]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>storeXpathCount</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div</td>
+	<td>new_count</td>
+</tr>
+<tr>
+	<td>assertEval</td>
+	<td>${current_count}</td>
+	<td>${new_count}</td>
+</tr>
+<tr>
+	<td>assertValue</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div[${new_count}]//input[contains(@name, &quot;[name]&quot;)]</td>
+	<td>New Type</td>
+</tr>
+<tr>
+	<td>click</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div[${new_count}]//a[@class=&quot;delete-image-type&quot;]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertConfirmation</td>
+	<td>Are you sure?*</td>
+	<td></td>
+</tr>
+<tr>
+	<td>waitForElementNotPresent</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div[${current_count}]</td>
+	<td></td>
+</tr>
+<tr>
+	<td>storeXpathCount</td>
+	<td>//div[@id=&quot;image-type-container&quot;]/div</td>
+	<td>new_count</td>
+</tr>
+<tr>
+	<td>assertEval</td>
+	<td>${current_count} - 1</td>
+	<td>${new_count}</td>
+</tr>
+<tr>
+	<td>clickAndWait</td>
+	<td>//div[@id='comicpress-image-types-holder']/input</td>
+	<td></td>
+</tr>
+<tr>
+	<td>assertTextPresent</td>
+	<td>ComicPress configuration updated.</td>
+	<td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>

test/selenium/TestSuiteComicPressAdmin.html

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+  <title>Test Suite</title>
+</head>
+<body>
+<table id="suiteTable" cellpadding="1" cellspacing="1" border="1" class="selenium"><tbody>
+<tr><td><b>Test Suite</b></td></tr>
+<tr><td><a href="TestCategoryGroupings.html">TestCategoryGroupings</a></td></tr>
+<tr><td><a href="TestComicImageTypes.html">TestComicImageTypes</a></td></tr>
+<tr><td><a href="../../../../../../../../../..">Untitled</a></td></tr>
+</tbody></table>
+</body>
+</html>