How edit iconpicker js file for local (file in my server) js and css files

39 Views Asked by At

I need a help for editing the js file to let me use the script with my local file, when use these code on html the script work :

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">

but when I used local file the script didn't work:

<link href="https:./css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/all.min.css">

the file I neend to edit it this:

class Fa6IconPicker
{
    title = null;
    targetInput = null;
    targetViewIcon = null;
    popoverElement = null;
    targetCssName = "all.min.css";
    enableIcons = [];
    disableIcons = [];
    isTargetInputClickEvent = true;
    showBtnElement = null;
    popoverOptions = {
        placement: 'bottom',
    };
    maxWidth = '320px';
    isDispose = true;
    extProps = {};

    #targetSheet = null;
    #containerDiv = null;
    #drawDiv = null;
    constructor(settings)
    {

        if (bootstrap === void 0)
            throw new Error('fontawesome6-icon-picker error: bootstrap');
        if (bootstrap.Popover === void 0)
            throw new Error('fontawesome6-icon-picker error: bootstrap Popover');
        if (!bootstrap.Popover.VERSION.startsWith('5.'))
            console.log('fontawesome6-icon-picker info: bootstrap 5.x.x');
        this.#containerDiv = document.createElement('div');
        this.#drawDiv = document.createElement('div');
        this.#drawDiv.style.height = "600px";
        this.#drawDiv.style.overflowY = 'scroll';
        const search_input = document.createElement('input');
        search_input.setAttribute('type','text');
        search_input.classList.add('form-control','mb-3');
        search_input.addEventListener('input', (event) => {
            this.search(event.target.value);
        });
        this.#containerDiv.appendChild(this.#drawDiv).before(search_input);
        if (settings === void 0)
            return;

                for (const setting_name of Object.keys(settings)) {
            this[setting_name] === void 0 ? this.extProps[setting_name] = settings[setting_name] : this[setting_name] = settings[setting_name];
        }
        if (this.targetInput !== null)
            this.create();
    }
    create()
    {
        this.chackFaCss();
        if (this.targetInput === null)
            throw new Error('fontawesome6-icon-picker error: input targetInput');
        if (this.isDispose === false)
            throw new Error('fontawesome6-icon-picker error: dispose');
        this.initPopover();
        this.isDispose = false;
    }
    initPopover()
    {
        if (!this.popoverElement)
            this.popoverElement = this.targetInput;
        this.popover = new bootstrap.Popover(this.popoverElement, {...{
                title: this.title ?? "",
                content: this.#containerDiv,
                html: true,
                trigger: 'manual',
            },...this.popoverOptions});
        this.popover.getTipElement().style.maxWidth = this.maxWidth;
        this.toggleHandler = this.toggle.bind(this);
        if (this.isTargetInputClickEvent) {
            this.targetInput.addEventListener('click', this.toggleHandler);
        };
        if (this.showBtnElement) {
            this.showBtnElement.addEventListener('click', this.toggleHandler);
        };
    }
    
    chackFaCss()
    {
        
        const styleSheets = Array.from(document.styleSheets).filter((styleSheet) => styleSheet.href !== null && styleSheet.href.endsWith(this.targetCssName));
        if (styleSheets === void 0 || styleSheets.length == 0) {
            throw new Error('fontawesome6-icon-picker error: icon');
        }
        
        const targetSheets = styleSheets.filter((styleSheet) => (!styleSheet.href || styleSheet.href.startsWith(window.location.origin)) && styleSheet instanceof CSSStyleSheet && styleSheet.cssRules);
        if (targetSheets.length < 1) {
            this.loadCSSCors(styleSheets[0].href);
        } else {
            this.#targetSheet = targetSheets[0];
            this.drawIcons();
        }
    }
    
    loadCSSCors(stylesheet_uri)
    {
        console.log(stylesheet_uri);
        var _xhr = globalThis.XMLHttpRequest;
        var has_cred = false;
        try {
            has_cred = _xhr && ('withCredentials' in (new _xhr()));
        } catch (e) {
        }
        if (!has_cred) {
            console.error('CORS not supported');
            return;
        }
        var xhr = new _xhr();
        xhr.open('GET', stylesheet_uri);
        xhr.onload = () => {
            xhr.onload = xhr.onerror = null;
            if (xhr.status < 200 || xhr.status >= 300) {
                console.error('style failed to load: ' + stylesheet_uri);
            } else {
                var style_tag = document.createElement('style');
                style_tag.appendChild(document.createTextNode(xhr.responseText));
                document.head.appendChild(style_tag);
                const targetSheet = document.styleSheets[document.styleSheets.length-1];
                targetSheet.disabled = true;
                this.#targetSheet = targetSheet;
                this.drawIcons();
            }
        };
        xhr.onerror = function() {
            xhr.onload = xhr.onerror = null;
            console.error('XHR CORS CSS fail:' + styleURI);
        };
        xhr.send();
    }
    drawIcons()
    {
        this.#drawDiv.innerHTML = "";
        const members = Array.from(this.#targetSheet.cssRules).filter(v => v instanceof CSSStyleRule && v.style.content !== "");
        let zFlag = false;
        members.forEach(function(v, k) {
            if (members[k-1] !== void 0 && members[k-1].style.content == v.style.content)
                return;
            const iconName = v.selectorText.replace("::before", "").replace(".","");
            
            if (this.enableIcons.length !== 0 && !this.enableIcons.includes(iconName))
                return;
            else if (this.disableIcons.includes(iconName))
                return;
            let i = document.createElement("i");
            i.classList.add(zFlag ? 'fa-brands' : 'fa-solid',iconName.split(', .')[0]);
            const btn = document.createElement('button');
            btn.classList.add('btn','btn-outline-secondary','mb-1','me-1','mr-1');
            btn.setAttribute('data-fapc-icon-name',iconName.split(', .')[0]);
            btn.setAttribute('data-fapc-icon-type',zFlag ? 'fa-brands' : 'fa-solid');
            btn.style.width = "3em";
            btn.style.height = "3em";
            btn.addEventListener('click',(event) => {
                const name = event.currentTarget.getAttribute('data-fapc-icon-name');
                const type = event.currentTarget.getAttribute('data-fapc-icon-type');
                this.targetInput.value = type + ' ' + name;
                if (this.targetViewIcon) {
                    this.targetViewIcon.setAttribute('class', '');
                    this.targetViewIcon.classList.add(name,type);
                }
                this.hide();
            });
            this.#drawDiv.appendChild(btn).appendChild(i);
            if (iconName == "fa-z") {
                zFlag = true;
            }
        },this);
    }
    
    search(key_word)
    {
        if (key_word === "") {
            for (const btn of this.#drawDiv.children) {
                btn.classList.remove('d-none');
            }
            return;
        }
        for (const btn of this.#drawDiv.children) {
            btn.getAttribute('data-fapc-icon-name').replace('fa-','').includes(key_word) ? btn.classList.remove('d-none') : btn.classList.add('d-none');
        }
    }

    show()
    {
        this.popover.show();
    }
    
    hide()
    {
        this.popover.hide();
    }
    
    toggle()
    {
        this.popover.toggle();
    }
    
    dispose()
    {
        this.popover.dispose();
        this.popover = null;
        this.#containerDiv.remove();
        this.#containerDiv = null;
        this.targetInput.removeEventListener('click', this.toggleHandler);
        this.showBtnElement.removeEventListener('click', this.toggleHandler);
        this.isDispose = true;
    }
}

I have edit this line,

const targetSheets = styleSheets.filter((styleSheet) => (!styleSheet.href || styleSheet.href.startsWith(window.location.origin)) && styleSheet instanceof CSSStyleSheet && styleSheet.cssRules);

and remove this code :

 || styleSheet.href.startsWith(window.location.origin)

to like this:

const styleSheets = Array.from(document.styleSheets).filter((styleSheet) => styleSheet.href !== null && styleSheet.href.endsWith(this.targetCssName));

so, how can edit the file?

0

There are 0 best solutions below