Search Settings - PageListAsBlocksDepthTwo

{%- javascript -%}
$(document).ready(function()
{
    $('#pageSearch')
        // prevent the enter key from submitting the form
        .on('keydown', function(e)
        {
            if (e.keyCode == 13)
            {
                e.preventDefault();
                return false;
            }
        })
        // Filter page links when Search box is updated
        .on('keyup', function(e)
        {
            var $text = $(this),
                $lists = $('.search-target .panel-body > ul')
                value = $text.val().toLowerCase();

            // hides/reveals panel based on the presence of search results
            $lists.each(function()
            {
                var $list = $(this),
                    $panel = $list.parents('.search-target'),
                    $children = $list.children('li'),
                    isOpen = $panel.is(':visible'),

                    // Filter page links when Search box is updated
                    $matched = $children.filter(function()
                    {
                        var $setting = $(this),
                            isShown = $setting.is(':visible'),
                            isMatch = $setting.text().toLowerCase().indexOf(value) > -1;

                        $setting.toggleClass('match', isMatch);

                        if (isMatch && !isShown) $setting.stop(true,false).show(200);
                        else if (!isMatch && isShown) $setting.stop(true,false).hide(200);

                        return isMatch;
                    }),
                    matchCount = $matched.length;

                //if a panel has no visible children then hide it
                if (isOpen && matchCount == 0)
                    $panel.stop(true,false).slideUp(400);
                else if (!isOpen && matchCount > 0)
                    $panel.stop(true,false).slideDown(400, function(){ $(this).css('height', 'auto'); });
            });
        });
});
{%- endjavascript -%}

{%- stylesheet -%}
    h2 { margin-left:10px; }
    #pageSearch { margin-bottom:15px; }
{%- endstylesheet -%}

<div class="form-inline">
    <div class="form-group">
        <input id="pageSearch" type="text" class="form-control input-sm" placeholder="Search&hellip;">
    </div>
</div>

{%- for childPage in Page.Pages -%}
    {%- if  childPage.Title != 'All Settings' -%}
        <div class="panel panel-default list-as-blocks search-target clearfix">
            <div class="panel-heading">
                <h2 class="panel-title"><i class="{{ childPage.IconCssClass }}"></i> {{ childPage.Title }}</h2>
            </div>
            <div class="panel-body">
                <ul>
                    {%- for grandChildPage in childPage.Pages -%}
                        <li>
                            <a href="{{ grandChildPage.Url }}" {% if grandChildPage.DisplayDescription != 'true' %} title="{{ grandChildPage.Description }}"{% endif %}>
                                {% if grandChildPage.IconCssClass != '' %}
                                    <i class="{{ grandChildPage.IconCssClass }}"></i>
                                {% endif %}
                                <h3>{{ grandChildPage.Title }}</h3>
                            </a>
                        </li>
                    {%- endfor -%}
                </ul>
            </div>
        </div>
    {%- endif -%}
{%- endfor -%}

{%- if IncludePageList != empty -%}
<div class="panel panel-default list-as-blocks search-target clearfix">
    <div class="panel-heading"><h2 class="panel-title">Additional Pages</h2></div>
    <div class="panel-body">
        <ul>
            {%- for includedPage in IncludePageList -%}
                {%- assign attributeParts = includedPage | PropertyToKeyValue -%}
                <li>
                    <a href="{{ attributeParts.Value }}">{{ attributeParts.Key }}</a>
                </li>
            {%- endfor -%}
        </ul>
    </div>
</div>
{%- endif -%}