Hawk Framework
  • Home
  • Widgets
  • Items manager

Items Manager

Items Manager helps to manage the contents that should be visible only when the appropriate context is active. It can be used to create simple tabs or hide and show special form fields if some option is selected.

There are buttons or fields (depends on the widget's mode; let's name them controls) to change current items to display. They should have special hawk-items-manager__bookmark class names. The connection between the controls and content happens through the value of the data-id attribute attached to the controls or the inner input's value and special classname of the content items which consists of constant prefix (which could be set up in the widget's options) and the same value of the control (data-id attribute or field's value). Moreover the content items should have special hawk-items-manager__item class name.

For instance, for the control's value 2, the content's classname should consists of hawk-items-manager-group- and 2 resulting with hawk-items-manager-group-2 classname with the default prefix like in the example on the right.

All these items should be in the one container with hawk-items-manager class name, which should have an ID to catch it in the JS code and launch the mechanism.

If there are many Items Managers in the same block, you can use an auxiliary data-manager-id attribute for the container and every control and content item as in the example on the right. If there is only one Items Manager in the same place, it can be missed.

  • <section id="exemplary-items-manager" class="hawk-items-manager" data-manager-id="gallery">
        <label class="simple-tab-button hawk-items-manager__bookmark">
            <input class="simple-tab-button__field" type="radio" name="tab-menu" value="-1" checked />

            <div class="simple-tab-button__wrapper">
                All
            </div>
        </label>

        <label class="simple-tab-button hawk-items-manager__bookmark">
            <input class="simple-tab-button__field" type="radio" name="tab-menu" value="1" />

            <div class="simple-tab-button__wrapper">
                Hussars
            </div>
        </label>

        <label class="simple-tab-button hawk-items-manager__bookmark">
            <input class="simple-tab-button__field" type="radio" name="tab-menu" value="2" />

            <div class="simple-tab-button__wrapper">
                Landscapes
            </div>
        </label>

        <!-- (...) more groups -->

        <ul class="tiles-list">
            <li class="hawk-items-manager__item hawk-items-manager-group-2" data-manager-id="gallery">
                <article class="tile tile--clear">
        <div class="tile__wrapper">
            <div class="tile__base-layer"
                 style="background-image: url('/img/pictures/jezioro-o-poranku.jpg')">

            </div>

            <div class="tile__above-layer">

            </div>        
                </div>
        
        </article>        </li>

            <li class="hawk-items-manager__item hawk-items-manager-group-1" data-manager-id="gallery">
                <article class="tile tile--clear">
        <div class="tile__wrapper">
            <div class="tile__base-layer"
                 style="background-image: url('/img/pictures/husaria.jpg')">

            </div>

            <div class="tile__above-layer">

            </div>        
                </div>
        
        </article>        </li>

            <li class="hawk-items-manager__item hawk-items-manager-group-1 hawk-items-manager-group-2" data-manager-id="gallery">
                <article class="tile tile--clear">
        <div class="tile__wrapper">
            <div class="tile__base-layer"
                 style="background-image: url('/img/pictures/husaria-w-gorach.jpg')">

            </div>

            <div class="tile__above-layer">

            </div>        
                </div>
        
        </article>        </li>

            <!-- (...) more items -->
        </ul>
    </section>
  • import ItemsManagerMode from "./Hawk/HawkLibrary/ItemsManagers/Enums/ItemsManagerMode.Hawk";

    App.Widgets.ItemsManagers.Exemplary = new Hawk.ItemsManager($('#exemplary-items-manager'), {
        mode: ItemsManagerMode.CHOICE
    });
    App.Widgets.ItemsManagers.Exemplary.run();