Edit

Editing: joinchat-page.js

(function ($, window, document) {
  'use strict';

function textarea_autoheight() {
    $(this).height(0).height(this.scrollHeight);
  }

// View Joinchat_Util::clean_whatsapp() for regex clean info
  function phone_to_whatsapp(phone) {
    return phone.replace(/^0+|\D/, '')
      .replace(/^54(0|1|2|3|4|5|6|7|8)/, '549$1')
      .replace(/^(54\d{5})15(\d{6})/, '$1$2')
      .replace(/^52(0|2|3|4|5|6|7|8|9)/, '521$1');
  }

function debounce(callback, wait) {
    let timeoutId = null;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => callback.apply(null, args), wait);
    };
  }

$(function () {
    var media_frame;
    var has_iti = typeof intlTelInput === 'function' && window.intl_tel_l10n;
    var $phone = $('#joinchat_phone');

if (has_iti) {
      // Set intlTelInput config (make global)
      var country_request = JSON.parse(localStorage.joinchat_country_code || '{}');
      var country_code = (country_request.code && country_request.date == new Date().toDateString()) ? country_request.code : false;

// Apply intlTelInput to phone input
      if ($phone.length) {
        var iti = intlTelInput($phone[0], joinchat_intl_tel_config);
        iti.promise.then(() => { $phone.trigger('input'); });

$phone.on('input countrychange', function () {
          var is_valid = iti.isValidNumber(true); // check for mobile

$(this).css('color', this.value.trim() && !is_valid ? '#ca4a1f' : '');
          // Ensures number it's updated
          iti.hiddenInput.value = iti.getNumber();
          // Enable/disable phone test
          $('#joinchat_phone_test').attr('disabled', !is_valid);
        });
      }
    }

// Tabs
    $('.nav-tab').on('click', function (e) {
      e.preventDefault();
      var $navtab = $(this);
      var href = $navtab.attr('href');
      var $referer = $('input[name=_wp_http_referer]');
      var ref_val = $referer.val();

// Update form referer to open same tab on submit
      $referer.val(ref_val.substr(0, ref_val.indexOf('page=joinchat')) + 'page=joinchat&tab=' + href.substr(14));

$('.nav-tab').removeClass('nav-tab-active').attr('aria-selected', 'false');
      $navtab.addClass('nav-tab-active').attr('aria-selected', 'true').get(0).blur();
      $('.joinchat-tab').removeClass('joinchat-tab-active');
      $(href).addClass('joinchat-tab-active');
      // Trigger event
      $(document).trigger('navtabchange', [$(href), href]);
    });

$(document).on('navtabchange', function (e, $tab) { $tab.find('textarea').each(textarea_autoheight); });

// Test phone number
    if ($phone.length) {
      // Enable/disable phone test
      if (!has_iti) {
        $phone.on('input change', function () {
          $('#joinchat_phone_test').attr('disabled', this.value.length < 7);
        });
      }

$('#joinchat_phone_test').on('click', function () {
        var phone = has_iti ? intlTelInput.getInstance($phone[0]).getNumber() : $phone.val();
        window.open('https://wa.me/' + encodeURIComponent(phone_to_whatsapp(phone)), 'joinchat', 'noopener');
      });
    }

// Toggle WhatsApp web option
    $('#joinchat_mobile_only').on('change', function () {
      $('#joinchat_whatsapp_web').closest('tr').toggleClass('joinchat-dimmed', this.checked);
    }).trigger('change');

$('input[name="joinchat[header]"]').on('change', function () {
      $('#joinchat_header_custom').toggleClass('joinchat-dimmed', this.value != '__custom__');
    }).trigger('change');

// Toggle cookies notice
    $('#joinchat_message_delay_on').on('change', function () {
      $('#joinchat_message_delay, #joinchat_message_views, #joinchat_message_badge').parent().toggleClass('joinchat-dimmed', !this.checked);
      $('.joinchat-cookies-notice').toggleClass('joinchat-hidden', !this.checked);
    }).trigger('change');

// Show help
    $('.joinchat-show-help').on('click', function (e) {
      e.preventDefault();
      var help_tab = $(this).attr('href');
      if ($('#contextual-help-wrap').is(':visible')) {
        $("html, body").animate({ scrollTop: 0 });
      } else {
        $('#contextual-help-link').trigger('click');
      }
      $(help_tab != '#' ? help_tab : '#tab-link-styles-and-vars').find('a').trigger('click');
    });

// Texarea focus and auto height
    $('textarea', '#joinchat_form')
      .on('focus', function () { $(this).closest('tr').addClass('joinchat--focus'); })
      .on('blur', function () { $(this).closest('tr').removeClass('joinchat--focus'); })
      .on('input', textarea_autoheight)
      .each(textarea_autoheight);

// Show title when placeholder
    $('#joinchat_form').find('.autofill')
      .on('change', function () { this.title = this.value == '' ? joinchat_admin.example : ''; })
      .on('dblclick', function () { if (this.value == '') { this.value = this.placeholder; this.title = ''; $(this).trigger('change'); } })
      .trigger('change');

// Visibility view inheritance
    var $tab_visibility = $('#joinchat_tab_visibility');
    var inheritance = $('.joinchat_view_all').data('inheritance') || {
      'all': ['front_page', 'blog_page', '404_page', 'search', 'archive', 'singular', 'cpts'],
      'archive': ['date', 'author'],
      'singular': ['page', 'post'],
    };

function propagate_inheritance(field, show) {
      field = field || 'all';
      show = show || $('input[name="joinchat[view][' + field + ']"]:checked').val();

$('.view_inheritance_' + field)
        .toggleClass('dashicons-visibility', show == 'yes')
        .toggleClass('dashicons-hidden', show == 'no');

if (field == 'cpts') {
        $('[class*=view_inheritance_cpt_]')
          .toggleClass('dashicons-visibility', show == 'yes')
          .toggleClass('dashicons-hidden', show == 'no');
      } else if (field in inheritance) {
        var value = $('input[name="joinchat[view][' + field + ']"]:checked').val();
        value = value === '' ? show : value;

$.each(inheritance[field], function () { propagate_inheritance(this, value); });
      }
    }

$('input', $tab_visibility).on('change', function () { propagate_inheritance(); });

$('.joinchat_view_reset').on('click', function (e) {
      e.preventDefault();
      $('input[value=""]', $tab_visibility).prop('checked', true);
      $('.joinchat_view_all input', $tab_visibility).first().prop('checked', true);
      propagate_inheritance();
    });

propagate_inheritance();

// Button image
    $('#joinchat_button_image_add').on('click', function (e) {
      e.preventDefault();

if (!media_frame) {
        // Define media_frame as wp.media object
        media_frame = wp.media({
          title: $(this).data('title') || 'Select button image',
          button: { text: $(this).data('button') || 'Use Image' },
          library: { type: 'image,video' },
          multiple: false,
        });

// When an image is selected in the media library...
        media_frame.on('select', function () {
          // Get media attachment details from the frame state
          var attachment = media_frame.state().get('selection').first().toJSON();
          var url = attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url || attachment.url;
          var tag = attachment.type == 'video' ? '<video autoplay loop muted playsinline src="' + url + '"></video>' : '<img src="' + url + '">';

$('#joinchat_button_image_holder').html(tag);
          $('#joinchat_button_image').val(attachment.id);
          $('#joinchat_button_image_wrapper').removeClass('no-image');
          if (prev_jc) {
            prev_jc.chatbox_hide();
            prev_jc.$('.joinchat__button__image').innerHTML = tag;
          }
        });

media_frame.on('open', function () {
          // Pre-selected attachment
          var attachment = wp.media.attachment($('#joinchat_button_image').val());
          media_frame.state().get('selection').add(attachment ? [attachment] : []);
        });
      }

media_frame.open();
    });

$('#joinchat_button_image_remove').on('click', function (e) {
      e.preventDefault();

$('#joinchat_button_image_holder').empty();
      $('#joinchat_button_image').val('');
      $('#joinchat_button_image_wrapper').addClass('no-image');
      if (prev_jc) prev_jc.$('.joinchat__button__image').replaceChildren();
    });

// Init ColorPicker with "changecolor" trigger event on change
    $('#joinchat_color').wpColorPicker({ change: function (e, ui) { $(this).trigger('changecolor', [ui.color.toHsl()]); } });
    $('#joinchat_color').on('changecolor', function (e, hsl) {
      var style = $('#joinchat_form').get(0).style;
      style.setProperty('--ch', hsl.h);
      style.setProperty('--cs', `${hsl.s}%`);
      style.setProperty('--cl', `${hsl.l}%`);
    });

$('input[name="joinchat[color][text]"]').on('change', function () {
      $('#joinchat_form').get(0).style.setProperty('--bw', this.value);
    });

$('#joinchat_header_custom').on('click', function () { $(this).prev().find('input').trigger('click'); });

// Focus Opt-in editor
    $('label[for="joinchat_optin_text"]').on('click', function () { tinymce.get('joinchat_optin_text').focus(); });

// Toggle Woo Product Button text
    $('#joinchat_woo_btn_position').on('change', function () {
      $('#joinchat_woo_btn_text').closest('tr').toggleClass('joinchat-hidden', $(this).val() == 'none');
    }).trigger('change');

// Custom CSS
    var custom_css_editor = wp.codeEditor.initialize($('#joinchat_custom_css'), custom_css_settings);
    $(document).on('navtabchange', function (e, $tab, id) { if (id == '#joinchat_tab_advanced') custom_css_editor.codemirror.refresh(); });
    $('label[for="joinchat_custom_css"]').on('click', function () { custom_css_editor.codemirror.focus(); });
    $('.joinchat_custom_css_prefill').on('click', function (e) { e.preventDefault(); custom_css_editor.codemirror.setValue(joinchat_admin.example_css); });

/*************************************
     * MARK: Preview Sync
     *************************************/

$(document).on('navtabchange', function (e, $tab, id) {
      if (id == '#joinchat_tab_general' || id == '#joinchat_tab_advanced') {
        $('#joinchat_preview_show').removeClass('disabled');
      } else {
        $('body').removeClass('jcpreview');
        $('#joinchat_preview_show').addClass('disabled').removeClass('active');
      }
    });

var prev_jc = null; // joinchat_obj of preview iframe
    var chatbox_on = true;

$('#joinchat_preview_show').on('click', function (e) {
      e.preventDefault();
      if ($(this).hasClass('disabled')) return;

var is_off = $(this).hasClass('active');
      $(this).toggleClass('active', !is_off);
      $('body').toggleClass('jcpreview', !is_off);

if (!is_off && $('#joinchatprev').length == 0) {
        // Add preview
        $('#wpwrap').append(`
          <div id="joinchatprev">
            <div id="joinchatprev__resize"></div>
            <div id="joinchatprev__devices">
              <div class="button-group">
                <button class="button desktop" title="Desktop"><span class="dashicons dashicons-desktop"></span></button>
                <button class="button active mobile" title="Mobile"><span class="dashicons dashicons-smartphone"></span></button>
              </div>
            </div>
            <iframe id="joinchat_preview" src="${joinchat_admin.home}?joinchat-preview=1" scrolling="no"></iframe>
          </div>`);

$('#joinchat_preview').on('load', function () {
          prev_jc = this.contentWindow.joinchat_obj;
          prev_jc.has_cta = $('#joinchat_message_text').val().trim() != '';
          prev_jc.has_optin = tinymce.get('joinchat_optin_text').getContent() != '';
          $(document).trigger('preview', [this, prev_jc]); // Trigger preview ready!
        });

// Toggle devices
        $('#joinchatprev__devices .desktop').on('click', function () { if (prev_width() <= 480) prev_width(500); });
        $('#joinchatprev__devices .mobile').on('click', function () { if (prev_width() > 480) prev_width(380); });

// Resizable preview
        var start_x, start_w, is_rtl = $('[dir=rtl]').length > 0 ? -1 : 1;
        $('#joinchatprev__resize').on('mousedown', start_resize);

function start_resize(e) {
          e.preventDefault();
          start_x = e.clientX;
          start_w = prev_width();

$('body')
            .addClass('jcpreview-resize')
            .on('mousemove mouseup', do_resize)
            .on('mouseup mouseleave', end_resize);
        }
        function do_resize(e) {
          e.preventDefault();
          prev_width(start_w + (start_x - e.clientX) * is_rtl);
        }
        function end_resize(e) {
          e.preventDefault();
          $('body')
            .removeClass('jcpreview-resize')
            .off('mousemove mouseup', do_resize)
            .off('mouseup mouseleave', end_resize);
        }
      }
    });

$(document).on('preview', function () {
      update_has_chatbox();

// Contact
      $phone.on('change', function () {
        prev_jc.settings.telephone = phone_to_whatsapp(has_iti ? intlTelInput.getInstance(this).getNumber() : $(this).val());
        prev_jc.$div.classList.toggle('joinchat--disabled', prev_jc.settings.telephone == '');
      });
      $('#joinchat_message_send').on('change', function () { prev_jc.settings.message_send = $(this).val(); });

// Button
      $('#joinchat_mobile_only').on('change', function () { prev_jc.$div.classList.toggle('joinchat--mobile_only', this.checked); });
      $('#joinchat_button_tip')
        .on('focus blur', e => {
          if (e.type == 'focus') prev_jc.chatbox_hide();
          prev_jc.$('.joinchat__tooltip').classList.toggle('joinchat--show', e.type == 'focus');
        })
        .on('input change', debounce(e => {
          prev_jc.$('.joinchat__tooltip').classList.toggle('joinchat--hidden', $(e.target).val().trim() == '');
          prev_jc.$('.joinchat__tooltip div').textContent = $(e.target).val();
        }, 100));
      $('input[name="joinchat[position]"]').on('change', function () {
        prev_jc.$div.classList.toggle('joinchat--right', this.value == 'right');
        prev_jc.$div.classList.toggle('joinchat--left', this.value == 'left');
      });

// Fixed image
      $('input[name="joinchat[button_image_fixed]"]').on('change', function () {
        prev_jc.chatbox_hide();
        prev_jc.$div.classList.toggle('joinchat--img', this.value == 'yes');
      });

// QR
      var qr_show_timeout;
      $('#joinchat_qr').on('change', function () {
        clearTimeout(qr_show_timeout);
        if ($('#joinchat_mobile_only')[0].checked) return;

if (this.checked) {
          prev_jc.$('.joinchat__qr canvas')?.remove();
          prev_jc.$('.joinchat__qr').appendChild(prev_jc.qr(prev_jc.get_wa_link(undefined, undefined, false)));
        }
        if (chatbox_on && this.checked && prev_width() <= 480) prev_width(481);
        if (chatbox_on && this.checked && prev_jc.has_chatbox) prev_jc.chatbox_show();
        if (chatbox_on) {
          prev_jc.$('.joinchat__qr').classList.toggle('joinchat--show', this.checked);
          qr_show_timeout = setTimeout(function () { prev_jc.$('.joinchat__qr').classList.remove('joinchat--show'); }, 5000);
        }
      });

// Chatbox show (if available)
      $('#joinchat_message_text,#joinchat_message_start,input[name="joinchat[color][text]"],input[name="joinchat[dark_mode]"],input[name="joinchat[header]"],#joinchat_header_custom').on('focus', view_chatbox);

function change_message_text(e) {
        prev_jc.has_cta = $(e.target).val().trim() != '';
        update_has_chatbox();
        prev_jc.update_cta($(e.target).val().trim());
        view_chatbox();
      }
      $('#joinchat_message_text').on('input', debounce(change_message_text, 500)).on('change', change_message_text);

$('#joinchat_message_start').on('input change', debounce(e => {
        prev_jc.$('.joinchat__open__text').textContent = $(e.target).val().trim();
        view_chatbox();
      }, 100));
      $('input[name="joinchat[button_ico]"]').on('change', function () {
        prev_jc.$('.joinchat__button__ico')?.remove();
        if (this.value != 'app') prev_jc.$('.joinchat__button').insertAdjacentHTML('afterbegin', `<div class="joinchat__button__ico">${this.nextElementSibling.firstElementChild.outerHTML}</div>`);
        prev_jc.chatbox_hide();
      });
      $('#joinchat_color').on('changecolor', function (e, hsl) {
        var style = prev_jc.$div.style;
        style.setProperty('--ch', hsl.h);
        style.setProperty('--cs', `${hsl.s}%`);
        style.setProperty('--cl', `${hsl.l}%`);
        view_chatbox();
      });
      $('input[name="joinchat[color][text]"]').on('change', function () {
        prev_jc.$div.style.setProperty('--bw', this.value);
        view_chatbox();
      });
      $('input[name="joinchat[dark_mode]"]').on('change', function () {
        prev_jc.$div.classList.toggle('joinchat--dark', this.value == 'yes');
        prev_jc.$div.classList.toggle('joinchat--dark-auto', this.value == 'auto');
        view_chatbox();
      });
      $('input[name="joinchat[header]"]').on('change', function () {
        prev_jc.$('#joinchat__label a').classList.toggle('joinchat--hidden', this.value != '__jc__');
        prev_jc.$('#joinchat__label span').classList.toggle('joinchat--hidden', this.value != '__custom__');
        prev_jc.$('#joinchat__label .joinchat__wa').classList.toggle('joinchat--hidden', this.value != '__wa__');
        view_chatbox();
      });
      $('#joinchat_header_custom').on('input change', debounce(e => {
        prev_jc.$('#joinchat__label span').textContent = $(e.target).val();
        view_chatbox();
      }, 100));

// Badge
      $('#joinchat_message_badge').on('change', function () {
        prev_jc.settings.message_badge = this.checked;
        if (!prev_jc.has_cta) return;

this.checked ? prev_jc.chatbox_hide() : prev_jc.chatbox_show();
        prev_jc.$('.joinchat__badge').classList.toggle('joinchat__badge--in', this.checked);
      });

// Optin
      tinymce.get('joinchat_optin_text').on('change', update_optin);
      $('#joinchat_optin_check').on('change', update_optin);

// Custom CSS (strip tags)
      custom_css_editor.codemirror.on('change', function (ed) {
        $('#joinchat_preview')[0].contentDocument.getElementById('joinchat-inline-css').innerHTML = ed.getValue().replace(/(<([^>]+)>)/gi, "");
      });

// Trigger change to force updated settings on preview
      chatbox_on = false;
      $('#joinchat_tab_general').find('input[type="text"],input[type="number"],input[type="checkbox"],input[type="radio"]:checked,textarea').trigger('change');
      $('#joinchat_color').wpColorPicker('color', $('#joinchat_color').val());
      var temp = custom_css_editor.codemirror.getValue();
      custom_css_editor.codemirror.setValue(temp + ' ');
      custom_css_editor.codemirror.setValue(temp);
      chatbox_on = true;
    });

$('.nav-tab-active').trigger('click');
  });
}(jQuery, window, document));

Back