WeatherWidget

Source:

• main/WeatherWidget.js, line 5

Properties:

Name	Type	Description
selector	string	DOM selector for a weather widget
regionButtonSelector	string	DOM selector for the region select button
dropdownSelector	string	DOM selector for the dropdown
regionLabelSelector	string	DOM selector for region label
loadingCss	string	CSS class of the loading state
hiddenCss	string	CSS class of the hidden state
cookieName	string	Cookie name for storing user selected region

Example

<div class="c-weather">
	<div class="c-weather__inner">
		<div class="c-loader c-weather__loader"></div>
	 	<div class="c-weather__header">
	 			<button class="c-weather__region toggle-switch"
					data-toggle-outside-click="true" data-track-region="" data-title="CHANGE REGION">
	 				<svg class="c-weather__icon c-icon" focusable="false">
	 					<use xlink:href="" />
	 				</svg>
	 				<span class="c-weather__location" data-map="region_name"></span>
	 				<span class="c-weather__province" data-map="region_state_abbr"></span>
	 				<select class="c-weather__select toggle-on"></select>
	 			</button>
	 		</div>
	 		<a class="c-weather__link c-weather__link--left"
				data-map="weather_url" title="Weather" data-track-region="">
	 			<div class="c-weather__imageContainer u-hide-tablet-landscape">
	 				<img class="c-weather__image" data-map="icon" src="" alt="" />
	 			</div>
	 			<div class="c-weather__info">
	 				<div class="c-weather__degree c-weather__degree--current" data-map="current"></div>
	 				<div class="c-weather__prediction">
	 					<span class="c-weather__degree" data-map="high"></span>
	 					<span class="c-weather__degree" data-map="low"></span>
	 				</div>
	 			</div>
	 		</a>
	 		<a class="c-weather__link c-weather__link--right u-show-tablet-landscape"
				data-map="weather_url" title="Weather" data-track-region="">
	 			<div class="c-weather__imageContainer">
	 				<div>
	 					<img class="c-weather__image" data-map="icon" src=""  alt="" />
	 					<div class="c-weather__text c-weather__conditions" data-map="conditions"></div>
	 				</div>
	 			</div>
	 		</a>
		</div>
		<a class="c-weather__link c-weather__link--bottom"
			data-map="traffic_url" href="" data-track-region="">
			<span class="c-weather__label">Traffic</span>
			<span class="c-weather__text">Travel times & incidents</span>
			<div class="c-weather__traffic">
				<div class="c-weather__trafficTitle">
					<svg class="c-weather__alert c-icon" focusable="false">
						<use xlink:href="" />
					</svg>
					<span data-map="top_traffic_title"></span>
				</div>
				<span class="c-weather__trafficDesc" data-map="top_traffic_desc"></span>
			</div>
		</a>
	</div>
</div>