Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//requires https://github.com/janl/mustache.js
//requires jQuery
if (typeof $jq === 'undefined') $jq = {};
$( document ).ready(function(){
$( '[jq-repeat]' ).each(function(key, value){
var $this = $(value);
var repeatId = $this.attr('jq-repeat') ;
var tempId = repeatId + 'Template';
var templateId = $( '#' + tempId ).html();
if(!$jq[repeatId] && typeof $jq[repeatId] != 'array') $jq[repeatId] = [];
$this.removeAttr('jq-repeat');
$this.wrap( '<script type="x-tmpl-mustache" id="' + tempId + '" class="jq-repeat-' + repeatId + ' " jq-repeat-index="holder"><\/script>' );
Mustache.parse(templateId); // optional, speeds up future uses
var tempArray = $jq[repeatId].splice(0);
$jq[repeatId].push = function (){
var index = $jq[repeatId].length;
var template = $(document.getElementById( repeatId + 'Template').outerHTML);
var render = Mustache.render( template.html(), arguments[0] );
render = $( render ).addClass( 'jq-repeat-'+ repeatId ).attr( 'jq-repeat-index', index );
$('.jq-repeat-'+ repeatId).last().after( render );
return Array.prototype.push.apply( this, arguments );
};
$.each(tempArray, function(key, value){
$jq[repeatId].push(value)
});
$jq[repeatId].pop = function(){
var index = this.length -1;
$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="'+index+'"]' ).remove();
return Array.prototype.pop.apply( this );
};
$jq[repeatId].splice = function(){
var index = arguments[0]; //set where to start
var howMany = arguments[1]; //sets the amount of fields to remove
var args = Array.prototype.slice.call( arguments ); // coverts arguments into array
var toAdd = args.slice(2); // only keeps fields to add to array
console.log(this);
// if the starting point id higher then the total index count, start at the end
if( index > this.length ) index = this.length;
// if the starting point is negative, start form the end of the array, minus the start point
if( index < 0 ) index = this.length - Math.abs( index );
console.log('Starting Point: ' + index);
// if th
if( !howMany && howMany != 0 ) howMany = this.length - index;
if( howMany > this.length - index ) howMany = this.length - index;
console.log('howMany: ' + howMany);
var shift = toAdd.length - howMany;
console.log('shift: ' + shift)
var newLength = this.length + shift;
console.log(newLength);
//removes fields from array based on howMany //works
for ( var i = 0; i < howMany; i++ ) {
$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="'+ ( i + index ) +'"]' ).remove();
console.log('removed index: ' + ( i + index ));
}
//re-factor element index's
/*if(shift > 0){
for( var i = 0 ; i < shift; i++){
workingIndex = i+index+shift;
console.log('workingIndex: ' + workingIndex);
$('.jq-repeat-'+ repeatId +'[jq-repeat-index="'+ workingIndex +'"]' ).attr( 'jq-repeat-index', (workingIndex + shift) );
console.log('Old index: ' + workingIndex + ' New index: ' + (workingIndex + shift) );
}
}*/
$( '.jq-repeat-'+ repeatId+'[jq-repeat-index!="holder"]' ).each(function( element ){
var thisIndex = Number($(this).attr('jq-repeat-index'));
console.log('thisIndex: ' + thisIndex);
if( thisIndex >= index){
$( this ).attr( 'jq-repeat-index', thisIndex+shift );
}
});
//if there are fields to add to the array, add them
if(toAdd.length > 0){
//re-factor index keys for shifter elemetns
$.each(toAdd, function( key, value ){
var key = key + index
var template = $(document.getElementById( repeatId + 'Template').outerHTML);
var render = Mustache.render( template.html(), value );
render = $( render ).addClass( 'jq-repeat-'+ repeatId ).attr( 'jq-repeat-index', key );
if(key === 0){
$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="holder"]' ).after( render );
}else{
$( '.jq-repeat-'+ repeatId +'[jq-repeat-index="' + ( key -1 ) + '"]' ).after( render );
}
console.log("Added item: " + value)
});
}
return Array.prototype.splice.apply( this, arguments );
};//slice()
});//jq-repeat
});//doc ready
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment