PluginProbe
Booking Calendar / 11.9
Booking Calendar v11.9
11.9 11.8.4 11.8.3 11.8.2 11.8.1 11.8 11.7 11.6.1 11.6 11.5 11.4.3 11.4.2 11.4.1 11.4 11.3 11.2.1 11.2 11.1 11.0 10.15.7 10.15.6 10.1.3 10.10 10.10.1 10.10.2 All 205 releases
← All changes | includes/page-settings-calendar/_src/settings_calendar_page.js +118 -115 11.3 → 11.9 View file →
@@ -1,4 +1,4 @@
1 1 /**
2 2 * Calendar settings page UI.
3 3 */
4 4 ( function ( $, w ) {
@@ -4,13 +4,14 @@
4 4 ( function ( $, w ) {
5 5 'use strict';
6 6
7 7 var cfg = w.wpbc_settings_calendar_page || {};
8 - var preview_ajax = null;
9 - var preview_timer = 0;
10 - var notice_timer = 0;
11 - var calendar_load_patch_timer = 0;
12 - var last_preview_signature = '';
8 + var preview_ajax = null;
9 + var preview_timer = 0;
10 + var is_saving = false;
11 + var notice_timer = 0;
12 + var calendar_load_patch_timer = 0;
13 + var last_preview_signature = '';
13 14
14 15 function trim_text( value ) {
15 16 return String( value || '' ).trim();
16 17 }
@@ -51,9 +52,9 @@
51 52 var message = cfg.i18n && cfg.i18n.premium_option_notice ? cfg.i18n.premium_option_notice : 'This option is available in Booking Calendar Business Small or higher.';
52 53 var $note;
53 54
54 55 if ( is_range_info ) {
55 - message = cfg.i18n && cfg.i18n.premium_notice ? cfg.i18n.premium_notice : 'Range days selection is available in Booking Calendar Business Small or higher. Open the live demo to test the real behavior.';
56 + message = cfg.i18n && cfg.i18n.premium_notice ? cfg.i18n.premium_notice : 'Advanced range rules are available in Booking Calendar Business Small or higher. Open the live demo to test the real behavior.';
56 57 } else if ( is_changeover_info ) {
57 58 message = cfg.i18n && cfg.i18n.premium_changeover_notice ? cfg.i18n.premium_changeover_notice : 'Changeover days are available in Booking Calendar Business Small or higher. Open the live demo to test the real behavior.';
58 59 }
59 60
@@ -74,42 +75,12 @@
74 75 function is_range_supported() {
75 76 return cfg.is_range_supported === 1 || cfg.is_range_supported === '1' || cfg.is_range_supported === true;
76 77 }
77 78
78 - function is_locked_range_control( field ) {
79 - return ! is_range_supported() && $( field ).is( '[name="booking_type_of_day_selections"][value="range"]' );
80 - }
79 + function is_locked_changeover_control( field ) {
80 + return ! is_range_supported() && $( field ).is( '[name="booking_range_selection_time_is_active"]' );
81 + }
81 82
82 - function is_locked_changeover_control( field ) {
83 - return ! is_range_supported() && $( field ).is( '[name="booking_range_selection_time_is_active"]' );
84 - }
85 -
86 - function get_saved_available_day_mode() {
87 - var mode = cfg.settings && cfg.settings.booking_type_of_day_selections ? String( cfg.settings.booking_type_of_day_selections ) : '';
88 -
89 - return ( 'single' === mode || 'multiple' === mode ) ? mode : 'multiple';
90 - }
91 -
92 - function remember_available_day_selection() {
93 - var $form = get_form();
94 - var mode = $form.find( '[name="booking_type_of_day_selections"]:checked' ).val() || '';
95 -
96 - if ( 'single' === mode || 'multiple' === mode ) {
97 - $form.data( 'wpbc-calendar-available-day-mode', mode );
98 - }
99 - }
100 -
101 - function restore_available_day_selection() {
102 - var $form = get_form();
103 - var mode = $form.data( 'wpbc-calendar-available-day-mode' ) || get_saved_available_day_mode();
104 -
105 - if ( 'single' !== mode && 'multiple' !== mode ) {
106 - mode = 'multiple';
107 - }
108 -
109 - $form.find( '[name="booking_type_of_day_selections"][value="' + mode + '"]' ).prop( 'checked', true );
110 - }
111 -
112 83 function switch_panel( $tab ) {
113 84 var panel_id = $tab.attr( 'aria-controls' );
114 85 var $tabs = $tab.closest( '.wpbc_calendar_rightbar_tabs' ).find( '[role="tab"]' );
115 86 var $panels = $( '.wpbc_calendar_rightbar_panels [role="tabpanel"]' );
@@ -251,12 +222,12 @@
251 222 function get_form() {
252 223 return $( '[data-wpbc-calendar-settings-form="1"]' ).first();
253 224 }
254 225
255 - function collect_payload() {
256 - var $form = get_form();
257 - var data = {};
258 - var name;
226 + function collect_payload() {
227 + var $form = get_form();
228 + var data = {};
229 + var name;
259 230 var checkboxes = [
260 231 'booking_calendar_allow_several_months_on_mobile',
261 232 'booking_recurrent_time',
262 233 'booking_last_checkout_day_available',
@@ -271,15 +242,18 @@
271 242 'booking_is_show_availability_in_date_cell',
272 243 'booking_is_show_cost_in_tooltips',
273 244 'booking_is_show_cost_in_date_cell',
274 245 'booking_is_show_booked_data_in_tooltips'
275 - ];
276 -
277 - $.each( $form.serializeArray(), function ( index, item ) {
278 - name = String( item.name || '' ).replace( /\[\]$/, '' );
279 - if ( data[ name ] ) {
280 - if ( ! Array.isArray( data[ name ] ) ) {
281 - data[ name ] = [ data[ name ] ];
246 + ];
247 +
248 + $.each( $form.serializeArray(), function ( index, item ) {
249 + name = String( item.name || '' ).replace( /\[\]$/, '' );
250 + if ( 0 === name.indexOf( 'wpbc_setup' ) ) {
251 + return;
252 + }
253 + if ( data[ name ] ) {
254 + if ( ! Array.isArray( data[ name ] ) ) {
255 + data[ name ] = [ data[ name ] ];
282 256 }
283 257 data[ name ].push( item.value );
284 258 } else {
285 259 data[ name ] = item.value;
@@ -324,9 +298,9 @@
324 298 function get_months_count() {
325 299 return parseInt( $( '#wpbc_calendar_months_count' ).val() || 3, 10 );
326 300 }
327 301
328 - function parse_number_list( value ) {
302 + function parse_number_list( value ) {
329 303 if ( Array.isArray( value ) ) {
330 304 return $.map( value, function ( item ) {
331 305 var parsed = parseInt( item, 10 );
332 306 return isNaN( parsed ) ? null : parsed;
@@ -335,10 +309,20 @@
335 309
336 310 return $.map( String( value || '' ).split( /\s*,\s*/ ), function ( item ) {
337 311 var parsed = parseInt( item, 10 );
338 312 return ( '' === item || isNaN( parsed ) ) ? null : parsed;
339 - } );
340 - }
313 + } );
314 + }
315 +
316 + function normalize_fixed_range_days_count( value ) {
317 + var days_count = parseInt( value, 10 );
318 +
319 + if ( isNaN( days_count ) || days_count < 1 ) {
320 + return 3;
321 + }
322 +
323 + return Math.min( 180, days_count );
324 + }
341 325
342 326 function set_calendar_param( resource_id, key, value ) {
343 327 if ( w._wpbc && typeof w._wpbc.calendar__set_param_value === 'function' ) {
344 328 w._wpbc.calendar__set_param_value( resource_id, key, value );
@@ -454,9 +438,9 @@
454 438
455 439 if ( 'fixed' === mode && typeof w.wpbc_cal_days_select__fixed === 'function' ) {
456 440 w.wpbc_cal_days_select__fixed(
457 441 resource_id,
458 - parseInt( ds.fixed__days_num || 1, 10 ),
442 + normalize_fixed_range_days_count( ds.fixed__days_num ),
459 443 fixed_week_days
460 444 );
461 445 return true;
462 446 }
@@ -497,9 +481,9 @@
497 481 set_calendar_param( resource_id, 'calendar_number_of_months', String( get_months_count() || 3 ) );
498 482 set_calendar_param( resource_id, 'calendar_scroll_to', false );
499 483 set_calendar_param( resource_id, 'is_enabled_change_over', payload.booking_range_selection_time_is_active === 'On' );
500 484 set_calendar_param( resource_id, 'days_select_mode', String( ds.days_select_mode || 'multiple' ) );
501 - set_calendar_param( resource_id, 'fixed__days_num', parseInt( ds.fixed__days_num || 1, 10 ) );
485 + set_calendar_param( resource_id, 'fixed__days_num', normalize_fixed_range_days_count( ds.fixed__days_num ) );
502 486 set_calendar_param( resource_id, 'fixed__week_days__start', fixed_week_days.length ? fixed_week_days : [ -1 ] );
503 487 set_calendar_param( resource_id, 'dynamic__days_min', parseInt( ds.dynamic__days_min || 1, 10 ) );
504 488 set_calendar_param( resource_id, 'dynamic__days_max', parseInt( ds.dynamic__days_max || 1, 10 ) );
505 489 set_calendar_param( resource_id, 'dynamic__days_specific', dynamic_specific );
@@ -537,9 +521,11 @@
537 521 }
538 522
539 523 function get_days_selection_from_form() {
540 524 var data = collect_payload();
541 - var mode = data.booking_type_of_day_selections === 'range' ? data.booking_range_selection_type : data.booking_type_of_day_selections;
525 + var mode = data.booking_type_of_day_selections === 'range'
526 + ? ( is_range_supported() ? data.booking_range_selection_type : 'dynamic' )
527 + : data.booking_type_of_day_selections;
542 528 var fixed_days = data.booking_range_start_day_mode === '-1' ? '-1' : ( data.booking_range_start_day_weekdays || '-1' );
543 529 var dynamic_days = data.booking_range_start_day_dynamic_mode === '-1' ? '-1' : ( data.booking_range_start_day_dynamic_weekdays || '-1' );
544 530
545 531 if ( Array.isArray( fixed_days ) ) {
@@ -550,9 +536,9 @@
550 536 }
551 537
552 538 return {
553 539 days_select_mode: mode || 'multiple',
554 - fixed__days_num: parseInt( data.booking_range_selection_days_count || 1, 10 ),
540 + fixed__days_num: normalize_fixed_range_days_count( data.booking_range_selection_days_count ),
555 541 fixed__week_days__start: fixed_days || '-1',
556 542 dynamic__days_min: parseInt( data.booking_range_selection_days_count_dynamic || 1, 10 ),
557 543 dynamic__days_max: parseInt( data.booking_range_selection_days_max_count_dynamic || 1, 10 ),
558 544 dynamic__days_specific: data.booking_range_selection_days_specific_num_dynamic || '',
@@ -574,9 +560,10 @@
574 560 var is_cost_tooltip = $form.find( '[name="booking_is_show_cost_in_tooltips"]' ).prop( 'checked' );
575 561 var is_cost_cell = $form.find( '[name="booking_is_show_cost_in_date_cell"]' ).prop( 'checked' );
576 562 var is_booked_tooltip = $form.find( '[name="booking_is_show_booked_data_in_tooltips"]' ).prop( 'checked' );
577 563
578 - $( '[data-wpbc-calendar-range-settings="1"]' ).toggleClass( 'is-visible', day_mode === 'range' );
564 + $( '[data-wpbc-calendar-range-settings="1"]' ).toggleClass( 'is-visible', day_mode === 'range' );
565 + $( '[data-wpbc-calendar-range-upgrade-note="1"]' ).toggleClass( 'is-visible', day_mode === 'range' && ! is_range_supported() );
579 566 $( '[data-wpbc-calendar-range-type]' ).removeClass( 'is-visible' );
580 567 $( '[data-wpbc-calendar-range-type="' + range_type + '"]' ).addClass( 'is-visible' );
581 568 $( '[data-wpbc-calendar-weekday-checks="booking_range_start_day_weekdays"]' ).toggleClass( 'is-visible', fixed_start !== '-1' );
582 569 $( '[data-wpbc-calendar-weekday-checks="booking_range_start_day_dynamic_weekdays"]' ).toggleClass( 'is-visible', dynamic_start !== '-1' );
@@ -613,14 +600,18 @@
613 600 );
614 601 }
615 602 }
616 603
617 - function refresh_preview() {
618 - var data = collect_payload();
619 - var signature;
620 -
621 - data.action = cfg.preview_action;
622 - data.nonce = cfg.nonce;
604 + function refresh_preview() {
605 + var data = collect_payload();
606 + var signature;
607 +
608 + if ( is_saving ) {
609 + return;
610 + }
611 +
612 + data.action = cfg.preview_action;
613 + data.nonce = cfg.nonce;
623 614 signature = JSON.stringify( data );
624 615 if ( signature === last_preview_signature ) {
625 616 return;
626 617 }
@@ -657,12 +648,15 @@
657 648 set_calendar_loading( false );
658 649 } );
659 650 }
660 651
661 - function schedule_preview_refresh( delay ) {
662 - clearTimeout( preview_timer );
663 - preview_timer = setTimeout( refresh_preview, typeof delay === 'number' ? delay : 180 );
664 - }
652 + function schedule_preview_refresh( delay ) {
653 + clearTimeout( preview_timer );
654 + if ( is_saving ) {
655 + return;
656 + }
657 + preview_timer = setTimeout( refresh_preview, typeof delay === 'number' ? delay : 180 );
658 + }
665 659
666 660 function is_text_typing_field( field ) {
667 661 var tag_name = String( field && field.tagName ? field.tagName : '' ).toLowerCase();
668 662 var input_type = String( field && field.type ? field.type : '' ).toLowerCase();
@@ -701,46 +695,68 @@
701 695 }
702 696 }
703 697 }
704 698
705 - function save_settings() {
706 - var $button = $( '[data-wpbc-calendar-save="1"]' );
707 - var original_text = $button.data( 'wpbc-original-text' );
708 - var data = collect_payload();
709 -
699 + function save_settings() {
700 + var $button = $( '[data-wpbc-calendar-save="1"]' );
701 + var original_text = $button.data( 'wpbc-original-text' );
702 + var data = collect_payload();
703 +
710 704 if ( ! original_text ) {
711 705 original_text = $button.html();
712 706 $button.data( 'wpbc-original-text', original_text );
713 707 }
708 +
709 + data.action = cfg.action;
710 + data.nonce = cfg.nonce;
711 +
712 + is_saving = true;
713 + clearTimeout( preview_timer );
714 + if ( preview_ajax && preview_ajax.readyState !== 4 ) {
715 + preview_ajax.abort();
716 + }
717 + preview_ajax = null;
718 + last_preview_signature = '';
719 + set_calendar_loading( false );
720 +
721 + $button.addClass( 'disabled' ).attr( 'aria-disabled', 'true' );
722 + $button.find( '.in-button-text' ).html( '&nbsp;&nbsp;' + trim_text( cfg.i18n && cfg.i18n.saving ? cfg.i18n.saving : 'Saving' ) + '...' );
723 +
724 + $.post( cfg.ajax_url, data )
725 + .done( function ( response ) {
726 + if ( response && response.success ) {
727 + show_message( response.data && response.data.message ? response.data.message : ( cfg.i18n && cfg.i18n.saved ? cfg.i18n.saved : 'Saved' ), 'success', 3000 );
728 + cfg.settings = response.data && response.data.settings ? response.data.settings : cfg.settings;
729 + cfg.days_selection = response.data && response.data.days_selection ? response.data.days_selection : get_days_selection_from_form();
730 + schedule_calendar_settings_apply( cfg.days_selection );
731 + $( document ).trigger( 'wpbc:setup-wizard:step-saved', [ 'date_selection' ] );
732 + return;
733 + }
714 734
715 - data.action = cfg.action;
716 - data.nonce = cfg.nonce;
717 -
718 - $button.addClass( 'disabled' ).attr( 'aria-disabled', 'true' );
719 - $button.find( '.in-button-text' ).html( '&nbsp;&nbsp;' + trim_text( cfg.i18n && cfg.i18n.saving ? cfg.i18n.saving : 'Saving' ) + '...' );
720 -
721 - $.post( cfg.ajax_url, data )
722 - .done( function ( response ) {
723 - if ( response && response.success ) {
724 - show_message( response.data && response.data.message ? response.data.message : ( cfg.i18n && cfg.i18n.saved ? cfg.i18n.saved : 'Saved' ), 'success', 3000 );
725 - cfg.settings = response.data && response.data.settings ? response.data.settings : cfg.settings;
726 - $( document ).trigger( 'wpbc:setup-wizard:step-saved', [ 'date_selection' ] );
727 - return;
728 - }
729 -
730 735 show_message(
731 736 response && response.data && response.data.message ? response.data.message : ( cfg.i18n && cfg.i18n.save_failed ? cfg.i18n.save_failed : 'Unable to save calendar settings.' ),
732 737 'error',
733 - 10000
734 - );
735 - } )
736 - .fail( function () {
737 - show_message( cfg.i18n && cfg.i18n.save_failed ? cfg.i18n.save_failed : 'Unable to save calendar settings.', 'error', 10000 );
738 - } )
739 - .always( function () {
740 - $button.removeClass( 'disabled' ).removeAttr( 'aria-disabled' ).html( original_text );
741 - } );
742 - }
738 + 10000
739 + );
740 + } )
741 + .fail( function ( xhr, text_status ) {
742 + var message;
743 +
744 + if ( 'abort' === text_status ) {
745 + return;
746 + }
747 +
748 + message = xhr && xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message
749 + ? xhr.responseJSON.data.message
750 + : ( cfg.i18n && cfg.i18n.save_failed ? cfg.i18n.save_failed : 'Unable to save calendar settings.' );
751 +
752 + show_message( message, 'error', 10000 );
753 + } )
754 + .always( function () {
755 + is_saving = false;
756 + $button.removeClass( 'disabled' ).removeAttr( 'aria-disabled' ).html( original_text );
757 + } );
758 + }
743 759
744 760 function bind_events() {
745 761 $( document ).on( 'click', '.wpbc_calendar_rightbar_tabs [role="tab"]', function ( event ) {
746 762 event.preventDefault();
@@ -765,12 +781,9 @@
765 781
766 782 $( document ).on( 'click', '[data-wpbc-calendar-premium-range-info="1"], [data-wpbc-calendar-premium-changeover-info="1"]', function ( event ) {
767 783 event.preventDefault();
768 784 event.stopImmediatePropagation();
769 - if ( $( this ).is( '[data-wpbc-calendar-premium-range-info="1"]' ) ) {
770 - restore_available_day_selection();
771 - }
772 - if ( $( this ).is( '[data-wpbc-calendar-premium-changeover-info="1"]' ) ) {
785 + if ( $( this ).is( '[data-wpbc-calendar-premium-changeover-info="1"]' ) ) {
773 786 $( this ).prop( 'checked', false );
774 787 }
775 788 refresh_conditional_controls();
776 789 show_premium_notice( $( this ) );
@@ -779,15 +792,9 @@
779 792 $( document ).on( 'change input', '[data-wpbc-calendar-settings-form="1"] input, [data-wpbc-calendar-settings-form="1"] select, [data-wpbc-calendar-settings-form="1"] textarea', function ( event ) {
780 793 var field_name = this.name || '';
781 794 var preview_delay = ( 'input' === event.type && is_text_typing_field( this ) ) ? 850 : 180;
782 795
783 - if ( is_locked_range_control( this ) ) {
784 - restore_available_day_selection();
785 - refresh_conditional_controls();
786 - show_premium_notice( $( this ) );
787 - return;
788 - }
789 - if ( is_locked_changeover_control( this ) ) {
796 + if ( is_locked_changeover_control( this ) ) {
790 797 $( this ).prop( 'checked', false );
791 798 refresh_conditional_controls();
792 799 show_premium_notice( $( this ) );
793 800 return;
@@ -793,12 +800,9 @@
793 800 return;
794 801 }
795 802
796 803 refresh_conditional_controls();
797 - if ( 'booking_type_of_day_selections' === field_name ) {
798 - remember_available_day_selection();
799 - }
800 - schedule_preview_refresh( preview_delay );
804 + schedule_preview_refresh( preview_delay );
801 805
802 806 if ( is_full_preview_only_field( field_name ) ) {
803 807 return;
804 808 }
@@ -823,10 +827,9 @@
823 827 }
824 828
825 829 bind_events();
826 830 patch_calendar_data_loader();
827 - remember_available_day_selection();
828 - refresh_conditional_controls();
831 + refresh_conditional_controls();
829 832 sync_left_navigation_active_section();
830 833 apply_open_section_from_url();
831 834 schedule_calendar_settings_apply( cfg.days_selection || get_days_selection_from_form() );
832 835 } );