| 1 |
( function( $ ) { |
| 2 |
/** |
| 3 |
* Advanced list. |
| 4 |
* |
| 5 |
* @param el |
| 6 |
* @param options |
| 7 |
*/ |
| 8 |
const AdvancedList = function( el, options ) { |
| 9 |
const self = this, |
| 10 |
$el = $( el ).hasClass( 'advanced-list' ) ? $( el ) : $( '.advanced-list', el ); |
| 11 |
|
| 12 |
this.options = $.extend( { |
| 13 |
template: '<li data-id="{{id}}"><span class="remove-item"></span><span>{{text}}</span> </li>', |
| 14 |
}, options || {} ); |
| 15 |
this.$el = $el; |
| 16 |
|
| 17 |
/** |
| 18 |
* Callback for removing event. |
| 19 |
* |
| 20 |
* @param e |
| 21 |
* @private |
| 22 |
*/ |
| 23 |
function _remove( e ) { |
| 24 |
e.preventDefault(); |
| 25 |
remove( $el.children().index( $( this ).closest( 'li' ) ) + 1 ); |
| 26 |
} |
| 27 |
|
| 28 |
/** |
| 29 |
* |
| 30 |
* @param e |
| 31 |
* @private |
| 32 |
*/ |
| 33 |
function _add( e ) { |
| 34 |
|
| 35 |
} |
| 36 |
|
| 37 |
/** |
| 38 |
* Remove an element at a position from list. |
| 39 |
* |
| 40 |
* @param at |
| 41 |
*/ |
| 42 |
function remove( at ) { |
| 43 |
$el.children( ':eq(' + ( at - 1 ) + ')' ).remove(); |
| 44 |
self.options.onRemove && self.options.onRemove.call( self ); |
| 45 |
} |
| 46 |
|
| 47 |
/** |
| 48 |
* Add new element into list. |
| 49 |
* |
| 50 |
* @param data |
| 51 |
* @param at - Optional. Position where to insert |
| 52 |
*/ |
| 53 |
function add( data, at ) { |
| 54 |
let options = {}, |
| 55 |
template = getTemplate(); |
| 56 |
if ( $.isPlainObject( data ) ) { |
| 57 |
options = $.extend( { id: 0, text: '' }, data ); |
| 58 |
} else if ( typeof data === 'string' ) { |
| 59 |
options = { |
| 60 |
id: '', |
| 61 |
text: data, |
| 62 |
}; |
| 63 |
} else if ( data[ 0 ] !== undefined ) { |
| 64 |
options = { |
| 65 |
id: data[ 1 ] ? data[ 1 ] : '', |
| 66 |
text: data[ 0 ], |
| 67 |
}; |
| 68 |
} |
| 69 |
|
| 70 |
// Replace placeholders with related variables |
| 71 |
for ( const prop in options ) { |
| 72 |
const reg = new RegExp( '\{\{' + prop + '\}\}', 'g' ); |
| 73 |
template = template.replace( reg, options[ prop ] ); |
| 74 |
} |
| 75 |
|
| 76 |
template = $( template ); |
| 77 |
|
| 78 |
if ( at !== undefined ) { |
| 79 |
const $e = $el.children( ':eq(' + ( at - 1 ) + ')' ); |
| 80 |
if ( $e.length ) { |
| 81 |
template.insertBefore( $e ); |
| 82 |
} else { |
| 83 |
$el.append( template ); |
| 84 |
} |
| 85 |
} else { |
| 86 |
$el.append( template ); |
| 87 |
} |
| 88 |
|
| 89 |
// Append "\n" between li elements |
| 90 |
const $child = $el.children().detach(); |
| 91 |
$child.each( function() { |
| 92 |
$el.append( '\n' ).append( this ); |
| 93 |
} ); |
| 94 |
self.options.onAdd && self.options.onAdd.call( self ); |
| 95 |
} |
| 96 |
|
| 97 |
function getTemplate() { |
| 98 |
const $container = $( self.options.template ); |
| 99 |
if ( $container.length ) { |
| 100 |
return $container.html(); |
| 101 |
} |
| 102 |
return self.options.template; |
| 103 |
} |
| 104 |
|
| 105 |
$el.on( 'click', '.remove-item', _remove ); |
| 106 |
// export |
| 107 |
this.add = add; |
| 108 |
this.remove = remove; |
| 109 |
}; |
| 110 |
|
| 111 |
// Export |
| 112 |
$.fn.LP( 'AdvancedList', function( options ) { |
| 113 |
const args = []; |
| 114 |
for ( let i = 1; i < arguments.length; i++ ) { |
| 115 |
args.push( arguments[ i ] ); |
| 116 |
} |
| 117 |
return $.each( this, function() { |
| 118 |
let $advancedList = $( this ).data( 'advancedList' ); |
| 119 |
if ( ! $advancedList ) { |
| 120 |
$advancedList = new AdvancedList( this, options ); |
| 121 |
$( this ).data( 'advancedList', $advancedList ); |
| 122 |
} |
| 123 |
|
| 124 |
// Try to calling to methods of class |
| 125 |
if ( typeof options === 'string' ) { |
| 126 |
if ( typeof $advancedList[ options ] === 'function' ) { |
| 127 |
return $advancedList[ options ].apply( $advancedList, args ); |
| 128 |
} |
| 129 |
} |
| 130 |
return this; |
| 131 |
} ); |
| 132 |
} ); |
| 133 |
}( jQuery ) ); |
| 134 |
|
