← All changes | js/qcld-wp-chatbot-front.js +124 -24 8.6.6 → 8.8.1 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 () {
		@@ -400,9 +488,10 @@
400	488	}
401	489	$('.wp-chatbot-ball-inner').slimScroll({
402	490	height: '100hv',
403	491	start: 'bottom'
404		- }).parent().find('.slimScrollBar').css({'top': $('.wp-chatbot-ball-inner').height() + 'px'});
	492	+ });
	493	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
405	494	$('#wp-chatbot-chat-container').addClass('wp-chatbot-mobile-fs-open').css({
406	495	'bottom': '0',
407	496	'left': '0',
408	497	'right': '0',
		@@ -427,9 +516,10 @@
427	516	// $('.wp-chatbot-header').append('<div id="wp-chatbot-desktop-close"><span class="dashicons dashicons-no"></span></div>');
428	517	$('.wp-chatbot-ball-inner').slimScroll({
429	518	height: '55hv',
430	519	start: 'bottom'
431		- }).parent().find('.slimScrollBar').css({'top': $('.wp-chatbot-ball-inner').height() + 'px'});
	520	+ });
	521	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
432	522	}
433	523
434	524
435	525	//Here is the Plugin to be load only for once.
		@@ -516,13 +606,13 @@
516	606	'</li>';
517	607
518	608	$('#wp-chatbot-messages-container').append(msgContent);
519	609	//Scroll to the last message
520		- $('.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')); });
521	611	setTimeout(function(){
522	612	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(msg).css({'background-color':wpChatBotVar.proactive_bg_color});
523	613	//scroll to the last message
524		- $('.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')); });
525	615	}, 2000);
526	616	}
527	617	function showing_proactive_double_msg(secondMsg) {
528	618	var enableleReactions = globalwpw.settings.obj.skip_chat_reactions_menu;
		@@ -576,9 +666,9 @@
576	666	'</div>' +
577	667	'</li>';
578	668	$('#wp-chatbot-messages-container').append(msgContent);
579	669	//Scroll to the last message
580		- $('.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')); });
581	671
582	672	setTimeout(function(){
583	673	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(fristMsg);
584	674	//Second Message with interval
		@@ -583,13 +673,13 @@
583	673	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(fristMsg);
584	674	//Second Message with interval
585	675	$('#wp-chatbot-messages-container').append(msgContent);
586	676	//Scroll to the last message
587		- $('.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')); });
588	678	setTimeout(function(){
589	679	$('#wp-chatbot-messages-container li:last .wp-chatbot-paragraph').html(secondMsg).css({'background-color':wpChatBotVar.proactive_bg_color});
590	680	//Scroll to the last message
591		- $('.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')); });
592	682
593	683	}, 2000);
594	684
595	685	}, 2000);
		@@ -611,9 +701,15 @@
611	701	'top': 'auto', 'left': 'auto',
612	702	'width': '', 'max-width': ''
613	703	});
614	704	$('#wp-chatbot-board-container').css({'width': '', 'max-width': ''});
615		- $('#wp-chatbot-ball').find('img').attr('src', botimage)
	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	+ }
616	712	$('.wp-chatbot-ball').css('background', '#ffffff');
617	713	$('#wp-chatbot-ball').show();
618	714	//Facebook Messenger.
619	715	if ($('.active-chat-board').length > 0) {
		@@ -634,22 +730,24 @@
634	730
635	731	$(document).on('click', '#wp-chatbot-desktop-expand', function (event) {
636	732	event.preventDefault();
637	733	var $boardContainer = $('#wp-chatbot-board-container');
638		- $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');
639	736	$boardContainer.toggleClass('wp-chatbot-expanded');
640		- var isExpanded = $boardContainer.hasClass('wp-chatbot-expanded');
641		- if (isExpanded) {
642		- void $boardContainer[0].offsetWidth;
643		- $boardContainer.addClass('wp-chatbot-expand-anim');
644		- } else {
645		- void $boardContainer[0].offsetWidth;
646		- $boardContainer.addClass('wp-chatbot-collapse-anim');
647		- }
648	737	wpbotSyncExpandIconState();
	738	+ // Keep slimScroll in sync after height change
649	739	setTimeout(function () {
650		- $boardContainer.removeClass('wp-chatbot-expand-anim wp-chatbot-collapse-anim');
651		- }, 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);
652	750	});
653	751
654	752
655	753	$("#qcld-wp-chatbot-shortcode-style-css").attr("disabled", "disabled");
		@@ -702,9 +800,10 @@
702	800	//Add Scroll to chat ui
703	801	$('.wp-chatbot-ball-inner').slimScroll({
704	802	height: '60hv',
705	803	start: 'bottom'
706		- }).parent().find('.slimScrollBar').css({'top': $('.wp-chatbot-ball-inner').height() + 'px'});
	804	+ });
	805	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
707	806	//Add scroll to cart part
708	807	var recentViewHeight = $('.wp-chatbot-container').outerHeight();
709	808	if ($('.chatbot-shortcode-template-02').length == 0) {
710	809	$('.wp-chatbot-cart-body').slimScroll({height: '200px', start: 'top'});
		@@ -755,9 +854,10 @@
755	854	$("#wp-chatbot-board-container").addClass('active-chat-board');
756	855	$('.wp-chatbot-ball-inner').slimScroll({
757	856	height: '55hv',
758	857	start: 'bottom'
759		- }).parent().find('.slimScrollBar').css({'top': $(window).height() + 'px'});
	858	+ }).parent();
	859	+ wpbotSyncSlimScrollBar($('.wp-chatbot-ball-inner'));
760	860	if (LoadwpwBotPlugin == 0) {
761	861	$.wpwbot({obj: wpChatBotVar, editor_handler: textEditorHandler});
762	862	LoadwpwBotPlugin++;
763	863	var data = {'action': 'qcld_wb_chatbot_session_count', 'nonce': wpChatBotVar.session_nonce};