Collections functions
General functions
Node functions
Render functions
Theme permission functions
User functions
Resource 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 5901 to 5989

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 htmlspecialchars($label?></label>
         $blank_icon = ($current == "" || !in_array($current$font_awesome_icons)); ?>
        <div id="iconpicker-question">
            <input name=" echo escape_quoted_data($name?>" type="text" id="iconpicker-input" value=" echo escape_quoted_data($current)?>" /><span id="iconpicker-button"><i class="fa-fw  echo $blank_icon 'fas fa-chevron-down' escape_quoted_data($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_quoted_data($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_quoted_data(trim($icon_name)) ?>" title=" echo escape_quoted_data(trim($icon_name)) ?>">
                        <i class="fa-fw  echo escape_quoted_data(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 21st December 2023 16:35 Europe/London time based on the source file dated 21st December 2023 11:35 Europe/London time.