Shelby Manley

Quick Facts

Project: Community Foundation of Greater Memphis
Timeline: Spring 2019
About the Client: The Community Foundation manages charitable funds on behalf of donors from Memphis and the Mid-South. Learn more here.

Why Build an Icon Selector?

Before this, RocketFuel CMS users trying to add icons to their site would either select an icon from a dropdown list of names or upload their own. Both of these options present issues—a dropdown list isn't always descriptive enough when working with visual elements, and user-accessible uploaders can produce unpredictable content.

With the Community Foundation, these issues were even more of a challenge than usual. The design for the site included 100 icons (25 unique images with four color palettes). Suddenly it became absolutely necessary to build something better.

Why Use a <select> FIeld?

The main answer is accessibility, mixed with a little superstition. HTML form fields are standard for a reason—they're easy to use no matter how you access the web, and their behavior is standard across operating systems and platforms. Even though I have an excellent reason for not using a <select> field in this instance, I still feel better having an accessible dropdown hiding behind my custom UI.

// filename format - "HousePercent_TealWhite.svg"
$directory = $serverRoot."images/icon_library/*_TealWhite.svg";
$files = glob($directory);
$iconArray = [];

foreach($files as $file){
    // create relative path to icon, for use in markup
    $imagePath = str_replace($serverRoot, "", $file);
    // create one-word id
    $imageVariable = str_replace(array($serverRoot."images/icon_library/CFGM_", "_TealWhite.svg"), "", $file);
    // create user-readable title from camel case filename
    $imageTitle = preg_replace('/([a-z])([A-Z])/s','$1 $2', $imageVariable);
    $iconArray[] = [
        'data-key' => $imageVariable,
        'data-path' => $imagePath,
        'data-title' => $imageTitle
    ];
}

$iconArray[] = [
        'data-key' => 'no-icon',
        'data-path' => null,
        'data-title' => 'No Icon'
    ];

Getting the Data

Starting out, I need a way to build an array of all the icons. By storing all the icon files in a single directory in the site, I can make use of glob() to programmatically search the directory and return an array of filenames. This comes with the added bonus of making future additions to the icon library very simple—all I'll have to do is drop the new (appropriately named) files into the directory.

To shorten the list and hopefully simplify things for the client, I decide to only display one version of each icon. The user will select the image they want, but I'll decide the color scheme programmatically based on where in the layout the icon populates. I limit my glob search to files with the suffix _TealWhite.svg.

Iterating through those files, I build my array. I'll use this to build out the icon selector and HTML select field. The variables going into the array are all different formats of the icon title—the data-key is the title in camel case with no spaces, the data-path is the path to the icon (to display it in the grid), and the data-title has spaces to make it more user-friendly.

echo ‘<label for=“icon-dropdown”>Select Icon...</label>
       <select id=“icon-dropdown”>‘;
       foreach($icons as $icon){
           echo “<option value=’“.$icon[‘data-key’].“’>“.$icon[‘data-title’].“</option>“;
       }
echo ‘</select>‘;
echo ‘<div aria-hidden="true"><span>Select Icon...</span>
       <div class=“icon_box”>‘;
       foreach($icons as $icon){
           echo “<a data-key=’“.$icon[‘data-key’].“' title=’“.$icon[‘data-title’].“' style=’background-image:url(/sites/631/“.$icon[‘data-path’].“)' class=‘icon’ tabindex=‘1’></a>“;
       }
           echo “<a data-key=‘no-icon’ title=‘No Icon’ class=‘icon no-icon’ tabindex=‘1’>No Icon</a>“;
echo ‘</div></div>’;

Now that I have my array, I can build my two selectors. The HTML <select> will be positioned absolutely behind the icon grid, so that users don't encounter it accidentally. And the icon selector gets the attribute aria-hidden="true" to hide it from assistive technologies.

Each grid item in the selector has a data-key attribute that matches the value of an option in the dropdown. I use jQuery to connect the dots, so that when the user clicks on an item in the grid, the dropdown updates to the corresponding value.

After I add some CSS my icon grid is looking good! Now I have a sleek, modern-looking icon selector with an accessible HTML fallback.