Search Filter: Filter Thema

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div id="search-filter-desktop">
    <form class="search-filter-desktop-form">
        <details class="search-filter-category" open>
            <summary class="search-filter-heading">
                <h4 class="heading text-red">
                    Thema's die je volgt
                </h4>

                <div class="search-filter-toggle">
                    <span class="icon far fa-chevron-down   icon-down" aria-hidden="true"></span>

                    <span class="icon far fa-chevron-up   icon-up" aria-hidden="true"></span>
                </div>
            </summary>

            <div class="search-filter-desktop-items">
                <div class="search-filter-desktop-item">
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb1" name="cb1">
                        <label class="form-label   " for="cb1">
                            Item 1
                        </label>
                    </div>

                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-1' name='replace-name-with-backend-1' value='replace-value-with-backend-1' checked />
                        <label for='replace-id-with-backend-1' class='icon-checked'>
                            <span class="icon fas fa-bell   " aria-hidden="true"></span>

                        </label>

                        <label for='replace-id-with-backend-1' class='icon-unchecked'>
                            <span class="icon fal fa-bell   " aria-hidden="true"></span>

                        </label>
                    </div>

                </div>
                <div class="search-filter-desktop-item">
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb2" name="cb2">
                        <label class="form-label   " for="cb2">
                            Item 2
                        </label>
                    </div>

                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-2' name='replace-name-with-backend-2' value='replace-value-with-backend-2' checked />
                        <label for='replace-id-with-backend-2' class='icon-checked'>
                            <span class="icon fas fa-bell   " aria-hidden="true"></span>

                        </label>

                        <label for='replace-id-with-backend-2' class='icon-unchecked'>
                            <span class="icon fal fa-bell   " aria-hidden="true"></span>

                        </label>
                    </div>

                </div>
            </div>
        </details>
        <details class="search-filter-category" open>
            <summary class="search-filter-heading">
                <h4 class="heading text-red">
                    Thema
                </h4>

                <div class="search-filter-toggle">
                    <span class="icon far fa-chevron-down   icon-down" aria-hidden="true"></span>

                    <span class="icon far fa-chevron-up   icon-up" aria-hidden="true"></span>
                </div>
            </summary>

            <div class="search-filter-desktop-items">
                <div class="search-filter-desktop-item">
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb1" name="cb1">
                        <label class="form-label   " for="cb1">
                            Item 1
                        </label>
                    </div>

                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-3' name='replace-name-with-backend-3' value='replace-value-with-backend-3' />
                        <label for='replace-id-with-backend-3' class='icon-checked'>
                            <span class="icon fas fa-bell   " aria-hidden="true"></span>

                        </label>

                        <label for='replace-id-with-backend-3' class='icon-unchecked'>
                            <span class="icon fal fa-bell   " aria-hidden="true"></span>

                        </label>
                    </div>

                </div>
                <div class="search-filter-desktop-item">
                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="cb2" name="cb2">
                        <label class="form-label   " for="cb2">
                            Item 2
                        </label>
                    </div>

                    <div class='item-toggle'>
                        <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-4' name='replace-name-with-backend-4' value='replace-value-with-backend-4' />
                        <label for='replace-id-with-backend-4' class='icon-checked'>
                            <span class="icon fas fa-bell   " aria-hidden="true"></span>

                        </label>

                        <label for='replace-id-with-backend-4' class='icon-unchecked'>
                            <span class="icon fal fa-bell   " aria-hidden="true"></span>

                        </label>
                    </div>

                </div>
            </div>
        </details>
    </form>
</div>


        <div id="search-filter-desktop">
    <form class="search-filter-desktop-form">
        {{#each categories}}
            <details class="search-filter-category" {{#if startOpened}}open{{/if}}>
                <summary class="search-filter-heading">
                    {{render '@heading--h4' heading merge=true}}

                    <div class="search-filter-toggle">
                        {{ render '@icon' @root.icon-down }}

                        {{ render '@icon' @root.icon-up }}
                    </div>
                </summary>

                <div class="search-filter-desktop-items">
                    {{#each items}}
                        <div class="search-filter-desktop-item">
                            {{render '@checkbox' checkbox merge=true}}

                            {{#if thema}}
                                {{render '@item-toggle' toggle merge=true}}
                            {{/if}}

                            {{#if small-copy}}
                                <p class="search-filter-small-copy">(32)</p>
                            {{/if}}
                        </div>
                    {{/each}}
                </div>
            </details>
        {{/each}}
    </form>
</div>


        
            
            {
  "modifier": "",
  "filterTitle": "Filter",
  "icon-close": {
    "icon": "fa-times",
    "style": "far",
    "modifier": "icon-close"
  },
  "icon-bell": {
    "icon": "fa-bell",
    "style": "far",
    "modifier": "icon-bell"
  },
  "icon-bell-red": {
    "icon": "fa-bell",
    "style": "fas",
    "modifier": "icon-bell-red"
  },
  "icon-down": {
    "icon": "fa-chevron-down",
    "style": "far",
    "modifier": "icon-down"
  },
  "icon-up": {
    "icon": "fa-chevron-up",
    "style": "far",
    "modifier": "icon-up"
  },
  "icon-right": {
    "icon": "fa-chevron-right",
    "style": "far",
    "modifier": "icon-down"
  },
  "icon-left": {
    "icon": "fa-chevron-left",
    "style": "far",
    "modifier": "icon-up"
  },
  "categories": [
    {
      "startOpened": true,
      "alias": "Thema's die je volgt",
      "heading": {
        "text": "Thema's die je volgt",
        "modifier": "text-red"
      },
      "items": [
        {
          "thema": true,
          "checkbox": {
            "name": "cb1",
            "id": "cb1",
            "label": {
              "text": "Item 1",
              "for": "cb1"
            }
          },
          "counter": 10,
          "toggle": {
            "id": "replace-id-with-backend-1",
            "name": "replace-name-with-backend-1",
            "value": "replace-value-with-backend-1",
            "icon": {
              "icon-checked": {
                "style": "fas",
                "icon": "fa-bell"
              },
              "icon-unchecked": {
                "style": "fal",
                "icon": "fa-bell"
              }
            },
            "checked": true
          }
        },
        {
          "thema": true,
          "checkbox": {
            "name": "cb2",
            "id": "cb2",
            "label": {
              "text": "Item 2",
              "for": "cb2"
            }
          },
          "counter": 5,
          "toggle": {
            "id": "replace-id-with-backend-2",
            "name": "replace-name-with-backend-2",
            "value": "replace-value-with-backend-2",
            "icon": {
              "icon-checked": {
                "style": "fas",
                "icon": "fa-bell"
              },
              "icon-unchecked": {
                "style": "fal",
                "icon": "fa-bell"
              }
            },
            "checked": true
          }
        }
      ]
    },
    {
      "startOpened": true,
      "alias": "Thema",
      "heading": {
        "text": "Thema",
        "modifier": "text-red"
      },
      "items": [
        {
          "thema": true,
          "checkbox": {
            "name": "cb1",
            "id": "cb1",
            "label": {
              "text": "Item 1",
              "for": "cb1"
            }
          },
          "counter": 10,
          "toggle": {
            "id": "replace-id-with-backend-3",
            "name": "replace-name-with-backend-3",
            "value": "replace-value-with-backend-3",
            "icon": {
              "icon-checked": {
                "style": "fas",
                "icon": "fa-bell"
              },
              "icon-unchecked": {
                "style": "fal",
                "icon": "fa-bell"
              }
            },
            "checked": false
          }
        },
        {
          "thema": true,
          "checkbox": {
            "name": "cb2",
            "id": "cb2",
            "label": {
              "text": "Item 2",
              "for": "cb2"
            }
          },
          "counter": 5,
          "toggle": {
            "id": "replace-id-with-backend-4",
            "name": "replace-name-with-backend-4",
            "value": "replace-value-with-backend-4",
            "icon": {
              "icon-checked": {
                "style": "fas",
                "icon": "fa-bell"
              },
              "icon-unchecked": {
                "style": "fal",
                "icon": "fa-bell"
              }
            },
            "checked": false
          }
        }
      ]
    }
  ]
}

File:

Content:


                                #search-filter-desktop {
    display: inline-block;

    form {
        @apply m-0;
    }

    .item-toggle {
        position: relative;
        top: -5px;
    }

    .search-filter-category {
        @apply pb-6;

        &:not(:last-child) {
            @apply border-b-2 mb-6;
        }

        .search-filter-heading {
            @apply relative m-0 cursor-pointer;
            display: flex;
            justify-content: space-between;

            .heading {
                @apply m-0;
            }

            .search-filter-toggle {
                margin-left: 60px;
            }
        }

        .search-filter-desktop-items {
            @apply mt-4;

            .search-filter-desktop-item {
                @apply mb-2;

                display: flex;
                align-items: flex-start;

                .form-checkbox {
                    @apply inline-block;
                }

                .form-label {
                    @apply inline-block text-md relative cursor-pointer;
                    top: 1px;
                }

                margin-left: 0;

                .search-filter-small-copy {
                    @apply text-black-300;
                    margin-left: 12px;
                    font-size: 12px;
                }
            }

            .search-filter-icon {
                @apply text-black-500;

                margin-left: 20px;
            }

            .search-filter-icon-red {
                @apply text-red;

                margin-left: 20px;
            }
        }

        &:not([open]) {
            .icon-up {
                @apply hidden;
            }
        }

        &[open] {
            .icon-down {
                @apply hidden;
            }
        }
    }
}

#search-filter-mobile {
    /* @apply md:hidden; */
    @apply flex flex-col fixed w-screen h-screen top-0 bg-white;
    @apply transform-gpu transition-all;

    z-index: 9999;
    left: -100vw;

    &.opened {
        @apply left-0;
    }

    .search-filter-header {
        @apply flex items-center;
        @apply px-4 py-3;
        @apply text-lg text-white bg-red;
        flex: 0 0 auto;

        .text {
            @apply flex-1;
        }
    }

    .search-filter-categories {
        @apply flex-1;

        > li {
            @apply flex items-center;
            @apply px-4 py-3;
            @apply text-md border-gray-500 border-b-2;

            .text {
                @apply flex-1;
            }
        }
    }

    .search-filter-mobile-items {
        @apply hidden flex-1 flex-col;

        .search-filter-back {
            @apply flex items-center;
            @apply px-4 py-3;
            @apply text-md bg-gray-500 font-bold;
            flex: 0 0 auto;

            .icon {
                @apply mr-4;
            }
        }

        .search-filter-mobile-items-inner {
            @apply overflow-y-auto;
            flex: 1 1 0;

            .search-filter-mobile-item {
                @apply px-4 py-2;

                .form-checkbox {
                    @apply inline-block mr-2;
                }

                .form-label {
                    @apply inline-block text-md relative cursor-pointer;
                    top: 1px;
                }
            }
        }
    }

    .search-filter-button {
        @apply px-4 py-3 text-center;
        flex: 0 0 auto;
    }
}

URL: /components/raw/search-filter/search-filter.css
Filesystem Path: src\components\04-organisms\search-filter\search-filter.css
Size: 3.5 KB

Content:


                                (function () {

    'use strict';

    (function () {

        'use strict';

        // Close all details after iframe is loaded
        $(window).on('load', function (e) {
            if ($(window).width() > 1023) {
                document.body
                    .querySelectorAll('#search-filter-desktop details')
                    .forEach((e) =>
                        e.hasAttribute('open')
                            ? e.removeAttribute('open')
                            : e.setAttribute('open', true)
                    );
            }
        });
    })();

    var filterDelay;
    $('#search-filter-desktop input:checkbox').change(function () {
        clearTimeout(filterDelay);

        var $form = $(this).closest('form');
        filterDelay = setTimeout(function () {
            $form.submit();
        }, 1000);
    });

    var $searchFilterMobile = $('#search-filter-mobile');

    // Click category
    $searchFilterMobile
        .find('.search-filter-categories > li')
        .on('click', function () {
            $searchFilterMobile
                .find('.search-filter-categories, .search-filter-items')
                .hide();
            $searchFilterMobile
                .find('#search-filter-items-' + this.dataset.alias)
                .css('display', 'flex');
        });

    // Click back
    $searchFilterMobile.find('.search-filter-back').on('click', function () {
        $searchFilterMobile.find('.search-filter-items').hide();
        $searchFilterMobile.find('.search-filter-categories').show();
    });

    // Click close
    $searchFilterMobile.find('.icon-close').on('click', function () {
        $searchFilterMobile.removeClass('opened');
    });
})();

URL: /components/raw/search-filter/search-filter.js
Filesystem Path: src\components\04-organisms\search-filter\search-filter.js
Size: 1.8 KB

Handle: @search-filter--filter-thema
Preview:
- With layout
- Component only
Filesystem Path: src\components\04-organisms\search-filter\search-filter.hbs
References (4): @heading--h4, @icon, @checkbox, @item-toggle
Referenced by (1): @intranet-news

No notes defined.