admin.js
3 weeks ago
admin.min.js
3 weeks ago
chart.js
2 years ago
chart.min.js
1 year ago
customize-controls.js
1 year ago
customize-controls.min.js
1 year ago
customize-preview.js
1 year ago
customize-preview.min.js
1 year ago
deactivation-feedback.js
2 years ago
deactivation-feedback.min.js
2 years ago
editor.js
8 years ago
editor.min.js
5 years ago
everest-forms-survey-polls-quiz-builder.js
2 years ago
everest-forms-survey-polls-quiz-builder.min.js
2 years ago
evf-admin-email.js
2 years ago
evf-admin-email.min.js
1 year ago
evf-clipboard.js
8 years ago
evf-clipboard.min.js
8 years ago
evf-enhanced-select.js
3 years ago
evf-enhanced-select.min.js
2 years ago
evf-file-uploader.js
1 year ago
evf-file-uploader.min.js
1 year ago
evf-setup.js
1 year ago
evf-setup.min.js
1 year ago
extensions.js
2 years ago
extensions.min.js
2 years ago
form-builder.js
1 week ago
form-builder.min.js
1 week ago
form-template-controller.js
3 years ago
form-template-controller.min.js
3 years ago
printThis.min.js
2 years ago
progressbar.js
2 years ago
progressbar.min.js
1 year ago
randomColor.js
2 years ago
randomColor.min.js
2 years ago
settings.js
3 weeks ago
settings.min.js
3 weeks ago
shortcode-form-embed.js
2 years ago
shortcode-form-embed.min.js
2 years ago
tool-import-entries.js
2 years ago
tool-import-entries.min.js
2 years ago
tools.js
3 weeks ago
tools.min.js
3 weeks ago
upgrade.js
3 weeks ago
upgrade.min.js
3 weeks ago
customize-controls.js
1199 lines
| 1 | |
| 2 | /* global wp, _wpCustomizeBackground, _evfCustomizeControlsL10n */ |
| 3 | ( function( $, api, data ) { |
| 4 | 'use strict'; |
| 5 | |
| 6 | // Modify customize info. |
| 7 | api.bind( 'ready', function() { |
| 8 | $( '#customize-info' ).find( '.panel-title.site-title' ).text( data.panelTitle ); |
| 9 | $( '#customize-info' ).find( '.customize-panel-description:first' ).text( data.panelDescription ); |
| 10 | $('#customize-controls').addClass('wpeverest-customizer-style'); |
| 11 | |
| 12 | function getQueryParam(param) { |
| 13 | var queryString = window.location.search.substring(1); |
| 14 | var params = new URLSearchParams(queryString); |
| 15 | return params.get(param); |
| 16 | } |
| 17 | |
| 18 | |
| 19 | var formId = getQueryParam('form_id'); |
| 20 | var fieldLabelSelectorStart = '#customize-control-everest_forms_styles-' + formId + '-typography-field_labels_font_size'; |
| 21 | var fieldLabelSelectorEnd = '#customize-control-everest_forms_styles-' + formId + '-typography-field_labels_padding'; |
| 22 | var subfieldLabelSelectorStart = '#customize-control-everest_forms_styles-' + formId + '-typography-field_sublabels_font_size'; |
| 23 | var subfieldLabelSelectorEnd = '#customize-control-everest_forms_styles-' + formId + '-typography-field_sublabels_padding'; |
| 24 | var fontColorTypography = '#customize-control-everest_forms_styles-' + formId + '-typography-field_labels_font_color'; |
| 25 | var targetSelector = fontColorTypography + ' .wp-color-result'; |
| 26 | var currentStyle = $(targetSelector).attr('style'); |
| 27 | if (currentStyle) { |
| 28 | var styleArray = currentStyle.split(';'); |
| 29 | |
| 30 | var updatedStyleArray = styleArray.map(function(style) { |
| 31 | if (style.trim() !== '') { |
| 32 | var [property, value] = style.split(':'); |
| 33 | return `${property.trim()}: ${value.trim()} !important`; |
| 34 | } |
| 35 | return ''; |
| 36 | }); |
| 37 | |
| 38 | var updatedStyle = updatedStyleArray.join('; '); |
| 39 | $(targetSelector).removeAttr('style'); |
| 40 | $(targetSelector).attr('style', updatedStyle); |
| 41 | } |
| 42 | if (formId) { |
| 43 | setTimeout(function() { |
| 44 | |
| 45 | var globalSelectors = [ |
| 46 | { |
| 47 | className: 'everest-forms-border_type_option', |
| 48 | selectors: [ |
| 49 | '-form_container-border_type', |
| 50 | '-field_styles-border_type', |
| 51 | '-file_upload_styles-border_type', |
| 52 | '-button-border_type', |
| 53 | '-success_message-border_type', |
| 54 | '-error_message-border_type', |
| 55 | '-validation_message-border_type' |
| 56 | ] |
| 57 | }, |
| 58 | { |
| 59 | className: 'everest-forms-padding_option', |
| 60 | selectors: [ |
| 61 | '-form_container-padding', |
| 62 | '-typography-field_labels_padding', |
| 63 | '-typography-field_sublabels_padding', |
| 64 | '-typography-field_styles_padding', |
| 65 | '-typography-section_title_padding', |
| 66 | '-typography-file_upload_padding', |
| 67 | '-typography-button_padding' |
| 68 | ] |
| 69 | }, |
| 70 | { |
| 71 | className: 'everest-forms-border_option', |
| 72 | selectors: [ |
| 73 | '-form_container-border_width', |
| 74 | '-form_container-border_color', |
| 75 | '-field_styles-border_width', |
| 76 | '-file_upload_styles-border_width', |
| 77 | '-button-border_width', |
| 78 | '-success_message-border_width', |
| 79 | '-success_message-border_color', |
| 80 | '-error_message-border_width', |
| 81 | '-error_message-border_color', |
| 82 | '-validation_message-border_width', |
| 83 | '-validation_message-border_color' |
| 84 | ] |
| 85 | }, |
| 86 | { |
| 87 | className: 'everest-forms-background_image_option', |
| 88 | selectors: [ |
| 89 | '-form_container-background_preset', |
| 90 | '-form_container-background_position', |
| 91 | '-form_container-background_size', |
| 92 | '-form_container-background_repeat', |
| 93 | '-form_container-background_attachment', |
| 94 | '-form_container-opacity' |
| 95 | ] |
| 96 | }, |
| 97 | { |
| 98 | className: 'everest-forms-typography_font_option', |
| 99 | selectors: [ |
| 100 | '-typography-field_labels_font_size', |
| 101 | '-typography-field_labels_font_color', |
| 102 | '-typography-field_labels_font_style', |
| 103 | '-typography-field_labels_text_alignment', |
| 104 | '-typography-field_labels_line_height', |
| 105 | '-typography-field_labels_margin', |
| 106 | '-typography-field_sublabels_font_size', |
| 107 | '-typography-field_sublabels_font_color', |
| 108 | '-typography-field_sublabels_font_style', |
| 109 | '-typography-field_sublabels_text_alignment', |
| 110 | '-typography-field_sublabels_line_height', |
| 111 | '-typography-field_sublabels_margin', |
| 112 | '-typography-field_sublabels_font_size', |
| 113 | '-typography-field_styles_font_size', |
| 114 | '-typography-field_styles_font_color', |
| 115 | '-typography-field_styles_font_size', |
| 116 | '-typography-field_styles_placeholder_font_color', |
| 117 | '-typography-field_styles_font_style', |
| 118 | '-typography-field_styles_alignment', |
| 119 | '-typography-field_styles_border_color', |
| 120 | '-typography-field_styles_border_focus_color', |
| 121 | '-typography-field_styles_background_color', |
| 122 | '-typography-field_styles_margin', |
| 123 | '-typography-field_description_font_size', |
| 124 | '-typography-field_description_font_color', |
| 125 | '-typography-field_description_font_style', |
| 126 | '-typography-field_description_text_alignment', |
| 127 | '-typography-field_description_line_height', |
| 128 | '-typography-field_description_margin', |
| 129 | '-typography-section_title_font_size', |
| 130 | '-typography-section_title_font_color', |
| 131 | '-typography-section_title_font_style', |
| 132 | '-typography-section_title_text_alignment', |
| 133 | '-typography-section_title_line_height', |
| 134 | '-typography-section_title_margin', |
| 135 | '-typography-file_upload_font_size', |
| 136 | '-typography-file_upload_font_color', |
| 137 | '-typography-file_upload_background_color', |
| 138 | '-typography-file_upload_icon_background_color', |
| 139 | '-typography-file_upload_icon_color', |
| 140 | '-typography-file_upload_border_color', |
| 141 | '-typography-file_upload_margin', |
| 142 | '-typography-checkbox_radio_font_size', |
| 143 | '-typography-checkbox_radio_font_color', |
| 144 | '-typography-checkbox_radio_font_style', |
| 145 | '-typography-checkbox_radio_alignment', |
| 146 | '-typography-checkbox_radio_size', |
| 147 | '-typography-checkbox_radio_color', |
| 148 | '-typography-checkbox_radio_checked_color', |
| 149 | '-typography-checkbox_radio_margin', |
| 150 | '-typography-button_font_size', |
| 151 | '-typography-button_font_style', |
| 152 | '-typography-button_font_color', |
| 153 | '-typography-button_hover_font_color', |
| 154 | '-typography-button_background_color', |
| 155 | '-typography-button_hover_background_color', |
| 156 | '-typography-button_alignment', |
| 157 | '-typography-button_border_color', |
| 158 | '-typography-button_border_hover_color', |
| 159 | '-typography-button_line_height', |
| 160 | '-typography-button_margin', |
| 161 | '-success_message-font_size', |
| 162 | '-success_message-font_style', |
| 163 | '-success_message-text_alignment', |
| 164 | '-error_message-font_size', |
| 165 | '-error_message-font_style', |
| 166 | '-error_message-text_alignment', |
| 167 | '-validation_message-font_size', |
| 168 | '-validation_message-font_style', |
| 169 | '-validation_message-text_alignment' |
| 170 | ] |
| 171 | } |
| 172 | ]; |
| 173 | |
| 174 | globalSelectors.forEach(function(group) { |
| 175 | group.selectors.forEach(function(selector) { |
| 176 | var allSelector = '#customize-control-everest_forms_styles-' + formId + selector; |
| 177 | $(allSelector).addClass(group.className); |
| 178 | }); |
| 179 | }); |
| 180 | }, 3000); |
| 181 | |
| 182 | if (_evfCustomizeControlsL10n.is_pro === "" ){ |
| 183 | const isTemplatePro = `image-radio-everest_forms_styles[${formId}][template]`; |
| 184 | document.querySelectorAll(`input[name="${isTemplatePro}"]`) |
| 185 | .forEach(element => { |
| 186 | if (['layout-five','layout-six','layout-seven','layout-eight','layout-ten','layout-eleven'].includes(element.value)) { |
| 187 | element.classList.add('everest-forms-pro-template'); |
| 188 | } |
| 189 | }); |
| 190 | } |
| 191 | } |
| 192 | |
| 193 | } ); |
| 194 | |
| 195 | /** |
| 196 | * A toggle switch control. |
| 197 | * |
| 198 | * @class wp.customize.ToggleControl |
| 199 | * @augments wp.customize.Control |
| 200 | */ |
| 201 | api.ToggleControl = api.Control.extend( { |
| 202 | |
| 203 | /** |
| 204 | * Initialize behaviors. |
| 205 | * |
| 206 | * @returns {void} |
| 207 | */ |
| 208 | ready: function() { |
| 209 | var control = this; |
| 210 | |
| 211 | control.container.on( 'change', 'input:checkbox', function() { |
| 212 | var value = this.checked ? true : false; |
| 213 | control.setting.set( value ); |
| 214 | } ); |
| 215 | } |
| 216 | }); |
| 217 | |
| 218 | /** |
| 219 | * A range slider control. |
| 220 | * |
| 221 | * @class wp.customize.SliderControl |
| 222 | * @augments wp.customize.Class |
| 223 | */ |
| 224 | api.SliderControl = api.Control.extend( { |
| 225 | |
| 226 | /** |
| 227 | * Initialize behaviors. |
| 228 | * |
| 229 | * @returns {void} |
| 230 | */ |
| 231 | ready: function ready() { |
| 232 | var control = this, |
| 233 | $container = control.container, |
| 234 | $slider = $container.find( '.everest-forms-slider' ), |
| 235 | $input = $container.find( '.everest-forms-slider-input input[type="number"]' ), |
| 236 | min = Number( $input.attr( 'min' ) ), |
| 237 | max = Number( $input.attr( 'max' ) ), |
| 238 | step = Number( $input.attr( 'step' ) ); |
| 239 | |
| 240 | $slider.slider( { |
| 241 | range : 'min', |
| 242 | min : min, |
| 243 | max : max, |
| 244 | value : $input.val(), |
| 245 | step : step, |
| 246 | slide: function ( event, ui ) { |
| 247 | // Trigger keyup in input. |
| 248 | $input.val( ui.value ).keyup(); |
| 249 | }, |
| 250 | change: function ( event, ui ) { |
| 251 | control.setting.set( ui.value ); |
| 252 | } |
| 253 | } ); |
| 254 | |
| 255 | control.container.on( 'click', '.reset', function(e) { |
| 256 | e.preventDefault(); |
| 257 | $slider.slider( 'option', 'value', control.params.default ); |
| 258 | } ); |
| 259 | |
| 260 | control.container.on( 'change keyup input', 'input.slider-input', function(e) { |
| 261 | if ( ( 'keyup' === e.type || 'input' === e.type ) && '' === $( this ).val() ) { |
| 262 | return; |
| 263 | } |
| 264 | $slider.slider( 'option', 'value', $( this ).val() ); |
| 265 | } ); |
| 266 | } |
| 267 | } ); |
| 268 | |
| 269 | /** |
| 270 | * A enhanced select2 control. |
| 271 | * |
| 272 | * @class wp.customize.Select2Control |
| 273 | * @augments wp.customize.Class |
| 274 | */ |
| 275 | api.Select2Control = api.Control.extend( { |
| 276 | |
| 277 | /** |
| 278 | * Initialize behaviors. |
| 279 | * |
| 280 | * @returns {void} |
| 281 | */ |
| 282 | ready: function ready() { |
| 283 | var control = this, |
| 284 | $container = control.container, |
| 285 | $select_input = $container.find( '.evf-select2' ); |
| 286 | |
| 287 | // Enhanced Select2. |
| 288 | $select_input.select2({ |
| 289 | minimumResultsForSearch: 10, |
| 290 | allowClear: $select_input.data( 'allow_clear' ) ? true : false, |
| 291 | placeholder: $select_input.data( 'placeholder' ) |
| 292 | }); |
| 293 | } |
| 294 | } ); |
| 295 | |
| 296 | /** |
| 297 | * A dimension control. |
| 298 | * |
| 299 | * @class wp.customize.DimensionControl |
| 300 | * @augments wp.customize.Class |
| 301 | */ |
| 302 | api.DimensionControl = api.Control.extend( { |
| 303 | |
| 304 | /** |
| 305 | * Initialize behaviors. |
| 306 | * |
| 307 | * @returns {void} |
| 308 | */ |
| 309 | ready: function() { |
| 310 | var control = this, |
| 311 | $container = control.container, |
| 312 | $inputs = $container.find( '.dimension-input' ); |
| 313 | |
| 314 | // Hide except first responsive item |
| 315 | control.container.find('.responsive-tabs li:not(:first)').hide(); |
| 316 | |
| 317 | control.container.on( 'keyup input', '.dimension-input', function () { |
| 318 | var this_input = $( this ), |
| 319 | key = this_input.attr('name'), |
| 320 | min = parseInt( this_input.attr('min') ), |
| 321 | max = parseInt( this_input.attr('max') ); |
| 322 | |
| 323 | // Number validation for min or max value. |
| 324 | if( this_input.val() < min ) { |
| 325 | this_input.val( this_input.attr('min') ); |
| 326 | } |
| 327 | if( this_input.val() > max ) { |
| 328 | this_input.val( this_input.attr('max') ); |
| 329 | } |
| 330 | if( control.is_anchor() ){ |
| 331 | $inputs.each( function(index, input) { |
| 332 | $( input ).val( this_input.val() ); |
| 333 | control.saveValue( $( input ).attr('name'), this_input.val() ); |
| 334 | } ); |
| 335 | } else { |
| 336 | control.saveValue( key, this_input.val() ); |
| 337 | } |
| 338 | } ); |
| 339 | |
| 340 | control.container.on( 'change', '.dimension-unit-item input[type="radio"]', function() { |
| 341 | control.saveValue( 'unit', $( this ).val() ); |
| 342 | } ); |
| 343 | |
| 344 | control.container.on( 'change', '.dimension-anchor', function() { |
| 345 | if( $( this ).is( ':checked' ) ) { |
| 346 | $( this ).parent( 'label' ).removeClass( 'unlinked' ).addClass( 'linked' ); |
| 347 | $inputs.first().trigger( 'keyup' ); |
| 348 | }else{ |
| 349 | $( this ).parent( 'label' ).removeClass( 'linked' ).addClass( 'unlinked' ); |
| 350 | } |
| 351 | } ); |
| 352 | |
| 353 | control.container.on( 'change', '.responsive-tab-item input[type="radio"]', function() { |
| 354 | var value = control.get_value(); |
| 355 | var this_value = $(this).val(); |
| 356 | |
| 357 | if ( value[this_value] !== undefined ) { |
| 358 | $inputs.each( function( index, input ) { |
| 359 | $( input ).val( value[this_value][$( input ).attr('name')] ); |
| 360 | } ); |
| 361 | control.container.find( '.dimension-unit-item input[value="' + value[this_value].unit + '"]' ).attr( 'checked', 'checked' ); |
| 362 | } else{ |
| 363 | $inputs.val( '' ); |
| 364 | } |
| 365 | control.saveValue( 'top', $container.find( 'input[name="top"]' ).val() ); |
| 366 | } ); |
| 367 | |
| 368 | // Dimension reset |
| 369 | control.container.on("click", ".reset", function (e) { |
| 370 | e.preventDefault(); |
| 371 | $inputs.each(function (index,input) { |
| 372 | if(control.params.default.desktop) { |
| 373 | $(input).val(control.params.default.desktop[$(input).attr("name")]); |
| 374 | control.saveValue( |
| 375 | $(input).attr("name"), |
| 376 | control.params.default.desktop[$(input).attr("name")] |
| 377 | ); |
| 378 | } else { |
| 379 | $(input).val(control.params.default[$(input).attr("name")]); |
| 380 | control.saveValue( |
| 381 | $(input).attr("name"), |
| 382 | control.params.default[$(input).attr("name")] |
| 383 | ); |
| 384 | } |
| 385 | }); |
| 386 | }); |
| 387 | |
| 388 | // Hide show buttons. |
| 389 | control.container.on( 'click', '.responsive-tab-item input[type="radio"]', function() { |
| 390 | var $this = $( this ); |
| 391 | var current_tab = $this.val(); |
| 392 | var $all_responsive_tabs = $('#customize-controls').find('.responsive-tab-item input[type="radio"][value="' + current_tab + '"]').prop('checked', true); |
| 393 | $all_responsive_tabs.each(function(index, element) { |
| 394 | var $tab_item = $( element ).closest( '.responsive-tab-item' ).closest('li'); |
| 395 | if( $tab_item.index() === 0 ){ |
| 396 | $tab_item.siblings().toggle(); |
| 397 | } |
| 398 | } ); |
| 399 | // Set the toggled device. |
| 400 | api.previewedDevice.set( current_tab ); |
| 401 | } ); |
| 402 | }, |
| 403 | |
| 404 | /** |
| 405 | * Returns anchor status. |
| 406 | */ |
| 407 | is_anchor: function() { |
| 408 | return $( this.container ).find( '.dimension-anchor' ).is(':checked'); |
| 409 | }, |
| 410 | |
| 411 | /** |
| 412 | * Returns responsive selected. |
| 413 | */ |
| 414 | selected_responsive: function() { |
| 415 | return $( this.container ).find( '.responsive-tab-item input[type="radio"]:checked' ).val(); |
| 416 | }, |
| 417 | |
| 418 | /** |
| 419 | * Returns Unit selected. |
| 420 | */ |
| 421 | selected_unit: function() { |
| 422 | return $( this.container ).find( '.dimension-unit-item input[type="radio"]:checked' ).val(); |
| 423 | }, |
| 424 | |
| 425 | /** |
| 426 | * Returns Value Object. |
| 427 | */ |
| 428 | get_value: function() { |
| 429 | return Object.assign({}, this.setting._value); |
| 430 | }, |
| 431 | |
| 432 | /** |
| 433 | * Saves the value. |
| 434 | */ |
| 435 | saveValue: function ( property, value ) { |
| 436 | var control = this, |
| 437 | input = control.container.find('.dimension-hidden-value' ), |
| 438 | val = control.get_value(); |
| 439 | |
| 440 | if ( control.params.responsive === true ) { |
| 441 | if ( undefined === val[control.selected_responsive()] ) { |
| 442 | val[control.selected_responsive()] = {}; |
| 443 | } |
| 444 | |
| 445 | val[control.selected_responsive()][property] = value; |
| 446 | if ( control.params.unit_choices.length > 0 ) { |
| 447 | val[control.selected_responsive()].unit = control.selected_unit(); |
| 448 | } |
| 449 | } else{ |
| 450 | val[property] = value; |
| 451 | if( Object.keys(control.params.unit_choices).length > 0 ) { |
| 452 | val.unit = control.selected_unit(); |
| 453 | } |
| 454 | } |
| 455 | |
| 456 | jQuery( input ).val( JSON.stringify( val ) ).trigger( 'change' ); |
| 457 | control.setting.set( val ); |
| 458 | } |
| 459 | } ); |
| 460 | |
| 461 | /** |
| 462 | * An image checkbox control. |
| 463 | * |
| 464 | * @class wp.customize.ImageCheckboxControl |
| 465 | * @augments wp.customize.Class |
| 466 | */ |
| 467 | api.ImageCheckboxControl = api.Control.extend( { |
| 468 | |
| 469 | /** |
| 470 | * Initialize behaviors. |
| 471 | * |
| 472 | * @returns {void} |
| 473 | */ |
| 474 | ready: function ready() { |
| 475 | var control = this, |
| 476 | $container = control.container; |
| 477 | |
| 478 | $container.on('change', 'input[type="checkbox"]', function() { |
| 479 | control.saveValue( $( this ).val(), $( this ).is( ':checked' ) ); |
| 480 | } ); |
| 481 | }, |
| 482 | |
| 483 | /** |
| 484 | * Saves the value. |
| 485 | */ |
| 486 | saveValue: function ( property, value ) { |
| 487 | var control = this, |
| 488 | input = control.container.find('.image-checkbox-hidden-value' ), |
| 489 | val = control.params.value; |
| 490 | |
| 491 | val[property] = value; |
| 492 | val = Object.assign({}, val); |
| 493 | |
| 494 | jQuery( input ).val( JSON.stringify( val ) ).trigger( 'change' ); |
| 495 | |
| 496 | control.setting.set( val ); |
| 497 | } |
| 498 | } ); |
| 499 | |
| 500 | |
| 501 | |
| 502 | |
| 503 | api.ColorPaletteControl = api.Control.extend({ |
| 504 | ready: function () { |
| 505 | var control = this; |
| 506 | if (control.container.find('label').hasClass('evf-pro-palette')) { |
| 507 | return; |
| 508 | } |
| 509 | control.container.on('change', 'input[type="checkbox"]', function () { |
| 510 | var key = $(this).data('key'); |
| 511 | var value = $(this).val(); |
| 512 | |
| 513 | var $saveButtonWrapper = $('#customize-save-button-wrapper'); |
| 514 | |
| 515 | var name = $(this).attr('name').match(/\[(\w+)\]$/)?.[1]; |
| 516 | |
| 517 | $saveButtonWrapper |
| 518 | .find('input[type="submit"]') |
| 519 | .on('click', function () { |
| 520 | if (name) { |
| 521 | document.cookie = `color_palette=${localStorage.getItem('color_palette', name)}; path=/`; |
| 522 | } |
| 523 | }); |
| 524 | document.cookie = `color_palette_save=${name}; path=/`; |
| 525 | localStorage.setItem('color_palette', name); |
| 526 | $(this).closest('li').find('label').addClass('evf-active-color-palette'); |
| 527 | control.saveValue(key, value); |
| 528 | }); |
| 529 | |
| 530 | |
| 531 | control.container.on('click', '.color-palette', function () { |
| 532 | var $currentGroup = $(this).closest('.customize-control-evf-color_palette'); |
| 533 | |
| 534 | $('.customize-control-evf-color_palette').not($currentGroup).find('label').removeClass('evf-active-color-palette'); |
| 535 | $('.customize-control-evf-color_palette').not($currentGroup).find('input[type="checkbox"]').prop('checked', false); |
| 536 | $(this).find('input[type="checkbox"]').prop('checked', true).change(); |
| 537 | }); |
| 538 | |
| 539 | control.container.on('click', '.color-palette-edit-icon', function () { |
| 540 | var labelElement = $(this).closest('label'); |
| 541 | var dataCustom = labelElement.attr('data-custom'); |
| 542 | var iconElement = $(this); |
| 543 | var editInterface = control.container.find('.color-palette-edit-interface'); |
| 544 | |
| 545 | if (editInterface.length) { |
| 546 | editInterface.remove(); |
| 547 | } else if (dataCustom === undefined) { |
| 548 | control.showEditInterface(); |
| 549 | } |
| 550 | |
| 551 | if (dataCustom === 'evf-custom-color-palette') { |
| 552 | if (iconElement.html() === '✎') { |
| 553 | control.showEditInterface(); |
| 554 | iconElement.html('✖'); |
| 555 | } else { |
| 556 | iconElement.html('✎'); |
| 557 | } |
| 558 | } else if (dataCustom === '') { |
| 559 | $.confirm({ |
| 560 | title: 'Edit Color Palette', |
| 561 | content: _evfCustomizeControlsL10n.color_palette_edit_title + |
| 562 | '<br>' + |
| 563 | '<div style="color: #ff4d4f; padding-top: 10px;">' + |
| 564 | '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-right: 2px;"></i>' + |
| 565 | _evfCustomizeControlsL10n.color_palette_edit_description + |
| 566 | '</div>', |
| 567 | theme: 'modern', |
| 568 | type: 'red', |
| 569 | boxWidth: '30%', |
| 570 | useBootstrap: false, |
| 571 | backgroundDismiss: true, |
| 572 | buttons: { |
| 573 | cancel: { |
| 574 | text: 'Cancel', |
| 575 | btnClass: 'btn-light', |
| 576 | action: function () { |
| 577 | iconElement.html('✎'); |
| 578 | } |
| 579 | }, |
| 580 | confirm: { |
| 581 | text: 'Confirm', |
| 582 | btnClass: 'btn-primary', |
| 583 | action: function () { |
| 584 | control.showEditInterface(); |
| 585 | iconElement.html('✖'); |
| 586 | } |
| 587 | } |
| 588 | }, |
| 589 | onOpenBefore: function() { |
| 590 | } |
| 591 | }); |
| 592 | } |
| 593 | }); |
| 594 | }, |
| 595 | |
| 596 | saveValue: function (property, value) { |
| 597 | var control = this; |
| 598 | var input = control.container.find('.color-palette-hidden-value'); |
| 599 | var val = control.setting.get(); |
| 600 | |
| 601 | // Ensure val is an object |
| 602 | if (typeof val !== 'object') { |
| 603 | val = {}; |
| 604 | } |
| 605 | |
| 606 | |
| 607 | if (value) { |
| 608 | val[property] = value; |
| 609 | } |
| 610 | |
| 611 | $(input).val(JSON.stringify(val)).trigger('change'); |
| 612 | |
| 613 | $.each(val, (key, value) => { |
| 614 | // Check if the key is a string representation of a number |
| 615 | if (['0', '1', '2', '3', '4', '5'].includes(key) || value === true || value === false) { |
| 616 | delete val[key]; |
| 617 | } |
| 618 | }); |
| 619 | |
| 620 | |
| 621 | // Set the updated val object |
| 622 | control.setting.set(val); |
| 623 | }, |
| 624 | |
| 625 | showEditInterface: function () { |
| 626 | var control = this; |
| 627 | var editInterfaceHtml = ` |
| 628 | <div class="color-palette-edit-interface"> |
| 629 | <input type="text" class="color-palette-name-input" value="${control.params.label}-${Math.floor(10 + Math.random() * 90)}" /> |
| 630 | <div class="color-palette-items"> |
| 631 | ${Object.keys(control.params.choices).map(key => ` |
| 632 | <div class="color-palette-edit-item"> |
| 633 | <label for="color-edit-${control.params.id}-${key}" data-key="${control.params.choices[key].name}"> |
| 634 | ${control.params.choices[key].name.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')} |
| 635 | </label> |
| 636 | <input id="color-edit-${control.params.id}-${key}" type="text" value="${control.params.choices[key].color}" class="color-picker"/> |
| 637 | </div> |
| 638 | `).join('')} |
| 639 | </div> |
| 640 | <button class="color-palette-save-button">Save</button> |
| 641 | </div> |
| 642 | `; |
| 643 | |
| 644 | control.container.append(editInterfaceHtml); |
| 645 | control.container.find('.color-picker').wpColorPicker(); |
| 646 | control.container.on('click', '.color-palette-save-button', function () { |
| 647 | control.saveEditedColors(); |
| 648 | }); |
| 649 | |
| 650 | control.container.find('.color-palette-name-input').on('change', function () { |
| 651 | control.params.label = $(this).val(); |
| 652 | }); |
| 653 | }, |
| 654 | |
| 655 | saveEditedColors: function () { |
| 656 | var control = this; |
| 657 | var editedColors = {}; |
| 658 | |
| 659 | control.container.find('.color-palette-edit-item').each(function () { |
| 660 | var key = $(this).find('label').data('key').trim().toLowerCase().replace(/color\s+.*/, ''); |
| 661 | var color = $(this).find('.color-picker').val(); |
| 662 | editedColors[key] = color; |
| 663 | }); |
| 664 | |
| 665 | control.setting.set(editedColors); |
| 666 | control.container.find('.color-palette-hidden-value').val(JSON.stringify(editedColors)).trigger('change'); |
| 667 | $.post(_evfCustomizeControlsL10n.ajax_url, { |
| 668 | action: 'save_custom_color_palette', |
| 669 | form_id: _evfCustomizeControlsL10n.form_id, |
| 670 | _nonce: _evfCustomizeControlsL10n.color_palette_nonce, |
| 671 | colors: editedColors, |
| 672 | label: control.params.label |
| 673 | }).done(function (response) { |
| 674 | if (response.success) { |
| 675 | $.alert({ |
| 676 | title: '<span style="color: #28a745; font-weight: bold;"><span class="dashicons dashicons-yes"></span> Success!</span>', |
| 677 | content: response.data, |
| 678 | icon: '', |
| 679 | theme: 'modern', |
| 680 | type: 'green', |
| 681 | boxWidth: '20%', |
| 682 | useBootstrap: false, |
| 683 | backgroundDismiss: true, |
| 684 | buttons: { |
| 685 | OK: { |
| 686 | text: 'OK', |
| 687 | btnClass: 'btn-green', |
| 688 | action: function() { |
| 689 | window.location.reload(); |
| 690 | } |
| 691 | } |
| 692 | }, |
| 693 | onOpenBefore: function() { |
| 694 | this.$jconfirmBox.css({ |
| 695 | 'background': '#ffffff', |
| 696 | 'border-top': '6px solid #198754', |
| 697 | 'border-radius': '10px', |
| 698 | 'box-shadow': '0px 4px 8px rgba(0, 0, 0, 0.1)', |
| 699 | 'padding': '20px', |
| 700 | }); |
| 701 | |
| 702 | this.$content.css({ |
| 703 | 'color': '#383838', |
| 704 | 'font-size': '16px', |
| 705 | 'line-height': '24px', |
| 706 | 'text-align': 'center', |
| 707 | }); |
| 708 | |
| 709 | this.$title.css({ |
| 710 | 'text-align': 'center', |
| 711 | 'margin-bottom': '10px', |
| 712 | 'color': '#222222' |
| 713 | }); |
| 714 | |
| 715 | this.$btnc.find('.btn-green').css({ |
| 716 | 'background': '#2271b1', |
| 717 | 'color': '#fff', |
| 718 | 'border': '1px solid #2271b1', |
| 719 | 'padding': '10px 20px', |
| 720 | 'border-radius': '5px', |
| 721 | 'font-weight': 'bold' |
| 722 | }); |
| 723 | } |
| 724 | }); |
| 725 | |
| 726 | $( "#save.save" ).trigger( 'click' ); |
| 727 | } |
| 728 | }).fail(function (error) {}); |
| 729 | control.container.find('.color-palette-edit-interface').remove(); |
| 730 | } |
| 731 | }); |
| 732 | |
| 733 | |
| 734 | |
| 735 | |
| 736 | api.controlConstructor = $.extend( |
| 737 | api.controlConstructor, { |
| 738 | 'evf-color_palette': api.ColorPaletteControl, |
| 739 | 'evf-color': api.ColorControl, |
| 740 | 'evf-toggle': api.ToggleControl, |
| 741 | 'evf-slider': api.SliderControl, |
| 742 | 'evf-select2': api.Select2Control, |
| 743 | 'evf-dimension': api.DimensionControl, |
| 744 | 'evf-background': api.BackgroundControl, |
| 745 | 'evf-image_checkbox': api.ImageCheckboxControl, |
| 746 | 'evf-background_image': api.BackgroundImageControl |
| 747 | |
| 748 | } |
| 749 | ); |
| 750 | |
| 751 | $( function() { |
| 752 | |
| 753 | // Control visibility for default controls. |
| 754 | $.each( ['font','form_container','field_styles', 'checkbox_radio_styles', 'button', 'success_message', 'error_message', 'validation_message','typography'], function( i, type ) { |
| 755 | $.each( { |
| 756 | 'show_theme_font': { |
| 757 | controls: [ 'font_family'], |
| 758 | callback: function( to ) { return ! to; } |
| 759 | }, |
| 760 | 'border_type': { |
| 761 | controls: [ 'border_width', 'border_color' ], |
| 762 | callback: function( to ) { return 'none' !== to; } |
| 763 | }, |
| 764 | 'checkbox_radio_style_variation': { |
| 765 | controls: [ 'checkbox_radio_size', 'checkbox_radio_color', 'checkbox_radio_checked_color' ], |
| 766 | callback: function( to ) { return 'default' !== to; }, |
| 767 | }, |
| 768 | 'background_image': { |
| 769 | controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment','opacity' ], |
| 770 | callback: function( to ) { return !! to; } |
| 771 | }, |
| 772 | 'show_submission_message': { |
| 773 | controls: [ 'font_size', 'font_style', 'text_alignment'], |
| 774 | callback: function( to ) { return !! to; } |
| 775 | }, |
| 776 | 'field_labels' : { |
| 777 | controls: [ 'field_labels_font_size','field_labels_font_color','field_labels_font_style','field_labels_text_alignment','field_labels_line_height','field_labels_margin','field_labels_padding'], |
| 778 | callback: function( to ) { return !! to; } |
| 779 | }, |
| 780 | 'field_sublabels' : { |
| 781 | controls: [ 'field_sublabels_font_size','field_sublabels_font_color','field_sublabels_font_style','field_sublabels_text_alignment','field_sublabels_line_height','field_sublabels_margin','field_sublabels_padding'], |
| 782 | callback: function( to ) { return !! to; } |
| 783 | }, |
| 784 | 'field_description' : { |
| 785 | controls: [ 'field_description_font_size','field_description_font_color','field_description_font_style','field_description_text_alignment','field_description_line_height','field_description_margin','field_description_padding'], |
| 786 | callback: function( to ) { return !! to; } |
| 787 | }, |
| 788 | 'file_upload' : { |
| 789 | controls: [ 'file_upload_font_size','file_upload_font_color','file_upload_font_style','file_upload_background_color','file_upload_icon_background_color','file_upload_icon_color','file_upload_border_color','file_upload_text_alignment','file_upload_line_height','file_upload_margin','file_upload_padding'], |
| 790 | callback: function( to ) { return !! to; } |
| 791 | }, |
| 792 | 'checkbox_radio' : { |
| 793 | controls: [ 'checkbox_radio_font_size','checkbox_radio_font_color','checkbox_radio_font_style','checkbox_radio_text_alignment','checkbox_radio_style_variation','checkbox_radio_line_height','checkbox_radio_margin','checkbox_radio_padding','checkbox_radio_alignment','checkbox_radio_size','checkbox_radio_color','checkbox_radio_checked_color'], |
| 794 | callback: function( to ) { return !! to; } |
| 795 | }, |
| 796 | 'button' : { |
| 797 | controls: [ 'button_font_size','button_font_color','button_font_style','button_text_alignment','button_line_height','button_margin','button_padding','button_border_hover_color','button_border_color','button_alignment','button_hover_background_color','button_hover_font_color','button_background_color'], |
| 798 | callback: function( to ) { return !! to; } |
| 799 | }, |
| 800 | 'field_styles' : { |
| 801 | controls: [ 'field_styles_font_size','field_styles_font_color','field_styles_font_style','field_styles_alignment','field_styles_border_width','field_styles_border_focus_color','field_styles_border_radius','field_styles_background_color','field_styles_margin','field_styles_padding','field_styles_border_type','field_styles_placeholder_font_color','field_styles_border_color'], |
| 802 | callback: function( to ) { return !! to; } |
| 803 | }, |
| 804 | 'section_title' : { |
| 805 | controls: [ 'section_title_font_size','section_title_font_color','section_title_font_style','section_title_text_alignment','section_title_line_height','section_title_margin','section_title_padding'], |
| 806 | callback: function( to ) { return !! to; } |
| 807 | }, |
| 808 | }, function( settingId, o ) { |
| 809 | api( 'everest_forms_styles[' + data.form_id + '][' + type + '][' + settingId + ']', function( setting ) { |
| 810 | $.each( o.controls, function( i, controlId ) { |
| 811 | api.control( 'everest_forms_styles[' + data.form_id + '][' + type + '][' + controlId + ']', function( control ) { |
| 812 | var visibility = function( to ) { |
| 813 | control.container.toggle( o.callback( to ) ); |
| 814 | }; |
| 815 | |
| 816 | visibility( setting.get() ); |
| 817 | setting.bind( visibility ); |
| 818 | } ); |
| 819 | } ); |
| 820 | } ); |
| 821 | } ); |
| 822 | } ); |
| 823 | |
| 824 | api.control( 'everest_forms_styles[' + data.form_id + '][form_container][background_preset]', function( control ) { |
| 825 | var visibility, defaultValues, values, toggleVisibility, updateSettings, preset; |
| 826 | |
| 827 | visibility = { // position, size, repeat, attachment |
| 828 | 'default': [ false, false, false, false ], |
| 829 | 'fill': [ true, false, false, false ], |
| 830 | 'fit': [ true, false, true, false ], |
| 831 | 'repeat': [ true, false, false, true ], |
| 832 | 'custom': [ true, true, true, true ] |
| 833 | }; |
| 834 | |
| 835 | defaultValues = [ |
| 836 | _wpCustomizeBackground.defaults['default-position-x'], |
| 837 | _wpCustomizeBackground.defaults['default-position-y'], |
| 838 | _wpCustomizeBackground.defaults['default-size'], |
| 839 | _wpCustomizeBackground.defaults['default-repeat'], |
| 840 | _wpCustomizeBackground.defaults['default-attachment'] |
| 841 | ]; |
| 842 | |
| 843 | values = { // position_x, position_y, size, repeat, attachment |
| 844 | 'default': defaultValues, |
| 845 | 'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ], |
| 846 | 'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ], |
| 847 | 'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ] |
| 848 | }; |
| 849 | |
| 850 | // @todo These should actually toggle the active state, but without the preview overriding the state in data.activeControls. |
| 851 | toggleVisibility = function( preset ) { |
| 852 | _.each( [ 'background_position', 'background_size', 'background_repeat', 'background_attachment' ], function( i, controlId ) { |
| 853 | var control = api.control( 'everest_forms_styles[' + data.form_id + '][form_container][' + controlId + ']' ); |
| 854 | if ( control ) { |
| 855 | control.container.toggle( visibility[ preset ][ i ] ); |
| 856 | } |
| 857 | } ); |
| 858 | }; |
| 859 | |
| 860 | updateSettings = function( preset ) { |
| 861 | _.each( [ 'background_position_x', 'background_position_y', 'background_size', 'background_repeat', 'background_attachment' ], function( settingId, i ) { |
| 862 | var setting = api( 'everest_forms_styles[' + data.form_id + '][form_container][' + settingId + ']' ); |
| 863 | if ( setting ) { |
| 864 | setting.set( values[ preset ][ i ] ); |
| 865 | } |
| 866 | } ); |
| 867 | }; |
| 868 | |
| 869 | preset = control.setting.get(); |
| 870 | toggleVisibility( preset ); |
| 871 | |
| 872 | control.setting.bind( 'change', function( preset ) { |
| 873 | toggleVisibility( preset ); |
| 874 | if ( 'custom' !== preset ) { |
| 875 | updateSettings( preset ); |
| 876 | } |
| 877 | } ); |
| 878 | } ); |
| 879 | |
| 880 | api.control( 'everest_forms_styles[' + data.form_id + '][form_container][background_repeat]', function( control ) { |
| 881 | control.elements[0].unsync( api( 'everest_forms_styles[' + data.form_id + '][form_container][background_repeat]' ) ); |
| 882 | |
| 883 | control.element = new api.Element( control.container.find( 'input' ) ); |
| 884 | control.element.set( 'no-repeat' !== control.setting() ); |
| 885 | |
| 886 | control.element.bind( function( to ) { |
| 887 | control.setting.set( to ? 'repeat' : 'no-repeat' ); |
| 888 | } ); |
| 889 | |
| 890 | control.setting.bind( function( to ) { |
| 891 | control.element.set( 'no-repeat' !== to ); |
| 892 | } ); |
| 893 | } ); |
| 894 | |
| 895 | api.control( 'everest_forms_styles[' + data.form_id + '][form_container][background_attachment]', function( control ) { |
| 896 | control.elements[0].unsync( api( 'everest_forms_styles[' + data.form_id + '][form_container][background_attachment]' ) ); |
| 897 | |
| 898 | control.element = new api.Element( control.container.find( 'input' ) ); |
| 899 | control.element.set( 'fixed' !== control.setting() ); |
| 900 | |
| 901 | control.element.bind( function( to ) { |
| 902 | control.setting.set( to ? 'scroll' : 'fixed' ); |
| 903 | } ); |
| 904 | |
| 905 | control.setting.bind( function( to ) { |
| 906 | control.element.set( 'fixed' !== to ); |
| 907 | } ); |
| 908 | } ); |
| 909 | |
| 910 | api.control( 'everest_forms_styles[' + data.form_id + '][template]', function( control ) { |
| 911 | control.elements[0].bind( function( newval ) { |
| 912 | handleTemplate( newval ); |
| 913 | } ); |
| 914 | } ); |
| 915 | |
| 916 | |
| 917 | var handleTemplate = function (template) { |
| 918 | var setting_link = 'everest_forms_styles[' + data.form_id + ']'; |
| 919 | |
| 920 | if ( 'undefined' === typeof _evfCustomizeControlsL10n.templates[ template ] ) { |
| 921 | return false; |
| 922 | } |
| 923 | |
| 924 | var template_data = _evfCustomizeControlsL10n.templates[ template ].data; |
| 925 | |
| 926 | if ( template_data ) { |
| 927 | $.each(template_data, function (section, section_values) { |
| 928 | $.each(section_values, function (control_key, control_value) { |
| 929 | renderControls( |
| 930 | setting_link + "[" + section + "][" + control_key + "]", |
| 931 | control_value |
| 932 | ); |
| 933 | }); |
| 934 | }); |
| 935 | } |
| 936 | }; |
| 937 | |
| 938 | |
| 939 | var renderControls = function (key, values) { |
| 940 | api.control(key, function (control) { |
| 941 | var $container = control.container; |
| 942 | control.setting.set(values); |
| 943 | |
| 944 | switch (control.params.type) { |
| 945 | case "evf-slider": |
| 946 | var $slider = $container.find( |
| 947 | ".everest-forms-slider" |
| 948 | ); |
| 949 | $slider.slider("option", "value", values); |
| 950 | break; |
| 951 | case "evf-select2": |
| 952 | var $select = $container.find(".evf-select2"); |
| 953 | $select.trigger("change"); |
| 954 | break; |
| 955 | case "evf-image_checkbox": |
| 956 | var $input = $container.find( |
| 957 | ".image-checkbox-hidden-value" |
| 958 | ); |
| 959 | |
| 960 | var new_value = values; |
| 961 | if ( 'string' !== typeof new_value ) { |
| 962 | new_value = JSON.stringify( values ); |
| 963 | } else { |
| 964 | values = JSON.parse( values ); |
| 965 | } |
| 966 | |
| 967 | $input.val( new_value ).trigger("change"); |
| 968 | |
| 969 | $.each(values, function (index, value) { |
| 970 | $container |
| 971 | .find( |
| 972 | '.image-checkbox-wrapper input[value="' + |
| 973 | index + |
| 974 | '"]' |
| 975 | ) |
| 976 | .prop("checked", value); |
| 977 | }); |
| 978 | break; |
| 979 | case "evf-color-palette": |
| 980 | var $input = $container.find( |
| 981 | ".color-palette-hidden-value" |
| 982 | ); |
| 983 | |
| 984 | var new_value = values; |
| 985 | if ( 'string' !== typeof new_value ) { |
| 986 | new_value = JSON.stringify( values ); |
| 987 | } else { |
| 988 | values = JSON.parse( values ); |
| 989 | } |
| 990 | |
| 991 | $input.val( new_value ).trigger("change"); |
| 992 | |
| 993 | $.each(values, function (index, value) { |
| 994 | $container |
| 995 | .find( |
| 996 | '.color-palette-wrapper input[value="' + |
| 997 | index + |
| 998 | '"]' |
| 999 | ) |
| 1000 | .prop("checked", value); |
| 1001 | }); |
| 1002 | break; |
| 1003 | case "evf-dimension": |
| 1004 | var selected_device = $container |
| 1005 | .find( |
| 1006 | '.responsive-tab-item input[type="radio"]:checked' |
| 1007 | ) |
| 1008 | .val(); |
| 1009 | |
| 1010 | if ("undefined" === typeof selected_device) { |
| 1011 | $.each(values, function (index, value) { |
| 1012 | $container |
| 1013 | .find( |
| 1014 | 'input.dimension-input[name="' + |
| 1015 | index + |
| 1016 | '"]' |
| 1017 | ) |
| 1018 | .val(value); |
| 1019 | }); |
| 1020 | } else { |
| 1021 | if ( |
| 1022 | "undefined" !== typeof values[selected_device] |
| 1023 | ) { |
| 1024 | $.each( |
| 1025 | values[selected_device], |
| 1026 | function (index, value) { |
| 1027 | $container |
| 1028 | .find( |
| 1029 | 'input.dimension-input[name="' + |
| 1030 | index + |
| 1031 | '"]' |
| 1032 | ) |
| 1033 | .val(value); |
| 1034 | } |
| 1035 | ); |
| 1036 | } |
| 1037 | } |
| 1038 | break; |
| 1039 | } |
| 1040 | }); |
| 1041 | }; |
| 1042 | |
| 1043 | $(function () { |
| 1044 | |
| 1045 | /** |
| 1046 | * Render fields to create style templates. |
| 1047 | */ |
| 1048 | var render_save_template = function () { |
| 1049 | var form_id = _evfCustomizeControlsL10n.form_id; |
| 1050 | var templates_box = $( |
| 1051 | "#customize-control-everest_forms_styles-" + |
| 1052 | form_id + |
| 1053 | "-template" |
| 1054 | ); |
| 1055 | var save_template_container = $( |
| 1056 | "<div id='everest-forms-save-template-container'></div>" |
| 1057 | ); |
| 1058 | |
| 1059 | save_template_container.append( |
| 1060 | $( |
| 1061 | '<span class="customize-control-title">Create Style Template</span>' |
| 1062 | ) |
| 1063 | ); |
| 1064 | save_template_container.append( |
| 1065 | $( |
| 1066 | '<span class="description customize-control-description">Create a new style template from current styles.</span>' |
| 1067 | ) |
| 1068 | ); |
| 1069 | save_template_container.append( |
| 1070 | $( |
| 1071 | "<input type='text' id='everest-forms-new-template-name' placeholder='Template Name' />" |
| 1072 | ) |
| 1073 | ); |
| 1074 | save_template_container.append( |
| 1075 | $( |
| 1076 | "<div><button class='button button-primary' id='everest-forms-save-template-button'>Create</button></div>" |
| 1077 | ) |
| 1078 | ); |
| 1079 | |
| 1080 | templates_box.before(save_template_container); |
| 1081 | var save_template_btn = save_template_container.find("div button"); |
| 1082 | |
| 1083 | save_template_btn.bind("click", function (e) { |
| 1084 | e.preventDefault(); |
| 1085 | e.stopPropagation(); |
| 1086 | |
| 1087 | if ("disabled" === $("#save.save").attr("disabled")) { |
| 1088 | send_save_template_request( this ); |
| 1089 | } else { |
| 1090 | alert( |
| 1091 | "Please save the unsaved changes to create the template." |
| 1092 | ); |
| 1093 | } |
| 1094 | }); |
| 1095 | }; |
| 1096 | |
| 1097 | |
| 1098 | /** |
| 1099 | * Send post ajax request to save template. |
| 1100 | */ |
| 1101 | var send_save_template_request = function ( el ) { |
| 1102 | var template_name_el = $("#everest-forms-new-template-name"); |
| 1103 | var template_name = template_name_el.val(); |
| 1104 | |
| 1105 | if (template_name.length) { |
| 1106 | $.post(_evfCustomizeControlsL10n.ajax_url, { |
| 1107 | action: "save_template", |
| 1108 | name: template_name, |
| 1109 | form_id: _evfCustomizeControlsL10n.form_id, |
| 1110 | _nonce: _evfCustomizeControlsL10n.save_nonce, |
| 1111 | }).done(function (response) { |
| 1112 | if ( response.success ) { |
| 1113 | api.control( |
| 1114 | "everest_forms_styles[" + data.form_id + "][template]", |
| 1115 | function (control) { |
| 1116 | control.setting.set( response.data.template_id ); |
| 1117 | api.previewer.save(); |
| 1118 | api.bind( 'saved', function() { |
| 1119 | location.reload(); |
| 1120 | }); |
| 1121 | } |
| 1122 | ); |
| 1123 | } else { |
| 1124 | alert( response.data.message ); |
| 1125 | } |
| 1126 | }); |
| 1127 | } else { |
| 1128 | alert("Please provide a suitable template name and try again."); |
| 1129 | } |
| 1130 | }; |
| 1131 | |
| 1132 | /** |
| 1133 | * Add delete icon to templates. |
| 1134 | */ |
| 1135 | var add_delete_template_icon = function() { |
| 1136 | var form_id = _evfCustomizeControlsL10n.form_id; |
| 1137 | var templates_box = $( |
| 1138 | "#customize-control-everest_forms_styles-" + |
| 1139 | form_id + |
| 1140 | "-template" |
| 1141 | ); |
| 1142 | |
| 1143 | var templates = templates_box.find( '.image-radio-wrapper li' ); |
| 1144 | var delete_btn = $( '<span class="evf-delete-template-btn dashicons dashicons-no" title="Delete Template"></span>' ); |
| 1145 | |
| 1146 | templates.each(function() { |
| 1147 | var $this = $(this); |
| 1148 | |
| 1149 | if ( ! ( ['default', 'layout-two','layout-three','layout-four','layout-five','layout-six','layout-seven','layout-eight','layout-nine','layout-ten','layout-eleven'].includes( $this.find('input').val() ) ) ) { |
| 1150 | var custom_delete_btn = delete_btn.clone().hide(); |
| 1151 | |
| 1152 | custom_delete_btn.bind( 'click', function() { |
| 1153 | var confirm_delete = confirm( 'Are you sure you want to delete this template ?' ); |
| 1154 | |
| 1155 | if ( confirm_delete ) { |
| 1156 | send_delete_template_request( $this ); |
| 1157 | } |
| 1158 | }); |
| 1159 | |
| 1160 | $this.append( custom_delete_btn ); |
| 1161 | |
| 1162 | $this.bind( 'mouseover', function() { |
| 1163 | custom_delete_btn.show(); |
| 1164 | }); |
| 1165 | |
| 1166 | $this.bind( 'mouseout', function() { |
| 1167 | custom_delete_btn.hide(); |
| 1168 | }); |
| 1169 | } |
| 1170 | }); |
| 1171 | |
| 1172 | |
| 1173 | /** |
| 1174 | * Send post ajax request to delete template. |
| 1175 | */ |
| 1176 | var send_delete_template_request = function( el ) { |
| 1177 | var template = $( el ); |
| 1178 | var template_name = template.find('input').val(); |
| 1179 | |
| 1180 | $.post(_evfCustomizeControlsL10n.ajax_url, { |
| 1181 | action: "delete_template", |
| 1182 | name: template_name, |
| 1183 | _nonce: _evfCustomizeControlsL10n.delete_nonce, |
| 1184 | }).done(function (data) { |
| 1185 | if ( data.success ) { |
| 1186 | template.remove(); |
| 1187 | } |
| 1188 | }); |
| 1189 | } |
| 1190 | } |
| 1191 | if (_evfCustomizeControlsL10n.is_pro === "1"){ |
| 1192 | render_save_template(); |
| 1193 | add_delete_template_icon(); |
| 1194 | } |
| 1195 | }); |
| 1196 | }) |
| 1197 | |
| 1198 | } )( jQuery, wp.customize, _evfCustomizeControlsL10n ); |
| 1199 |