Edit File by line

/**

[0] Fix | Delete

* WPForms Builder Dropdown List module.

[1] Fix | Delete

[2] Fix | Delete

* @since 1.8.4

[3] Fix | Delete

[4] Fix | Delete

[5] Fix | Delete

[6] Fix | Delete

Usage:

[7] Fix | Delete

[8] Fix | Delete

dropdownList = WPForms.Admin.Builder.DropdownList.init( {

[9] Fix | Delete

class: 'insert-field-dropdown', // Additional CSS class.

[10] Fix | Delete

title: 'Dropdown Title', // Dropdown title.

[11] Fix | Delete

list: [ // Items list.

[12] Fix | Delete

{ value: '1', text: 'Item 1' },

[13] Fix | Delete

{ value: '2', text: 'Item 2' },

[14] Fix | Delete

{ value: '3', text: 'Item 3' },

[15] Fix | Delete

[16] Fix | Delete

container: $( '.holder-container' ), // Holder container. Optional.

[17] Fix | Delete

scrollableContainer: $( '.scrollable-container' ), // Scrollable container. Optional.

[18] Fix | Delete

button: $( '.button' ), // Button.

[19] Fix | Delete

buttonDistance: 21, // Distance from dropdown to the button.

[20] Fix | Delete

itemFormat( item ) { // Item element renderer. Optional.

[21] Fix | Delete

return `<span>${ item.text }</span>`;

[22] Fix | Delete

[23] Fix | Delete

onSelect( event, value, text, $item, instance ) { // On select event handler.

[24] Fix | Delete

console.log( 'Item selected:', text );

[25] Fix | Delete

instance.close();

[26] Fix | Delete

$button.removeClass( 'active' );

[27] Fix | Delete

[28] Fix | Delete

} );

[29] Fix | Delete

[30] Fix | Delete

[31] Fix | Delete

var WPForms = window.WPForms || {}; // eslint-disable-line no-var

[32] Fix | Delete

[33] Fix | Delete

WPForms.Admin = WPForms.Admin || {};

[34] Fix | Delete

WPForms.Admin.Builder = WPForms.Admin.Builder || {};

[35] Fix | Delete

[36] Fix | Delete

WPForms.Admin.Builder.DropdownList = WPForms.Admin.Builder.DropdownList || ( function( document, window, $ ) {

[37] Fix | Delete

/**

[38] Fix | Delete

* DropdownList object constructor.

[39] Fix | Delete

[40] Fix | Delete

* @since 1.8.4

[41] Fix | Delete

[42] Fix | Delete

* @type {Object}

[43] Fix | Delete

[44] Fix | Delete

function DropdownList( options ) { // eslint-disable-line max-lines-per-function

[45] Fix | Delete

const self = this;

[46] Fix | Delete

[47] Fix | Delete

/**

[48] Fix | Delete

* Default options.

[49] Fix | Delete

[50] Fix | Delete

* @since 1.8.4

[51] Fix | Delete

[52] Fix | Delete

* @type {Object}

[53] Fix | Delete

[54] Fix | Delete

const defaultOptions = {

[55] Fix | Delete

class: '',

[56] Fix | Delete

title: '',

[57] Fix | Delete

list: [],

[58] Fix | Delete

container: null,

[59] Fix | Delete

scrollableContainer: null,

[60] Fix | Delete

button: null,

[61] Fix | Delete

buttonDistance: 10,

[62] Fix | Delete

onSelect: null,

[63] Fix | Delete

itemFormat( item ) {

[64] Fix | Delete

return item.text;

[65] Fix | Delete

[66] Fix | Delete

};

[67] Fix | Delete

[68] Fix | Delete

/**

[69] Fix | Delete

* Options.

[70] Fix | Delete

[71] Fix | Delete

* @since 1.8.4

[72] Fix | Delete

[73] Fix | Delete

* @type {jQuery}

[74] Fix | Delete

[75] Fix | Delete

self.options = $.extend( defaultOptions, options );

[76] Fix | Delete

[77] Fix | Delete

/**

[78] Fix | Delete

* Main dropdown container.

[79] Fix | Delete

[80] Fix | Delete

* @since 1.8.4

[81] Fix | Delete

[82] Fix | Delete

* @type {jQuery}

[83] Fix | Delete

[84] Fix | Delete

self.$el = null;

[85] Fix | Delete

[86] Fix | Delete

/**

[87] Fix | Delete

* Form builder container.

[88] Fix | Delete

[89] Fix | Delete

* @since 1.8.4

[90] Fix | Delete

[91] Fix | Delete

* @type {jQuery}

[92] Fix | Delete

[93] Fix | Delete

self.$builder = $( '#wpforms-builder' );

[94] Fix | Delete

[95] Fix | Delete

/**

[96] Fix | Delete

* Close the dropdown.

[97] Fix | Delete

[98] Fix | Delete

* @since 1.8.4

[99] Fix | Delete

[100] Fix | Delete

self.close = function() {

[101] Fix | Delete

self.$el.addClass( 'closed' );

[102] Fix | Delete

};

[103] Fix | Delete

[104] Fix | Delete

/**

[105] Fix | Delete

* Open the dropdown.

[106] Fix | Delete

[107] Fix | Delete

* @since 1.8.4

[108] Fix | Delete

[109] Fix | Delete

self.open = function() {

[110] Fix | Delete

self.$el.removeClass( 'closed' );

[111] Fix | Delete

self.setPosition();

[112] Fix | Delete

[113] Fix | Delete

// Close dropdown on click outside.

[114] Fix | Delete

self.$builder.on( 'click.DropdowmList', function( e ) {

[115] Fix | Delete

const $target = $( e.target );

[116] Fix | Delete

[117] Fix | Delete

if ( $target.closest( self.$el ).length || $target.hasClass( 'button-insert-field' ) ) {

[118] Fix | Delete

return;

[119] Fix | Delete

}

[120] Fix | Delete

[121] Fix | Delete

self.$builder.off( 'click.DropdowmList' );

[122] Fix | Delete

[123] Fix | Delete

const $button = $( self.options.button );

[124] Fix | Delete

[125] Fix | Delete

if ( $button.hasClass( 'active' ) ) {

[126] Fix | Delete

$button.trigger( 'click' );

[127] Fix | Delete

}

[128] Fix | Delete

} );

[129] Fix | Delete

};

[130] Fix | Delete

[131] Fix | Delete

/**

[132] Fix | Delete

* Generate the dropdown HTML.

[133] Fix | Delete

[134] Fix | Delete

* @since 1.8.4

[135] Fix | Delete

[136] Fix | Delete

* @return {string} HTML.

[137] Fix | Delete

[138] Fix | Delete

self.generateHtml = function() {

[139] Fix | Delete

const list = self.options.list;

[140] Fix | Delete

[141] Fix | Delete

if ( ! list || list.length === 0 ) {

[142] Fix | Delete

return '';

[143] Fix | Delete

}

[144] Fix | Delete

[145] Fix | Delete

const itemFormat = typeof self.options.itemFormat === 'function' ? self.options.itemFormat : defaultOptions.itemFormat;

[146] Fix | Delete

[147] Fix | Delete

// Generate HTML.

[148] Fix | Delete

const items = [];

[149] Fix | Delete

[150] Fix | Delete

for ( const i in list ) {

[151] Fix | Delete

items.push( `<li data-value="${ list[ i ].value }">${ itemFormat( list[ i ] ) }</li>` );

[152] Fix | Delete

}

[153] Fix | Delete

[154] Fix | Delete

return `<div class="wpforms-builder-dropdown-list closed ${ self.options.class }">

[155] Fix | Delete

<div class="title">${ self.options.title }</div>

[156] Fix | Delete

<ul>${ items.join( '' ) }</ul>

[157] Fix | Delete

</div>`;

[158] Fix | Delete

};

[159] Fix | Delete

[160] Fix | Delete

/**

[161] Fix | Delete

* Attach dropdown to DOM.

[162] Fix | Delete

[163] Fix | Delete

* @since 1.8.4

[164] Fix | Delete

[165] Fix | Delete

self.attach = function() {

[166] Fix | Delete

const html = self.generateHtml();

[167] Fix | Delete

[168] Fix | Delete

// Remove old dropdown.

[169] Fix | Delete

if ( self.$el && self.$el.length ) {

[170] Fix | Delete

self.$el.remove();

[171] Fix | Delete

}

[172] Fix | Delete

[173] Fix | Delete

// Create jQuery objects.

[174] Fix | Delete

self.$el = $( html );

[175] Fix | Delete

self.$button = $( self.options.button );

[176] Fix | Delete

self.$container = self.options.container ? $( self.options.container ) : self.$button.parent();

[177] Fix | Delete

self.$scrollableContainer = self.options.scrollableContainer ? $( self.options.scrollableContainer ) : null;

[178] Fix | Delete

[179] Fix | Delete

// Add the dropdown to the container.

[180] Fix | Delete

self.$container.append( self.$el );

[181] Fix | Delete

[182] Fix | Delete

self.setPosition();

[183] Fix | Delete

};

[184] Fix | Delete

[185] Fix | Delete

/**

[186] Fix | Delete

* Set dropdown position.

[187] Fix | Delete

[188] Fix | Delete

* @since 1.8.4

[189] Fix | Delete

[190] Fix | Delete

self.setPosition = function() {

[191] Fix | Delete

// Calculate position.

[192] Fix | Delete

const buttonOffset = self.$button.offset(),

[193] Fix | Delete

containerOffset = self.$container.offset(),

[194] Fix | Delete

containerPosition = self.$container.position(),

[195] Fix | Delete

dropdownHeight = self.$el.height(),

[196] Fix | Delete

scrollTop = self.$scrollableContainer ? self.$scrollableContainer.scrollTop() : 0;

[197] Fix | Delete

[198] Fix | Delete

let top = buttonOffset.top - containerOffset.top - dropdownHeight - self.options.buttonDistance;

[199] Fix | Delete

[200] Fix | Delete

// In the case of the dropdown doesn't fit into the scrollable container to top, it is needed to open the dropdown to the bottom.

[201] Fix | Delete

if ( scrollTop + containerPosition.top - dropdownHeight < 0 ) {

[202] Fix | Delete

top = buttonOffset.top - containerOffset.top + self.$button.height() + self.options.buttonDistance - 11;

[203] Fix | Delete

}

[204] Fix | Delete

[205] Fix | Delete

self.$el.css( 'top', top );

[206] Fix | Delete

[207] Fix | Delete

// The dropdown is outside the field options, it is needed to set `left` positioning value.

[208] Fix | Delete

if ( self.$container.closest( '.wpforms-field-option' ).length === 0 ) {

[209] Fix | Delete

self.$el.css( 'left', buttonOffset.left - containerOffset.left );

[210] Fix | Delete

}

[211] Fix | Delete

};

[212] Fix | Delete

[213] Fix | Delete

/**

[214] Fix | Delete

* Events.

[215] Fix | Delete

[216] Fix | Delete

* @since 1.8.4

[217] Fix | Delete

[218] Fix | Delete

self.events = function() {

[219] Fix | Delete

// Click (select) the item.

[220] Fix | Delete

self.$el.find( 'li' ).off()

[221] Fix | Delete

.on( 'click', function( event ) {

[222] Fix | Delete

// Bail if callback is not a function.

[223] Fix | Delete

if ( typeof self.options.onSelect !== 'function' ) {

[224] Fix | Delete

return;

[225] Fix | Delete

}

[226] Fix | Delete

[227] Fix | Delete

const $item = $( this );

[228] Fix | Delete

[229] Fix | Delete

self.options.onSelect( event, $item.data( 'value' ), $item.text(), $item, self );

[230] Fix | Delete

} );

[231] Fix | Delete

};

[232] Fix | Delete

[233] Fix | Delete

/**

[234] Fix | Delete

* Initialize.

[235] Fix | Delete

[236] Fix | Delete

* @since 1.8.4

[237] Fix | Delete

[238] Fix | Delete

* @param {Array} list List of items.

[239] Fix | Delete

[240] Fix | Delete

self.init = function( list = null ) {

[241] Fix | Delete

self.options.list = list ? list : self.options.list;

[242] Fix | Delete

[243] Fix | Delete

self.attach();

[244] Fix | Delete

self.events();

[245] Fix | Delete

[246] Fix | Delete

self.$button.data( 'dropdown-list', self );

[247] Fix | Delete

};

[248] Fix | Delete

[249] Fix | Delete

/**

[250] Fix | Delete

* Destroy.

[251] Fix | Delete

[252] Fix | Delete

* @since 1.8.4

[253] Fix | Delete

[254] Fix | Delete

self.destroy = function() {

[255] Fix | Delete

self.$button.data( 'dropdown-list', null );

[256] Fix | Delete

self.$el.remove();

[257] Fix | Delete

};

[258] Fix | Delete

[259] Fix | Delete

// Initialize.

[260] Fix | Delete

self.init();

[261] Fix | Delete

}

[262] Fix | Delete

[263] Fix | Delete

/**

[264] Fix | Delete

* Public functions and properties.

[265] Fix | Delete

[266] Fix | Delete

* @since 1.8.4

[267] Fix | Delete

[268] Fix | Delete

* @type {Object}

[269] Fix | Delete

[270] Fix | Delete

return {

[271] Fix | Delete

[272] Fix | Delete

/**

[273] Fix | Delete

* Start the engine. DOM is not ready yet, use only to init something.

[274] Fix | Delete

[275] Fix | Delete

* @since 1.8.4

[276] Fix | Delete

[277] Fix | Delete

* @param {Object} options Options.

[278] Fix | Delete

[279] Fix | Delete

* @return {Object} DropdownList instance.

[280] Fix | Delete

[281] Fix | Delete

init( options ) {

[282] Fix | Delete

return new DropdownList( options );

[283] Fix | Delete

[284] Fix | Delete

};

[285] Fix | Delete

}( document, window, jQuery ) );

[286] Fix | Delete

[287] Fix | Delete