[Koha-devel] CloneSubfields and problems with it

[Dobrica Pavlinusic]

We are running latest git in our production, and we have stumbled upon
variation of bug reported at:

http://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=3264

We are having problems with cataloguing/addbiblio.tmpl which doesn't
correctly clone subfields (it always clone first one) and after
removing one subfield whole JavaScript breaks.

After spending a day looking at current code, I decided to try to
re-implement it. My motivation is following:

- currently code is injected in html page. This makes page load slow,
  because browser has to stop everything until it parse JavaScript
- there is variation of same methods in authorities/authorities.tmpl
  but it has it's own problems. Splitting code into separate,
  page-independent reusable code would benefit both of problems

To do that I moved selected element into anchor of link, so it can be
accessed (and updated) easily from JavaScript. Result is following code:

function _subfield_id(a) {
	console.debug( '_subfield_id', a );
	return a.href.substr( a.href.indexOf('#')+1 );
}

function clone_subfield( from_a ) {
	console.debug( 'clone_subfield', from_a );
	var subfield_id = _subfield_id(from_a);
	var $original   = $('#' + subfield_id);
	var $clone      = $original.clone();
    	var new_key     = CreateKey();

	$clone
	.attr('id', subfield_id + new_key )
	.find('input,select,textarea').each( function() {
		$(this)
		.attr('id',   function() { return this.id   + new_key })
		.attr('name', function() { return this.name + new_key })
		;
	})
	.end()
	.find('label').attr('for', function() { return this.for + new_key })
	.end()
	.find('.subfield_controls > a').each( function() {
		this.href = '#' + subfield_id + new_key;
		console.debug( 'fix href', this.href );
	})
	;

	console.debug( 'clone', $clone );

	$clone.insertAfter( $original );
}

function remove_subfield( from_a ) {
	console.debug( 'remove_subfield', from_a );
	var subfield_id = _subfield_id(from_a);
	$('#'+subfield_id).remove();
}


with html change:

<span class="subfield_controls">
<a href="#subfield<!-- TMPL_VAR NAME='tag' --><!-- TMPL_VAR NAME='subfield' --><!-- TMPL_VAR name="random" -->" onclick="clone_subfield(this); return false;"><img src="/intranet-tmpl/prog/img/clone-subfield.png" alt="Clone" title="Clone this subfield" /></a>
<a href="#subfield<!-- TMPL_VAR NAME='tag' --><!-- TMPL_VAR NAME='subfield' --><!-- TMPL_VAR name="random" -->" onclick="remove_subfield(this); return false;"><img src="/intranet-tmpl/prog/img/delete-subfield.png" alt="Delete" title="Delete this subfield" /></a>
</span>

for comparison, take at look at 77 lines of CloneSubfield alone in current koha code.

However, I'm very aware that my solution is very jquery-eske, and might
be too much for people who haven't used jquery before. I also used $o
notation in JavaScript for jQuery objects, and that might also be
confusing.

I would also love to use event bubbling using .live instead of attaching
all click handlers, but I have to check how reliably it works with
jquery 1.3.2 which koha uses.

Would such a change be accepted into Koha and does it make sense to
peruse this refactoring?

If you want to follow along this experiment, there is a
branch for it in our git:

http://git.rot13.org/?p=koha.git;a=shortlog;h=refs/heads/clone-subfields-jquery

-- 
Dobrica Pavlinusic               2share!2flame            dpavlin at rot13.org
Unix addict. Internet consultant.             http://www.rot13.org/~dpavlin