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?