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 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.