hackish fixes to make it work with Font Awesome JS. Hardcoded preview… #4
Conversation
|
Yip fixed the preview, data-iconpicker-preview="#IconPreview" did the trick - sorry stupid one in the rush of things) So merge CSS, compare JS, and make it work (; |
|
hax or not - i gonna check this out in free moment as i have small problems with picker now anyway, thanks for mentioning me so that i know that something jus happened |
@Volmarg you saved me day! Finding the root cause (i>svg) and your replacement selector function was saving my ass! |
|
So i only made tiny test and with this i can say that I can interract with the icons loaded via fontawesome/all.js
However I will need to check this deeper later as in my case due to webpack i had to replace the to plain js, but will play a bit with this first as something still crashes for me, anyway Your fix fixes my bug with strange icons shown as [ ], [ ] , [ ] - squares so:
It might be so that it crashes only for me due to some workarounds caused by webpack. |
| // define icons off | ||
|
|
||
| // add listeners each on | ||
| var wrapElem = document.querySelector('.ip-icons-content'); |
There was a problem hiding this comment.
I would add small note why the observer:
// this is required due to case where we use the js based fontawesome as fontawesome changes <i> to <svg>
dist/iconpicker-1.5.0.js
Outdated
| } else { | ||
| inputElm[i].innerHTML = iconClassName; | ||
| } | ||
| $("#macroIconPreview").html("<i class='" + iconClassName + " fa-2x m-2'></i>"); |
There was a problem hiding this comment.
The whole code uses rather plain js, and since i cannot use jq in place where i use this plugin then i already wrote working vanilla:
let element = document.getElementById('macroIconPreview');
if( null !== element ){
element.innerHTML = "<i class='" + iconClassName + " fa-2x m-2'></i>";
}
| // show all button click listener off | ||
|
|
||
| // close and remove all on | ||
| var removeIpElement = function(delay) { |
There was a problem hiding this comment.
And this is actually bug. Generally picker works so like yeah it's fine but there was error in console log and i didn't liked it. The pioint is that Your observer (while needed for svg conversion) stacks click events so when You click the fontawesome icon the event here is being called alot of times and js tries to remove non existing element in parent and thus crashes:
var removeIpElement = function(delay) {
ipElement.classList.remove('animate');
setTimeout(function() {
let isElementInDom = ( null !== ipElement.parentNode );
//prevent handling removal if element is already gof out of daoml
if( isElementInDom ){
docBody.removeChild(ipElement);
}
}, delay);
};
… with jquery.html because of time
Refer #3
The CSS fixes under dist/iconpicker-1.5.0.css works 100% (thanks to @Volmarg) from #2
I also used his eachIconEventListener(firstOrSearch) - you can't just merge it, but compare to the original to see what needs to change to support
<svg>tags instead of hardcoded<i>Then the Preview wasnt working, so i opted just in the name of time (got to go soon) to just remove it from my fork and hardcode a replacement, will come back and fix when I get time. I think its as simple as forgetting to update the button's html data-iconpicker-preview="i#IconPreview" to data-iconpicker-preview="svg#IconPreview" oops