access-nyc-patterns

<!DOCTYPE html> <html class="bg-color-white text-size-0" lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" /> <link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" /> <link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" /> <link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" /> <link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" /> <link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" /> <link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" /> <link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" /> <meta content="#112E51" name="msapplication-TileColor" /> <meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" /> <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Text Controller | ACCESS NYC Patterns</title><noscript> <style> body { visibility: visible !important; } </style> </noscript> <script type="text/javascript"> function load() { document.body.style.visibility = 'visible' }; </script> </head> <body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a> <div class="bg-color-white"> <header class="color-light-background px-2"> <div class="border-b border-color-grey-light"> <div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2"> <div> <h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden"> <use xlink:href="#icon-logo-mark"></use> </svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block"> <use xlink:href="#icon-logo-full"></use> </svg></a></h1> </div> <div class="flex items-center"> <h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2> <h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2> <nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav> </div> </div> </div> </header> <aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px"> <div class="page-wrapper py-4 animated"> <div class="screen-tablet:flex"> <nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav> </div> <div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div> </div> </aside> <main class="color-light-background pt-4" id="main-content"> <article class="pt-4"> <header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body"> <div class="my-0 w-full"> <h1 class="text-color-blue-dark px-2 pb-4 mb-4">Text Controller</h1> </div> </header> <section class="pb-4 mb-4"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <div> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/text-controller">src/components/text-controller/text-controller</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>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 <a href="https://access.nyc.gov">ACCESS NYC</a> is displayed through the <a href="https://wpml.org/">WordPress Multilingual Plugin (WPML)</a>.</p></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <div class="c-text-controller"><button aria-controls="aria-c-text-controller__options" aria-expanded="false" class="c-text-controller__toggle mb-1 btn-link" data-js="toggle" type="button"><svg class="icon icon-ui-settings"> <use xlink:href="#icon-ui-settings"></use> </svg><span class="c-text-controller__title-full">Translate & Adjust Text</span><span class="c-text-controller__title-short">Translate Text</span></button> <div aria-hidden="true" class="c-text-controller__options hidden" id="aria-c-text-controller__options"> <div class="c-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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><span class="wpml-ls-native">বাংলা</span></a></li> </ul> </div> </div> <div class="c-text-controller__sizer"><span class="c-text-controller__sizer-text">Adjust text size</span><button class="c-text-controller__sizer-btn btn-text js-text-larger"><svg class="icon icon-ui-plus-circle"> <use xlink:href="#icon-ui-plus-circle"></use> </svg> <div class="sr-only">Larger</div> </button><button class="c-text-controller__sizer-btn btn-text js-text-smaller"><svg class="icon icon-ui-minus-circle"> <use xlink:href="#icon-ui-minus-circle"></use> </svg> <div class="sr-only">Smaller</div> </button></div> </div> </div> </div> <div> <div class="code-block mb-1"><pre><div class="c-text-controller"><button aria-controls="aria-c-text-controller__options" aria-expanded="false" class="c-text-controller__toggle mb-1 btn-link" data-js="toggle" type="button"><svg class="icon icon-ui-settings"> <use xlink:href="#icon-ui-settings"></use> </svg><span class="c-text-controller__title-full">Translate &amp; Adjust Text</span><span class="c-text-controller__title-short">Translate Text</span></button> <div aria-hidden="true" class="c-text-controller__options hidden" id="aria-c-text-controller__options"> <div class="c-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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><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="#"><span class="wpml-ls-native">বাংলা</span></a></li> </ul> </div> </div> <div class="c-text-controller__sizer"><span class="c-text-controller__sizer-text">Adjust text size</span><button class="c-text-controller__sizer-btn btn-text js-text-larger"><svg class="icon icon-ui-plus-circle"> <use xlink:href="#icon-ui-plus-circle"></use> </svg> <div class="sr-only">Larger</div> </button><button class="c-text-controller__sizer-btn btn-text js-text-smaller"><svg class="icon icon-ui-minus-circle"> <use xlink:href="#icon-ui-minus-circle"></use> </svg> <div class="sr-only">Smaller</div> </button></div> </div> </div></pre> </div> </div> </div> </div> </section> </article> </main> </div> <footer class="py-4 text-center color-dark-background"> <p> <nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav> </p> <p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p> <p class="m-0"> <nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav> </p> </footer> <script src="scripts/polyfills.js"></script> <script src="scripts/access-nyc.js"></script> <script src="scripts/vue-components.js"></script> <script type="text/javascript"> var access = new AccessNyc(); var VueComponents = new VueComponents(); access.icons(); access.toggle(); access.alertBanner(); </script> </body> </html>