image ordering works

classes/ComicPressAdmin.inc

@@ -338,7 +338,7 @@ class ComicPressAdmin {
       if (is_numeric($_POST['post_ID'])) {
         if ($post = get_post($_POST['post_ID'])) {
           $comic_post = new ComicPressComicPost($post);
-          $comic_post->change_comic_image_ordering($this->_json_decode(stripslashes($_POST['cp']['comic_order'])));
+          $comic_post->update_post_media_data($this->_json_decode(stripslashes($_POST['cp']['comic_order'])));
         }
       }
     }

classes/ComicPressComicPost.inc

@@ -119,19 +119,21 @@ class ComicPressComicPost {
   function update_post_media_data($info) {
   	$ordering = array();
   	foreach ($info as $image) {
+  		$image = (array)$image;
   		if (isset($image['id'])) {
   			$data = array(
   				'enabled' => false
   			);
   			foreach ($image as $field => $value) {
   				switch ($field) {
-  					case 'enabled': $data['enabled'] = true; break;
+  					case 'enabled': $data['enabled'] = $value; break;
   					case 'children':
-  						$any_entered = false;
+  						foreach ((array)$value as $type => $attached_id) {
-  						foreach ($value as $type => $attached_id) {
+  							if (!empty($attached_id)) {
-  							if (!empty($attached_id)) { $any_entred = true; break; }
+  								if (!isset($data['children'])) { $data['children'] = array(); }
+  								$data['children'][$type] = $attached_id;
+  							}
   						}
-  						if ($any_entered) {	$data['children'] = $value; }
   						break;
   				}
   			}

classes/partials/_comic-image-ordering-sorters.inc

@@ -11,15 +11,18 @@
 </em></p>
 <?php if (!empty($ordering)) { ?>
 	<div id="comic-ordering">
-		<?php foreach ($ordering as $id => $info) {
+		<?php foreach ($ordering as $id => $attachment_info) {
 			$result = ComicPressBackend::generate_from_id($id);
 			if (!empty($result)) {
 				$info = $result->get_info(); ?>
 				<div class="cp-comic-attachment" id="attachment_<?php echo $id ?>">
+					<div style="overflow: hidden">
 						<img src="<?php echo $result->url() ?>" border="0" height="<?php echo $zoom_level ?>" />
 						<div class="cp-comic-info">
 							<p>
-							<input type="checkbox" name="cp[attachments][<?php echo $id ?>][visible]" value="yes" /> <?php _e('Allow this image to be shown', 'comicpress') ?>
+								<label>
+									<input type="checkbox" name="cp[attachments][<?php echo $id ?>][visible]" value="yes" <?php echo ($attachment_info['enabled']) ? 'checked="checked"' : '' ?>/> <?php _e('Allow this image to be shown', 'comicpress') ?>
+								</label>
 							</p>
 							<?php if (isset($info['file'])) { ?>
 								<p><strong><?php echo $result->source_name ?>:</strong> <?php echo basename($info['file']) ?></p>
@@ -48,6 +51,7 @@
 						</div>
 						<br style="clear: both" />
 					</div>
+				</div>
 			<?php } ?>
 		<?php } ?>
 	</div>

css/cp-admin.css

@@ -66,7 +66,15 @@
 }
 
 .cp-comic-attachment {
-  cursor: move
+  cursor: move;
+  background-color: #ffd7d7;
+  margin-bottom: 10px;
+  border-bottom: solid #aaa 1px;
+  padding-bottom: 10px
+}
+
+.enabled {
+	background-color: transparent
 }
 
 #ordering-refresh {
@@ -122,4 +130,5 @@
 .comic-ordering-associations {
 	border: solid #aaa 1px;
 	padding: 5px;
+	width: 100%
 }

js/ComicImageOrdering.js

@@ -1,16 +1,56 @@
 var ComicImageOrdering = {};
 
-ComicImageOrdering.get_ordering = function() {
+ComicImageOrdering.ids_with_children = {};
-	var ordering = {};
-	$('cp-comic-order').value = Object.toJSON(ordering);
-};
 
 ComicImageOrdering.build_dropdowns = function() {
-	$$('#comic-ordering select').each(function(sel) {
+	$$('.cp-comic-attachment').each(function(a) {
+		a.show();
+		a[a.select('input[type=checkbox]').pop().checked ? 'addClassName' : 'removeClassName']('enabled');
+	});
+
+	var unavailable_associations = {};
+	$H(ComicImageOrdering.ids_with_children).each(function(pair) {
+		$H(pair.value).values().each(function(e) {
+			unavailable_associations[e] = true;
+
+			$('attachment_' + e).hide();
+		});
+	});
+
+	$$('#comic-ordering .cp-comic-attachment').each(function(att) {
+		var id = att.id.replace(/^attachment_/,'');
+		att.select('select').each(function(sel) {
+			var type = sel.name.replace(/^.*\[([^\]]+)\]$/, '$1');
+			var target_selected_index = 0;
+
 			sel.innerHTML = '';
 			sel.appendChild(new Element('option', { value: '' }).update('-- default --'));
-		ComicImageOrdering.available_attachments.each(function(attachment) {
+			var current_index = 1;
-			sel.appendChild(new Element('option', { value: attachment.id }).update(attachment.name));
+			ComicImageOrdering.available_attachments.each(function(attachment, i) {
+				var ok = !(attachment.id == id);
+				if (ok) {
+					if (unavailable_associations[attachment.id]) {
+						ok = false;
+						if (ComicImageOrdering.ids_with_children[id][type]) {
+							if (ComicImageOrdering.ids_with_children[id][type] == attachment.id) {
+								ok = true; target_selected_index = current_index;
+							}
+						}
+					}
+					if (ok) {
+						if ($H(ComicImageOrdering.ids_with_children[attachment.id]).keys().length == 0) {
+							var o = { value: attachment.id };
+							var description = attachment.name;
+							if (attachment.attachment.width && attachment.attachment.height) {
+								description += ' - ' + attachment.attachment.width + 'x' + attachment.attachment.height
+							}
+							sel.appendChild(new Element('option', o).update(description));
+							current_index++;
+						}
+					}
+				}
+			});
+			sel.selectedIndex = target_selected_index;
 		});
 	});
 };
@@ -18,18 +58,73 @@ ComicImageOrdering.build_dropdowns = function() {
 ComicImageOrdering.build_response = function() {
 	var output = [];
 	$('comic-ordering').select('.cp-comic-attachment').each(function(att) {
+		if (att.visible) {
+			var data = {};
+			data.id = att.id.replace(/^attachment_/,'');
+			data.enabled = att.select('input[type=checkbox]').pop().checked;
+			data.children = {};
+			att.select('select').each(function(sel) {
+				var type = sel.name.replace(/^.*\[([^\]]+)\]$/, '$1');
+				data.children[type] = $F(sel);
 			});
+			output.push(data);
+		}
+	});
+	$('cp-comic-order').value = Object.toJSON(output);
 };
 
 ComicImageOrdering.setup = function() {
 	Sortable.create($('comic-ordering'), {
 		tag: 'div',
 		handle: 'div',
-		onUpdate: ComicImageOrdering.get_ordering
+		onUpdate: function() {
+			ComicImageOrdering.build_dropdowns();
+			ComicImageOrdering.build_response();
+		}
 	});
 
-	ComicImageOrdering.get_ordering();
+	ComicImageOrdering.available_attachments.each(function(a) {
+		ComicImageOrdering.ids_with_children[a.id] = (a.ordering.children) ? a.ordering.children : {};
+	});
+
+	$$('#comic-ordering .cp-comic-attachment').each(function(att) {
+		var id = att.id.replace(/^attachment_/,'');
+		att.select('select').each(function(sel) {
+			var type = sel.name.replace(/^.*\[([^\]]+)\]$/, '$1');
+
+			sel.observe('change', function(e) {
+				Event.stop(e);
+
+				var requested_child = $F(e.target);
+				if (requested_child) {
+					ComicImageOrdering.ids_with_children[id][type] = requested_child;
+				} else {
+					delete ComicImageOrdering.ids_with_children[id][type];
+				}
+
 				ComicImageOrdering.build_dropdowns();
+				ComicImageOrdering.build_response();
+			});
+		});
+
+		var associations_box = att.select('.comic-ordering-associations').pop();
+		associations_box[($H(ComicImageOrdering.ids_with_children[id]).keys().length == 0) ? 'hide' : 'show']();
+
+		att.select('.comic-ordering-show-associations').pop().observe('click', function(e) {
+			Event.stop(e);
+			associations_box.toggle();
+		});
+	});
+
+	$$('#comic-ordering input[type=checkbox]').each(function(ch) {
+		ch.observe('change', function() {
+			ComicImageOrdering.build_dropdowns();
+			ComicImageOrdering.build_response();
+		});
+	});
+
+	ComicImageOrdering.build_dropdowns();
+	ComicImageOrdering.build_response();
 };
 
 Event.observe(window, 'load', function() {

test/ComicPressComicPostTest.php

@@ -76,14 +76,26 @@ class ComicPressComicPostTest extends PHPUnit_Framework_TestCase {
   			array(
   				array(
   					'id' => 'attachment-1',
-  					'enabled' => 'yes',
+  					'enabled' => true,
   					'children' => array('rss' => '', 'archive' => '')
   				)
   			),
   			array(
  					'attachment-1' => array('enabled' => true)
   			)
+  		),
+  		array(
+  			array(
+  				array(
+  					'id' => 'attachment-1',
+  					'enabled' => false,
+  					'children' => array('rss' => 'attachment-2', 'archive' => '')
   				)
+  			),
+  			array(
+ 					'attachment-1' => array('enabled' => false, 'children' => array('rss' => 'attachment-2'))
+  			)
+  		),
   	);
   }