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            [email protected]
Unix addict. Internet consultant.             http://www.rot13.org/~dpavlin
_______________________________________________
Koha-devel mailing list
[email protected]
http://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-devel

Reply via email to