Edit File by line

/* global wpforms_builder_help, wpf */

[0] Fix | Delete

[1] Fix | Delete

/**

[2] Fix | Delete

* WPForms Builder Help screen module.

[3] Fix | Delete

[4] Fix | Delete

* @since 1.6.3

[5] Fix | Delete

[6] Fix | Delete

[7] Fix | Delete

'use strict';

[8] Fix | Delete

[9] Fix | Delete

var WPForms = window.WPForms || {};

[10] Fix | Delete

[11] Fix | Delete

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

[12] Fix | Delete

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

[13] Fix | Delete

[14] Fix | Delete

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

[15] Fix | Delete

[16] Fix | Delete

/**

[17] Fix | Delete

* Elements holder.

[18] Fix | Delete

[19] Fix | Delete

* @since 1.6.3

[20] Fix | Delete

[21] Fix | Delete

* @type {object}

[22] Fix | Delete

[23] Fix | Delete

var el;

[24] Fix | Delete

[25] Fix | Delete

/**

[26] Fix | Delete

* UI functions.

[27] Fix | Delete

[28] Fix | Delete

* @since 1.6.3

[29] Fix | Delete

[30] Fix | Delete

* @type {object}

[31] Fix | Delete

[32] Fix | Delete

var ui;

[33] Fix | Delete

[34] Fix | Delete

/**

[35] Fix | Delete

* Event handlers.

[36] Fix | Delete

[37] Fix | Delete

* @since 1.6.3

[38] Fix | Delete

[39] Fix | Delete

* @type {object}

[40] Fix | Delete

[41] Fix | Delete

var event;

[42] Fix | Delete

[43] Fix | Delete

/**

[44] Fix | Delete

* Public functions and properties.

[45] Fix | Delete

[46] Fix | Delete

* @since 1.6.3

[47] Fix | Delete

[48] Fix | Delete

* @type {object}

[49] Fix | Delete

[50] Fix | Delete

var app = {

[51] Fix | Delete

[52] Fix | Delete

/**

[53] Fix | Delete

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

[54] Fix | Delete

[55] Fix | Delete

* @since 1.6.3

[56] Fix | Delete

[57] Fix | Delete

init: function() {

[58] Fix | Delete

[59] Fix | Delete

$( app.ready );

[60] Fix | Delete

[61] Fix | Delete

[62] Fix | Delete

/**

[63] Fix | Delete

* DOM is fully loaded.

[64] Fix | Delete

[65] Fix | Delete

* @since 1.6.3

[66] Fix | Delete

[67] Fix | Delete

ready: function() {

[68] Fix | Delete

[69] Fix | Delete

app.setup();

[70] Fix | Delete

app.initCategories();

[71] Fix | Delete

app.events();

[72] Fix | Delete

[73] Fix | Delete

[74] Fix | Delete

/**

[75] Fix | Delete

* Setup. Prepare some variables.

[76] Fix | Delete

[77] Fix | Delete

* @since 1.6.3

[78] Fix | Delete

[79] Fix | Delete

setup: function() {

[80] Fix | Delete

[81] Fix | Delete

// Cache DOM elements.

[82] Fix | Delete

el = {

[83] Fix | Delete

$builder: $( '#wpforms-builder' ),

[84] Fix | Delete

$builderForm: $( '#wpforms-builder-form' ),

[85] Fix | Delete

$helpBtn: $( '#wpforms-help' ),

[86] Fix | Delete

$help: $( '#wpforms-builder-help' ),

[87] Fix | Delete

$closeBtn: $( '#wpforms-builder-help-close' ),

[88] Fix | Delete

$search: $( '#wpforms-builder-help-search' ),

[89] Fix | Delete

$result: $( '#wpforms-builder-help-result' ),

[90] Fix | Delete

$noResult: $( '#wpforms-builder-help-no-result' ),

[91] Fix | Delete

$categories: $( '#wpforms-builder-help-categories' ),

[92] Fix | Delete

$footer: $( '#wpforms-builder-help-footer' ),

[93] Fix | Delete

};

[94] Fix | Delete

[95] Fix | Delete

[96] Fix | Delete

/**

[97] Fix | Delete

* Bind events.

[98] Fix | Delete

[99] Fix | Delete

* @since 1.6.3

[100] Fix | Delete

[101] Fix | Delete

events: function() {

[102] Fix | Delete

[103] Fix | Delete

// Open/close help modal.

[104] Fix | Delete

el.$helpBtn.on( 'click', event.openHelp );

[105] Fix | Delete

el.$closeBtn.on( 'click', event.closeHelp );

[106] Fix | Delete

[107] Fix | Delete

// Expand/collapse category.

[108] Fix | Delete

el.$categories.on( 'click', '.wpforms-builder-help-category header', event.toggleCategory );

[109] Fix | Delete

[110] Fix | Delete

// View all Category Docs button click.

[111] Fix | Delete

el.$categories.on( 'click', '.wpforms-builder-help-category button.viewall', event.viewAllCategoryDocs );

[112] Fix | Delete

[113] Fix | Delete

// Input into search field.

[114] Fix | Delete

el.$search.on( 'keyup', 'input', _.debounce( event.inputSearch, 250 ) );

[115] Fix | Delete

[116] Fix | Delete

// Clear search field.

[117] Fix | Delete

el.$search.on( 'click', '#wpforms-builder-help-search-clear', event.clearSearch );

[118] Fix | Delete

[119] Fix | Delete

[120] Fix | Delete

/**

[121] Fix | Delete

* Init (generate) categories list.

[122] Fix | Delete

[123] Fix | Delete

* @since 1.6.3

[124] Fix | Delete

[125] Fix | Delete

initCategories: function() {

[126] Fix | Delete

[127] Fix | Delete

// Display error if docs data is not available.

[128] Fix | Delete

if ( wpf.empty( wpforms_builder_help.docs ) ) {

[129] Fix | Delete

el.$categories.html( wp.template( 'wpforms-builder-help-categories-error' ) );

[130] Fix | Delete

[131] Fix | Delete

return;

[132] Fix | Delete

}

[133] Fix | Delete

[134] Fix | Delete

var tmpl = wp.template( 'wpforms-builder-help-categories' ),

[135] Fix | Delete

data = {

[136] Fix | Delete

categories: wpforms_builder_help.categories,

[137] Fix | Delete

docs: app.getDocsByCategories(),

[138] Fix | Delete

};

[139] Fix | Delete

[140] Fix | Delete

el.$categories.html( tmpl( data ) );

[141] Fix | Delete

[142] Fix | Delete

[143] Fix | Delete

/**

[144] Fix | Delete

* Init categories list.

[145] Fix | Delete

[146] Fix | Delete

* @since 1.6.3

[147] Fix | Delete

[148] Fix | Delete

* @returns {object} Docs arranged by category.

[149] Fix | Delete

[150] Fix | Delete

getDocsByCategories: function() {

[151] Fix | Delete

[152] Fix | Delete

var categories = wpforms_builder_help.categories,

[153] Fix | Delete

docs = wpforms_builder_help.docs || [],

[154] Fix | Delete

docsByCategories = {};

[155] Fix | Delete

[156] Fix | Delete

_.each( categories, function( categoryTitle, categorySlug ) {

[157] Fix | Delete

var docsByCategory = [];

[158] Fix | Delete

_.each( docs, function( doc ) {

[159] Fix | Delete

if ( doc.categories && doc.categories.indexOf( categorySlug ) > -1 ) {

[160] Fix | Delete

docsByCategory.push( doc );

[161] Fix | Delete

}

[162] Fix | Delete

} );

[163] Fix | Delete

docsByCategories[ categorySlug ] = docsByCategory;

[164] Fix | Delete

} );

[165] Fix | Delete

[166] Fix | Delete

return docsByCategories;

[167] Fix | Delete

[168] Fix | Delete

[169] Fix | Delete

/**

[170] Fix | Delete

* Get docs recommended by search term.

[171] Fix | Delete

[172] Fix | Delete

* @since 1.6.3

[173] Fix | Delete

[174] Fix | Delete

* @param {string} term Search term.

[175] Fix | Delete

[176] Fix | Delete

* @returns {Array} Recommended docs.

[177] Fix | Delete

[178] Fix | Delete

getRecommendedDocs: function( term ) {

[179] Fix | Delete

[180] Fix | Delete

if ( wpf.empty( term ) ) {

[181] Fix | Delete

return [];

[182] Fix | Delete

}

[183] Fix | Delete

[184] Fix | Delete

term = term.toLowerCase();

[185] Fix | Delete

[186] Fix | Delete

var docs = wpforms_builder_help.docs,

[187] Fix | Delete

recommendedDocs = [];

[188] Fix | Delete

[189] Fix | Delete

if ( wpf.empty( wpforms_builder_help.context.docs[ term ] ) ) {

[190] Fix | Delete

return [];

[191] Fix | Delete

}

[192] Fix | Delete

[193] Fix | Delete

_.each( wpforms_builder_help.context.docs[ term ], function( docId ) {

[194] Fix | Delete

if ( ! wpf.empty( docs[ docId ] ) ) {

[195] Fix | Delete

recommendedDocs.push( docs[ docId ] );

[196] Fix | Delete

}

[197] Fix | Delete

} );

[198] Fix | Delete

[199] Fix | Delete

return recommendedDocs;

[200] Fix | Delete

[201] Fix | Delete

[202] Fix | Delete

/**

[203] Fix | Delete

* Get docs filtered by search term.

[204] Fix | Delete

[205] Fix | Delete

* @since 1.6.3

[206] Fix | Delete

[207] Fix | Delete

* @param {string} term Search term.

[208] Fix | Delete

[209] Fix | Delete

* @returns {Array} Filtered docs.

[210] Fix | Delete

[211] Fix | Delete

getFilteredDocs: function( term ) {

[212] Fix | Delete

[213] Fix | Delete

if ( wpf.empty( term ) ) {

[214] Fix | Delete

return [];

[215] Fix | Delete

}

[216] Fix | Delete

[217] Fix | Delete

var docs = wpforms_builder_help.docs,

[218] Fix | Delete

filteredDocs = [];

[219] Fix | Delete

[220] Fix | Delete

term = term.toLowerCase();

[221] Fix | Delete

[222] Fix | Delete

_.each( docs, function( doc ) {

[223] Fix | Delete

if ( doc.title && doc.title.toLowerCase().indexOf( term ) > -1 ) {

[224] Fix | Delete

filteredDocs.push( doc );

[225] Fix | Delete

}

[226] Fix | Delete

} );

[227] Fix | Delete

[228] Fix | Delete

return filteredDocs;

[229] Fix | Delete

[230] Fix | Delete

[231] Fix | Delete

/**

[232] Fix | Delete

* Get the current context (state) of the form builder.

[233] Fix | Delete

[234] Fix | Delete

* @since 1.6.3

[235] Fix | Delete

[236] Fix | Delete

* @returns {string} Builder context string. For example 'fields/add_field' or 'settings/notifications'.

[237] Fix | Delete

[238] Fix | Delete

getBuilderContext: function() {

[239] Fix | Delete

[240] Fix | Delete

// New (not saved) form.

[241] Fix | Delete

if ( wpf.empty( el.$builderForm.data( 'id' ) ) ) {

[242] Fix | Delete

return 'new_form';

[243] Fix | Delete

}

[244] Fix | Delete

[245] Fix | Delete

// Determine builder panel and section.

[246] Fix | Delete

var panel = el.$builder.find( '#wpforms-panels-toggle button.active' ).data( 'panel' ),

[247] Fix | Delete

$panel = el.$builder.find( '#wpforms-panel-' + panel ),

[248] Fix | Delete

section = '',

[249] Fix | Delete

subsection = '',

[250] Fix | Delete

context;

[251] Fix | Delete

[252] Fix | Delete

switch ( panel ) {

[253] Fix | Delete

case 'fields':

[254] Fix | Delete

section = $panel.find( '.wpforms-panel-sidebar .wpforms-tab a.active' ).parent().attr( 'id' );

[255] Fix | Delete

break;

[256] Fix | Delete

case 'setup':

[257] Fix | Delete

section = '';

[258] Fix | Delete

break;

[259] Fix | Delete

default:

[260] Fix | Delete

section = $panel.find( '.wpforms-panel-sidebar a.active' ).data( 'section' );

[261] Fix | Delete

}

[262] Fix | Delete

[263] Fix | Delete

section = ! wpf.empty( section ) ? section.replace( /-/g, '_' ) : '';

[264] Fix | Delete

[265] Fix | Delete

// Detect field type.

[266] Fix | Delete

if ( section === 'field_options' ) {

[267] Fix | Delete

subsection = $panel.find( '#wpforms-field-options .wpforms-field-option:visible .wpforms-field-option-hidden-type' ).val();

[268] Fix | Delete

}

[269] Fix | Delete

[270] Fix | Delete

// Combine to context array.

[271] Fix | Delete

context = [ panel, section, subsection ].filter( function( el ) {

[272] Fix | Delete

return ! wpf.empty( el ) && el !== 'default';

[273] Fix | Delete

} );

[274] Fix | Delete

[275] Fix | Delete

// Return imploded string.

[276] Fix | Delete

return context.join( '/' );

[277] Fix | Delete

[278] Fix | Delete

[279] Fix | Delete

/**

[280] Fix | Delete

* Get the search term for the current builder context.

[281] Fix | Delete

[282] Fix | Delete

* @since 1.6.3

[283] Fix | Delete

[284] Fix | Delete

* @returns {string} Builder context term string.

[285] Fix | Delete

[286] Fix | Delete

getBuilderContextTerm: function() {

[287] Fix | Delete

[288] Fix | Delete

return wpforms_builder_help.context.terms[ app.getBuilderContext() ] || '';

[289] Fix | Delete

[290] Fix | Delete

};

[291] Fix | Delete

[292] Fix | Delete

/**

[293] Fix | Delete

* UI functions.

[294] Fix | Delete

[295] Fix | Delete

ui = {

[296] Fix | Delete

[297] Fix | Delete

/**

[298] Fix | Delete

* Configuration.

[299] Fix | Delete

[300] Fix | Delete

* @since 1.6.3

[301] Fix | Delete

[302] Fix | Delete

* @type {object}

[303] Fix | Delete

[304] Fix | Delete

config: {

[305] Fix | Delete

speed: 300, // Fading/sliding duration in milliseconds.

[306] Fix | Delete

[307] Fix | Delete

[308] Fix | Delete

/**

[309] Fix | Delete

* Display the element by fading them to opaque using CSS.

[310] Fix | Delete

[311] Fix | Delete

* @since 1.6.3

[312] Fix | Delete

[313] Fix | Delete

* @param {jQuery} $el Element object.

[314] Fix | Delete

[315] Fix | Delete

fadeIn: function( $el ) {

[316] Fix | Delete

[317] Fix | Delete

if ( ! $el.length ) {

[318] Fix | Delete

return;

[319] Fix | Delete

}

[320] Fix | Delete

[321] Fix | Delete

$el.css( {

[322] Fix | Delete

display: '',

[323] Fix | Delete

transition: `opacity ${ui.config.speed}ms ease-in 0s`,

[324] Fix | Delete

} );

[325] Fix | Delete

[326] Fix | Delete

setTimeout( function() {

[327] Fix | Delete

$el.css( 'opacity', '1' );

[328] Fix | Delete

}, 0 );

[329] Fix | Delete

[330] Fix | Delete

[331] Fix | Delete

/**

[332] Fix | Delete

* Hide the element by fading them to transparent using CSS.

[333] Fix | Delete

[334] Fix | Delete

* @since 1.6.3

[335] Fix | Delete

[336] Fix | Delete

* @param {jQuery} $el Element object.

[337] Fix | Delete

[338] Fix | Delete

fadeOut: function( $el ) {

[339] Fix | Delete

[340] Fix | Delete

if ( ! $el.length ) {

[341] Fix | Delete

return;

[342] Fix | Delete

}

[343] Fix | Delete

[344] Fix | Delete

$el.css( {

[345] Fix | Delete

opacity: '0',

[346] Fix | Delete

transition: `opacity ${ui.config.speed}ms ease-in 0s`,

[347] Fix | Delete

} );

[348] Fix | Delete

[349] Fix | Delete

setTimeout( function() {

[350] Fix | Delete

$el.css( 'display', 'none' );

[351] Fix | Delete

}, ui.config.speed );

[352] Fix | Delete

[353] Fix | Delete

[354] Fix | Delete

/**

[355] Fix | Delete

* Collapse all categories.

[356] Fix | Delete

[357] Fix | Delete

* @since 1.6.3

[358] Fix | Delete

[359] Fix | Delete

collapseAllCategories: function() {

[360] Fix | Delete

[361] Fix | Delete

el.$categories.find( '.wpforms-builder-help-category' ).removeClass( 'opened' );

[362] Fix | Delete

el.$categories.find( '.wpforms-builder-help-docs' ).slideUp();

[363] Fix | Delete

[364] Fix | Delete

};

[365] Fix | Delete

[366] Fix | Delete

/**

[367] Fix | Delete

* Event handlers.

[368] Fix | Delete

[369] Fix | Delete

event = {

[370] Fix | Delete

[371] Fix | Delete

/**

[372] Fix | Delete

* Open help modal.

[373] Fix | Delete

[374] Fix | Delete

* @since 1.6.3

[375] Fix | Delete

[376] Fix | Delete

* @param {object} e Event object.

[377] Fix | Delete

[378] Fix | Delete

openHelp: function( e ) {

[379] Fix | Delete

[380] Fix | Delete

e.preventDefault();

[381] Fix | Delete

[382] Fix | Delete

var $firstCategory = el.$categories.find( '.wpforms-builder-help-category' ).first(),

[383] Fix | Delete

builderContextTerm = app.getBuilderContextTerm();

[384] Fix | Delete

[385] Fix | Delete

if ( builderContextTerm === '' && ! $firstCategory.hasClass( 'opened' ) ) {

[386] Fix | Delete

$firstCategory.find( 'header' ).first().trigger( 'click' );

[387] Fix | Delete

} else {

[388] Fix | Delete

ui.collapseAllCategories();

[389] Fix | Delete

}

[390] Fix | Delete

[391] Fix | Delete

el.$search.find( 'input' ).val( builderContextTerm ).trigger( 'keyup' );

[392] Fix | Delete

[393] Fix | Delete

ui.fadeIn( el.$help );

[394] Fix | Delete

[395] Fix | Delete

setTimeout( function() {

[396] Fix | Delete

[397] Fix | Delete

ui.fadeIn( el.$result );

[398] Fix | Delete

ui.fadeIn( el.$categories );

[399] Fix | Delete

ui.fadeIn( el.$footer );

[400] Fix | Delete

[401] Fix | Delete

}, ui.config.speed );

[402] Fix | Delete

[403] Fix | Delete

[404] Fix | Delete

/**

[405] Fix | Delete

* Close help modal.

[406] Fix | Delete

[407] Fix | Delete

* @since 1.6.3

[408] Fix | Delete

[409] Fix | Delete

* @param {object} e Event object.

[410] Fix | Delete

[411] Fix | Delete

closeHelp: function( e ) {

[412] Fix | Delete

[413] Fix | Delete

e.preventDefault();

[414] Fix | Delete

[415] Fix | Delete

ui.fadeOut( el.$result );

[416] Fix | Delete

ui.fadeOut( el.$categories );

[417] Fix | Delete

ui.fadeOut( el.$footer );

[418] Fix | Delete

[419] Fix | Delete

ui.fadeOut( el.$help );

[420] Fix | Delete

[421] Fix | Delete

[422] Fix | Delete

[423] Fix | Delete

/**

[424] Fix | Delete

* Toggle category.

[425] Fix | Delete

[426] Fix | Delete

* @since 1.6.3

[427] Fix | Delete

[428] Fix | Delete

* @param {object} e Event object.

[429] Fix | Delete

[430] Fix | Delete

toggleCategory: function( e ) {

[431] Fix | Delete

[432] Fix | Delete

var $category = $( this ).parent(),

[433] Fix | Delete

$categoryDocs = $category.find( '.wpforms-builder-help-docs' );

[434] Fix | Delete

[435] Fix | Delete

if ( ! $categoryDocs.is( ':visible' ) ) {

[436] Fix | Delete

$category.addClass( 'opened' );

[437] Fix | Delete

} else {

[438] Fix | Delete

$category.removeClass( 'opened' );

[439] Fix | Delete

}

[440] Fix | Delete

[441] Fix | Delete

$categoryDocs.stop().slideToggle( ui.config.speed );

[442] Fix | Delete

[443] Fix | Delete

[444] Fix | Delete

/**

[445] Fix | Delete

* View All Category Docs button click.

[446] Fix | Delete

[447] Fix | Delete

* @since 1.6.3

[448] Fix | Delete

[449] Fix | Delete

* @param {object} e Event object.

[450] Fix | Delete

[451] Fix | Delete

viewAllCategoryDocs: function( e ) {

[452] Fix | Delete

[453] Fix | Delete

var $btn = $( this );

[454] Fix | Delete

[455] Fix | Delete

$btn.prev( 'div' ).stop().slideToggle( ui.config.speed, function() {

[456] Fix | Delete

$btn.closest( '.wpforms-builder-help-category' ).addClass( 'viewall' );

[457] Fix | Delete

} );

[458] Fix | Delete

ui.fadeOut( $btn );

[459] Fix | Delete

$btn.slideUp();

[460] Fix | Delete

[461] Fix | Delete

[462] Fix | Delete

/**

[463] Fix | Delete

* Input into search field.

[464] Fix | Delete

[465] Fix | Delete

* @since 1.6.3

[466] Fix | Delete

[467] Fix | Delete

* @param {object} e Event object.

[468] Fix | Delete

[469] Fix | Delete

inputSearch: function( e ) {

[470] Fix | Delete

[471] Fix | Delete

var $input = $( this ),

[472] Fix | Delete

term = $input.val();

[473] Fix | Delete

[474] Fix | Delete

var tmpl = wp.template( 'wpforms-builder-help-docs' ),

[475] Fix | Delete

recommendedDocs = app.getRecommendedDocs( term ),

[476] Fix | Delete

filteredDocs = event.removeDuplicates( recommendedDocs, app.getFilteredDocs( term ) ),

[477] Fix | Delete

resultHTML = '';

[478] Fix | Delete

[479] Fix | Delete

el.$search.toggleClass( 'wpforms-empty', ! term );

[480] Fix | Delete

[481] Fix | Delete

if ( ! wpf.empty( recommendedDocs ) ) {

[482] Fix | Delete

resultHTML += tmpl( {

[483] Fix | Delete

docs: recommendedDocs,

[484] Fix | Delete

} );

[485] Fix | Delete

}

[486] Fix | Delete

[487] Fix | Delete

if ( ! wpf.empty( filteredDocs ) ) {

[488] Fix | Delete

resultHTML += tmpl( {

[489] Fix | Delete

docs: filteredDocs,

[490] Fix | Delete

} );

[491] Fix | Delete

}

[492] Fix | Delete

[493] Fix | Delete

el.$noResult.toggle( resultHTML === '' && term !== '' );

[494] Fix | Delete

[495] Fix | Delete

el.$result.html( resultHTML );

[496] Fix | Delete

[497] Fix | Delete

el.$help[0].scrollTop = 0;

[498] Fix | Delete

[499] Fix | Delete