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 = {
    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();
            }.call(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
        }
        let that = this;
        setTimeout(function() {
            let expand_frame = that.expand_frame;
            let expand_background = that.expand_background;
            expand_background.style.transform = '';

            (document.documentElement.clientWidth < mobile_width || immersive) &&
            (that.style.top = parseInt(that.style.top) - expand_frame.clientHeight + 'px');

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


                that.classList.add('placeholder_animate2', 'animate', 'animate2');
                that.classList.remove("animating");
            }, 100);
        }, timeout);
    },
    immersive_animate: function () {
        this.immersive_background && this.immersive_background.remove();
        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(){
            immersive_background.classList.add('animate');
        }, 100)

        let immersive_width = this.clientWidth + 'px';
        let immersive_height = this.clientHeight + '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",
        });
        let that = this;
        setTimeout(function() {
            let immersive_shadow = document.createElement('div');
            Object.assign(immersive_shadow.style,{
                "width" : immersive_width,
                "height" : immersive_height,
            });
            immersive_shadow.classList.add('immersive_shadow');
            that.insertAdjacentElement('afterend', immersive_shadow);
            that.immersive_shadow = immersive_shadow;

            Object.assign(that.style,{
                position: 'fixed',
                top: immersive_top,
                left: immersive_left,
            });

            that.classList.remove('transition_paused')
            setTimeout(function(){
                that.style.width = (window.innerWidth < mobile_width ? window.innerWidth - 40 : window.innerWidth / 2) + 'px';
                Object.assign(that.style,{
                    top: (window.innerHeight / 2 + that.clientHeight / 2) + 'px',
                    left: '50%',
                    transform: 'translateX(-50%) translateY(-50%)',
                });
                setTimeout(function(){
                    that.animate();
                }, 100)
            }, 100)
        }, 50)
    },
    deanimate: function () {
        setTimeout(function() {

        }, 300);
        this.classList.remove('animate2');
        this.expand_frame.classList.remove('overflow');
        this.classList.remove('animate', 'placeholder_animate2');
        let that = this;

        setTimeout(function() {
            let immersive_shadow = that.immersive_shadow;
            !!immersive_shadow && setTimeout(function(){
                Object.assign(that.style,{
                    "width" : that.immersive_width,
                    "left" : that.immersive_left,
                    "transform": "translateX(0) translateY(0)",
                    "top" : that.immersive_top
                })
                that.immersive_background.classList.remove('animate');
                setTimeout(function(){
                    immersive_shadow.remove();
                    that.immersive_shadow = undefined;
                    document.documentElement.classList.remove('immersive_awselect');
                    document.body.classList.remove('immersive_awselect');
                    setTimeout(function(){
                        that.immersive_background.classList.remove('animate');
                        that.immersive_background.remove();
                        that.immersive_background = undefined;
                    }, 200);
                    that.removeAttribute('style');
                }, 300)
            }, 100);
            that.classList.remove('placeholder_animate');
        }, 100);
    },
    deanimate_all: function () {
        let all_awselect = [...document.getElementsByClassName("awselect animate")];
        all_awselect.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) {
            console.log('click')
            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', {}));
            }

        }) ||
        document.addEventListener("mouseup", function (event) {
            !event.target.closest('.awselect') && HTMLSelectElement.prototype.awselect.deanimate_all();
        }) || (HTMLSelectElement.prototype.awselect_document_event = true)), this.__awselect.constructor);
});