# floating-button/6.0.11/assets/js/script.js

Floating Button – Easily Create Sticky, Fixed & Floating Buttons, version 6.0.11. 554 lines.

- Page: https://pluginprobe.com/plugins/floating-button/6.0.11/code/assets/js/script.js
- Raw: https://pluginprobe.com/plugins/floating-button/6.0.11/raw/assets/js/script.js
- Modified: 2025-03-18T08:33:00+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/floating-button/6.0.11/code/assets/js/script.js#L10-L20`.

```javascript
/**
 * FloatingButton
 * A JavaScript class for creating customizable floating button.
 *
 * @version 1.0.0
 * @license MIT License
 * @author Dmytro Lobov
 */

'use strict';

class FloatingButton {

    constructor(options) {

        const defaultOptions = {
            showAfterTimer: false,
            hideAfterTimer: false,
            showAfterPosition: false,
            hideAfterPosition: false,
            uncheckedBtn: false,
            uncheckedSubBtn: false,
            hideBtns: false,

        };

        this.settings = {...defaultOptions, ...options};
        this.element = document.getElementById(this.settings.element);
    }

    activeLikeBtn() {
        const likeBtn = this.element.querySelector('[data-btn-type="like"]');

        if (!likeBtn) {
            return false;
        }

        if (!this.settings.pageId) {
            const parent = likeBtn.closest('li');
            if(parent) {
                parent.remove();
            } else {
                this.element.remove();
            }
            return false;
        }

        if (parseInt(localStorage.getItem('likePost')) === this.settings.pageId) {
            likeBtn.classList.add('_active');
        }

    }

    displayMenu() {

        if(this.settings.showAfterTimer || this.settings.hideAfterTimer || this.settings.hideAfterPosition ||  this.settings.showAfterPosition) {

            this.settings.showAfterTimer && this.showAfterTimer(this.settings.showAfterTimer);
            this.settings.hideAfterTimer && this.hideAfterTimer(this.settings.hideAfterTimer);
            this.settings.hideAfterPosition && this.hideAfterPosition(this.settings.hideAfterPosition);
            this.settings.showAfterPosition && this.showAfterPosition(this.settings.showAfterPosition);
        } else {
            this.showMenu();
        }

    }

    showMenu() {
        this.element.classList.remove('is-hidden');

    }

    hideMenu() {
        this.element.classList.add('is-hidden');

    }

    showAfterTimer() {
        setTimeout(() => this.showMenu(), this.settings.showAfterTimer * 1000);

    }

    hideAfterTimer() {

        setTimeout(() => this.element.classList.add('is-hidden'), this.settings.hideAfterTimer * 1000);
    }

    hideAfterPosition() {

        window.addEventListener('scroll', () => {
            const shouldHide = window.scrollY > this.settings.hideAfterPosition;
            if (!shouldHide) {
                this.showMenu();
            } else {
                this.hideMenu();
            }
        });
    }

    showAfterPosition() {

        window.addEventListener('scroll', () => {
            const shouldHide = window.scrollY <= this.settings.showAfterPosition;
            if (!shouldHide) {
                this.showMenu();
            } else {
                this.hideMenu();
            }
        });
    }

    actionServices() {
        this.element.addEventListener('click', (event) => {
            const target = event.target.closest('[data-btn-type]');
            if (!target) return;

            event.preventDefault();
            const action = target.getAttribute('data-btn-type');
            this.handleAction(action, target);
        });
    }

    handleAction(action, link) {
        const actionMap = {
            print: () => window.print(),
            back: () => window.history.back(),
            forward: () => window.history.forward(),
            scroll: () => {
                const anchor = link.getAttribute('href');
                const element = document.querySelector(anchor);
                element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
            },
            toTop: () => window.scrollTo({top: 0, behavior: 'smooth'}),
            tobottom: () => window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'}),
            like: () => this.setLikes(link),

        };

        const actionFunction = actionMap[action];
        if (actionFunction) {
            actionFunction();
        }
    }

    setLikes(link) {
        const counter = link.getAttribute('data-counter');
        const item = localStorage.getItem('likePost');
        if (this.settings.pageId && this.settings.pageId !== parseInt(item)) {
            const nexCounter = parseInt(counter) + 1;
            let data = {
                'action': 'wowp_likes',
                'post_id': this.settings.pageId, // Enter the id of the post
                '_ajax_nonce': wowp_flBtn.nonce // replace with how you have localized your nonce
            };

            let body = new URLSearchParams();
            for (let key in data) {
                body.append(key, data[key]);
            }

            fetch(wowp_flBtn.ajax_url, { // replace with how you have localized your ajaxurl
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                body: body.toString()
            })
                .then(data => {
                    localStorage.setItem('likePost', this.settings.pageId);
                    link.setAttribute('data-counter', nexCounter);
                    link.classList.add('_active');
                })
                .catch(error => console.error('Error:', error));


        }
    }

    shareServices() {
        const links = this.element.querySelectorAll('[data-share]');
        links.forEach(link => {
            link.addEventListener('click', () => {
                this.shareThis(link);
            });
        });
    }

    shareThis(link) {
        const service = link.getAttribute('data-share');
        const shareData = this.defaultShareServices();
        const shareService = shareData[service];

        const winWidth = 550;
        const winHeight = 450;
        const topPosition = (screen.height - winHeight) / 2;
        const leftPosition = (screen.width - winWidth) / 2;

        const winParams = `
    menubar=no,
    toolbar=no,
    location=no,
    scrollbars=no,
    status=no,
    resizable=yes,
    width=${winWidth},
    height=${winHeight},
    top=${topPosition},
    left=${leftPosition}
  `;

        window.open(shareService.url, null, winParams);
    }

    defaultShareServices() {
        const PAGE_URL = encodeURIComponent(document.location.href);
        const PAGE_TITLE = encodeURIComponent(document.title);

        return {
            'blogger': {
                url: `https://www.blogger.com/blog-this.g?u=${PAGE_URL}&n=${PAGE_TITLE}`,
            },
            'buffer': {
                url: `https://buffer.com/add?text=${PAGE_TITLE}&url=${PAGE_URL}`,
            },
            'diaspora': {
                url: `https://share.diasporafoundation.org/?title=${PAGE_TITLE}&url=${PAGE_URL}`,
            },
            'digg': {
                url: `http://digg.com/submit?url=${PAGE_URL}`,
            },
            'douban': {
                url: `http://www.douban.com/recommend/?url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },

            'draugiem': {
                url: `https://www.draugiem.lv/say/ext/add.php?title=${PAGE_TITLE}&url=${PAGE_URL}`,
            },
            'email': {
                url: `mailto:?subject=${PAGE_TITLE}&body=${PAGE_URL}`,
            },
            'evernote': {
                url: `http://www.evernote.com/clip.action?url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'facebook': {
                url: `https://www.facebook.com/sharer.php?u=${PAGE_URL}`,
            },
            'flipboard': {
                url: `https://share.flipboard.com/bookmarklet/popout?v=2&title=${PAGE_TITLE}&url=${PAGE_URL}`,
            },
            'google-bookmarks': {
                url: `https://www.google.com/bookmarks/mark?op=edit&bkmk=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'googleplus': {
                url: `https://plus.google.com/share?url=${PAGE_URL}`,
            },
            'hacker-news': {
                url: `https://news.ycombinator.com/submitlink?u=${PAGE_URL}&t=${PAGE_TITLE}`,
            },
            'instapaper': {
                url: `http://www.instapaper.com/edit?url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'line': {
                url: `https://lineit.line.me/share/ui?url=${PAGE_URL}`,
            },
            'linkedin': {
                url: `https://www.linkedin.com/shareArticle?mini=true&url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'livejournal': {
                url: `http://www.livejournal.com/update.bml?subject=${PAGE_TITLE}&event=${PAGE_URL}`,
            },
            'myspace': {
                url: `https://myspace.com/post?u=${PAGE_URL}&t=${PAGE_TITLE}`,
            },
            'odnoklassniki': {
                url: `https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=${PAGE_URL}`,
            },
            'pinterest': {
                url: `http://pinterest.com/pin/create/button/?url=${PAGE_URL}`,
            },
            'pocket': {
                url: `https://getpocket.com/edit?url=${PAGE_URL}`,
            },
            'qzone': {
                url: `http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${PAGE_URL}`,
            },
            'reddit': {
                url: `http://www.reddit.com/submit?url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'renren': {
                url: `http://widget.renren.com/dialog/share?resourceUrl=${PAGE_URL}&srcUrl=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'skype': {
                url: `https://web.skype.com/share?url=${PAGE_URL}`,
            },
            'stumbleupon': {
                url: 'http://www.stumbleupon.com/submit?url=${PAGE_URL}&title=${PAGE_TITLE}',
            },
            'telegram': {
                url: `https://telegram.me/share/url?url=${PAGE_URL}&text=${PAGE_TITLE}`,
            },
            'tumblr': {
                url: `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'twitter': {
                url: `https://twitter.com/intent/tweet?url=${PAGE_URL}&text=${PAGE_TITLE}`,
            },
            'vk': {
                url: `http://vk.com/share.php?url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'weibo': {
                url: `http://service.weibo.com/share/share.php?url=${PAGE_URL}&title=${PAGE_TITLE}`,
            },
            'whatsapp': {
                url: `whatsapp://send?text=${PAGE_TITLE}%20%0A${PAGE_URL}`,
            },
            'xing': {
                url: `https://www.xing.com/spi/shares/new?url=${PAGE_URL}`,
            },
        };
    }

    translate() {
        const languages = this.element.querySelectorAll('[data-google-lang]');
        if (languages.length > 0) {
            this.appendScript();
        }
    }

    appendScript() {
        const head = document.head;
        const script = document.createElement('script');
        script.src = 'https://translate.google.com/translate_a/element.js?cb=FLBTNTranslateInit';
        script.setAttribute('defer', '');
        head.appendChild(script);

        const styleElement = document.createElement('style');
        styleElement.textContent = '.skiptranslate {display: none !important;}body {top: 0 !important}';
        head.appendChild(styleElement);
    }

    static Translate() {
        const doc = document;
        const win = window;
        const deflang = doc.documentElement.lang.slice(0, 2);
        const lang = this.getLanguage(deflang);

        if (lang === deflang) {
            this.clearCookie();
        }

        const languages = Array.from(doc.querySelectorAll('[data-google-lang]'));

        if (!languages.length) {
            return false;
        }

        new google.translate.TranslateElement({
            pageLanguage: deflang,
        });

        languages.forEach((language) => {
            language.addEventListener('click', (e) => {
                e.preventDefault();
                let lang = language.getAttribute('data-google-lang');
                this.setCookie(lang);
                win.location.reload();
            });
        });
    }

    static getLanguage(lang) {
        const keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');
        const cookieLang = keyValue ? keyValue[2].split('/')[2] : null;
        return (cookieLang !== undefined && cookieLang !== 'null') ? cookieLang : lang;
    }

    static clearCookie() {
        document.cookie = 'googtrans=null';
        document.cookie = 'googtrans=null; domain=' + document.domain;
    }

    static setCookie(lang) {
        document.cookie = 'googtrans=/auto/' + lang;
        document.cookie = 'googtrans=/auto/' + lang + '; domain=' + document.domain;
    }

    uncheckBtn() {
        if (!this.settings.uncheckedBtn) {
            return;
        }
        const id = this.settings.element;
        const element = this.element;
        const self = this;
        document.addEventListener('click', function (evt) {
            const parent = evt.target.closest('#' + id);
            if (parent !== element) {
                element.querySelector('input[type="checkbox"]').checked = false;
                self.hideButtons('show');
            }
        });
    }

    uncheckedSubBtn() {
        if (!this.settings.uncheckedSubBtn) {
            return;
        }
        const subBtns = [...this.element.querySelectorAll('ul a')];
        const self = this;
        subBtns.forEach((bnt) => {
            bnt.addEventListener('click', (e) => {
                this.element.querySelector('input[type="checkbox"]').checked = false;
                self.hideButtons('show');
            });
        });
    }

    hideButtons(action) {
        if (!this.settings.hideBtns) {
            return;
        }
        const allButtons = [...document.querySelectorAll('.flBtn')];
        const otherButtons = allButtons.filter(btn => btn !== this.element);
        if (action === 'hide') {
            otherButtons.forEach(btn => btn.classList.add('is-hidden'));
        } else {
            otherButtons.forEach(btn => btn.classList.remove('is-hidden'));
        }

    }

    check() {
        const checkBox = this.element.querySelector('input[type="checkbox"]');
        const element = this.element;
        const self = this;

        if (!checkBox) {
            return false;
        }

        function toggleButtons() {
            if (checkBox.checked) {
                element.classList.add('flBtn-stop');
                self.hideButtons('hide');
            } else {
                element.classList.remove('flBtn-stop');
                self.hideButtons('show');
            }
        }

        checkBox.addEventListener('change', toggleButtons);
        toggleButtons();
    }

    openMenu() {
        const flBtnMenu = document.querySelectorAll('[data-btn-type="content-menu"]');

        if (!flBtnMenu) {
            return false;
        }

        flBtnMenu.forEach((btn) => {
            btn.addEventListener('click', () => {
                const parent = btn.closest('.flBtn');
                const position = btn.getBoundingClientRect();
                const menuOrder = btn.getAttribute('data-btn-call-menu');
                const menu = document.querySelector('[data-btn-menu="' + menuOrder + '"]');
                const subMenu = btn.closest('ul');
                let typeFirst = false;
                if (subMenu && subMenu.querySelector('.flBtn-first')) {
                    typeFirst = subMenu.classList.contains('flBtn-first');
                }
                const winWidth = window.innerWidth;
                const winHeight = window.innerHeight;
                if (parent.classList.contains('flBtn-position-l')) {
                    menu.style.top = position.top + 'px';
                    menu.style.left = position.left + position.width + 10 + 'px';
                } else if (parent.classList.contains('flBtn-position-r')) {
                    menu.style.top = position.top + 'px';
                    menu.style.right = position.width + 40 + 'px';
                } else if (parent.classList.contains('flBtn-position-t')) {
                    menu.style.top = position.top + position.width + 10 + 'px';
                    menu.style.left = position.left + 'px';
                } else if (parent.classList.contains('flBtn-position-b')) {
                    menu.style.left = position.left + 'px';
                    menu.style.bottom = position.width + 40 + 'px';
                } else if (parent.classList.contains('flBtn-position-tr')) {
                    menu.style.top = typeFirst ? position.top + 'px' : position.bottom + 20 + 'px';
                    menu.style.right = typeFirst ? position.width + 40 + 'px' : winWidth - position.right + 'px';
                } else if (parent.classList.contains('flBtn-position-tl')) {
                    menu.style.top = typeFirst ? position.top + 'px' : position.bottom + 20 + 'px';
                    menu.style.left = typeFirst ? position.right + 10 + 'px' : position.left + 'px';
                } else if (parent.classList.contains('flBtn-position-bl')) {
                    menu.style.bottom = typeFirst ? winHeight - position.bottom + 'px' : winHeight - position.top + 20 + 'px';
                    menu.style.left = typeFirst ? position.right + 20 + 'px' : position.left + 'px';
                } else if (parent.classList.contains('flBtn-position-br')) {
                    menu.style.bottom = typeFirst ? winHeight - position.bottom + 'px' : winHeight - position.top + 20 + 'px';
                    menu.style.right = typeFirst ? winWidth - position.left + 20 + 'px' : winWidth - position.right + 'px';
                }

                menu.classList.remove('is-hidden');

            });
        });

    }

    closeMenu() {
        const flMenuClose = document.querySelectorAll('.flBtn_close');
        if (!flMenuClose) {
            return false;
        }

        flMenuClose.forEach((btn) => {
            btn.addEventListener('click', () => {
                const menu = btn.closest('.flBtn_menu-wrapper');
                menu.classList.add('is-hidden');
            });
        });
    }

    run() {
        this.activeLikeBtn();
        this.displayMenu();
        this.actionServices();
        this.shareServices();
        this.translate();
        this.uncheckBtn();
        this.uncheckedSubBtn();
        this.check();
        this.openMenu();
        this.closeMenu();
    }

    static initialize(options) {
        const flbtn = new FloatingButton(options);
        flbtn.run();
        return flbtn;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    for (let key in window) {
        if (key.indexOf('FloatingButton_') >= 0) {
            const val = window[key];
            new FloatingButton(val);
            FloatingButton.initialize(val);
        }
    }

});

function FLBTNTranslateInit() {
    FloatingButton.Translate();
}
```