createButtonAnimate.js

function createButtonAnimate(b_type, b_style, b_direction, b_parent){ //создает анимированные кнопки | глоб об: check_win; main_button; other_button; w_content_click
    //b_type = css главной кнопки; b_style = стили окружающих кнопок;
    //b_direction = 'top', 'bottom' напрвление ; b_parent = родителский элемент
    
    //подключаем стили кнопок (общие)
    b_type = 'http://onlinesaler.ru/assets/templates/buttons/css/button_'+b_type+'.css';
    b_style = 'http://onlinesaler.ru/assets/templates/buttons/css/other_buttons_'+b_style+'.css';

    var styleButOther = document.createElement('link');
    styleButOther.rel = 'stylesheet';
    styleButOther.href = b_style;
    document.head.appendChild(styleButOther);
    //подключаем стили кнопок (выбранный)
    var styleButType = document.createElement('link');
    styleButType.rel = 'stylesheet';
    styleButType.href = b_type;
    document.head.appendChild(styleButType);
    //строем dom ОСНОВНОЙ кнопокИ и вставляем в body
    var main_button_str = `
    <div class="wave-button">
        <div class="wave-dissolve"></div>
        <div class="wave-return"></div>
        <div class="wave-content">
            <div class="wave-flip">
                <div class="wave-front"></div>
                <div class="wave-back">on-line</div>
            </div>
        </div>
    </div>
    `;
    //строем dom остальных кнопок и вставляем в body
    var other_button_str = `
    <div class="wave-chat">
    <div class="w-chat-dissolve"></div>
        <div class="w-chat-icon">
        </div>
    </div>
    <div class="wave-vk">
    <div class="w-vk-dissolve"></div>
        <div class="w-vk-icon">
        </div>
    </div>
    <div class="wave-phone">
    <div class="w-phone-dissolve"></div>
        <div class="w-phone-icon">
        </div>
    </div>
    
    <div class="wave-phonecall">
    <div class="w-phonecall-dissolve"></div>
        <div class="w-phonecall-icon">
        </div>
    </div>
    <div class="wave-video">
    <div class="w-video-dissolve"></div>
        <div class="w-video-icon">
        </div>
    </div>
    <div class="wave-bot">
    <div class="w-bot-dissolve"></div>
        <div class="w-bot-icon">
        </div>
    </div>
    `;
    var x;
    var y;
    var width = document.documentElement.clientWidth - 200;
    var height = document.documentElement.clientHeight - 200;

    window.main_button = document.createElement('div');//div со всеми кнопками


    main_button.innerHTML = main_button_str;
    main_button.style.cssText = 'position:absolute; left:0; top:0; width:185px; height:185px;';

    window.other_button = document.createElement('div');//прочие кнопки
    other_button.style.cssText = `position:relative;
        left: 60px;
        top: 130px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start`;
    if (b_style == 0) {//если передан стиль окружаюхищ кнопок other_buttons_0.css
        other_button.style.cssText = ''
    }
    other_button.innerHTML = other_button_str;
    function winResize(){
        var win_h = document.documentElement.clientHeight;
        var win_w = document.documentElement.clientWidth;
        var t = main_button.offsetTop;
        var l = main_button.offsetLeft;
        var w = main_button.offsetWidth;
        var h = main_button.offsetHeight;
        if (win_h < h+t) {
            main_button.style.top = win_h - h + 'px';
        }
        if (win_w < w+l) {
            main_button.style.left = win_w - w + 'px';
        }
    }

    if (b_direction == 'top' && b_style != 0 ) { //
        other_button.style.justifyContent = 'flex-start';
        other_button.style.top = '130px';
    }
    else if (b_direction == 'bottom' && b_style != 0 ) {
        other_button.style.justifyContent = 'flex-end';
        other_button.style.top = '-300px';
    }

    var w_content = main_button.getElementsByClassName('wave-content')[0];
    var w_back = main_button.getElementsByClassName('wave-back')[0];
    var w_chat = other_button.getElementsByClassName('wave-chat')[0];
    var w_vk = other_button.getElementsByClassName('wave-vk')[0];
    var w_video = other_button.getElementsByClassName('wave-video')[0];
    var w_phone = other_button.getElementsByClassName('wave-phone')[0];
    var w_phoneCall = other_button.getElementsByClassName('wave-phonecall')[0];
    var w_bot = other_button.getElementsByClassName('wave-bot')[0];
    w_chat.title = 'Диалог с оператором';
    w_vk.title = 'Отправить сообщение через VK';
    w_video.title = 'Видеозвонок';
    w_phone.title = 'Звонок с сайта';
    w_phoneCall.title = 'Мы вам перезвоним'
    w_bot.title = 'Робот автоответчик';

    window.w_content_click = true; //состояние клика

    w_content.onmouseenter = function(){
        if (!w_content_click) {
            return;
        }
        window.other_button.style.display = 'flex';
        setTimeout(function(){
        w_chat.classList.add('wave-chat-modern');
        w_vk.classList.add('wave-vk-modern');
        w_video.classList.add('wave-video-modern');
        w_phone.classList.add('wave-phone-modern');
        w_phoneCall.classList.add('wave-phonecall-modern');
        w_bot.classList.add('wave-bot-modern');
        },10)
        var content_hide;
        function hide(){
            content_hide = setTimeout(function(){
                window.other_button.style.display = 'none';
            },1000);
            
            w_chat.classList.remove('wave-chat-modern');
            w_vk.classList.remove('wave-vk-modern');
            w_video.classList.remove('wave-video-modern');
            w_phone.classList.remove('wave-phone-modern');
            w_phoneCall.classList.remove('wave-phonecall-modern');
            w_bot.classList.remove('wave-bot-modern');
        }
        var in_time;
        function hideTime(){
            in_time = setTimeout(function(){
                hide()
            },500);
        }
        function resetHide(){
            clearTimeout(in_time);
            clearTimeout(content_hide);
        }
        resetHide();
        w_content.onmouseleave = hideTime;
        w_content.addEventListener('mouseenter', resetHide)
        other_button.onmouseleave = hide;
        other_button.onmouseenter = resetHide;
    }

    w_content.onclick = function(){
        if (!w_content_click) {
            return;
        }
        w_chat.classList.toggle('wave-chat-modern');
        w_vk.classList.toggle('wave-vk-modern');
        w_video.classList.toggle('wave-video-modern');
        w_phone.classList.toggle('wave-phone-modern');
        w_phoneCall.classList.toggle('wave-phonecall-modern');
        w_bot.classList.toggle('wave-bot-modern');
    }

    main_button.appendChild(other_button);
    b_parent.appendChild(main_button);

}

independenceButton.js

function inDepBut(type, parent){
  //type = 'chat','phone', 'phonecall', 'video', 'bot','vk'; parent = DomElement
  var type_str = `
  <div class="wave-${type} wave-${type}-modern">
  <div class="w-${type}-dissolve"></div>
  <div class="w-${type}-icon">
  </div>
  </div>`;
  var btn_type = document.createElement('div');//прочие кнопки
  btn_type.style.cssText = 'position: absolute; left: 0px; top: 0px';
  btn_type.innerHTML = type_str;
  parent.appendChild(btn_type);
}