search

furcan / IconPicker

Use the Font Awesome Icons (Font Awesome Free v5.11.2) in your HTML forms. (1544 icons)
https://furcan.github.io/IconPicker/
MIT License
67 stars 20 forks source link

CLOSED: problem with js rendered fontawesome icons. #2

Closed Volmarg closed 5 years ago

Volmarg commented 5 years ago

So.

Generally I'm using webpack and most likely some fontawesome redesigned for it - not sure. Anyway, on beginning my icons looked like that:

image

Take a look that Your elements have tag: i.

Now I fixed my missing icons problem by adding js script attached to the fontawesome pack, but this is what happened:

image image

So, how i partially fixed it.

div#IconPickerModal .ip-icons-content .ip-icons-search > i.placeholder-icon, div#IconPickerModal .ip-icons-content .ip-icons-search > svg.placeholder-icon {

// each icon click listener on
            function eachIconEventListener(firstOrSearch) {

                var inputElm = document.querySelectorAll(inputElement);
                var previewElm = document.querySelectorAll(previewElement);

                // define icons on
                var eachIconElm;
                if (firstOrSearch === 'first') { // first
                    eachIconElm = document.getElementById(IconPickerModal.id).getElementsByClassName('first-icon');
                } else if (firstOrSearch === 'search') { // search
                    eachIconElm = document.getElementById(IconPickerModal.id).getElementsByClassName('search-icon');
                }
                // define icons off

                // add listeners each on
                var wrapElem = document.querySelector('.ip-icons-content');
                var config = { attributes: true, childList: true, subtree: true };

                var callback = function(mutationsList, observer) {
                    attachClickEventForEachIcon(eachIconElm,inputElm,previewElm);
                };

                var observer = new MutationObserver(callback);
                observer.observe(wrapElem, config);

                attachClickEventForEachIcon(eachIconElm,inputElm,previewElm);

                // add listeners each off

            }

            function attachClickEventForEachIcon(eachIconElm,inputElm,previewElm){

                for (var i = 0; i < eachIconElm.length; i++) {
                    var singleIconElm = eachIconElm[i];
                    singleIconElm.addEventListener('click', function (e) {
                        e.preventDefault();
                        var iconClassName = this.dataset.class;
                        for (var i = 0; i < inputElm.length; i++) {

                            if (inputElm[i].tagName === 'INPUT') {
                                inputElm[i].value = iconClassName;
                            } else {
                                inputElm[i].innerHTML = iconClassName;
                            }

                        }
                        for (var i = 0; i < previewElm.length; i++) {
                            previewElm[i].setAttribute('class', iconClassName);
                        }
                        removeIpElement(400);
                    }, false);
                }
            }

            // each icon click listener off

However I'm just reverting this changes at my code, as this takes way to much time. Just wanted to let You know that there is such problem.

Meanwhile maybe I will find some other solution for my problem.

Volmarg commented 5 years ago

I'm not saying that this has to be fixed or something - just saying that there other ppl might have problem with this as well, but well it's just webpack particullary breaking alot scripts (like it took me few hours to setup tinymce with it);

Volmarg commented 5 years ago

Now, information about the fontawesome package for upper bug:

My workaround:

Added for myself small change in:

        function appendIconListJavascript(data, buttonShowAll, buttonCancel, searchPlaceholder, inputElement, previewElement) {

            // data
            var jsonData = JSON.parse(data)['icons'];
furcan commented 5 years ago

Hello again,

Thanks for your detailed feedback.

Firstly the IconPicker is a simple plugin, and developed to get only FontAwesome icons class names easily, and add that on HTML forms.

General purpose of the IconPicker is using it on websites admin panels or etc. For example: Dynamic pages, Dynamic Modules, or Dynamic Users forms etc.

And the form data can also be used on websites(front-end). A simple example of use is below.

For Example:

<div class="an-example-module">
<i class="@Model.ModuleIconClassName"></i>
<h1 class="module-title">@Model.ModuleTitle</h1>
<p class="module-desc">@Model.ModuleDescription</p>
...
...
</div>

Also if i can understand your purpose of use, may be i can help to develope it but i did not understand what's your expectations on that plugin :)

Thank you.

Volmarg commented 5 years ago

No, no it's fine - works as intended. Just saying that in some special case of fontawesome usage it breaks down. But I handled it with my custom json so it's all ok and does it's job - thanks.

Hopefully there won't be any more suprises. :)