Search Settings - PageListAsBlocksDepthTwo

{%- comment -%}
   Authors: Tony V., Jeff R.
   Last Update: 1-6-22
   Summary: Similar to the core PageListAsBlocks template but designed to display children and grandchildren pages
   Search functionality has also been added
{%- endcomment -%}


{%- javascript -%}
$(document).ready(function()
{
    // Prevent async page submission triggered by enter key which breaks script, preventing submission after keyup does not work
    $('#pageSearch').on('keydown', function(e)
    {
        if (e.keyCode == 13)
        {
            e.preventDefault();
            return false;
        }
    });

    // Filter page links when Search box is updated, value of text is not updated until after keyup
    $('#pageSearch').on('keyup', function()
    {
        var value = $(this).val().toLowerCase();
        // Filter page links when Search box is updated
        $('.panel-body ul li').filter(function()
        {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });

        // hides/reveals panel based on the presence of search results
        $('.panel-body ul').each(function(index)
        {
            $(this).parent().parent().show(); // reset visibilty of panels
            if ($(this).children(':visible').length == 0)
            {
                //if a panel has no visible children then hide it
                $(this).parent().parent().hide();
            }
        });
    });
});
{%- 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 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 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 -%}