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.

I decided to use it on my CV, but whilst designing I noticed it wasn’t working in Firefox older than 3.5. This sucked. So I set about BROWSER SNIFFING. I didn’t take this decision lightly but I figured it is no different to [if IE] and the only difference to the code would be removing a class.

jQuery to the rescue

To make long story short, I used the version function in jquery. Comments are in the code:

if($.browser.firefox || $.browser.mozilla) {

 var ver = $.browser.version;

 // Take out al the full stops so we can use it
 // as an integer
 ver = ver.replace(/\./g,"");

 // As the version numbers differ in length
 // we force all numbers to be the same length.
 // This is ok as we are only interested in the
 // first couple of digits
 var verl = ver.length;
 while (verl < 7) {ver = ver + '0'; verl = ver.length;}
 ver = parseInt(ver);

 // Check to see if the browser is older that 3.5
 if(ver <= "1910000") {$("h3").removeClass('rotate');}

}