hkk Frontend 2017

Bühnen-Einschub (Rechner) 

<!-- 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-291c" 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-5eb7" 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-0454" 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-7968" 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-7e8a" 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-fc5a" 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.