Font Sizer
- Source:
Properties:
| Name | Type | Description |
|---|---|---|
fontSizer |
Element | DOM reference to font sizer button container |
fontIncrease |
Element | DOM reference to text increase button |
fontDecrease |
Element | DOM reference to text decrease button |
storedValue |
String | Font size cookie |
storyText |
Element | DOM reference to story text container |
size |
Integer | Font size is initially set to 16, then overriden by cookie if it's set. |
magnifyCount |
Integer | Number tracking the font increase or decrease for analytics |
context |
String | Text created for analytics when font size is increased or decreased |
Example
<div class="c-fontSizer">
<button class="c-fontSizer__button c-fontSizer__button--decrease">
<span class="sr-only">Descrease article font</span>
<div class="c-fontSizer__letter">-A</div>
</button>
<button class="c-fontSizer__button c-fontSizer__button--increase">
<span class="sr-only">Increase article font</span>
<div class="c-fontSizer__letter">A+</div>
</button>
</div>
Allows user to increase or decrease article font size between 8px and 30px- Source:
Properties:
| Name | Type | Description |
|---|---|---|
fontSizer |
Element | DOM reference to font sizer button container |
fontIncrease |
Element | DOM reference to text increase button |
fontDecrease |
Element | DOM reference to text decrease button |
storedValue |
String | Font size cookie |
storyText |
Element | DOM reference to story text container |
size |
Integer | Font size is initially set to 16, then overriden by cookie if it's set. |
magnifyCount |
Integer | Number tracking the font increase or decrease for analytics |
context |
String | Text created for analytics when font size is increased or decreased |
Example
<div class="c-fontSizer">
<button class="c-fontSizer__button c-fontSizer__button--decrease">
<span class="sr-only">Descrease article font</span>
<div class="c-fontSizer__letter">-A</div>
</button>
<button class="c-fontSizer__button c-fontSizer__button--increase">
<span class="sr-only">Increase article font</span>
<div class="c-fontSizer__letter">A+</div>
</button>
</div>
Allows user to increase or decrease article font size between 8px and 30pxMethods
(inner) init()
- Source:
Initializes font sizer on the page
(inner) init()
- Source:
Initializes font sizer on the page
(inner) modifyFontSize(size, shouldSave)
- Source:
Increases or decreases font size and line height. Sets font size cookie.
Parameters:
| Name | Type | Description |
|---|---|---|
size |
integer | updated font size |
shouldSave |
boolean | true if cookie needs to be saved |
(inner) modifyFontSize(factor)
- Source:
Increases or decreases font size by 2 points on click. Sets font size cookie.
Parameters:
| Name | Type | Description |
|---|---|---|
factor |
integer | Font increase or decrease by 2 points. |