Coding standards
Security in ResourceSpace
Developer reference
Database
Action functions
Admin functions
Ajax functions
Annotation functions
API functions
Collections functions
Comment functions
Config functions
CSV export functions
Dash functions
Debug functions
Encryption functions
Facial recognition functions
File functions
General functions
Language functions
Log functions
Login functions
Message functions
Migration functions
Node functions
PDF functions
Plugin functions
Render functions
Reporting functions
Request functions
Research functions
Slideshow functions
Theme permission functions
User functions
Video functions
Database functions
Metadata functions
Resource functions
Search functions
Map functions
Job functions
Tab functions
Test functions

render_fa_icon_selector()

Description

Renders a fontawesome icon selector question
Requires lib/fontawesome/resourcespace/icon_classes.php to be included in the page using the function

Parameters

ColumnTypeDefaultDescription
$label string ""
$name string "icon" Input name
$current string "" Current value

Return

void

Location

include/render_functions.php lines 6076 to 6164

Definition

 
function render_fa_icon_selector(string $label="",string $name="icon",string $current="")
    {
    global $lang, $font_awesome_icons;

    if(trim($label) == "")
        {
        $label = $lang["property-icon"];
        }
    ?>
    <div class="Question">
        <label> echo escape($label) ?></label>
         $blank_icon = ($current == "" || !in_array($current, $font_awesome_icons)); ?>
        <div id="iconpicker-question">
            <input name=" echo escape($name) ?>" type="text" id="iconpicker-input" value=" echo escape($current)?>" /><span id="iconpicker-button"><i class="fa-fw  echo $blank_icon ? 'fas fa-chevron-down' : escape($current)?>" id="iconpicker-button-fa"></i></span>
        </div>
        <div id="iconpicker-container">
            <div class="iconpicker-title">
                <input type="text" id="iconpicker-filter" placeholder=" echo escape($lang['icon_picker_placeholder']) ?>" onkeyup="filterIcons()">
            </div>
            <div class="iconpicker-content">
                 foreach ($font_awesome_icons as $icon_name)
                    {
                    ?>
                    <div class="iconpicker-content-icon" data-icon=" echo escape(trim($icon_name)) ?>" title=" echo escape(trim($icon_name)) ?>">
                        <i class="fa-fw  echo escape(trim($icon_name)) ?>"></i>
                    </div>
                    
                    } ?>
            </div>
        </div>
        <div class="clearerleft"> </div>
    </div>

    <script type="text/javascript">

    jQuery("#iconpicker-button").click(function()
        {
        jQuery("#iconpicker-container").toggle();
        });

    jQuery("#iconpicker-input").focus(function()
        {
        jQuery("#iconpicker-container").show();
        });

    jQuery(".iconpicker-content-icon").click(function()
        {
        var icon_name = jQuery(this).data("icon");
        jQuery("#iconpicker-input").val(icon_name);
        jQuery("#iconpicker-button i").attr("class","fa-fw " + icon_name);
        });

    jQuery(document).mouseup(function(e) 
        {
        var container = jQuery("#iconpicker-container");
        var question = jQuery("#iconpicker-question");

        if (!container.is(e.target) && container.has(e.target).length === 0
            && !question.is(e.target) && question.has(e.target).length === 0) 
            {
            container.hide();
            }
        });

    function filterIcons()
        {
        filter_text = document.getElementById("iconpicker-filter");
        var filter_upper = filter_text.value.toLowerCase();

        container = document.getElementById("iconpicker-container");
        icon_divs = container.getElementsByClassName("iconpicker-content-icon");

        for (i = 0; i < icon_divs.length; i++)
            {
            icon_short_name = icon_divs[i].getAttribute("data-icon");
            if (icon_short_name.toLowerCase().indexOf(filter_upper) > -1)
                {
                icon_divs[i].style.display = "inline-block";
                }
            else
                {
                icon_divs[i].style.display = "none";
                }
            }
        }

    </script>
    
    }

This article was last updated 4th December 2024 09:05 Europe/London time based on the source file dated 3rd December 2024 11:55 Europe/London time.