Text Controller

The Text Controller Component contains two elements: a language menu and a text sizer. When JavaScript is enabled, it has two primary states: expanded language options and collapsed language options. All language options are visible at page landing, but for all page visits afterwords, it collapses and gives the option of expanding to show the language options menu again. The current language switcher on ACCESS NYC is displayed through the WordPress Multilingual Plugin (WPML).

<div class="o-text-controller" data-js="text-controller">
  <button aria-controls="aria-c-text-controller__options" aria-expanded="false" class="o-text-controller__control mb-1 btn-link" data-js="text-controller__control" type="button">
    <svg aria-hidden="true" class="o-text-controller__icon o-text-controller__icon-full icon-ui icon-3">
      <use xlink:href="#icon-ui-settings"></use>
    </svg>
    <svg aria-hidden="true" class="o-text-controller__icon o-text-controller__icon-short icon-ui icon-3">
      <use xlink:href="#icon-ui-translate"></use>
    </svg>
    <span class="o-text-controller__title-full">Translate & Adjust Text</span>
    <span class="o-text-controller__title-short">Translate Text</span>
  </button>
  <div aria-hidden="true" class="o-text-controller__options hidden" id="aria-c-text-controller__options">
    <div class="o-text-controller__languages">
      <div class="wpml-ls-statics-shortcode_actions wpml-ls wpml-ls-legacy-list-horizontal">
        <ul>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">English</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-es wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">Español</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ru wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">Русский</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ko wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">한국어</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ar wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">العربية</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ht wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">Kreyol</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-zh-hant wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">繁體中文</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-fr wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">Français</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-pl wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">polski</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-ur wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">اردو</span>
            </a>
          </li>
          <li class="wpml-ls-slot-shortcode_actions wpml-ls-item wpml-ls-item-bn wpml-ls-last-item wpml-ls-item-legacy-list-horizontal">
            <a class="wpml-ls-link" href="#" tabindex="-1">
              <span class="wpml-ls-native">বাংলা</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="o-text-controller__sizer">
      <span class="o-text-controller__sizer-text">Adjust text size</span>
      <button class="o-text-controller__sizer-btn btn-text" data-js="text-larger" tabindex="-1">
        <svg class="icon icon-ui icon-3 mr-0" tabindex="-1">
          <use xlink:href="#icon-ui-plus-circle"></use>
        </svg>
        <div class="sr-only">Larger</div>
      </button>
      <button class="o-text-controller__sizer-btn btn-text" data-js="text-smaller" tabindex="-1">
        <svg class="icon icon-ui icon-3 mr-0" tabindex="-1">
          <use xlink:href="#icon-ui-minus-circle"></use>
        </svg>
        <div class="sr-only">Smaller</div>
      </button>
    </div>
  </div>
</div>

Text Controller Usage

Global Script

The Text Controller Object requires JavaScript for showing and hiding the text control options and for resizing the page’s text size. It uses a Cookie to store the user’s preferred text size. To use the Text Controller Object through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var access = new AccessNyc();
  access.textController();
</script>

This will instantiate the Text Controller Object and attach event listeners for toggling the options and text resize controls.

Module Import

The ES6 and IFFE modules all require importing and object instantiation in your main script. You must pass a dom selection of the Text Controller Object to the instantiated class. A selector reference is stored in the class.

// ES6
import TextController from 'src/objects/text-controller/text-controller';

<!-- IFFE -->
<script src="dist/objects/text-controller/text-controller.iffe.js"></script>

let element = document.querySelector(TextController.selector);
new TextController(element);

Dependencies and Polyfills

This script uses the Toggle Utility as a dependency and reqiures the same polyfills for IE11 support. See the “Toggle Usage” section for details on specific methods. Additionally, it uses JavaScript Cookie as a dependency.