#752 enhancement
Radoslav Stankov

Element#insert to accept array as insertions option

Reported by Radoslav Stankov | July 31st, 2009 @ 06:54 PM | in 2.0

In a lot of cases I need to insert a large group of elements to an element, and was wondering if it will be useful to have something like this

@@@javascript

$(ul).insert([li, li, li]);

// as before

$(ul).insert(li, li, li, li)

// - or -

$(element).insert(groupOfElements)

// as before

groupOfElements.each(Element.insert.curry(element));


Plus if Prototype have this behavior it could be optimized with usages of documentFragments for example (аlthough tests will need be needed for this). 

If such enhancement is accepted I will be more than happy to create patch for it

Comments and changes to this ticket

  • Matt Haggard

    Matt Haggard July 31st, 2009 @ 11:03 PM

    • Tag changed from needs:discussion, performance, section:dom, syntax to needs:discussion, performance, section:dom, syntax

    Just yesterday I wanted the same thing. Here's a humble patch. I don't think I got the event handling right (content.evalScripts.bind(content).defer();), but the unit tests still pass on OS X. And it could probably be more efficient.

  • Tobie Langel

    Tobie Langel August 1st, 2009 @ 05:16 PM

    • State changed from “new” to “enhancement”
    • Tag changed from needs:discussion, performance, section:dom, syntax to needs:discussion, section:dom
    • Milestone set to 2.0

    Element#insert is going to be greatly revised for 2.0. It's worth discussing this in the meantime, but not making any changes on the current API.

  • Radoslav Stankov

    Radoslav Stankov August 3rd, 2009 @ 09:36 PM

    If is possible, could I ask what is the in mind for Prototype 2.0 ? :)

    Mean while if some one need such functionally a little monkey patch:

    Element.addMethods({
        insert: Element.insert.wrap(function(insert, element, insertation)){
            if (!Object.isArray(insertation)) return insert(element, insertation);
    
            element = $(element);
            insertation.each(insert.curry(element));
            return element;
        }
    });
    

    p.s. I haven't made decent tests, but maybe something like this could be faster:

    var fragment = document.createDocumentFragment();
    insertation.each(fragment.appendChild.bind(fragment));
    element.appendChild(fragment);
    
  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    [responsible:none bulk edit command]

  • dennis

    dennis October 23rd, 2011 @ 09:38 PM

    • Importance changed from “” to “”

    2 years and pushing it to 2.0? Seriously?

    In Elements.Methods.insert (version 1.7):

    ...
    if (Object.isString(insertions) || Object.isNumber(insertions) || Object.isElement(insertions) ||
        Object.isArray(insertions) || (insertions && (insertions.toElement || insertions.toHTML)))
           insertions = {bottom:insertions};
    ...
       if (Object.isArray(content)) {
         content.each( function( ae ) {
           insert( element, ae );            
         } );
         continue;
       }
    ...
    

    Perhaps the iteration could be improved, but THAT'S IT!

  • dennis

    dennis December 7th, 2011 @ 12:37 AM

    And when array handing is added, it will be easy to handle variable length arguments ...

      insert: function(element, insertions) {
        element = $(element);
    
        if ( arguments.length > 2 ) {
          insertions = Array.slice( arguments, 1 );
        }
    
        if (Object.isString(insertions) || Object.isNumber(insertions) ||
            Object.isElement(insertions) || Object.isArray(insertions) || (insertions && (insertions.toElement || insertions.toHTML)))
              insertions = {bottom:insertions};
    
        var content, insert, tagName, childNodes;
    
        for (var position in insertions) {
          content  = insertions[position];
          position = position.toLowerCase();
          insert = Element._insertionTranslations[position];
    
          if (content && content.toElement) content = content.toElement();
          
          if (Object.isArray(content)) {
            content.each( function( ae ) {
              insert( element, ae );            
            } );
            continue;
          }
    
          if (Object.isElement(content)) {
            insert(element, content);
            continue;
          }
          ...
    
  • dennis

    dennis December 14th, 2011 @ 03:35 PM

    Ah, only Firefox agrees with this solution. I did some testing on current Chrome and Internet Explorer. Also, I did not thoroughly debug this but my guess is it's in the accessing/slicing of function arguments.

  • dennis

    dennis January 2nd, 2013 @ 01:09 AM

    It seems Killemov implemented this quite elegantly in https://github.com/killemov/prototype/commit/16ecf74043fa29950e2e3e... and he has made a pull request.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Attachments

Pages