.populate()

[bmoren]

• create .populate() function which grabs a list of elements or images and appends them to the screen one by one. some ideas:
• should this be method chained into .iterate() and .replicate() ?

<a href='#' class='button'> give me cool stuff! </a>

<div class="content">

  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.jpg" />
  <img src="4.jpg" />
  <img src="5.jpg" />
  <img src="6.jpg" />

</div>

<!-- include jQuery and plugin before -->
<script type="text/javascript">

$('button').click(function(){

  $('.content').populate({
    random: true, // in a random place?
    direction: 'forward' //forward appends the next child element from '.content' to the screen. other params: forward, backward, random, non-repeating-random
  })

})

</script>

or if we want to target where to populate to, perhaps this is a better solution, although its reverse logic from the previous methods so maybe the top example is stylistically better?:

var imageArray = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg']
$('button').click(function(){

  $('body').populate(imageArray, {
    random: true, // in a random place?
    direction: 'forward' //forward appends the next child element from '.content' to the screen. other params: forward, backward, random, non-repeating-random
  })

})

• use non-repeating random for the new populate/iterate method check out this gist

[alex-carlson]

I think it's fair to keep this separate from iterate & replicate. The inherit functionality is different, and I'm not sure we want to make one method with too many options / functionalities.

I think the former example is better. It requires a specific markup (elements must have a parent), but as you said, it matches the logic of the other methods, and it's also more robust, as we can just copy the elements, those elements could be text, images, elements within elements, or whatever. If we go with the latter, we're getting just img urls, so the functionality is limited to images.

[bmoren]

This should absolutely be separate from iterate and replicate (my question there is if we should combine those two, now im thinking not...). Good point on the array vs markup, Power forward with the markup. Ill be able to take a look at implementing this later this afternoon of you dont get to it first, make a note here if you are working on it so we both dont start at the same time.

[alex-carlson]

Cool, I'll work on building .populate(). Should have something soon.

[alex-carlson]

thought: wouldn't

$('.thing').populate({ random:false; direction: 'forward' });

just redraw the same thing? I just want to make sure I'm not mis-understanding the method's behavior.

[bmoren]

good question, I guess I was thinking there would be some sort of internal storage system to remember where we left off – so in my example above it would return 1.jpg on the first click, 2.jpg on the second, 3.jpg on the third etc. not exactly sure the best way to do this.... maybe adding a class if it gets 'used' ?

[alex-carlson]

hmmm. Sounds reasonable. Right now it functions more like a sorting function. for the clicking, that won't work at the moment. see my note here: https://github.com/bmoren/jQuery-Generative-Engines/issues/6

[bmoren]

todo:

• [ ] add non-repeating-random
• [ ] remove original elements from DOM
• [ ] add a mode for a setInterval() iteration through the children elements. (also add total param)