← All changes | js/qcld-wp-chatbot-front.js +142 -28 8.6.0 → 8.8.0 View file →

		@@ -9,8 +9,54 @@
9	9	}else{
10	10	var openingHourIs = 0;
11	11	}
12	12
	13	+ /**
	14	+ * Hide slimScroll bar when content fits; otherwise pin bar to the bottom correctly.
	15	+ * slimScroll shows the bar when scrollHeight < clientHeight due to its size math.
	16	+ */
	17	+ window.wpbotSyncSlimScrollBar = function ($inner) {
	18	+ $inner = ($inner && $inner.jquery) ? $inner : $('.wp-chatbot-ball-inner');
	19	+ $inner.each(function () {
	20	+ var el = this;
	21	+ var $el = $(el);
	22	+ var $wrap = $el.parent();
	23	+ if (!$wrap.hasClass('slimScrollDiv')) {
	24	+ return;
	25	+ }
	26	+ var $bar = $wrap.children('.slimScrollBar');
	27	+ var $rail = $wrap.children('.slimScrollRail');
	28	+ if (!$bar.length) {
	29	+ return;
	30	+ }
	31	+ if (el.scrollHeight <= el.clientHeight + 2) {
	32	+ $wrap.addClass('wpbot-no-scroll');
	33	+ $bar.stop(true, true).hide().css({ opacity: 0 });
	34	+ $rail.stop(true, true).hide();
	35	+ return;
	36	+ }
	37	+ $wrap.removeClass('wpbot-no-scroll');
	38	+ var barH = Math.max(($el.outerHeight() / el.scrollHeight) * $el.outerHeight(), 30);
	39	+ barH = Math.min(barH, $el.outerHeight());
	40	+ var maxTop = Math.max(0, $el.outerHeight() - barH);
	41	+ var ratio = el.scrollHeight > el.clientHeight
	42	+ ? el.scrollTop / (el.scrollHeight - el.clientHeight)
	43	+ : 1;
	44	+ $bar.css({
	45	+ height: barH + 'px',
	46	+ top: (ratio * maxTop) + 'px',
	47	+ display: 'block',
	48	+ opacity: 0.4
	49	+ });
	50	+ clearTimeout($bar.data('wpbotBarHideTimer'));
	51	+ $bar.data('wpbotBarHideTimer', setTimeout(function () {
	52	+ if (!$bar.is(':hover')) {
	53	+ $bar.fadeOut('slow');
	54	+ }
	55	+ }, 1000));
	56	+ });
	57	+ };
	58	+
13	59	wpChatBotVar.exit_intent_handler = 0;
14	60	wpChatBotVar.scroll_open_handler = 0;
15	61	wpChatBotVar.auto_open_handler = 0;
16	62	wpChatBotVar.re_target_handler = 0;
		@@ -20,8 +66,31 @@
20	66	wpwKits.reset();
21	67	LoadwpwBotPlugin = 0;
22	68	}
23	69	var botimage = jQuery('#wp-chatbot-ball').find('img').attr('qcld_agent');
	70	+
	71	+ // Custom Icon Video / YouTube: start playback after configured delay
	72	+ var wpbotIconVideo = wpChatBotVar.icon_video || '';
	73	+ var wpbotVideoDelay = parseInt(wpChatBotVar.icon_video_delay, 10) || 0;
	74	+ if (wpbotIconVideo !== '') {
	75	+ var $wpbotVidEl = $('#wp-chatbot-ball-icon-video');
	76	+ if ($wpbotVidEl.length) {
	77	+ if (wpbotVideoDelay > 0) {
	78	+ $wpbotVidEl.hide();
	79	+ setTimeout(function () {
	80	+ $wpbotVidEl.show();
	81	+ if ($wpbotVidEl.is('video')) {
	82	+ try { $wpbotVidEl[0].play(); } catch(e){}
	83	+ }
	84	+ }, wpbotVideoDelay * 1000);
	85	+ } else {
	86	+ if ($wpbotVidEl.is('video')) {
	87	+ try { $wpbotVidEl[0].play(); } catch(e){}
	88	+ }
	89	+ }
	90	+ }
	91	+ }
	92	+
24	93	if ($('#wp-chatbot-shortcode-template-container').length == 0 && $('#wp-chatbot-chat-app-shortcode-container').length == 0) {
25	94	//Main wpwbot area.
26	95	//show it
27	96	$('#wp-chatbot-ball-wrapper').css({
		@@ -91,9 +160,17 @@
91	160	$('#wp-chatbot-ball').show();
92	161	}
93	162	$('#wp-chatbot-ball').removeClass('wpbot_chatopen_iconanimation');
94	163	$('#wp-chatbot-ball').addClass('wpbot_chatclose_iconanimation');
95		- $('#wp-chatbot-ball').find('img').attr('src', botimage)
	164	+ // Restore: hide close icon, show video OR image
	165	+ $('#wp-chatbot-ball').find('img#wp-chatbot-ball-icon-img').attr('src', botimage);
	166	+ if (wpbotIconVideo !== '') {
	167	+ $('#wp-chatbot-ball-icon-video').show();
	168	+ $('#wp-chatbot-ball').find('img#wp-chatbot-ball-icon-img').hide();
	169	+ $('#wp-chatbot-ball').find('img.wpbot-close-icon-overlay').hide();
	170	+ } else {
	171	+ $('#wp-chatbot-ball').find('img#wp-chatbot-ball-icon-img').show();
	172	+ }
96	173	$('.wp-chatbot-ball').css('background', '#ffffff');
97	174
98	175
99	176	}else{
		@@ -99,9 +176,15 @@
99	176	}else{
100	177
101	178	$('#wp-chatbot-ball').removeClass('wpbot_chatclose_iconanimation');
102	179	$('#wp-chatbot-ball').addClass('wpbot_chatopen_iconanimation');
103		- $('#wp-chatbot-ball').find('img').attr('src', wpChatBotVar.imgurl+'wpbot-close-icon.png');
	180	+ // Show close icon; hide video OR image
	181	+ if (wpbotIconVideo !== '') {
	182	+ $('#wp-chatbot-ball-icon-video').hide();
	183	+ $('#wp-chatbot-ball').find('img#wp-chatbot-ball-icon-img').attr('src', wpChatBotVar.imgurl+'wpbot-close-icon.png').show();
	184	+ } else {
	185	+ $('#wp-chatbot-ball').find('img').attr('src', wpChatBotVar.imgurl+'wpbot-close-icon.png');
	186	+ }
104	187	//$('.wp-chatbot-ball').css('background', 'unset');
105	188
106	189
107	190	}
		@@ -334,9 +417,14 @@
334	417	if ($('.active-chat-board').length == 0) {
335	418	setTimeout(function () {
336	419	$('#wp-chatbot-ball').removeClass('wpbot_chatclose_iconanimation');
337	420	$('#wp-chatbot-ball').addClass('wpbot_chatopen_iconanimation');
338		- $('#wp-chatbot-ball').find('img').attr('src', wpChatBotVar.imgurl+'wpbot-close-icon.png');
	421	+ if (wpbotIconVideo !== '') {
	422	+ $('#wp-chatbot-ball-icon-video').hide();
	423	+ $('#wp-chatbot-ball').find('img#wp-chatbot-ball-icon-img').attr('src', wpChatBotVar.imgurl+'wpbot-close-icon.png').show();
	424	+ } else {
	425	+ $('#wp-chatbot-ball').find('img').attr('src', wpChatBotVar.imgurl+'wpbot-close-icon.png');
	426	+ }
339	427	$("#wp-chatbot-board-container").addClass('active-chat-board');
340	428	wpwbot_board_action();
341	429	showing_proactive_msg(wpChatBotVar.checkout_msg);
342	430	setTimeout(function () {
		@@ -391,9 +479,11 @@
391	479	}
392	480
393	481	//wpwBot proActive end
394	482	function wpwbot_board_action() {
395		- if (widowW <= 1024 && wpChatBotVar.mobile_full_screen==1 ) {//For mobile
	483	+ var currentW = $(window).width();
	484	+ var isBoardOpen = $('#wp-chatbot-board-container').hasClass('active-chat-board');
	485	+ if (currentW <= 480 && wpChatBotVar.mobile_full_screen==1 && isBoardOpen) {//For mobile
396	486	if ($('#wp-chatbot-mobile-close').length <= 0) {
397	487	$('.wp-chatbot-board-container').append('<div id="wp-chatbot-mobile-close">X</div>');
398	488	}
399	489	$('.wp-chatbot-ball-inner').slimScroll({
		@@ -398,10 +488,18 @@
398	488	}
399	489	$('.wp-chatbot-ball-inner').slimScroll({
400	490	height: '100hv',
401	491	start: 'bottom'
402		- }).parent().find('.slimScrollBar').css({'top': $('.wp-chatbot-ball-inner').height() + 'px'});
403		- $('#wp-chatbot-chat-container').css({'bottom': '0', 'left': '0', 'right': '0'});
	492	+ });
	493	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
	494	+ $('#wp-chatbot-chat-container').addClass('wp-chatbot-mobile-fs-open').css({
	495	+ 'bottom': '0',
	496	+ 'left': '0',
	497	+ 'right': '0',
	498	+ 'width': '100%',
	499	+ 'max-width': '100%'
	500	+ });
	501	+ $('#wp-chatbot-board-container').css({'width': '100%', 'max-width': '100%'});
404	502	$('#wp-chatbot-ball').hide();
405	503	//Maintain inner chat box height
406	504	var widowH = $(window).height();
407	505	var headerH = $('.wp-chatbot-header').outerHeight();
		@@ -411,13 +509,17 @@
411	509	$('.wp-chatbot-ball-inner').css({'height': AppContentInner + 'px'})
412	510	$('.wp-chatbot-ball-inner').css({'max-height': AppContentInner + 'px'})
413	511	$(this).hide();
414	512	} else {
	513	+ if (!isBoardOpen) {
	514	+ $('#wp-chatbot-chat-container').removeClass('wp-chatbot-mobile-fs-open');
	515	+ }
415	516	// $('.wp-chatbot-header').append('<div id="wp-chatbot-desktop-close"><span class="dashicons dashicons-no"></span></div>');
416	517	$('.wp-chatbot-ball-inner').slimScroll({
417	518	height: '55hv',
418	519	start: 'bottom'
419		- }).parent().find('.slimScrollBar').css({'top': $('.wp-chatbot-ball-inner').height() + 'px'});
	520	+ });
	521	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
420	522	}
421	523
422	524
423	525	//Here is the Plugin to be load only for once.
		@@ -504,13 +606,13 @@
504	606	'</li>';
505	607
506	608	$('#wp-chatbot-messages-container').append(msgContent);
507	609	//Scroll to the last message
508		- $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow').parent().find('.slimScrollBar').css({'top':$('.wp-chatbot-ball-inner').height()+'px'});
	610	+ $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow', function () { wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner')); });
509	611	setTimeout(function(){
510	612	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(msg).css({'background-color':wpChatBotVar.proactive_bg_color});
511	613	//scroll to the last message
512		- $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow').parent().find('.slimScrollBar').css({'top':$('.wp-chatbot-ball-inner').height()+'px'});
	614	+ $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow', function () { wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner')); });
513	615	}, 2000);
514	616	}
515	617	function showing_proactive_double_msg(secondMsg) {
516	618	var enableleReactions = globalwpw.settings.obj.skip_chat_reactions_menu;
		@@ -564,9 +666,9 @@
564	666	'</div>' +
565	667	'</li>';
566	668	$('#wp-chatbot-messages-container').append(msgContent);
567	669	//Scroll to the last message
568		- $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow').parent().find('.slimScrollBar').css({'top':$('.wp-chatbot-ball-inner').height()+'px'});
	670	+ $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow', function () { wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner')); });
569	671
570	672	setTimeout(function(){
571	673	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(fristMsg);
572	674	//Second Message with interval
		@@ -571,13 +673,13 @@
571	673	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(fristMsg);
572	674	//Second Message with interval
573	675	$('#wp-chatbot-messages-container').append(msgContent);
574	676	//Scroll to the last message
575		- $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow').parent().find('.slimScrollBar').css({'top':$('.wp-chatbot-ball-inner').height()+'px'});
	677	+ $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow', function () { wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner')); });
576	678	setTimeout(function(){
577	679	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(secondMsg).css({'background-color':wpChatBotVar.proactive_bg_color});
578	680	//Scroll to the last message
579		- $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow').parent().find('.slimScrollBar').css({'top':$('.wp-chatbot-ball-inner').height()+'px'});
	681	+ $('.wp-chatbot-ball-inner').animate({ scrollTop: $('.wp-chatbot-messages-wrapper').prop("scrollHeight")}, 'slow', function () { wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner')); });
580	682
581	683	}, 2000);
582	684
583	685	}, 2000);
		@@ -592,14 +694,22 @@
592	694	$boardContainer.removeClass('active-chat-board wp-chatbot-close-anim');
593	695	}, 280);
594	696	}
595	697	$("#wp-chatbot-notification-container").removeClass('wp-chatbot-notification-container-disable').addClass('wp-chatbot-notification-container-sliding');
596		- $('#wp-chatbot-chat-container').css({
	698	+ $('#wp-chatbot-chat-container').removeClass('wp-chatbot-mobile-fs-open').css({
597	699	'right': wpChatBotVar.wp_chatbot_position_x + 'px',
598	700	'bottom': wpChatBotVar.wp_chatbot_position_y + 'px',
599		- 'top': 'auto', 'left': 'auto'
	701	+ 'top': 'auto', 'left': 'auto',
	702	+ 'width': '', 'max-width': ''
600	703	});
601		- $('#wp-chatbot-ball').find('img').attr('src', botimage)
	704	+ $('#wp-chatbot-board-container').css({'width': '', 'max-width': ''});
	705	+ // Restore icon: show video OR image when chat is closed via X button
	706	+ if (wpbotIconVideo !== '') {
	707	+ $('#wp-chatbot-ball').find('img#wp-chatbot-ball-icon-img').attr('src', botimage).hide();
	708	+ $('#wp-chatbot-ball-icon-video').show();
	709	+ } else {
	710	+ $('#wp-chatbot-ball').find('img').attr('src', botimage);
	711	+ }
602	712	$('.wp-chatbot-ball').css('background', '#ffffff');
603	713	$('#wp-chatbot-ball').show();
604	714	//Facebook Messenger.
605	715	if ($('.active-chat-board').length > 0) {
		@@ -620,22 +730,24 @@
620	730
621	731	$(document).on('click', '#wp-chatbot-desktop-expand', function (event) {
622	732	event.preventDefault();
623	733	var $boardContainer = $('#wp-chatbot-board-container');
624		- $boardContainer.removeClass('wp-chatbot-open-anim wp-chatbot-expand-anim wp-chatbot-collapse-anim');
	734	+ // Size toggle only — CSS width/height transition. No opacity/scale anims (they flash white).
	735	+ $boardContainer.removeClass('wp-chatbot-open-anim wp-chatbot-expand-anim wp-chatbot-collapse-anim wp-chatbot-close-anim');
625	736	$boardContainer.toggleClass('wp-chatbot-expanded');
626		- var isExpanded = $boardContainer.hasClass('wp-chatbot-expanded');
627		- if (isExpanded) {
628		- void $boardContainer[0].offsetWidth;
629		- $boardContainer.addClass('wp-chatbot-expand-anim');
630		- } else {
631		- void $boardContainer[0].offsetWidth;
632		- $boardContainer.addClass('wp-chatbot-collapse-anim');
633		- }
634	737	wpbotSyncExpandIconState();
	738	+ // Keep slimScroll in sync after height change
635	739	setTimeout(function () {
636		- $boardContainer.removeClass('wp-chatbot-expand-anim wp-chatbot-collapse-anim');
637		- }, 360);
	740	+ var $inner = $boardContainer.find('.wp-chatbot-ball-inner');
	741	+ if (!$inner.length || !$inner[0]) {
	742	+ return;
	743	+ }
	744	+ var computedH = window.getComputedStyle($inner[0]).height;
	745	+ if (computedH) {
	746	+ $inner.slimScroll({ height: computedH, start: 'bottom' });
	747	+ wpbotSyncSlimScrollBar($inner);
	748	+ }
	749	+ }, 40);
638	750	});
639	751
640	752
641	753	$("#qcld-wp-chatbot-shortcode-style-css").attr("disabled", "disabled");
		@@ -688,9 +800,10 @@
688	800	//Add Scroll to chat ui
689	801	$('.wp-chatbot-ball-inner').slimScroll({
690	802	height: '60hv',
691	803	start: 'bottom'
692		- }).parent().find('.slimScrollBar').css({'top': $('.wp-chatbot-ball-inner').height() + 'px'});
	804	+ });
	805	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
693	806	//Add scroll to cart part
694	807	var recentViewHeight = $('.wp-chatbot-container').outerHeight();
695	808	if ($('.chatbot-shortcode-template-02').length == 0) {
696	809	$('.wp-chatbot-cart-body').slimScroll({height: '200px', start: 'top'});
		@@ -741,9 +854,10 @@
741	854	$("#wp-chatbot-board-container").addClass('active-chat-board');
742	855	$('.wp-chatbot-ball-inner').slimScroll({
743	856	height: '55hv',
744	857	start: 'bottom'
745		- }).parent().find('.slimScrollBar').css({'top': $(window).height() + 'px'});
	858	+ }).parent();
	859	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
746	860	if (LoadwpwBotPlugin == 0) {
747	861	$.wpwbot({obj: wpChatBotVar, editor_handler: textEditorHandler});
748	862	LoadwpwBotPlugin++;
749	863	var data = {'action': 'qcld_wb_chatbot_session_count', 'nonce': wpChatBotVar.session_nonce};