From 9253052f4bbeca3c67d6ce5480cd0dbd50a96d09 Mon Sep 17 00:00:00 2001 From: William Mantly Date: Fri, 2 Aug 2024 11:54:03 -0400 Subject: [PATCH 01/10] Update jq-repeat.js --- src/jq-repeat.js | 439 ++++++++++++++++++++++++----------------------- 1 file changed, 224 insertions(+), 215 deletions(-) diff --git a/src/jq-repeat.js b/src/jq-repeat.js index 643853f..e30e500 100644 --- a/src/jq-repeat.js +++ b/src/jq-repeat.js @@ -11,255 +11,264 @@ MIT license } var make = function( element ){ + var result = []; - //construct array - function makeArray( input ){ + result.splice = function(inputValue, ...args){ + //splice does all the heavy lifting by interacting with the DOM elements. - var result = []; + var toProto = [...args] - Object.defineProperty( result, "__repeatId", { - value: repeatId, - writable: true, - enumerable: false, - configurable: true - } ); - - Object.defineProperty( result, "__rq_template", { - value: '', - writable: true, - enumerable: false, - configurable: true - } ); - - result.splice = function(inputValue, ...args){ - //splice does all the heavy lifting by interacting with the DOM elements. - - var toProto = [...args] - - var index; - //if a string is submitted as the index, try to match it to index number - if( typeof arguments[0] === 'string' ){ - index = this.indexOf( arguments[0] );//set where to start - if ( index === -1 ) { - return []; - } - }else{ - index = arguments[0]; //set where to start + var index; + //if a string is submitted as the index, try to match it to index number + if( typeof arguments[0] === 'string' ){ + index = this.indexOf( arguments[0] );//set where to start + if ( index === -1 ) { + return []; } + }else{ + index = arguments[0]; //set where to start + } - toProto.unshift(index) - + toProto.unshift(index) - 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 + 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 - // if the starting point is 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 ); - } + // if the starting point is 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 ); + } - // if there are things to add, figure out the how many new indexes we need - if( !howMany && howMany !== 0 ) { - howMany = this.length - index; - } - //not sure why i put this here... but it does matter! - if( howMany > this.length - index ) { - howMany = this.length - index; - } + // if there are things to add, figure out the how many new indexes we need + if( !howMany && howMany !== 0 ) { + howMany = this.length - index; + } + //not sure why i put this here... but it does matter! + if( howMany > this.length - index ) { + howMany = this.length - index; + } - //figure out how many positions we need to shift the current elements - var shift = toAdd.length - howMany; + //figure out how many positions we need to shift the current elements + var shift = toAdd.length - howMany; - // figure out how big the new array will be - // var newLength = this.length + shift; + // figure out how big the new array will be + // var newLength = this.length + shift; - //removes fields from array based on howMany needs to be removed - for( var i = index; i < +index+howMany; i++ ) { - this.__take.apply( this[index].__jq_$el ); - // this.__take.apply( $( '.jq-repeat-'+ this.__repeatId +'[jq-repeat-index="'+ ( i + index ) +'"]' ) ); - } + //removes fields from array based on howMany needs to be removed + for( var i = index; i < +index+howMany; i++ ) { + this.__take(this[index].__jq_$el, this[index], this); + // this.__take.apply( $( '.jq-repeat-'+ this.__jqRepeatId +'[jq-repeat-index="'+ ( i + index ) +'"]' ) ); + } - //re-factor element index's - for(var i = 0; i < this.length; i++){ - if( i >= index){ + //re-factor element index's + for(var i = 0; i < this.length; i++){ + if( i >= index){ - this[i].__jq_$el.attr( 'jq-repeat-index', i+shift ); - } + this[i].__jq_$el.attr( 'jq-repeat-index', i+shift ); } + } - //if there are fields to add to the array, add them - if( toAdd.length > 0 ){ - - //$.each( toAdd, function( key, value ){ - for(var I = 0; I < toAdd.length; I++){ - - //figure out new elements index - var key = I + index; - // apply values to template - var render = Mustache.render( this.__rq_template, toAdd[I] ); - - //set call name and index keys to DOM element - var $render = $( render ).addClass( 'jq-repeat-'+ this.__repeatId ).attr( 'jq-repeat-index', key ); - - - //if add new elements in proper stop, or after the place holder. - if( key === 0 ){ - $( '.jq-repeat-'+ this.__repeatId +'[jq-repeat-index="holder"]' ).after( $render ); - }else{ - $( '.jq-repeat-'+ this.__repeatId +'[jq-repeat-index="' + ( key -1 ) + '"]' ).after( $render ); - } - - Object.defineProperty( toAdd[I], "__jq_$el", { - value: $render, - writable: true, - enumerable: false, - configurable: true - } ); - - //animate element - this.__put.apply($render, [toAdd[I]]); + //if there are fields to add to the array, add them + if( toAdd.length > 0 ){ + + //$.each( toAdd, function( key, value ){ + for(var I = 0; I < toAdd.length; I++){ + + //figure out new elements index + var key = I + index; + // apply values to template + var render = Mustache.render(this.__jqTemplate, toAdd[I]); + + //set call name and index keys to DOM element + var $render = $( render ).addClass( 'jq-repeat-'+ this.__jqRepeatId ).attr( 'jq-repeat-index', key ); + + //if add new elements in proper stop, or after the place holder. + if( key === 0 ){ + this.$this.after( $render ); + }else{ + $( '.jq-repeat-'+ this.__jqRepeatId +'[jq-repeat-index="' + ( key -1 ) + '"]' ).after( $render ); } + + Object.defineProperty( toAdd[I], "__jq_$el", { + value: $render, + writable: true, + enumerable: false, + configurable: true + } ); + + //animate element + this.__put($render, toAdd[I], this); } - - //set and return new array - return Array.prototype.splice.apply(this, toProto); - }; - result.push = function(){ - //add one or more objects to the array - - //set the index value, if none is set make it zero - var index = this.length || 0; - - //loop each passed object and pass it to slice - for (var i = 0 ; i < arguments.length; ++i) { - this.splice( ( index + i ), 0, arguments[i] ); - } + } + + //set and return new array + return Array.prototype.splice.apply(this, toProto); + }; + result.push = function(){ + //add one or more objects to the array + + //set the index value, if none is set make it zero + var index = this.length || 0; + + //loop each passed object and pass it to slice + for (var i = 0 ; i < arguments.length; ++i) { + this.splice( ( index + i ), 0, arguments[i] ); + } - //return new array length - return this.length; - }; - result.pop = function(){ - //remove and return array element + //return new array length + return this.length; + }; + result.pop = function(){ + //remove and return array element - return this.splice( -1, 1 )[0]; - }; - result.reverse = function() { - var temp = this.splice( 0 ); - Array.prototype.reverse.apply( temp ); + return this.splice( -1, 1 )[0]; + }; + result.reverse = function() { + var temp = this.splice( 0 ); + Array.prototype.reverse.apply( temp ); - for( var i = 0; i < temp.length; i++ ){ - this.push( temp[i] ); - } + for( var i = 0; i < temp.length; i++ ){ + this.push( temp[i] ); + } - return this; - }; - result.shift = function() { - return this.splice( 0, 1 )[0]; - }; - result.loop = function(){ - var temp = this[0]; - this.splice( 0,1 ); - this.push( temp ); - - return temp; - }; - result.loopUp = function(){ - var temp = this[this.length-1]; - this.splice( -1, 1 ); - this.splice( 0, 0, temp ); - return temp; - }; - result.indexOf = function( key, value ){ - if( typeof value !== 'string' ){ - value = arguments[0]; - key = this.__index; - } - for ( var index = 0; index < this.length; ++index ) { - if( this[index][key] === value ){ + return this; + }; - return index; - } - } - return -1; - }; - result.update = function( key, value, update ){ - //set variables using sting for index - - // If update is called with no index/key, assume its the 0 - if(typeof key === 'object'){ - if(this[0]){ - return this.update(0, key); - } - return this.splice(0, 1, key); - } + result.remove = function(key, value){ + let index = this.indexOf(key, value) + if(index === -1) return; + this.splice(index, 1) + } - if( typeof value !== 'string' ){ - update = arguments[1]; - value = arguments[0]; - key = this.__index; - } - var index = this.indexOf( key, value ); - if(index === -1) { - return []; + result.shift = function() { + return this.splice( 0, 1 )[0]; + }; + + result.loop = function(){ + var temp = this[0]; + this.splice( 0,1 ); + this.push( temp ); + + return temp; + }; + result.loopUp = function(){ + var temp = this[this.length-1]; + this.splice( -1, 1 ); + this.splice( 0, 0, temp ); + return temp; + }; + result.indexOf = function( key, value ){ + if( typeof value !== 'string' ){ + value = arguments[0]; + key = this.__index; + } + for ( var index = 0; index < this.length; ++index ) { + if( this[index][key] === value ){ + + return index; } - var object = $.extend( true, {}, this[index], update ); - return this.splice( index, 1, object )[0]; - }; - result.__put = function(){ - this.show(); - }; - result.__take = function(){ - this.remove(); - }; - - if(!input) { - return result; } - $.each( input, function( key, value ){ - var type = typeof value; - if( type === 'object' ){ - result.push( value ); - }else if( type === 'string' ){ - Object.defineProperty( result, "__index", { - value: value, - writable: true, - enumerable: false, - configurable: true - } ); - } else if ( type === 'function'){ - Object.defineProperty( result, value.name, { - value: value, - writable: true, - enumerable: false, - configurable: true - } ); + return -1; + }; + result.update = function( key, value, update ){ + //set variables using sting for index + + // If update is called with no index/key, assume its the 0 + if(typeof key === 'object'){ + if(this[0]){ + return this.update(0, key); } - } ); + return this.splice(0, 1, key); + } - return result; + if( typeof value !== 'string' ){ + update = arguments[1]; + value = arguments[0]; + key = this.__index; + } + var index = this.indexOf( key, value ); + if(index === -1) { + return []; + } + var object = $.extend( true, {}, this[index], update ); + + var $render = $(Mustache.render(this.__jqTemplate, object)); + $render.attr('jq-repeat-index', index); + this[index].__jq_$el.replaceWith($render); + + this[index].__jq_$el = $render; + this.__update(this[index].__jq_$el, this[index], this); + }; + + result.getByKey = function(key, value){ + return this[this.indexOf(key, value)]; } + result.__put = function($el, item, list){ + $el.show(); + }; - var $this = $( element ); - var repeatId = $this.attr( 'jq-repeat' ); - var tempId = repeatId + 'Template'; - var templateId = $( '#' + tempId ).html(); + result.__take = function($el, item, list){ + $el.remove(); + }; - $this.removeAttr( 'jq-repeat' ); - var template = element.outerHTML + result.__update = function($el, item, list){ + console.log('here', $el) + $el.show(); + }; - $this.replaceWith( ' + + + + + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/example/pop.html b/example/pop.html new file mode 100644 index 0000000..1e01b4e --- /dev/null +++ b/example/pop.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/example/remove.html b/example/remove.html new file mode 100644 index 0000000..e8d863b --- /dev/null +++ b/example/remove.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + Document + + + + + + + + + diff --git a/example/reverse.html b/example/reverse.html new file mode 100644 index 0000000..af9c948 --- /dev/null +++ b/example/reverse.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + Document + + + + + + + \ No newline at end of file From 0138cd1944c740d90be14eee3ccfdd73f3114f67 Mon Sep 17 00:00:00 2001 From: newtbot Date: Sat, 3 Aug 2024 22:05:04 +0800 Subject: [PATCH 03/10] WIP v2 --- README.md | 104 ++++++++++++++++++++++---------------------- example/loop.html | 42 ++++++++++++++++++ example/remove.html | 13 +++--- example/shift.html | 42 ++++++++++++++++++ 4 files changed, 142 insertions(+), 59 deletions(-) create mode 100644 example/loop.html create mode 100644 example/shift.html diff --git a/README.md b/README.md index 94f4a53..a514121 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,15 @@ -# jq-repeat [![Build Status](https://travis-ci.org/wmantly/jq-repeat.svg)](https://travis-ci.org/wmantly/jq-repeat) +# jq-repeat + +Author William Mantly Jr -[![Join the chat at https://gitter.im/wmantly/jq-repeat](https://badges.gitter.im/wmantly/jq-repeat.svg)](https://gitter.im/wmantly/jq-repeat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) A simple, yet highly customizable plugin to handle all of you're client-side repetitive DOM needs. Simple, quick and powerful templating. It is modeled after ng-repeat and shares some basic syntax, but is not a clone. -* To do list [demo](http://jsfiddle.net/wmantly/nLj6nr4q/) -* Reddit JSON feed [demo](http://jsfiddle.net/wmantly/sge3zr28/) +- To do list [demo](http://jsfiddle.net/wmantly/nLj6nr4q/) +- Reddit JSON feed [demo](http://jsfiddle.net/wmantly/sge3zr28/) -# Requirements +# Requirements -* __jq-repeat requires [jQuery](http://jquery.com/) 1.x/2.x/3.x and [Mustache](https://github.com/janl/mustache.js) 1.x/2.x/3.x/4.x to run__. +- **jq-repeat requires [jQuery](http://jquery.com/) 1.x/2.x/3.x and [Mustache](https://github.com/janl/mustache.js) 1.x/2.x/3.x/4.x to run**. ## Template + To set up a jq-repeat template, write any element tag you wish to repeat once where you want the repeating to start, this will serve as the template and starting point. -Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`. +Simply add a `jq-repeat` attribute with a unique value for the reference name for that template, in this case `toDo`. + ```html
    -
  • - {{ item }} {{{ done }}} -
    • +
  • {{ item }} {{{ done }}}
``` + Just like mustache, to add variables use double brackets with the name inside. ## Insert + Now that you have a template set up, let's populate the template use $.scope.toDo.push() + ```javaScript $.scope.toDo.push( { item: 'Get milk', done: 'Yes' } ) ``` + You can add any number of objects as arguments you wish and each will create a new element from the template. Values must be supplied as objects with keys corresponding to the variable names used in the template. + ```javaScript $.scope.toDo.push({ item: 'Collect underwear', @@ -53,60 +59,56 @@ $.scope.toDo.push({ ``` ## Methods -* `$.scope.toDo.push([object])` The method will just insert object with the relevent key and value pair as used in your template. - * **object** *Type: Object* - Object with Key and Value in HTML Template. -* `$.scope.toDo.pop()` The method will remove and return the last element in the repeat array. -* `$.scope.toDo.reverse()` The method will reverse the repeat array by index number.todo: if index is a number, it will use that and will return the newly formated array. - - +- `$.scope.toDo.push([object])` The method will just insert object with the relevent key and value pair as used in your template. +- **object** _Type: Object_ + Object with Key and Value in HTML Template. +- `$.scope.toDo.pop()` The method will remove and return the last element in the repeat array. +- `$.scope.toDo.reverse()` The method will reverse the repeat array by index number.todo: if index is a number, it will use that and will return the newly formated array. +- `$.scope.toDo.remove([key] || [index Id])` The method will just insert object with the relevent key and value pair as used in your template. +- **key** _Type: String_ + The key of the array you wish to remove. +- **Index Id** _Type: Integer_ + The array Id you wish to remove. +- `$.scope.toDo.shift()` The method works the same as regular arrays. +- `$.scope.toDo.loop()` The method will take the last value of the array and insert in as the first key value pair of the array. ## Credits -* Written by [William Mantly](https://github.com/wmantly) -* Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping. -* Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance. - - - - - - - - - +- Written by [William Mantly](https://github.com/wmantly) +- Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping. +- Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance. The repeat object can take many methods used for arrays, as arrays are the internal data structure. -* `$.scope.toDo.splice(index [,howMany] [,ToAdd])` functions exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index. - * **index** *Type: Number or String* - Index of element you wish to manipulate. If the .index property is set, you may pass a string to match to the index array. - * **howMany** *Type: Number* - Number of repeat objects that will be removed. If there are non to be removed, it is not required to use this argument. - * **update** *Type: Array* - This is the array of repeat objects to add. If there are none to this is not required. - * **returns** *Type: Array* - This function will return an array of deleted elements. -* `$.scope.toDo.pop()` Will remove and return the last element in the repeat array -* `$.scope.toDo.reverse()` Will reverse the repeat array by index number.todo: if .index is a number, will use that. Returns the newly formated array. -* `$.scope.toDo.shift()` works the same as regular arrays. -* `$.scope.toDo.loop()` will take the last value and insert in the front. `toDo.loopUp()` does the opposite. Returns the newly formated array. -* `$.scope.toDo.indexOf( key, value )` Returns the array index number of the matching element. Mostly used for internals. - * **key** *Type: String* +- `$.scope.toDo.splice(index [,howMany] [,ToAdd])` functions exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index. +- **index** _Type: Number or String_ + Index of element you wish to manipulate. If the .index property is set, you may pass a string to match to the index array. +- **howMany** _Type: Number_ + Number of repeat objects that will be removed. If there are non to be removed, it is not required to use this argument. +- **update** _Type: Array_ + This is the array of repeat objects to add. If there are none to this is not required. +- **returns** _Type: Array_ + This function will return an array of deleted elements. +- `$.scope.toDo.pop()` Will remove and return the last element in the repeat array +- `$.scope.toDo.reverse()` Will reverse the repeat array by index number.todo: if .index is a number, will use that. Returns the newly formated array. +- `$.scope.toDo.shift()` works the same as regular arrays. +- `$.scope.toDo.loop()` will take the last value and insert in the front. `toDo.loopUp()` does the opposite. Returns the newly formated array. +- `$.scope.toDo.indexOf( key, value )` Returns the array index number of the matching element. Mostly used for internals. + - **key** _Type: String_ The key element to match. - * **value** *Type: String* + - **value** _Type: String_ The value of the matching element. -* `$.scope.toDo.update( key, [value,] update)` Updates selected value with new data. The selection process is done by matching key, value pairs from the existing objects, - * **key** *Type: String or Number* +- `$.scope.toDo.update( key, [value,] update)` Updates selected value with new data. The selection process is done by matching key, value pairs from the existing objects, + - **key** _Type: String or Number_ The key or index to the matching element to update - * **value** *Type: String* + - **value** _Type: String_ The value of the matching key to the element to be update.If the index number will be used, must be ommited! - * **update** *Type: Object* + - **update** _Type: Object_ This is the object that will be applied to the matching element. -* `$.scope.toDo.__put` is the function that will run when a element is being inserted. This must be a function and must include this.show(), or some other way of un-hiding 'this'. -* `$.scope.toDo.__take` is the function that will run when an element is being removed. This must be a function and include this.remove() or some other way to remove 'this'. \ No newline at end of file +- `$.scope.toDo.__put` is the function that will run when a element is being inserted. This must be a function and must include this.show(), or some other way of un-hiding 'this'. +- `$.scope.toDo.__take` is the function that will run when an element is being removed. This must be a function and include this.remove() or some other way to remove 'this'. diff --git a/example/loop.html b/example/loop.html new file mode 100644 index 0000000..55d9a0a --- /dev/null +++ b/example/loop.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + Document + + + +
    + +
  • {{ item }}: {{ done }}
    • +
+ + + + + diff --git a/example/remove.html b/example/remove.html index e8d863b..e4babc7 100644 --- a/example/remove.html +++ b/example/remove.html @@ -16,14 +16,11 @@ $(document).ready(function () { $.scope.toDo.push({ item: "Get milk", done: "Yes" }); $.scope.toDo.push({ item: "Do laundry", done: "No" }); - $.scope.toDo.remove() + // $.scope.toDo.remove(1) or $.scope.toDo.remove("Get milk") + $.scope.toDo.remove(1) // uses the Id of the toDo array }); - // $( 'ul' ).on( 'click', 'button.remove', function () { - // var index = Number( $( this ).parents( '[jq-repeat-index]' ).attr( 'jq-repeat-index' ) ); - // console.log('index', index) - // $.scope.toDo.remove(index); - // }); + @@ -35,8 +32,8 @@
    -
  • {{ item }}: {{ done }}
    • - + +
  • {{ item }}: {{ done }}
diff --git a/example/shift.html b/example/shift.html new file mode 100644 index 0000000..5e8866f --- /dev/null +++ b/example/shift.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + Document + + + +
    + +
  • {{ item }}: {{ done }}
    • +
+ + + + + From 53b1134427b063450cbf954ef005839e2ee23e33 Mon Sep 17 00:00:00 2001 From: newtbot Date: Sat, 3 Aug 2024 22:06:10 +0800 Subject: [PATCH 04/10] v3 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a514121..59165ee 100644 --- a/README.md +++ b/README.md @@ -63,8 +63,8 @@ $.scope.toDo.push({ - `$.scope.toDo.push([object])` The method will just insert object with the relevent key and value pair as used in your template. - **object** _Type: Object_ Object with Key and Value in HTML Template. -- `$.scope.toDo.pop()` The method will remove and return the last element in the repeat array. -- `$.scope.toDo.reverse()` The method will reverse the repeat array by index number.todo: if index is a number, it will use that and will return the newly formated array. + - `$.scope.toDo.pop()` The method will remove and return the last element in the repeat array. + - `$.scope.toDo.reverse()` The method will reverse the repeat array by index number.todo: if index is a number, it will use that and will return the newly formated array. - `$.scope.toDo.remove([key] || [index Id])` The method will just insert object with the relevent key and value pair as used in your template. - **key** _Type: String_ The key of the array you wish to remove. From c221595ca78b8ee092302284e12dab005d7aba52 Mon Sep 17 00:00:00 2001 From: newtbot Date: Sat, 3 Aug 2024 22:09:09 +0800 Subject: [PATCH 05/10] v4 formatting testing --- README.md | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 59165ee..16f029c 100644 --- a/README.md +++ b/README.md @@ -60,18 +60,30 @@ $.scope.toDo.push({ ## Methods -- `$.scope.toDo.push([object])` The method will just insert object with the relevent key and value pair as used in your template. -- **object** _Type: Object_ - Object with Key and Value in HTML Template. - - `$.scope.toDo.pop()` The method will remove and return the last element in the repeat array. - - `$.scope.toDo.reverse()` The method will reverse the repeat array by index number.todo: if index is a number, it will use that and will return the newly formated array. -- `$.scope.toDo.remove([key] || [index Id])` The method will just insert object with the relevent key and value pair as used in your template. -- **key** _Type: String_ - The key of the array you wish to remove. -- **Index Id** _Type: Integer_ - The array Id you wish to remove. -- `$.scope.toDo.shift()` The method works the same as regular arrays. -- `$.scope.toDo.loop()` The method will take the last value of the array and insert in as the first key value pair of the array. +- `$.scope.toDo.push([object])` + - **Description**: The method will just insert an object with the relevant key and value pair as used in your template. + - **Parameter**: + - **object** (_Type: Object_): Object with key and value in the HTML template. + +- `$.scope.toDo.pop()` + - **Description**: The method will remove and return the last element in the repeat array. + +- `$.scope.toDo.reverse()` + - **Description**: The method will reverse the repeat array by index number. + - **Note**: If the index is a number, it will use that and will return the newly formatted array. + +- `$.scope.toDo.remove([key] || [index Id])` + - **Description**: The method will just insert an object with the relevant key and value pair as used in your template. + - **Parameters**: + - **key** (_Type: String_): The key of the array you wish to remove. + - **Index Id** (_Type: Integer_): The array Id you wish to remove. + +- `$.scope.toDo.shift()` + - **Description**: The method works the same as regular arrays. + +- `$.scope.toDo.loop()` + - **Description**: The method will take the last value of the array and insert it as the first key-value pair of the array. + From d213a321d12af178af70f242c60092ccb9297b09 Mon Sep 17 00:00:00 2001 From: newtbot Date: Sun, 4 Aug 2024 00:26:47 +0800 Subject: [PATCH 06/10] WIP v5 removed unneeded CI/CD Build files --- .travis.yml | 14 ------- README.md | 43 ++++++++------------- example/indexOf.html | 43 +++++++++++++++++++++ example/loopUp.html | 42 +++++++++++++++++++++ example/update.html | 42 +++++++++++++++++++++ tests/test-min.html | 90 -------------------------------------------- tests/test-src.html | 90 -------------------------------------------- 7 files changed, 143 insertions(+), 221 deletions(-) delete mode 100644 .travis.yml create mode 100644 example/indexOf.html create mode 100644 example/loopUp.html create mode 100644 example/update.html delete mode 100644 tests/test-min.html delete mode 100644 tests/test-src.html diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index b3b2f04..0000000 --- a/.travis.yml +++ /dev/null @@ -1,14 +0,0 @@ -language: node_js -node_js: - - "0.10" - -before_script: - - export DISPLAY=:99.0 - - sh -e /etc/init.d/xvfb start - - npm start > /dev/null & - - npm install -g bower - - bower install - - sleep 1 # give server time to start - -script: - - npm test \ No newline at end of file diff --git a/README.md b/README.md index 16f029c..6d5ee95 100644 --- a/README.md +++ b/README.md @@ -61,41 +61,37 @@ $.scope.toDo.push({ ## Methods - `$.scope.toDo.push([object])` - - **Description**: The method will just insert an object with the relevant key and value pair as used in your template. + - **Description**: The method will just insert object with the relevent key and value pair as used in your template. - **Parameter**: - - **object** (_Type: Object_): Object with key and value in the HTML template. - + - **Type: object**: Object with key and value in the HTML template. - `$.scope.toDo.pop()` - **Description**: The method will remove and return the last element in the repeat array. - - `$.scope.toDo.reverse()` - - **Description**: The method will reverse the repeat array by index number. - - **Note**: If the index is a number, it will use that and will return the newly formatted array. - + - **Description**: The method will reverse the repeat array and append the array. - `$.scope.toDo.remove([key] || [index Id])` - - **Description**: The method will just insert an object with the relevant key and value pair as used in your template. + - **Description**: The method would use either the key value of the pair to remove or use the index id to remove an array item. - **Parameters**: - - **key** (_Type: String_): The key of the array you wish to remove. - - **Index Id** (_Type: Integer_): The array Id you wish to remove. - + - **key**: The key of the array you wish to remove. + - **Index Id**: The array Id you wish to remove. - `$.scope.toDo.shift()` - **Description**: The method works the same as regular arrays. - - `$.scope.toDo.loop()` - - **Description**: The method will take the last value of the array and insert it as the first key-value pair of the array. + - **Description**: The method takes the 0th item of an array and adds it as the last item of the array. +- `$.scope.toDo.loopUp()` + - **Description**: The method does the opposite of loop(). +- `$.scope.toDo.indexOf()` + - **Description**: The method will return the array index number of the matching element or array id. Mostly used for internals usage. + - **Parameters**: + - **key**: The key of the array you wish to get the id of. + - **Value**: The value of the key pair you wish to get the id of. - - - - ## Credits - Written by [William Mantly](https://github.com/wmantly) - Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping. - Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance. -The repeat object can take many methods used for arrays, as arrays are the internal data structure. - `$.scope.toDo.splice(index [,howMany] [,ToAdd])` functions exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index. - **index** _Type: Number or String_ @@ -106,15 +102,7 @@ The repeat object can take many methods used for arrays, as arrays are the inter This is the array of repeat objects to add. If there are none to this is not required. - **returns** _Type: Array_ This function will return an array of deleted elements. -- `$.scope.toDo.pop()` Will remove and return the last element in the repeat array -- `$.scope.toDo.reverse()` Will reverse the repeat array by index number.todo: if .index is a number, will use that. Returns the newly formated array. -- `$.scope.toDo.shift()` works the same as regular arrays. -- `$.scope.toDo.loop()` will take the last value and insert in the front. `toDo.loopUp()` does the opposite. Returns the newly formated array. -- `$.scope.toDo.indexOf( key, value )` Returns the array index number of the matching element. Mostly used for internals. - - **key** _Type: String_ - The key element to match. - - **value** _Type: String_ - The value of the matching element. + - `$.scope.toDo.update( key, [value,] update)` Updates selected value with new data. The selection process is done by matching key, value pairs from the existing objects, - **key** _Type: String or Number_ The key or index to the matching element to update @@ -122,5 +110,6 @@ The repeat object can take many methods used for arrays, as arrays are the inter The value of the matching key to the element to be update.If the index number will be used, must be ommited! - **update** _Type: Object_ This is the object that will be applied to the matching element. + - `$.scope.toDo.__put` is the function that will run when a element is being inserted. This must be a function and must include this.show(), or some other way of un-hiding 'this'. - `$.scope.toDo.__take` is the function that will run when an element is being removed. This must be a function and include this.remove() or some other way to remove 'this'. diff --git a/example/indexOf.html b/example/indexOf.html new file mode 100644 index 0000000..47eea25 --- /dev/null +++ b/example/indexOf.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + Document + + + +
    + + +
  • {{ item }}: {{ done }}
    • +
+ + + + + diff --git a/example/loopUp.html b/example/loopUp.html new file mode 100644 index 0000000..619fdb7 --- /dev/null +++ b/example/loopUp.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + Document + + + +
    + +
  • {{ item }}: {{ done }}
    • +
+ + + + + diff --git a/example/update.html b/example/update.html new file mode 100644 index 0000000..3bb70af --- /dev/null +++ b/example/update.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + Document + + + +
    + + +
  • {{ item }}: {{ done }}
    • +
+ + + + + diff --git a/tests/test-min.html b/tests/test-min.html deleted file mode 100644 index 02608e5..0000000 --- a/tests/test-min.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - jq-repeat tests - - - - - - - - - - - -
- -

- {{ character }} {{ spelling }} -

- - - \ No newline at end of file diff --git a/tests/test-src.html b/tests/test-src.html deleted file mode 100644 index 03d379a..0000000 --- a/tests/test-src.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - jq-repeat tests - - - - - - - - - - - -
- -

- {{ character }} {{ spelling }} -

- - - \ No newline at end of file From 397da4191cc8a9f52abe7b3538e0214c0a708d8a Mon Sep 17 00:00:00 2001 From: newtbot Date: Sun, 4 Aug 2024 01:54:38 +0800 Subject: [PATCH 07/10] WIP V6 --- README.md | 29 +++++++++++------------------ example/update.html | 2 +- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 6d5ee95..b6c76a5 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ Author William Mantly Jr + A simple, yet highly customizable plugin to handle all of you're client-side repetitive DOM needs. Simple, quick and powerful templating. It is modeled after ng-repeat and shares some basic syntax, but is not a clone. - To do list [demo](http://jsfiddle.net/wmantly/nLj6nr4q/) @@ -11,15 +12,8 @@ A simple, yet highly customizable plugin to handle all of you're client-side rep - **jq-repeat requires [jQuery](http://jquery.com/) 1.x/2.x/3.x and [Mustache](https://github.com/janl/mustache.js) 1.x/2.x/3.x/4.x to run**. - +## Examples +[examples/](https://github.com/wmantly/jq-repeat/tree/reworked-dev/example) ## Template @@ -84,7 +78,12 @@ $.scope.toDo.push({ - **Parameters**: - **key**: The key of the array you wish to get the id of. - **Value**: The value of the key pair you wish to get the id of. - +- `$.scope.toDo.update([key] || [index Id] , [Object])` + - **Description**: The method would use either the key value of the pair to update or use the index id to update the object key value pair. + - **Parameters**: + - **key**: The key of the array you wish to update. + - **Index Id**: The array Id you wish to update. + - **Object**: The object you wish to update the array with. ## Credits @@ -93,6 +92,8 @@ $.scope.toDo.push({ - Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance. + + - `$.scope.toDo.splice(index [,howMany] [,ToAdd])` functions exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index. - **index** _Type: Number or String_ Index of element you wish to manipulate. If the .index property is set, you may pass a string to match to the index array. @@ -103,13 +104,5 @@ $.scope.toDo.push({ - **returns** _Type: Array_ This function will return an array of deleted elements. -- `$.scope.toDo.update( key, [value,] update)` Updates selected value with new data. The selection process is done by matching key, value pairs from the existing objects, - - **key** _Type: String or Number_ - The key or index to the matching element to update - - **value** _Type: String_ - The value of the matching key to the element to be update.If the index number will be used, must be ommited! - - **update** _Type: Object_ - This is the object that will be applied to the matching element. - - `$.scope.toDo.__put` is the function that will run when a element is being inserted. This must be a function and must include this.show(), or some other way of un-hiding 'this'. - `$.scope.toDo.__take` is the function that will run when an element is being removed. This must be a function and include this.remove() or some other way to remove 'this'. diff --git a/example/update.html b/example/update.html index 3bb70af..a76a3dd 100644 --- a/example/update.html +++ b/example/update.html @@ -16,7 +16,7 @@ $(document).ready(function () { $.scope.toDo.push({ item: "Get milk", done: "Yes" }); $.scope.toDo.push({ item: "Do laundry", done: "No" }); - + $.scope.toDo.update(1, { item: "Get Water", done: "no" }) }); From 06cb0ecbd567995c3d377b0d9b0811369d83b963 Mon Sep 17 00:00:00 2001 From: newtbot Date: Sun, 4 Aug 2024 22:22:39 +0800 Subject: [PATCH 08/10] WIP V7 --- README.md | 12 +++++- example/getByKey.html | 44 +++++++++++++++++++++ example/put.html | 54 ++++++++++++++++++++++++++ example/splice.html | 58 ++++++++++++++++++++++++++++ tests/test-min.html | 90 +++++++++++++++++++++++++++++++++++++++++++ tests/test-src.html | 90 +++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 347 insertions(+), 1 deletion(-) create mode 100644 example/getByKey.html create mode 100644 example/put.html create mode 100644 example/splice.html create mode 100644 tests/test-min.html create mode 100644 tests/test-src.html diff --git a/README.md b/README.md index b6c76a5..146dc8d 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,8 @@ A simple, yet highly customizable plugin to handle all of you're client-side rep - **jq-repeat requires [jQuery](http://jquery.com/) 1.x/2.x/3.x and [Mustache](https://github.com/janl/mustache.js) 1.x/2.x/3.x/4.x to run**. ## Examples -[examples/](https://github.com/wmantly/jq-repeat/tree/reworked-dev/example) +Some simple examples of each methods that can used. +[examples](https://github.com/wmantly/jq-repeat/tree/reworked-dev/example) ## Template @@ -85,10 +86,19 @@ $.scope.toDo.push({ - **Index Id**: The array Id you wish to update. - **Object**: The object you wish to update the array with. + +- `$.scope.toDo.getByKey([key] || [index Id])` + - **Description**: The method would use either the key value of the pair to get or use the index id to get an array item. + - **Parameters**: + - **key**: The key of the array you wish to get. + - **Index Id**: The array Id you wish to get. + + ## Credits - Written by [William Mantly](https://github.com/wmantly) - Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping. +- Thanks to [Ti Seng Lim](https://github.com/Newtbot) for updating the readme documentation and adding examples. - Also, thanks to [Raja Kapur](https://github.com/aonic) for advice and guidance. diff --git a/example/getByKey.html b/example/getByKey.html new file mode 100644 index 0000000..7d58969 --- /dev/null +++ b/example/getByKey.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + Document + + + +
    + + +
  • {{ item }}: {{ done }}
    • +
+ + + + + diff --git a/example/put.html b/example/put.html new file mode 100644 index 0000000..7d4bc20 --- /dev/null +++ b/example/put.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + Document + + + +
    + +
  • {{ item }}: {{ done }}
    • + +
+ + + + + diff --git a/example/splice.html b/example/splice.html new file mode 100644 index 0000000..e12a1fc --- /dev/null +++ b/example/splice.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + Document + + + +
    + + +
  • {{ item }}: {{ done }}
    • +
+ + + + + diff --git a/tests/test-min.html b/tests/test-min.html new file mode 100644 index 0000000..02608e5 --- /dev/null +++ b/tests/test-min.html @@ -0,0 +1,90 @@ + + + + + jq-repeat tests + + + + + + + + + + + +
+ +

+ {{ character }} {{ spelling }} +

+ + + \ No newline at end of file diff --git a/tests/test-src.html b/tests/test-src.html new file mode 100644 index 0000000..03d379a --- /dev/null +++ b/tests/test-src.html @@ -0,0 +1,90 @@ + + + + + jq-repeat tests + + + + + + + + + + + +
+ +

+ {{ character }} {{ spelling }} +

+ + + \ No newline at end of file From a5bb1b20d7424c2a7377eb771b03cde7dd316ebd Mon Sep 17 00:00:00 2001 From: newtbot Date: Mon, 5 Aug 2024 02:55:40 +0800 Subject: [PATCH 09/10] WIP V8 --- README.md | 41 ++++++++++++++++------------ example/setPut.html | 42 +++++++++++++++++++++++++++++ example/{put.html => setTake.html} | 33 ++++++++--------------- example/setUpdate.html | 43 ++++++++++++++++++++++++++++++ example/splice.html | 20 +++----------- 5 files changed, 124 insertions(+), 55 deletions(-) create mode 100644 example/setPut.html rename example/{put.html => setTake.html} (51%) create mode 100644 example/setUpdate.html diff --git a/README.md b/README.md index 146dc8d..63fdfcb 100644 --- a/README.md +++ b/README.md @@ -85,17 +85,37 @@ $.scope.toDo.push({ - **key**: The key of the array you wish to update. - **Index Id**: The array Id you wish to update. - **Object**: The object you wish to update the array with. - - +- `$.scope.toDo.splice()` + - **Description**: The method exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index. + - **Parameters**: + - **Index**: The key of the array you wish to update or array id. + - **Amount**: TheNumber of repeat objects that will be removed. If there are non to be removed. + - **Object**: The object you wish to add to the array. - `$.scope.toDo.getByKey([key] || [index Id])` - **Description**: The method would use either the key value of the pair to get or use the index id to get an array item. - **Parameters**: - **key**: The key of the array you wish to get. - **Index Id**: The array Id you wish to get. - +- `$.scope.toDo.__setPut(function($el, item, list){ [logic of your code] })` + - **Description**: The method takes a callback function that will run when a element is being inserted. This must be a function and must include `$el.show()`, or some other way of un-hiding `$el`. + - **Parameters**: + - **$el**: refers to the DOM element or relevent HTML tag. + - **item**: refers to the each of the array key pair. + - **list**: refers to the jq-repeat attribute object array. +- `$.scope.toDo.__setTake(function($el, item, list){ [logic of your code] })` + - **Description**: The method takes a callback function that will run when a element is being remove. This must be a function and must include `$el.show()`, or some other way of un-hiding `$el`. + - **Parameters**: + - **$el**: refers to the DOM element or relevent HTML tag. + - **item**: refers to the each of the array key pair. + - **list**: refers to the jq-repeat attribute object array. +- `$.scope.toDo.__setUpdate(function($el, item, list){ [logic of your code] })` + - **Description**: The method takes a callback function that will run when a element is being updated. This must be a function and must include `$el.show()`, or some other way of un-hiding `$el`. + - **Parameters**: + - **$el**: refers to the DOM element or relevent HTML tag. + - **item**: refers to the each of the array key pair. + - **list**: refers to the jq-repeat attribute object array. ## Credits - - Written by [William Mantly](https://github.com/wmantly) - Big thanks to [Derek Hu](https://github.com/derek-dchu) for creating NPM and bower package, and other general house keeping. - Thanks to [Ti Seng Lim](https://github.com/Newtbot) for updating the readme documentation and adding examples. @@ -103,16 +123,3 @@ $.scope.toDo.push({ - -- `$.scope.toDo.splice(index [,howMany] [,ToAdd])` functions exactly as a regular array with notable difference. If the index propriety is set a string can be passed as the value of the index. -- **index** _Type: Number or String_ - Index of element you wish to manipulate. If the .index property is set, you may pass a string to match to the index array. -- **howMany** _Type: Number_ - Number of repeat objects that will be removed. If there are non to be removed, it is not required to use this argument. -- **update** _Type: Array_ - This is the array of repeat objects to add. If there are none to this is not required. -- **returns** _Type: Array_ - This function will return an array of deleted elements. - -- `$.scope.toDo.__put` is the function that will run when a element is being inserted. This must be a function and must include this.show(), or some other way of un-hiding 'this'. -- `$.scope.toDo.__take` is the function that will run when an element is being removed. This must be a function and include this.remove() or some other way to remove 'this'. diff --git a/example/setPut.html b/example/setPut.html new file mode 100644 index 0000000..e23fa39 --- /dev/null +++ b/example/setPut.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + Document + + + +
    +
  • {{ item }}: {{ done }}
    • +
+ + + \ No newline at end of file diff --git a/example/put.html b/example/setTake.html similarity index 51% rename from example/put.html rename to example/setTake.html index 7d4bc20..c4cf0cf 100644 --- a/example/put.html +++ b/example/setTake.html @@ -14,22 +14,15 @@ + + + + + + + + + + + + Document + + + +
    +
  • {{ item }}: {{ done }}
    • +
+ + + \ No newline at end of file diff --git a/example/splice.html b/example/splice.html index e12a1fc..e9532c7 100644 --- a/example/splice.html +++ b/example/splice.html @@ -16,22 +16,10 @@ $(document).ready(function () { $.scope.toDo.push({ item: "Get milk", done: "Yes" }); // 0 $.scope.toDo.push({ item: "Do laundry", done: "No" }); // 1 - //should take array id or array key - - // - **howMany** _Type: Number_ - // Number of repeat objects that will be removed. If there are non to be removed, it is not required to use this argument. - // - **update** _Type: Array_ - // This is the array of repeat objects to add. If there are none to this is not required. - - //remove works - // $.scope.toDo.splice("Get milk" , "1") - - //remove works - // $.scope.toDo.splice("Get milk") - - - //update - // $.scope.toDo.splice(1, { item: "Get Bread", done: "Yes" }) + //update takes ([id or array key] , ) + //amount to remove / delete could be 0. + //object if you have any to add + $.scope.toDo.splice("Get milk" , 0, { item: "Get Bread", done: "Yes" }) }); From a751b2218dc86f8cdb10362109d7d0ffbbb7d7d5 Mon Sep 17 00:00:00 2001 From: newtbot Date: Mon, 5 Aug 2024 21:52:34 +0800 Subject: [PATCH 10/10] final --- README.md | 2 +- example/setTake.html | 1 - example/setUpdate.html | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 63fdfcb..1b08170 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ A simple, yet highly customizable plugin to handle all of you're client-side rep ## Examples Some simple examples of each methods that can used. -[examples](https://github.com/wmantly/jq-repeat/tree/reworked-dev/example) +[examples](https://github.com/wmantly/jq-repeat/tree/master/example) ## Template diff --git a/example/setTake.html b/example/setTake.html index c4cf0cf..4b9f57e 100644 --- a/example/setTake.html +++ b/example/setTake.html @@ -18,7 +18,6 @@ console.log($el) //refers to the DOM element which is
  • // console.log(item) //each array key pair // console.log(list) //the toDo object - $el.remove() }) $.scope.toDo.push({ item: "Get milk", done: "Yes" }); // 0 diff --git a/example/setUpdate.html b/example/setUpdate.html index 3ce533c..257b768 100644 --- a/example/setUpdate.html +++ b/example/setUpdate.html @@ -18,7 +18,6 @@ console.log($el) //refers to the DOM element which is
  • // console.log(item) //each array key pair // console.log(list) //the toDo object - $el.show() }) $.scope.toDo.push({ item: "Get milk", done: "Yes" }); // 0