awesome-select/package/js/awselect.js

/**

jQuery Awselect
Developed by: Prev Wong
Documentation: https://prevwong.github.io/awesome-select/
Github: https://github.com/prevwong/awesome-select/

**/

var mobile_width = 800;


HTMLSelectElement.prototype.__defineSetter__('awselect', function (awselect) {this.__awselect = awselect});

HTMLSelectElement.prototype.awselect = {
    html_padding_right: '0px',
    animates: [],
    constructor: function() {
        this.awselect_section = true;
        this.awselect.build.call(this);
        this.awselect_section.addEventListener('aw:animate', function () {
            this.animate();
        });
        this.awselect_section.addEventListener('aw:deanimate', function () {
            this.deanimate();
        });

        this.awselect_section.addEventListener("change", function () {
            let select = this.select;

            let text = '';
            let selectedOptions = [...select.selectedOptions];
            let selectedOptionLastIndex = selectedOptions.length - 1;
            selectedOptions.forEach(function (item, index) {
                text += item.text + (selectedOptionLastIndex !== index ? ',' : '');
            });
            let value = document.createElement('span');
            value.classList.add('value');
            value.innerHTML = text;

            let content = this.querySelector(":scope > .frame > .content");
            content.firstChild.classList.contains('value') ? content.firstChild.replaceWith(value) : content.prepend(value);

            select.dispatchEvent(new Event("change"));
            setTimeout(function () {
                this.deanimate();
            }.bind(this), 100);
        });
    },
    animate: function () {
        if (this.classList.contains('animating')) {
            return;
        }
        this.classList.add('animating');
        let timeout = 100;
        let all_awselect = [...document.getElementsByClassName("awselect animate")];

        all_awselect.length > 0 && HTMLSelectElement.prototype.awselect.deanimate_all() && this.deanimate() && (timeout = 600);

        let immersive = this.select.immersive;
        if (document.documentElement.clientWidth < mobile_width || immersive) {
            this.immersive_animate();
            timeout += 200
        }
        setTimeout(function() {
            let expand_frame = this.expand_frame;
            this.classList.add('expand');

            this.classList.add("placeholder_animate");
            setTimeout(function() {
                setTimeout(function(){
                    if (expand_frame.clientHeight == 200) {
                        expand_frame.addClass("overflow");
                    }
                }.bind(this), 200);


                this.classList.add('placeholder_animate2', 'animate', 'animate2');
                this.classList.remove("animating");
                HTMLSelectElement.prototype.awselect.animates.push(this);
            }.bind(this), 100);
        }.bind(this), timeout);
    },
    immersive_animate: function () {
        this.immersive_background && this.immersive_background.remove();
        if (window.innerWidth - document.documentElement.clientWidth > 0) {
            HTMLSelectElement.prototype.awselect.html_padding_right = `${ window.innerWidth - document.documentElement.clientWidth }px`;
            document.documentElement.style.paddingRight = `calc(${ getComputedStyle(document.documentElement).paddingRight } + ${ window.innerWidth - document.documentElement.clientWidth }px)`;
            document.documentElement.classList.add('immersive_awselect');
            document.body.classList.add('immersive_awselect');
        }
        let immersive_background = document.createElement('div');
        immersive_background.classList.add('awselect_immersive_background');
        this.immersive_background = immersive_background;
        document.body.prepend(immersive_background);
        setTimeout(function(){
            this.classList.add('animate');
        }.bind(immersive_background), 100)

        let immersive_width = this.clientWidth + 'px';
        let immersive_left = this.offsetLeft + 'px';
        let immersive_top = this.offsetTop - window.scrollY + 'px';
        this.immersive_width = immersive_width;
        this.immersive_left = immersive_left;
        this.immersive_top = immersive_top;
        this.classList.add('transition_paused');
        Object.assign(this.style,{
            "width" : immersive_width,
            "z-index": "9999",
        });

        setTimeout(function() {
            let immersive_shadow = document.createElement('div');
            Object.assign(immersive_shadow.style,{
                "width" : immersive_width,
                "height" : this.clientHeight + 'px',
            });
            immersive_shadow.classList.add('immersive_shadow');
            this.insertAdjacentElement('afterend', immersive_shadow);
            this.immersive_shadow = immersive_shadow;
            Object.assign(this.style,{
                position: 'fixed',
                top: immersive_top,
                left: immersive_left,
            });
            this.classList.remove('transition_paused')
            setTimeout(function() {
                this.style.width = (window.innerWidth < mobile_width ? window.innerWidth - 40 : window.innerWidth / 2) + 'px';
                Object.assign(this.style,{
                    top: (window.innerHeight / 2 + this.clientHeight / 2 - this.expand_frame.clientHeight) + 'px',
                    left: '50%',
                    transform: 'translateX(-50%) translateY(-50%)',
                });
                setTimeout(function() {
                    this.animate();
                }.bind(this), 100)
            }.bind(this), 100)
        }.bind(this), 50)
    },
    deanimate: function () {
        setTimeout(function() {

        }, 300);
        this.classList.remove('animate2');
        this.expand_frame.classList.remove('overflow');
        this.classList.remove('animate', 'placeholder_animate2', 'expand');
        HTMLSelectElement.prototype.awselect.animates = HTMLSelectElement.prototype.awselect.animates.filter(function (index) { return index !== this;}.bind(this));
        setTimeout(function() {
            let immersive_shadow = this.immersive_shadow;
            !!immersive_shadow && setTimeout(function(){
                Object.assign(this.style,{
                    "width" : this.immersive_width,
                    "left" : this.immersive_left,
                    "transform": "translateX(0) translateY(0)",
                    "top" : this.immersive_top
                })
                this.immersive_background.classList.remove('animate');
                setTimeout(function(){
                    immersive_shadow.remove();
                    this.immersive_shadow = undefined;
                    if (document.body.matches('.immersive_awselect')) {
                        document.documentElement.style.paddingRight = `calc(${ getComputedStyle(document.documentElement).paddingRight } - ${ HTMLSelectElement.prototype.awselect.html_padding_right })`;
                        document.documentElement.classList.remove('immersive_awselect');
                        document.body.classList.remove('immersive_awselect');
                    }

                    setTimeout(function(){
                        this.immersive_background.classList.remove('animate');
                        this.immersive_background.remove();
                        this.immersive_background = undefined;
                    }.bind(this), 200);
                    this.removeAttribute('style');
                }.bind(this), 300)
            }.bind(this), 100);
            this.classList.remove('placeholder_animate');
        }.bind(this), 100);
    },
    deanimate_all: function () {
        this.animates.forEach(function (awselect) {
            awselect.deanimate();
        });
    },
    build: function () {
        let id = this.id;
        let options = this.querySelectorAll(`:scope > option`);
        let classes = `${ this.className } awselect`;
        let options_html = '<ul class="awselect-options">';
        let awselect_icon = '<svg version="1.1" class="chevron_thin_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" xml:space="preserve"><path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0c0.27,0.268,0.271,0.701,0,0.969l-7.908,7.83c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25L17.418,6.109z"/></svg>';
        let selected = false;

        options.forEach(function(item) {
            let text = item.text;
            item.selected && (selected = text);
            options_html += `<li><a>${ text }</a></li>`;
        });
        options_html += '</ul>';

        if (!id) {
            let xpath = '';
            let item = this;
            let slash = '';
            [...Array(5).keys()].some(function (index) {
                let tagName = item.tagName;
                let id = item.id;
                let siblingIndex = [...item.parentElement.querySelectorAll(`:scope > ${tagName}`)].indexOf(item);

                xpath = (tagName === 'BODY' ? '//' : '') + (!!id ? `id("${id}")`  : `${tagName}[${siblingIndex + 1}]`) + slash + xpath;
                slash = '/';
                item = item.parentElement;
                return !!id || tagName === 'BODY';
            });
            id = '$$$$-$$$$-$$$$-$$$$'.replace(/[$]/g, function(c, p) {
                str = (new TextEncoder).encode(xpath).join('z');
                return str[p % str.length];
            });
            this.id = id;
        }
        this.immersive = this.attributes.immersive?.value === 'true';

        let awselect_section = document.createElement('div');
        awselect_section.id = 'awselect_' + id;
        awselect_section.select = this;
        awselect_section.classList.value = classes;

        let frame = document.createElement('div');
        frame.classList.value = 'frame';
        !!selected && (frame.innerHTML += `<span class="value">${ selected }</span>`);
        !!this.attributes?.placeholder?.value
        && (frame.innerHTML += `<span class="placeholder">${ this.attributes.placeholder.value }</span>`);
        frame.innerHTML += `<i class="icon">${ awselect_icon }</i>`;
        frame.innerHTML = `<div class="content">${ frame.innerHTML }</div>`;
        awselect_section.append(frame);

        let expand_background = document.createElement('div');
        expand_background.classList.value = 'expand_background';
        awselect_section.append(expand_background);

        let expand_frame = document.createElement('div');
        expand_frame.classList.value = 'expand_frame';
        expand_frame.style.display = 'block';
        expand_frame.innerHTML = options_html;
        awselect_section.append(expand_frame);

        this.insertAdjacentElement('afterend', awselect_section);
        this.style.display = 'none';
        this.awselect_section = awselect_section;
        awselect_section.expand_background = expand_background;
        awselect_section.expand_frame = expand_frame;
        awselect_section.frame = frame;

        expand_background.style.height = `calc(100% + ${ expand_frame.clientHeight }px)`;
        expand_frame.removeAttribute('style');

        this.awselect_section.animate = this.awselect.animate;
        this.awselect_section.deanimate = this.awselect.deanimate;
        this.awselect_section.immersive_animate = this.awselect.immersive_animate;
    }
};
HTMLSelectElement.prototype.__defineGetter__('awselect', function () {
    return (!!this.awselect_section || !(this instanceof HTMLSelectElement)) ? this.__awselect :
        (!HTMLSelectElement.prototype.awselect_document_event &&
        (document.addEventListener('click', function (event) {
            let option = event.target.closest('.awselect ul li a');
            let awselect = event.target.closest('.awselect');
            if (!!option) {
                awselect.select.value = awselect.select.children[[...option.closest('li').parentElement.children].indexOf(option.closest('li'))].value;
                awselect.dispatchEvent(new Event("change"));
            } else {
                !!awselect && awselect.dispatchEvent(new CustomEvent(awselect.classList.contains('animate') ? 'aw:deanimate' : 'aw:animate', {}));
            }
        }) ||
        (new MutationObserver(function () {HTMLSelectElement.prototype.awselect.animates = [...document.getElementsByClassName("awselect animate")]})).observe(document.body, { childList: true, subtree: true }) ||
        document.addEventListener("mouseup", function (event) {
            !event.target.closest('.awselect') && HTMLSelectElement.prototype.awselect.deanimate_all();
        })  || (HTMLSelectElement.prototype.awselect_document_event = true)), this.__awselect.constructor);
});