<!-- Two Columns -->
<div class="stage-insert-calculator">
    <div class="stage-insert-calculator__inner">
        <div class="stage-insert-calculator__section stage-insert-calculator__section--columns">
            <h2 class="headline headline--headline-2">Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!
            </h2>
            <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                <div class="form__inner">
                    <div class="form-group">
                        <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
                        <div class="form-group__inner">
                            <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option>Beispielkrankenkasse I</option>
  <option>Beispielkrankenkasse II</option>
</select>
                        </div>
                    </div>
                    <div class="form-group" data-hideable="data-hideable">
                        <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
                        <div class="form-group__inner">
                            <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
                        </div>
                    </div>
                    <div class="form__submit" data-hideable="data-hideable">
                        <input class="button button--blue" type="submit" value="Vorteil berechnen" />
                    </div>
                </div>
            </form>
            <div class="stage-insert-calculator__list">
                <ul class="icon-list">
                    <li class="icon-list__item">
                        <a class="icon-block" href="#">
                            <svg class="icon icon-block__icon icon--internal-link" id="icon-4b43" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Leistungen von A-Z
                        </a>
                    </li>
                    <li class="icon-list__item">
                        <a class="icon-block" href="#">
                            <svg class="icon icon-block__icon icon--internal-link" id="icon-6fe2" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Extraleistungen der hkk
                        </a>
                    </li>
                    <li class="icon-list__item">
                        <a class="icon-block" href="#">
                            <svg class="icon icon-block__icon icon--internal-link" id="icon-0c06" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Versicherungen &amp; Tarife
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- One Column -->
<div class="stage-insert-calculator">
    <div class="stage-insert-calculator__inner">
        <div class="stage-insert-calculator__section">
            <h2 class="headline headline--headline-2">Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!
            </h2>
            <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                <div class="form__inner">
                    <div class="form-group">
                        <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
                        <div class="form-group__inner">
                            <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option>Beispielkrankenkasse I</option>
  <option>Beispielkrankenkasse II</option>
</select>
                        </div>
                    </div>
                    <div class="form-group" data-hideable="data-hideable">
                        <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
                        <div class="form-group__inner">
                            <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
                        </div>
                    </div>
                    <div class="form__submit" data-hideable="data-hideable">
                        <input class="button button--blue" type="submit" value="Vorteil berechnen" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- One Column Links -->
<div class="stage-insert-calculator">
    <div class="stage-insert-calculator__inner">
        <div class="stage-insert-calculator__section">
            <h2 class="headline headline--headline-2">Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!
            </h2>
            <form class="form form--inline" action="/templates/vorteilsrechner.html" method="get">
                <div class="form__inner">
                    <div class="form-group">
                        <label class="label" for="current-health-insurance">Aktuelle Krankenkasse</label>
                        <div class="form-group__inner">
                            <select class="select" required="required" id="current-health-insurance" name="current-health-insurance">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option>Beispielkrankenkasse I</option>
  <option>Beispielkrankenkasse II</option>
</select>
                        </div>
                    </div>
                    <div class="form-group" data-hideable="data-hideable">
                        <label class="label" for="gross-income">Mtl. Bruttoeinkommen</label>
                        <div class="form-group__inner">
                            <input class="input input--text" type="text" required="required" id="gross-income" name="gross-income" />
                        </div>
                    </div>
                    <div class="form__submit" data-hideable="data-hideable">
                        <input class="button button--blue" type="submit" value="Vorteil berechnen" />
                    </div>
                </div>
            </form>
            <div class="stage-insert-calculator__list">
                <ul class="icon-list">
                    <li class="icon-list__item">
                        <a class="icon-block" href="#">
                            <svg class="icon icon-block__icon icon--internal-link" id="icon-d832" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Leistungen von A-Z
                        </a>
                    </li>
                    <li class="icon-list__item">
                        <a class="icon-block" href="#">
                            <svg class="icon icon-block__icon icon--internal-link" id="icon-09bc" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Extraleistungen der hkk
                        </a>
                    </li>
                    <li class="icon-list__item">
                        <a class="icon-block" href="#">
                            <svg class="icon icon-block__icon icon--internal-link" id="icon-c6ad" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-internal-link"></use>
</svg>Versicherungen &amp; Tarife
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

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

//- Render stage insert
.stage-insert-calculator&attributes(attr)
  .stage-insert-calculator__inner
    //- Calculator
    if calculator
      .stage-insert-calculator__section(class=columns && 'stage-insert-calculator__section--columns')
        if title
          != include('@headline--headline-2', { text: title, level: 2 })

        != include(`@${calculator.use}`, calculator.settings)

        if links
          .stage-insert-calculator__list
            != include('@icon-list', links)
/* Two Columns */
{
  "title": "Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!",
  "calculator": {
    "use": "form--inline",
    "settings": {
      "inline": true,
      "submit": "Vorteil berechnen",
      "submitOptions": {
        "hideable": true,
        "modifier": "red"
      },
      "elements": [
        {
          "label": "Aktuelle Krankenkasse",
          "id": "current-health-insurance",
          "use": "select",
          "settings": {
            "required": true,
            "options": [
              "Beispielkrankenkasse I",
              "Beispielkrankenkasse II"
            ]
          }
        },
        {
          "label": "Mtl. Bruttoeinkommen",
          "id": "gross-income",
          "hideable": true,
          "use": "input--text",
          "settings": {
            "placeholder": null,
            "required": true
          }
        }
      ]
    }
  },
  "columns": true,
  "links": {
    "items": [
      {
        "text": "Leistungen von A-Z",
        "icon": "internal-link"
      },
      {
        "text": "Extraleistungen der hkk",
        "icon": "internal-link"
      },
      {
        "text": "Versicherungen & Tarife",
        "icon": "internal-link"
      }
    ]
  }
}

/* One Column */
{
  "title": "Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!",
  "calculator": {
    "use": "form--inline",
    "settings": {
      "inline": true,
      "submit": "Vorteil berechnen",
      "submitOptions": {
        "hideable": true,
        "modifier": "red"
      },
      "elements": [
        {
          "label": "Aktuelle Krankenkasse",
          "id": "current-health-insurance",
          "use": "select",
          "settings": {
            "required": true,
            "options": [
              "Beispielkrankenkasse I",
              "Beispielkrankenkasse II"
            ]
          }
        },
        {
          "label": "Mtl. Bruttoeinkommen",
          "id": "gross-income",
          "hideable": true,
          "use": "input--text",
          "settings": {
            "placeholder": null,
            "required": true
          }
        }
      ]
    }
  }
}

/* One Column Links */
{
  "title": "Der hkk-Vorteil: Jetzt Preis und Leistung vergleichen!",
  "calculator": {
    "use": "form--inline",
    "settings": {
      "inline": true,
      "submit": "Vorteil berechnen",
      "submitOptions": {
        "hideable": true,
        "modifier": "red"
      },
      "elements": [
        {
          "label": "Aktuelle Krankenkasse",
          "id": "current-health-insurance",
          "use": "select",
          "settings": {
            "required": true,
            "options": [
              "Beispielkrankenkasse I",
              "Beispielkrankenkasse II"
            ]
          }
        },
        {
          "label": "Mtl. Bruttoeinkommen",
          "id": "gross-income",
          "hideable": true,
          "use": "input--text",
          "settings": {
            "placeholder": null,
            "required": true
          }
        }
      ]
    }
  },
  "links": {
    "items": [
      {
        "text": "Leistungen von A-Z",
        "icon": "internal-link"
      },
      {
        "text": "Extraleistungen der hkk",
        "icon": "internal-link"
      },
      {
        "text": "Versicherungen & Tarife",
        "icon": "internal-link"
      }
    ]
  }
}

  • Content:
    class StageInsertCalculator {
      constructor($el) {
        this.$el = $el;
        this.$selectInsurance = this.$el
          .querySelector('#current-health-insurance');
    
        this.$elementsToHide = this.$el
          .querySelectorAll('[data-hideable]');
    
        this.initEvents();
        this.initMediaQuery('(max-width: 581px)');
      }
    
      initEvents() {
        this.$selectInsurance.addEventListener('change', () => {
          this.mediaQueryListener(this.mediaQuery);
        });
      }
    
      initMediaQuery(constraints) {
        this.mediaQuery = window.matchMedia(constraints);
        this.mediaQuery.addListener(this.mediaQueryListener.bind(this));
        this.mediaQueryListener(this.mediaQuery);
      }
    
      mediaQueryListener(mediaQuery) {
        if (mediaQuery.matches) {
          if (this.insuranceIsSelected()) this.showElements();
          else this.hideElements();
        } else {
          this.showElements();
        }
      }
    
      hideElements() {
        this.$elementsToHide.forEach(
          $el => $el.setAttribute('style', 'display: none;'),
        );
      }
    
      showElements() {
        this.$elementsToHide.forEach(
          $el => $el.removeAttribute('style'),
        );
      }
    
      insuranceIsSelected() {
        return this.$selectInsurance.selectedIndex !== 0;
      }
    }
    
    document.querySelectorAll('.stage-insert-calculator').forEach(
      $el => new StageInsertCalculator($el),
    );
    
  • URL: /components/raw/stage-insert-calculator/stage-insert-calculator.js
  • Filesystem Path: src/components/organisms/stage-insert-calculator/stage-insert-calculator.js
  • Size: 1.3 KB
  • Content:
    .stage-insert-calculator {
      background-color: $color-steelgrey-light;
      margin-bottom: -2rem;
      position: relative;
    }
    
    .stage-insert-calculator__inner {
      @include mq($from: m) {
        display: flex;
        flex-wrap: wrap;
      }
    
      @include mq($from: l) {
        flex-wrap: nowrap;
        justify-content: space-between;
      }
    }
    
    .stage-insert-calculator__section {
      padding: 2.5rem;
    
      .headline {
        color: $color-red;
    
        @include mq($from: l) {
          flex-basis: 100%;
        }
      }
    
      .label,
      .select,
      .input {
        color: $color-blue;
      }
    
      .select,
      .input {
        border: 0;
      }
    
      .form--inline .form__inner {
        @include mq($from: m) {
          margin-right: -2.5rem;
        }
      }
    
      .form--inline .form__submit {
        @include mq($from: m) {
          height: auto;
          margin-bottom: 0;
        }
      }
    
      .form--inline .form__submit .button {
        @include mq($from: m) {
          bottom: -2rem;
          position: absolute;
          right: 2.5rem;
        }
    
        @include mq($from: l) {
          bottom: -2.5rem;
          position: absolute;
          right: 2.5rem;
        }
      }
    
      .form-group {
        max-width: none;
      }
    }
    
    .stage-insert-calculator__section:only-child {
      @include mq($from: m) {
        width: 100%;
      }
    }
    
    .stage-insert-calculator__section--columns {
      @include mq($from: l) {
        display: flex;
        flex-wrap: wrap;
        width: 60%;
      }
    
      @include mq($from: xl) {
        width: 70%;
      }
    
      .form {
        @include mq($from: l) {
          flex-basis: 70%;
          position: relative;
        }
      }
    
      .form--inline .form__submit .button {
        @include mq($from: m) {
          bottom: -2rem;
          position: absolute;
          right: 2.5rem;
        }
    
        @include mq($from: l) {
          bottom: -4.5rem;
          position: absolute;
          right: 0;
        }
      }
    }
    
    .stage-insert-calculator__list {
      font-size: 1.5rem;
    
      .icon-list__item {
        border-bottom: 1px solid $color-steelgrey-dark;
        padding-bottom: 1rem;
        padding-top: 1rem;
      }
    
      .icon-block[href] {
        color: $color-blue;
        font-weight: normal;
      }
    
      .icon-block[href]:hover,
      .icon-block[href]:focus {
        color: $color-red;
        text-decoration: none;
      }
    
      @include mq($from: m) {
        max-width: 25rem;
      }
    }
    
    .stage-insert-calculator__section--columns .stage-insert-calculator__list {
      max-width: none;
    
      @include mq($from: l) {
        flex-basis: 30%;
        flex-grow: 1;
        padding-left: 4rem;
      }
    }
    
  • URL: /components/raw/stage-insert-calculator/stage-insert-calculator.scss
  • Filesystem Path: src/components/organisms/stage-insert-calculator/stage-insert-calculator.scss
  • Size: 2.3 KB

There are no notes for this item.