Barmer Fractal

List: Language 

<div class="m-list list--language js-language-menu" id="bm-language-menu">
    <button class="a-btn btn--back" type="button">zurück<i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>

    <h4 class="list__headline">
        Sprache auswählen
    </h4>

    <ul class="a-list-basic ">
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link is-selected" title="Deutsch" lang="de" data-lang-full="Deutsch" data-lang-short="DEU" data-title-text="Deutsch - Deutsch">
                DEU
                <span class="sr-only">Zur Zeit ausgewählt</span>
            </a>

        </li>
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link " title="English" lang="en" data-lang-full="English" data-lang-short="ENG" data-title-text="Englisch - English">
                ENG
            </a>

        </li>
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link " title="español" lang="es" data-lang-full="español" data-lang-short="ESP" data-title-text="Spanisch - español">
                ESP
            </a>

        </li>
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link " title="français" lang="fr" data-lang-full="français" data-lang-short="FRA" data-title-text="Französisch - français">
                FRA
            </a>

        </li>
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link " title="日本語" lang="ja" data-lang-full="日本語" data-lang-short="日本語" data-title-text="Japanisch - 日本語">
                日本語
            </a>

        </li>
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link " title="українська" lang="uk" data-lang-full="українська" data-lang-short="UKR" data-title-text="Ukrainisch - українська">
                UKR
            </a>

        </li>
        <li class="list__item ">
            <a href="http://zdf.de" class="a-link " title="中文" lang="zh" data-lang-full="中文" data-lang-short="中文" data-title-text="Chinesisch  - 中文">
                中文
            </a>

        </li>
    </ul>

</div>
 
<div class="m-list {{viewtypes.specifier}}" {{# content.id}}id="{{this}}"{{/content.id}}>
  {{# switches.hasBackButton }}{{ render '@button--back' partials.btnBack merge=true }}{{/ switches.hasBackButton}}

  {{# switches.hasHeadline }}
    {{# switches.hasIcon }}
      {{render '@icon' partials.icon merge=true}}
    {{/switches.hasIcon}}
    <h4 class="list__headline">
      {{# switches.isLinkableHeadline }}
        {{ render '@link' partials.headline merge=true }}
      {{/ switches.isLinkableHeadline }}
      {{^ switches.isLinkableHeadline }}
        {{{content.headline}}}
      {{/ switches.isLinkableHeadline }}
    </h4>
  {{/ switches.hasHeadline }}

  {{render '@list-basic' partials.list merge=true }}
</div>
 
{
  "switches": {
    "hasHeadline": true,
    "hasIcon": false,
    "isLinkableHeadline": false,
    "hasBackButton": true
  },
  "viewtypes": {
    "specifier": "list--language js-language-menu"
  },
  "content": {
    "headline": "Sprache auswählen",
    "id": "bm-language-menu"
  },
  "partials": {
    "list": {
      "viewtypes": {
        "specifier": ""
      },
      "content": {},
      "partials": {
        "listitems": [
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "viewtypes": {
                  "specifier": "is-selected"
                },
                "content": {
                  "text": "DEU",
                  "titleText": "Deutsch",
                  "lang": "de",
                  "dataAttributes": "data-lang-full=\"Deutsch\" data-lang-short=\"DEU\" data-title-text=\"Deutsch - Deutsch\"",
                  "activetext": "Zur Zeit ausgewählt"
                },
                "switches": {
                  "isActiveLink": true
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "content": {
                  "text": "ENG",
                  "titleText": "English",
                  "lang": "en",
                  "dataAttributes": "data-lang-full=\"English\" data-lang-short=\"ENG\" data-title-text=\"Englisch - English\""
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "content": {
                  "text": "ESP",
                  "titleText": "español",
                  "lang": "es",
                  "dataAttributes": "data-lang-full=\"español\" data-lang-short=\"ESP\" data-title-text=\"Spanisch - español\""
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "content": {
                  "text": "FRA",
                  "titleText": "français",
                  "lang": "fr",
                  "dataAttributes": "data-lang-full=\"français\" data-lang-short=\"FRA\" data-title-text=\"Französisch - français\""
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "content": {
                  "text": "日本語",
                  "titleText": "日本語",
                  "lang": "ja",
                  "dataAttributes": "data-lang-full=\"日本語\" data-lang-short=\"日本語\" data-title-text=\"Japanisch - 日本語\""
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "content": {
                  "text": "UKR",
                  "titleText": "українська",
                  "lang": "uk",
                  "dataAttributes": "data-lang-full=\"українська\" data-lang-short=\"UKR\" data-title-text=\"Ukrainisch - українська\""
                }
              }
            }
          },
          {
            "switches": {
              "hasTextContent": false
            },
            "type": "link",
            "partials": {
              "item": {
                "content": {
                  "text": "中文",
                  "titleText": "中文",
                  "lang": "zh",
                  "dataAttributes": "data-lang-full=\"中文\" data-lang-short=\"中文\" data-title-text=\"Chinesisch  - 中文\""
                }
              }
            }
          }
        ]
      },
      "switches": {}
    }
  }
}

No notes defined.