/** * $.disablescroll * Author: Josh Harrison - aloof.co * * Disables scroll events from mousewheels, touchmoves and keypresses. * Use while jQuery is animating the scroll position for a guaranteed super-smooth ride! */ ;(function($) { "use strict"; var instance, proto; function UserScrollDisabler($container, options) { // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 // left: 37, up: 38, right: 39, down: 40 this.opts = $.extend({ handleWheel : true, handleScrollbar: true, handleKeys : true, scrollEventKeys : [/*32, */33, 34, 35, 36, 37, 38, 39, 40] }, options); this.$container = $container; this.$document = $(document); this.lockToScrollPos = [0, 0]; this.disable(); } proto = UserScrollDisabler.prototype; proto.disable = function() { var t = this; if(t.opts.handleWheel) { t.$container.on( "mousewheel.disablescroll DOMMouseScroll.disablescroll touchmove.disablescroll", t._handleWheel ); } if(t.opts.handleScrollbar) { t.lockToScrollPos = [ t.$container.scrollLeft(), t.$container.scrollTop() ]; t.$container.on("scroll.disablescroll", function() { t._handleScrollbar.call(t); }); } if(t.opts.handleKeys) { t.$document.on("keydown.disablescroll", function(event) { t._handleKeydown.call(t, event); }); } }; proto.undo = function() { var t = this; t.$container.off(".disablescroll"); if(t.opts.handleKeys) { t.$document.off(".disablescroll"); } }; proto._handleWheel = function(event) { event.preventDefault(); }; proto._handleScrollbar = function() { this.$container.scrollLeft(this.lockToScrollPos[0]); this.$container.scrollTop(this.lockToScrollPos[1]); }; proto._handleKeydown = function(event) { for (var i = 0; i < this.opts.scrollEventKeys.length; i++) { if (event.keyCode === this.opts.scrollEventKeys[i]) { event.preventDefault(); return; } } }; // Plugin wrapper for object $.fn.disablescroll = function(method) { // If calling for the first time, instantiate the object and save // reference. The plugin can therefore only be instantiated once per // page. You can pass options object in through the method parameter. if( ! instance && (typeof method === "object" || ! method)) { instance = new UserScrollDisabler(this, method); } // Instance created, no method specified. Call disable again if(instance && typeof method === "undefined") { instance.disable(); } // Instance already created, and a method is being explicitly called, // e.g. .disablescroll('undo'); else if(instance && instance[method]) { instance[method].call(instance); } return this; }; // Global access window.UserScrollDisabler = UserScrollDisabler; })(jQuery); const chatColor = "#4183E4"; const errorColor = "#EB5757"; const validColor = "#27AE60"; var shChat= { host: '//chat.simple-hub.info/chat.php', domen: '//chat.simple-hub.info/', chat_token: '', token: '', intervalID: '', oldContent: '', interval: 5000, init: function(param){ shChat.initBchat(); if(!window.jQuery){ alert('Error: jQuery not found.'); return; } else{ this.token = param.token; if(this.chat_token== ''){ this.InitForm(); } else { this.initMessageArea(); } } }, setAttributes: function (el, attr) { for (let key in attr) { el.setAttribute(key, attr[key]); } }, getCurrentTime: function () { return new Date().toTimeString().replace(/ .*/, ""); }, /**************** INIT CHAT *****************/ initBchat: function () { let body = document.getElementsByTagName("body")[0]; let div = document.createElement("div"); let main = document.createElement("div"); let head = document.getElementsByTagName("head")[0]; let style = document.createElement("link"); shChat.setAttributes(style, { rel: "stylesheet", type: "text/css", href: shChat.domen + "/theme/pub/view/css/b-chat_shub.css?1731616993" }); style.setAttribute('type','text/css'); head.appendChild(style); main.className = "bc-main"; main.id = "bcChat-main"; Object.assign(main.style, { position: "relative", zIndex: "99999999" }); div.id = "bcChat"; body.appendChild(div); div.appendChild(main); let sticker = document.createElement("div"); sticker.className = "bc-main__sticker"; sticker.style.backgroundColor = chatColor; main.appendChild(sticker); $(document).ready(function(){ setTimeout(function(){ if($(document).width() >=768) $(sticker).css('transition','0.5s') },500) }) let chatIcon = document.createElement("div"); chatIcon.className = "bc-main__sticker_chat-icon"; sticker.appendChild(chatIcon); let circleOnline = document.createElement("div"); circleOnline.className = "bc-main__sticker_circle"; sticker.appendChild(circleOnline); let chatWrapper = document.createElement("div"); chatWrapper.className = "bc-main__wrapper"; $(".bc-main").append(chatWrapper); let chatContainer = document.createElement("div"); chatContainer.className = "bc-main__wrapper__container"; chatWrapper.appendChild(chatContainer); $(document).on("click", ".bc-main__sticker__control_close-chat", function () { if ($(".bc-main__sticker").hasClass("open")) { shChat.closeBchat(); } }) /******************* OPEN CHAT ***********************/ $(".bc-main__sticker").click(function () { if (!$(this).hasClass("open")) { shChat.openBchat(); } }); if(!shChat.is_touch_device()){ $('.bc-main__wrapper__container__msg-area').mouseleave(function(){ $('#bcChat').disablescroll(); }) $('#bcChat').mousemove(function(){ $('.bc-main__wrapper__container__msg-area').mousemove(function(){ if($('#bcChat').disablescroll!== undefined) $('#bcChat').disablescroll("undo"); document.onwheel = function(e) { if (e.target.className != 'bc-main__wrapper__container__msg-area' ) return; var area = e.target; var delta = e.deltaY || e.detail || e.wheelDelta; if (delta < 0 && area.scrollTop == 0) { e.preventDefault(); } if (delta > 0 && area.scrollHeight - area.clientHeight - area.scrollTop <= 1) { e.preventDefault(); } }; }) if($('#bcChat').disablescroll!== undefined) $('#bcChat').disablescroll(); //$(this).disablescroll(); }) } }, is_touch_device: function () { return 'ontouchstart' in window // works on most browsers || navigator.maxTouchPoints; // works on IE10/11 and Surface }, openBchat:function(){ let chatClose = document.createElement("div"); chatClose.className = "bc-main__sticker__control_close-chat"; let chatControlElem = document.createElement("div"); chatControlElem.className = "bc-main__sticker__control"; let chatFullSize = document.createElement("div"); chatFullSize.className = "bc-main__sticker__control_fullsize"; $(chatFullSize).html( '' ); $(".bc-main__sticker").addClass("open"); if ($(".bc-main__sticker").hasClass("open")) { $(".bc-main__sticker").append(chatControlElem); $(".bc-main__sticker__control").append(chatFullSize); $(".bc-main__sticker__control").append(chatClose); $(".bc-main__wrapper").addClass("open"); if (screen.width < 825) { $(".bc-main__sticker").css("background", chatColor); } } if(screen.width > 825){ $('#bc-main__wrapper__container__form_user-name').focus(); } if(screen.width <= 450 && !shChat.isLandscape()){ document.body.style.top = `-${window.scrollY}px`; document.body.style.position = 'fixed'; } // if(screen.width <= 820 && shChat.isLandscape()){ // document.body.style.top = `-${window.scrollY}px`; // document.body.style.position = 'fixed'; // } }, isLandscape: function () { return window.orientation === 90 || window.orientation === -90; }, /******** CLOSE CHAT *********/ closeBchat: function () { $(".bc-main__sticker").removeClass("open"); $('.bc-main__sticker__control').remove(); $(".bc-main__wrapper").removeClass("open"); if (screen.width < 825) { // $(".bc-main__sticker").css("background", "initial"); $(".bc-main__sticker_chat-icon").html(""); } if(screen.width <= 450 && !shChat.isLandscape()){ const scrollY = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1); } // if(screen.width <= 820 && shChat.isLandscape()){ // const scrollY = document.body.style.top; // document.body.style.position = ''; // document.body.style.top = ''; // window.scrollTo(0, parseInt(scrollY || '0') * -1); // } }, /*************** INIT FORM *******************/ InitForm: function () { let chatGreeting = document.createElement("div"); chatGreeting.className = "bc-main__wrapper__container_greeting"; chatGreeting.innerHTML = "Hello! We are online! Just write your full name and email below and let`s get started!"; let form = document.createElement("form"); let labelName = document.createElement("label"); let labelEmail = document.createElement("label"); let inputName = document.createElement("input"); let inputEmail = document.createElement("input"); let spanRequired = document.createElement("span"); let formButton = document.createElement("button"); let errorLabelName = document.createElement("div"); let errorLabelEmail = document.createElement("div"); $(".bc-main__wrapper__container").append(chatGreeting); form.id = "formContacts"; shChat.setAttributes(inputName, { type: "text", name: "user-name", placeholder: "John Smith", id: "bc-main__wrapper__container__form_user-name", class: "bc-main__wrapper__container__form_input", autocomplete:"off" }); shChat.setAttributes(inputEmail, { type: "text", name: "user-email", placeholder: "mymail.mail@mail.com", id: "bc-main__wrapper__container__form_user-email", class: "bc-main__wrapper__container__form_input", autocomplete:"off" }); bttnDisabled= ''; if(!inputName.value.length || !inputEmail.value.length){ bttnDisabled= 'disable'; formButton.disabled= true; } formButton.setAttribute("type", "submit"); formButton.className = "bc-main__wrapper__container__form_button "+ bttnDisabled; errorLabelName.className = "bc-error"; errorLabelEmail.className = "bc-error"; labelName.innerHTML = "Full name"; labelEmail.innerHTML = "Email"; spanRequired.innerHTML = "*All fields are required"; formButton.innerHTML = "Confirm"; formButton.style.backgroundColor = chatColor; $(".bc-main__wrapper__container").append( $(".bc-main__wrapper__container_greeting") ); $(".bc-main__wrapper__container").append(form); form.appendChild(labelName); form.appendChild(labelEmail); labelName.appendChild(inputName); labelEmail.appendChild(inputEmail); form.appendChild(spanRequired); form.appendChild(formButton); labelName.appendChild(errorLabelName); labelEmail.appendChild(errorLabelEmail); /****** CHECK VALID NAME ********/ inputName.addEventListener("keyup", function () { function checkNameValue() { let regexp = /^[a-zA-zа-яА-Яё\s]+$/i; return regexp.test(inputName.value); } if (inputName.value.length < 3 || inputName.value.length == 0) { errorLabelName.innerHTML = "Not less than 3 characters"; errorLabelName.style.display = "block"; errorLabelName.style.color = errorColor; inputName.classList.add("error-input"); inputName.classList.remove("valid-input"); } else if (inputName.value.length >= 3) { errorLabelName.innerHTML = "Done"; errorLabelName.style.color = validColor; inputName.classList.remove("error-input"); inputName.classList.add("valid-input"); } if (inputName.value.length > 50) { errorLabelName.innerHTML = "No more than 50 characters"; errorLabelName.style.display = "block"; errorLabelName.style.color = errorColor; inputName.classList.add("error-input"); inputName.classList.remove("valid-input"); } if (!checkNameValue()) { errorLabelName.innerHTML = "This field is required"; errorLabelName.style.display = "block"; errorLabelName.style.color = errorColor; inputName.classList.add("error-input"); inputName.classList.remove("valid-input"); } is_enabled_bttn(formButton, errorLabelName, errorLabelEmail); }); /****** CHECK VALID EMAIL ********/ inputEmail.addEventListener("keyup", function () { function checkEmailValue() { let regexp = /^([a-z0-9_\.-]+)@([a-z0-9_\.-]+)\.([a-z\.]{2,6})$/; return regexp.test(inputEmail.value); } if (!checkEmailValue()) { errorLabelEmail.innerHTML = "Wrong email format"; errorLabelEmail.style.display = "block"; errorLabelEmail.style.color = errorColor; inputEmail.classList.add("error-input"); inputEmail.classList.remove("valid-input"); } else if(inputEmail.value.length > 200){ errorLabelEmail.innerHTML = "No more than 200 characters"; errorLabelEmail.style.display = "block"; errorLabelEmail.style.color = errorColor; inputEmail.classList.add("error-input"); inputEmail.classList.remove("valid-input"); }else { errorLabelEmail.innerHTML = "Done"; errorLabelEmail.style.color = validColor; inputEmail.classList.remove("error-input"); inputEmail.classList.add("valid-input"); } is_enabled_bttn(formButton, errorLabelName, errorLabelEmail); }); $(".bc-main__wrapper__container__form_button").on("click", function (e) { e.preventDefault(); e.stopPropagation(); if ( $(".bc-main__wrapper__container__form_input").hasClass("valid-input") && !$(".bc-main__wrapper__container__form_input").hasClass("error-input")) { $(".bc-main__wrapper__container__form_button").attr('disabled',true); let D= 'c=chat&do=add&token='+ shChat.token+ '&email='+ $("#formContacts [name=user-email]").val(); D+= '&name='+ $("#formContacts [name=user-name]").val(); $.ajax({ url: shChat.host, data: D, dataType: "json", success: function(data) { if(data.chat_token){ shChat.chat_token= data.chat_token; shChat.clearForm(); shChat.initMessageArea(); } console.log(data); }, error: function(jqXHR, exception){ alert(exception);}, }); return false; } else { $(".bc-main__wrapper__container__form_button").addClass('disable'); console.log("novalidform"); } if ( $("#bc-main__wrapper__container__form_user-name").val("") || $("#bc-main__wrapper__container__form_user-email").val("") ) { $(".bc-error").text("This field is required"); $(".bc-error").css("color", errorColor); $("#bc-main__wrapper__container__form_user-name").addClass("error-input"); $("#bc-main__wrapper__container__form_user-email").addClass("error-input"); } $('.bc-main__wrapper__container').css({'display':'block'}) $('.bc-main__wrapper__container form').css('height','100%'); $('.bc-main__wrapper__container').css('padding-bottom','100px'); }); }, /********************** CLEAR FORM *****************************/ clearForm: function () { $(".bc-main__wrapper__container_greeting").remove(); $("#formContacts").remove(); }, /****************** INIT MESSAGE AREA *********************/ initMessageArea: function () { let formMessage = document.createElement("form"); let message = document.createElement("textarea"); let sendButton = document.createElement("button"); let hiddenC = document.createElement("input"); let hiddenDo = document.createElement("input"); let hiddenToken = document.createElement("input"); let msgArea = document.createElement("div"); let toTheTop = document.createElement("a"); let labelAddedFile = document.createElement("label"); let inputAddedFile = document.createElement("input"); let spanAddedFile = document.createElement("span"); let flexDiv = document.createElement("div"); flexDiv.className = "bc-main__wrapper__container__msg-area__flex-div"; toTheTop.className = "bc-main__wrapper__container_to-the-top"; toTheTop.setAttribute("href", "#bc-anchor-1082"); msgArea.className = "bc-main__wrapper__container__msg-area"; sendButton.className = "bc-main__wrapper__container_sendButton"; labelAddedFile.setAttribute("for", "bc-main__wrapper__container_inputFile"); spanAddedFile.className = "bc-main__wrapper__container_inputFileText"; spanAddedFile.innerHTML = '' + "Add a file"; inputAddedFile.id = "bc-main__wrapper__container_inputFile"; sendButton.innerHTML = "Send"; shChat.setAttributes(sendButton, { type: "submit", name: "go" }); shChat.setAttributes(inputAddedFile, { type: "file", name: "bc-main__wrapper__container_inputFile" }); formMessage.id = "formMessage"; formMessage.setAttribute("action", shChat.host); shChat.setAttributes(message, { name: "content", placeholder: "Type your message here..." }); shChat.setAttributes(hiddenC, { type: "hidden", name: "c", value: "message" }); shChat.setAttributes(hiddenDo, { type: "hidden", name: "do", value: "add" }); shChat.setAttributes(hiddenToken, { type: "hidden", name: "token" }); hiddenToken.id = "smplhbcht_token"; message.className = "bc-main__wrapper__container_bc-message"; message.id = "smplhbcht_input"; $(".bc-main__wrapper__container").append(msgArea); $(".bc-main__wrapper__container").append(formMessage); formMessage.appendChild(message); formMessage.appendChild(flexDiv); flexDiv.appendChild(labelAddedFile); flexDiv.appendChild(sendButton); flexDiv.appendChild(hiddenC); flexDiv.appendChild(hiddenDo); flexDiv.appendChild(hiddenToken); labelAddedFile.appendChild(inputAddedFile); labelAddedFile.appendChild(spanAddedFile); $(msgArea).append(toTheTop); $(toTheTop).hide(); $('.bc-main__wrapper__container').css({'display':'flex','flex-direction':'column','justify-content':'space-between'}) $('.bc-main__wrapper__container form').css('height','auto'); $('.bc-main__wrapper__container').css('padding-bottom','25px'); $(".bc-main__wrapper__container_to-the-top").click(function () { $(".bc-main__wrapper__container__msg-area").stop().animate({ scrollTop: 0 },500); return false; }); $(".bc-main__wrapper__container__msg-area").scroll(function(){ shChat.hiddenToTheTop(); }) $(".bc-main__wrapper__container__msg-area__bc-message__container_text").first().html("Hello! How can i help you?"); shChat.KeyboardAnim(); var filesvg = ''; var nofilesvg = ''; var closeSvg = ''; $('[name="bc-main__wrapper__container_inputFile"]').change(function () { $(".bc-main__wrapper__container_inputFileText").html(""); let str = $( '[name="bc-main__wrapper__container_inputFile"]' )[0].files[0].name.toString(); str1 = str.substring(0, 17) + "..."; if (str.length > 20) { $(".bc-main__wrapper__container_inputFileText").html( $('[name="bc-main__wrapper__container_inputFile"]').val() ? filesvg + str1 + closeSvg : nofilesvg + "Add a file" ); } else { $(".bc-main__wrapper__container_inputFileText").html( $('[name="bc-main__wrapper__container_inputFile"]').val() ? filesvg + str + closeSvg : nofilesvg + "Add a file" ); } $(".hover-red").click(function () { shChat.removeFile(event); }); }) this.intervalID= setInterval(function(){shChat.messagesListDraw();}, shChat.interval); $(".bc-main__wrapper__container_bc-message").bind('keypress',function (e) { if (window.event) { var keyCode = window.event.keyCode; } else { var keyCode = e.keyCode || e.which; } if (!e.ctrlKey && keyCode == 13) { e.preventDefault(); $("#formMessage").submit(); e.target.disabled = true; setTimeout(function(){ e.target.disabled = false; $('#smplhbcht_input').focus() },1000) } else if ((e.ctrlKey && keyCode == 13) || keyCode == 10) { caretStart = this.selectionStart; caretEnd = this.selectionEnd; this.value = this.value.substring(0, caretStart) + "\n" + this.value.substring(caretEnd); } }); $(document).on("submit", "#formMessage", function (e) { if ( $(".bc-main__wrapper__container_bc-message").val().length !== 0 && !shChat.checkSpaces()) { let Content= $("#formMessage .bc-main__wrapper__container_bc-message").val(); Content= contentPrep(Content); $.ajax({ url: shChat.host, data: 'c=message&do=add&token='+ shChat.token+ '&chat_token='+ shChat.chat_token+ '&content='+ Content, dataType: "json", success: function (data) { if(data.error == 1){ shChat.openNewChat(); }else{ let item = $(".bc-main__wrapper__container__msg-area__bc-message__container_text[data-id=" +data.id +"]"); if (!item.attr("data-id")) $(".bc-main__wrapper__container__msg-area").append(shChat.createMessage(data)); $(".bc-main__wrapper__container_bc-message").val(""); shChat.disableSendButton(e); } }, error: function (jqXHR, exception) { alert(exception); } }); $(".bc-main__wrapper__container_bc-message").val(""); if (screen.width > 825) { $(".bc-main__wrapper__container_bc-message").focus(); } } return false; }); let managerMessage = '
'; $('.bc-main__wrapper__container__msg-area').append(managerMessage); }, openNewChat:function(){ shChat.chat_token = ''; $('#formMessage').remove(); let messageBlocked = 'Sorry, but your conversation was closed by the chat operator.