Element#insert to accept array as insertions option

[jwestbrook]

previous lighthouse ticket #752
by Radoslav Stankov

---

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

$(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

[jwestbrook]

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.

[jwestbrook]

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.

[jwestbrook]

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);

[jwestbrook]

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!

[jwestbrook]

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;
      }

[jwestbrook]

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.

[jwestbrook]

dennis
January 2nd, 2013 @ 01:09 AM

It seems Killemov implemented this quite elegantly in killemov@16ecf74043fa29950e2e3e... and he has made a pull request.

[fntz]

it seems https://github.com/sstephenson/prototype/pull/76/files