This hack was born out of necessity as I found that the admin UI on large Perch sites looked daunting to new editors. Though the UI is beautiful and clean I was finding the lists would be endless and the editor could not find the page, let alone the region. This is something that Perch are looking at but I wanted a solution for the meantime. Unfortunately the solution is horribly hacky, involving altering the perch.js file.

How to

Add the following to the bottom of the perch.js file (found in the your-perch-folder/assets/js/perch.js)

function pageTidy () {
	if($('td.page').length > 1) {
		resetToTidy();
		$('.page span').css({ cursor: 'pointer' });
		$('.page span').click(function() {
			resetToTidy();
			$(this).parent('td').parent('tr').addClass('currentPage');
			$('.currentPage').children('td').show();
			$('.currentPage').nextAll().each(function(index) {
				if($(this).css('display') == 'table-row'){
					return false;
				}
				$(this).show();
			});
		});
	}

}
function resetToTidy() {
	$('.d  tbody tr').hide();
	$('.shared').parent('tr').show();
	$('.shared').parent('tr').nextAll().each(function(index) {
		if($(this).children('td').hasClass('page')) {
			return false;
		}
		$(this).show();
	});
	$('.d tr').removeClass('currentPage');
	$('.page').parent('tr').show();
	$('.page').siblings('td').hide();
}

Then add pageTidy(); to the init function. So it would now look like:

var init	= function() {
		$('body').addClass('js');
		enhanceCSS();
		initPopups();
		hideMessages();
		pageTidy();
	};

Warning

Use at your own risk! I have found it seems to work happily on my project but I can’t imagine that it’s a good idea to be hacking away at core files.