<!-- Eingabe und Absenden -->
<form class="form-serp">
    <div class="form-serp__inner">
        <div class="form-serp-group">
            <select class="select" id="filter" name="filter">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="all">Alle (47)</option>
  <option value="article">Artikel (31)</option>
</select>
        </div>
        <div class="action-list"><span class="action-list__title">Sortieren nach:</span>
            <ul class="action-list__container">
                <li class="action-list__item action-list__item--active"><a class="action-list__link" href="#">Relevanz</a></li>
                <li class="action-list__item"><a class="action-list__link" href="#">Aktualität</a></li>
            </ul>
        </div>
    </div>
</form>

<!-- filter link-list -->
<form class="form-serp form-serp__link-list">
    <div class="form-serp__inner">
        <div class="form-serp-group"><a class="form__link" href="#" tabindex="-1" aria-hidden="true">Artikel (16)</a><a class="form__link" href="#" tabindex="-1" aria-hidden="true">Download (8)</a><a class="form__link" href="#" tabindex="-1" aria-hidden="true">hkk-Leistungen (23)</a>
        </div>
        <div class="action-list"><span class="action-list__title">Sortieren nach:</span>
            <ul class="action-list__container">
                <li class="action-list__item action-list__item--active"><a class="action-list__link" href="#">Relevanz</a></li>
                <li class="action-list__item"><a class="action-list__link" href="#">Aktualität</a></li>
            </ul>
        </div>
    </div>
</form>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Form element settings
  settings = settings || {};

  //- Link List Variant
  if (linkList) attr.class.push('form-serp__link-list');

//- Wrap
form.form-serp&attributes(attr)

  .form-serp__inner
    //- Form inner
    .form-serp-group
      if elements
        for element in elements
          if element.use
            - elementSettings = Object.assign(settings, element.settings);
            != include(`@${element.use}`, elementSettings)

          if element.link
            a.form__link(href=element.link, tabindex='-1', aria-hidden='true') !{element.text}

    if actionList
      != include('@action-list', actionList)
/* Eingabe und Absenden */
{
  "id": "form-filter",
  "elements": [
    {
      "use": "select",
      "label": null,
      "labelSettings": {
        "hidden": true
      },
      "settings": {
        "id": "filter",
        "options": [
          {
            "value": "all",
            "text": "Alle (47)"
          },
          {
            "value": "article",
            "text": "Artikel (31)"
          }
        ]
      }
    }
  ],
  "actionList": true
}

/* filter link-list */
{
  "linkList": true,
  "id": "form-filter-linklist",
  "elements": [
    {
      "link": "#",
      "text": "Artikel (16)"
    },
    {
      "link": "#",
      "text": "Download (8)"
    },
    {
      "link": "#",
      "text": "hkk-Leistungen (23)"
    }
  ],
  "actionList": true
}

  • Content:
    class FormSerp {
      constructor($el) {
        this.$el = $el;
    
        this.initFilter();
      }
    
      initFilter() {
        this.$filter = this.$el
          .querySelector('.select');
    
        if (this.$filter) {
          this.$filter.addEventListener('change', () => {
            this.updateParameters();
            this.applyParameters();
          });
        }
      }
    
      applyParameters() {
        const currentUrl = window.location.href.split('?')[0];
    
        window.location.href = `${currentUrl}?${this.stringifyParameters()}`;
      }
    
      stringifyParameters() {
        return Object.keys(this.currentParameters)
          .map(key => `${key}=${this.currentParameters[key]}`)
          .join('&');
      }
    
      updateParameters() {
        this.currentParameters = this.getParameters(window.location.search);
        this.currentParameters[this.$filter.id] = this.$filter.value;
      }
    
      getParameters(url) {
        this.urlParams = {};
    
        url.replace(
          new RegExp('([^?=&]+)(=([^&]*))?', 'g'), ($0, $1, $2, $3) => {
            this.urlParams[$1] = $3;
          },
        );
    
        return this.urlParams;
      }
    }
    
    document.querySelectorAll('.form-serp').forEach(
      $el => new FormSerp($el),
    );
    
  • URL: /components/raw/form-serp/form-serp.js
  • Filesystem Path: src/components/organisms/form-serp/form-serp.js
  • Size: 1.1 KB
  • Content:
    .form-serp {
      border-bottom: 5px solid $color-steelgrey-light;
      padding: 2rem 0;
    }
    
    .form-serp__inner {
      align-items: center;
      border: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      padding: 0;
    
      .form-serp__link-list & {
        display: block;
      }
    
      @include mq($from: m) {
        justify-content: space-between;
      }
    }
    
    .form-serp-group {
      width: 100%;
    
      .select {
        color: $color-steelgrey-xdark;
      }
    
      .form-serp__link-list & {
        margin-bottom: 0.5rem;
        max-width: 100%;
      }
    
      @include mq($from: m) {
        max-width: 33.33%;
      }
    }
    
    .form__link {
      color: $color-blue-light;
      display: inline-block;
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    
      + .form__link {
        margin-left: 1.5rem;
      }
    }
    
  • URL: /components/raw/form-serp/form-serp.scss
  • Filesystem Path: src/components/organisms/form-serp/form-serp.scss
  • Size: 731 Bytes

There are no notes for this item.