').append(element).html();\n }\n\n _buildDatelineTemplate(dateline) {\n return `\n
${dateline} - \n `;\n }\n\n _getBodyComponents(bodyHtml = '', ads = [], replacedAds = [], pattern = 3, showStoryAds, minRequiredCharacterNumber = 0, showDateline, dateline) {\n const components = [];\n\n let bodyElements;\n\n if (!bodyHtml) {\n return null;\n }\n\n const enableDateline = showDateline && dateline;\n\n if (!showStoryAds && !enableDateline) {\n return
;\n }\n\n /* This is pulling all of the top level children from the block of body HTML that is handed down */\n bodyElements = Array.from($(bodyHtml)).map((element) => this._convertHTMLElementToString(element));\n\n if (enableDateline) {\n /** Add dateline to the first full paragraph which contains only text */\n const datelineIndex = bodyElements.findIndex(paragraph => paragraph.replace(PARAGRAPH_TAGS_REGEX, '').replace(/ | /g, ' ').trim().length > 0);\n\n if (datelineIndex !== -1) {\n const datelineContent = $(bodyElements[datelineIndex]).prepend(this._buildDatelineTemplate(dateline));\n bodyElements[datelineIndex] = this._convertHTMLElementToString(datelineContent);\n }\n }\n\n if (!showStoryAds) {\n _.forEach(bodyElements, (paragraph, index) => {\n components.push(
);\n });\n\n return components;\n }\n\n let numberOfValidParagraphs = 0;\n\n _.forEach(bodyElements, (paragraph, index) => {\n components.push(
);\n\n /** A valid paragraph:\n * Is not empty: have at least one word / image / iframe / video / table, space character will not be counted ( or )\n * Not a style / script html tag\n */\n const isValidParagraph = paragraph.replace(REMOVE_HTML_TAGS_REGEX, '').replace(/ | /g, ' ').trim().length > minRequiredCharacterNumber;\n\n const currentAdIndex = Math.floor(numberOfValidParagraphs / pattern);\n\n if (isValidParagraph) {\n if (ads[currentAdIndex] && numberOfValidParagraphs % pattern === pattern - 1) {\n const insertedAds = this._insertAds(ads, replacedAds, currentAdIndex);\n\n components.push(...insertedAds);\n }\n\n numberOfValidParagraphs++;\n }\n });\n\n // If there are not enough paragraphs to put an advertisement between paragraphs, put one at the end\n if (numberOfValidParagraphs < pattern && ads.length) {\n const insertedAds = this._insertAds(ads, replacedAds, 0);\n\n components.push(...insertedAds);\n }\n\n return components;\n }\n\n _insertAds(ads, replacedAds, index) {\n const components = [];\n const curAdUnit = ads[index];\n const replaceAd = replacedAds.find(item => item.position === index);\n let adUnitClassnames = curAdUnit.className;\n\n if (replaceAd) {\n /** We need to distinguish Ad container from paragraph container to prevent CSS override */\n let replacedAdClassnames = 'ArticleBody-ad';\n\n const {\n ad: {\n id,\n props\n },\n screenSizes = []\n } = replaceAd;\n\n screenSizes.forEach(screenSize => {\n adUnitClassnames += ` hidden-${screenSize}`;\n replacedAdClassnames += ` visible-${screenSize} `;\n });\n\n components.push(
);\n }\n\n components.push(
);\n\n return components;\n }\n\n render() {\n const {\n ads = [],\n replacedAds = [],\n showStoryAds,\n adPlacementPattern,\n minRequiredCharacterNumber,\n bodyHtml,\n showDateline,\n dateline\n } = this.props;\n\n const articleBody = this._getBodyComponents(bodyHtml, ads, replacedAds, adPlacementPattern, showStoryAds, minRequiredCharacterNumber, showDateline, dateline);\n\n return (\n
this._handleBodyDidMount(ref)}>\n {articleBody}\n
\n );\n }\n}\n\nclass ReplacedAd extends Component {\n static propTypes = {\n componentInstanceId: PropTypes.string.isRequired,\n componentDefinition: PropTypes.object.isRequired,\n classnames: PropTypes.string\n }\n\n state = {\n ComponentClass: null\n }\n\n componentWillMount() {\n const {\n componentInstanceId\n } = this.props;\n\n if (componentInstanceId) {\n ComponentLoader.importReactComponent(componentInstanceId).then(ComponentClass =>\n this.setState({ ComponentClass })\n ).catch(error => {\n throw new Error(error);\n });\n }\n }\n\n render() {\n const {\n componentDefinition,\n classnames\n } = this.props;\n\n const {\n ComponentClass\n } = this.state;\n\n if (!ComponentClass) {\n return null;\n }\n\n return (\n
\n
\n );\n }\n}\n\nexport default Article;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/news/Article.js","import _ from 'lodash';\nimport React, {Component, PropTypes} from 'react';\nimport { readComponentInstanceResourceList } from 'lib/frankly';\nimport ComponentLoader from '../../../shared/utils/ComponentLoader';\n\nclass AssociatedContent extends Component {\n static propTypes = {\n resources: PropTypes.object,\n FRN_rawResponses: PropTypes.array,\n displayComponentId: PropTypes.string.isRequired,\n displayComponentProps: PropTypes.object,\n filter: PropTypes.object,\n dataPath: PropTypes.string,\n data: PropTypes.shape({\n type: PropTypes.oneOf(['url', 'object']),\n filter: PropTypes.object\n })\n }\n\n static defaultProps = {\n dataPath: '[0].data.features',\n data: {\n type: 'object'\n }\n }\n\n state = {\n ComponentClass: null,\n rawResponses: this.props.FRN_rawResponses,\n gotImplicitData: false,\n }\n\n ssr_state = {\n ComponentClass: null,\n rawResponses: []\n }\n\n componentWillMount() {\n const {\n resources = {},\n FRN_resourceEndpoints = [],\n FRN_rawResponses: rawResponses = [],\n displayComponentId,\n data: {\n type,\n filter = {}\n } = {}\n } = this.props;\n\n if (typeof window !== 'undefined') { // CSR\n ComponentLoader.importReactComponent(displayComponentId).then(ComponentClass =>\n this.setState({ ComponentClass })\n ).catch(error => {\n throw new Error(error);\n });\n\n } else { //SSR \n this.ssr_state.ComponentClass = ComponentLoader._modules[displayComponentId] ? ComponentLoader._modules[displayComponentId] : null;\n }\n\n if (typeof window !== 'undefined') { // CSR\n if (rawResponses.length > 0) {\n if (type === 'url') {\n this.getImplicitData(rawResponses);\n } else {\n this.setState({ rawResponses });\n }\n }\n\n } else { // SSR\n this.ssr_state.rawResponses = this.getRawResponses(FRN_resourceEndpoints);\n\n if (type === 'url') {\n const url = this.getImplicitUrl(this.ssr_state.rawResponses);\n\n if (url && resources[url + '?clienttype=container.json']) {\n this.ssr_state.rawResponses = [resources[url + '?clienttype=container.json']];\n }\n }\n }\n }\n\n componentWillReceiveProps(newProps) {\n const {\n FRN_rawResponses: rawResponses,\n data: {\n type\n } = {}\n } = newProps;\n\n if (this.props.FRN_rawResponses.length === 0 && rawResponses.length > 0) {\n if (type === 'url') {\n this.getImplicitData(rawResponses);\n } else {\n this.setState({ rawResponses });\n }\n }\n }\n\n getRawResponses = (resourceEndpoints = []) => { // SSR\n const {resources = {}} = this.props;\n let rawResponses = [];\n\n if (_.size(resourceEndpoints) > 0) {\n rawResponses = resourceEndpoints\n .map(resource => {\n let pat = new RegExp(\"\\/[\\u0024][\\u007B]id[\\u007D]\\/\", \"i\");\n\n if (pat.test(resource.url)) {\n const url = resource.url.replace('${id}', this.props.params.id);\n return resources[url] ? resources[url] : null;\n }\n return resources[resource.url] ? resources[resource.url] : null;\n })\n .filter(resource => resource !== null);\n }\n\n return rawResponses;\n }\n\n getImplicitUrl = (FRN_rawResponses = []) => {\n const filter = _.cloneDeep(_.get(this.props, 'data.filter', {}));\n const items = _.get(FRN_rawResponses[0], 'data.features', []);\n\n const {\n index = 0\n } = filter;\n\n _.unset(filter, 'index');\n\n const filteredList = _.filter(items, filter);\n const url = _.get(filteredList[index], 'link', '');\n\n return url;\n }\n\n getImplicitData = (FRN_rawResponses) => {\n const url = this.getImplicitUrl(FRN_rawResponses);\n\n readComponentInstanceResourceList(this, { propPath: 'data', vars: { url } }).then(rawResponses => {\n this.setState({ rawResponses, gotImplicitData: true });\n }).catch(error => {\n throw new Error(error);\n });\n }\n\n render() {\n const {\n displayComponentProps = {},\n filter = {},\n dataPath,\n data: {\n type\n }\n } = this.props;\n\n if (typeof window !== 'undefined' && type === 'url' && !this.state.gotImplicitData) { // CSR\n return null;\n }\n\n const {\n ComponentClass,\n rawResponses\n } = typeof window !== 'undefined' ? this.state : this.ssr_state;\n\n if (!ComponentClass) {\n return null;\n }\n\n const [\n {\n data: {\n features: items = []\n } = {}\n } = {}\n ] = rawResponses;\n\n if (!items.length) {\n return null;\n }\n\n const { index } = filter;\n\n const stories = items[index] ? [items[index]] : _.filter(items, filter);\n\n let newRawResponses = JSON.parse(JSON.stringify(rawResponses)); // deep copy\n\n _.set(newRawResponses, dataPath, stories);\n\n return (\n
\n { ComponentClass &&
\n );\n }\n}\n\nexport default AssociatedContent;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/news/AssociatedContent.js","import { includes, get, isMatch, toLower, merge, map } from 'lodash';\nimport classNames from 'classnames';\nimport React, { Component, PropTypes } from 'react';\nimport { bylineToString, getLocalLink } from 'utils/NewsUtils';\nimport { showWindow, getDataOfWindowOpen } from 'utils/WindowUtils';\nimport { filterItems } from 'utils/CategoryUtils';\nimport Timestamp from 'components/Timestamp';\nimport Image from 'components/Image';\nimport ComponentTitle from 'components/shared/ComponentTitle';\nimport { COLOR_STYLE } from '../../constants/FRNBaseStyles';\nimport {withResources} from 'lib/redux';\n\nconst CARD_TYPE = {\n split: 'split',\n full: 'full',\n text: 'text'\n};\n\nconst WIDTH_STYLE = {\n sm: 'sm',\n md: 'sm',\n lg: 'lg'\n};\n\nconst RATIO_SPLIT_CARD_IMAGE = {\n sm: 1, // full width\n md: 0.5, // 50% card width\n lg: 0.66 // 66% card width\n};\n\nclass Card extends Component {\n static propTypes = {\n FRN_rawResponses: PropTypes.array,\n cardType: PropTypes.oneOf(Object.keys(CARD_TYPE)),\n widthStyle: PropTypes.oneOf(Object.keys(WIDTH_STYLE)),\n heightStyle: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n thumbnailAlignment: PropTypes.oneOf(['left', 'right']),\n textAlignment: PropTypes.oneOf(['left', 'right']),\n gradientDirection: PropTypes.oneOf(['left', 'right', 'bottom', 'top']),\n textVerticalAlignment: PropTypes.oneOf(['top', 'bottom']),\n videoIconPlacement: PropTypes.oneOf(['image-center', 'image-bottom-left', 'image-bottom-right', 'image-top-left', 'image-top-right', 'inline-left', 'inline-right']),\n startArticleIndex: PropTypes.number,\n types: PropTypes.array,\n displaySizes: PropTypes.array,\n backgroundColorStyle: PropTypes.oneOf(Object.keys(COLOR_STYLE)),\n backgroundColor: PropTypes.string,\n textColorStyle: PropTypes.oneOf(Object.keys(COLOR_STYLE)),\n textColor: PropTypes.string,\n showDescriptions: PropTypes.bool,\n showPlayButtonForVideo: PropTypes.bool,\n showTimestamp: PropTypes.bool,\n showUpdatedDate: PropTypes.bool,\n showBylines: PropTypes.bool,\n edgeToEdge: PropTypes.bool,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n }),\n maintainImageAspectRatio: PropTypes.bool,\n imageAspectRatioBackgroundColor: PropTypes.string,\n pillOptions: PropTypes.shape({\n pillText: PropTypes.string,\n pillColorStyle: PropTypes.oneOf(Object.keys(COLOR_STYLE)),\n pillColor: PropTypes.string,\n pillVerticalAlign: PropTypes.oneOf(['top-card', 'above-headline'])\n }),\n displayTriggers: PropTypes.arrayOf(\n PropTypes.shape({\n filter: PropTypes.object.isRequired,\n props: PropTypes.shape({\n textColorStyle: PropTypes.oneOf(Object.keys(COLOR_STYLE)),\n textColor: PropTypes.string,\n backgroundColorStyle: PropTypes.oneOf(Object.keys(COLOR_STYLE)),\n backgroundColor: PropTypes.string,\n pillText: PropTypes.string,\n pillColorStyle: PropTypes.oneOf(Object.keys(COLOR_STYLE)),\n pillColor: PropTypes.string\n })\n })\n ),\n state: PropTypes.object,\n spans: PropTypes.object,\n title: PropTypes.string,\n titleColor: PropTypes.string,\n titleType: PropTypes.string\n }\n\n static defaultProps = {\n cardType: 'split',\n widthStyle: 'sm',\n heightStyle: 'md',\n thumbnailAlignment: 'right',\n textAlignment: 'left',\n gradientDirection: 'bottom',\n textVerticalAlignment: 'bottom',\n videoIconPlacement: 'inline-right',\n startArticleIndex: 0,\n types: ['story', 'clip', 'link'],\n showDescriptions: false,\n showPlayButtonForVideo: true,\n showTimestamp: true,\n showUpdatedDate: false,\n showBylines: true,\n edgeToEdge: false,\n timestampOptions: {\n showElapsedTime: true,\n displayShortDateTime: true\n },\n maintainImageAspectRatio: false,\n pillOptions: {\n pillVerticalAlign: 'top-card'\n },\n title: '',\n titleType: 'Module Title'\n }\n\n render() {\n const {\n FRN_rawResponses: [\n {\n data: {\n features: items = []\n } = {}\n } = {}\n ] = [],\n cardType,\n widthStyle,\n heightStyle,\n startArticleIndex,\n types: itemTypes,\n displaySizes = [],\n thumbnailAlignment,\n textAlignment,\n gradientDirection,\n textVerticalAlignment,\n videoIconPlacement,\n showDescriptions,\n backgroundColorStyle: defaultBackgroundColorStyle,\n backgroundColor: defaultBackgroundColor,\n textColorStyle: defaultTextColorStyle,\n textColor: defaultTextColor,\n showPlayButtonForVideo,\n showTimestamp,\n showUpdatedDate,\n showBylines,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n },\n maintainImageAspectRatio,\n imageAspectRatioBackgroundColor,\n pillOptions: {\n pillText: defaultPillText,\n pillColorStyle: defaultPillColorStyle,\n pillColor: defaultPillColor,\n pillVerticalAlign\n },\n displayTriggers = [],\n edgeToEdge,\n spans = {},\n title,\n titleType,\n titleColor\n } = this.props;\n\n const offset = Math.max(startArticleIndex, 0);\n const filteredItems = filterItems(items, {type: itemTypes, displaysize: displaySizes });\n const itemToShow = filteredItems[offset];\n\n if (!itemToShow) {\n return null;\n }\n\n const customOption = displayTriggers.find((displayTriggersItem) => isMatch(itemToShow, displayTriggersItem.filter)) || {};\n const {\n props: {\n textColorStyle: customTextColorStyle,\n textColor: customTextColor,\n backgroundColorStyle: customBackgroundColorStyle,\n backgroundColor: customBackgroundColor,\n pillText: customPillText,\n pillColorStyle: customPillColorStyle,\n pillColor: customPillColor\n } = {}\n } = customOption;\n\n const pillText = customPillText || defaultPillText;\n const backgroundColorStyle = customBackgroundColorStyle || defaultBackgroundColorStyle;\n const backgroundColor = customBackgroundColor || (!customBackgroundColorStyle ? defaultBackgroundColor : '');\n const textColorStyle = customTextColorStyle || defaultTextColorStyle;\n const textColor = customTextColor || (!customTextColorStyle ? defaultTextColor : '');\n const pillColorStyle = customPillColorStyle || defaultPillColorStyle;\n const pillColor = customPillColor || (!customPillColorStyle ? defaultPillColor : '');\n\n const {\n id = '',\n url = '',\n link = '',\n layout = '',\n headline = '',\n updatedDate = '',\n publishedDate = '',\n type: newsType = '',\n abstract: description = '',\n seo: { pageurl: slug = ''} = {},\n bylines = [],\n surfaceable: [ { type: featureType = '' } = {} ] = [],\n images = {},\n abstractimage: {\n filename: newsImage = '',\n lastEditedDate = ''\n } = {},\n window: {\n height = '500',\n width = '500',\n isnewwindow = false,\n showtoolbar = true,\n isresizable = true,\n showscrollbar = true,\n showlocation = true,\n } = {},\n options: {\n date: {\n published: {\n showonabstract: showPublished = true\n } = {},\n updated: {\n showonabstract: showUpdated = true\n } = {}\n } = {}\n } = {}\n } = itemToShow;\n\n let type = cardType;\n let locationUrl = '';\n\n try {\n if (typeof location === 'undefined') {\n const {hostname, port, protocol} = this.props.state.page;\n const location = {hostname, port, protocol: protocol.endsWith(':') ? protocol : protocol + ':'};\n locationUrl = getLocalLink(location, {id, type: newsType, slug, link});\n } else {\n locationUrl = getLocalLink(location, {id, type: newsType, slug, link});\n }\n } catch (err) {\n console.log('>>> getLocalLink error', err);\n }\n\n const isSplitCard = type === CARD_TYPE.split;\n const isFullCard = type === CARD_TYPE.full;\n const isSmStyle = widthStyle === WIDTH_STYLE.sm;\n const isTextAlignedTop = textVerticalAlignment === 'top';\n const isPillAlignedAboveHeadline = pillVerticalAlign === 'above-headline';\n const isPillAlignedTopCard = pillVerticalAlign === 'top-card';\n\n const isSmSplitCard = isSplitCard && isSmStyle;\n\n const textClassNames = classNames(\n 'Card-content',\n `Card-${type}-content`,\n {[`Card-${type}-content--${textVerticalAlignment}`]: !isSmStyle || !isSplitCard},\n {[`Card-${type}-content--${textVerticalAlignment}-noTimestamp`]: !(showTimestamp || showBylines)},\n {[`Card-${type}-content--${textVerticalAlignment}-noPillPadding`]: !pillText || (isTextAlignedTop && isPillAlignedAboveHeadline) }\n );\n\n const showVideoIcon = showPlayButtonForVideo && (newsType.toLowerCase() === 'clip' || featureType.toLowerCase() === 'clip');\n const videoIconPosition = videoIconPlacement.slice(videoIconPlacement.indexOf('-') + 1, videoIconPlacement.length);\n // Keeping space between pill and title if they stick together\n const isTitleStickToPill = pillText && !isSmSplitCard && (isPillAlignedAboveHeadline || (isPillAlignedTopCard && isTextAlignedTop));\n\n const titleClassnames = classNames(\n 'Card-title',\n {'Card-title-stickToPill': isTitleStickToPill},\n `Card-${type}-title`,\n `Card-${type}-title--${widthStyle}`,\n {[`TilteVideoThumbnail TilteVideoThumbnail-${videoIconPosition}`]: showVideoIcon && videoIconPlacement.includes('inline')}\n );\n\n const pillTextClassnames = classNames(\n 'Card-pillText',\n {'Card-pillText--noBackground': !(pillColor || pillColorStyle)},\n {[`frn-u-background-${pillColorStyle}`]: pillColorStyle}\n );\n\n const pillContent = pillText ?
{pillText}
: null;\n\n const textContainerClassnames = classNames(\n 'Card-textContainer',\n `Card-${type}-textContainer`,\n `Card-${type}-textContainer--${widthStyle}`,\n `Card-${type}-textContainer--${textAlignment}`,\n {[`Card-${type}-textContainer--${widthStyle}-static-top`]: pillText && isPillAlignedTopCard}\n );\n\n const pillAboveHeadlineInSmSplit = isPillAlignedAboveHeadline && isSmSplitCard;\n\n const content = [];\n\n const iframeImage = get(images, 'graphic.filename', '');\n const linkImage = get(images, 'abstract.filename', '');\n\n const isShowWindowLayout = isnewwindow && (newsType === 'link');\n const urlIFrameOrUrlLoc = layout === 3 ? (url || iframeImage) : locationUrl;\n const dataOfWindowOpen = getDataOfWindowOpen(width, height, showtoolbar, showscrollbar, showlocation, isresizable);\n let timestamp;\n\n if (showTimestamp || showBylines) {\n let timestampDate;\n\n if (showTimestamp) {\n const publishedDateTimestamp = showPublished ? publishedDate : null;\n const updatedDateTimestamp = showUpdated ? updatedDate : null;\n\n timestampDate = showUpdatedDate ? updatedDateTimestamp : publishedDateTimestamp;\n }\n\n timestamp =
;\n }\n\n const isOnClick = () => {isShowWindowLayout ? showWindow(urlIFrameOrUrlLoc, '_blank', dataOfWindowOpen) : showWindow(urlIFrameOrUrlLoc, '_self');};\n\n content.push(\n
\n { (isPillAlignedTopCard || pillAboveHeadlineInSmSplit) && pillContent }\n
\n { (isPillAlignedAboveHeadline && !pillAboveHeadlineInSmSplit) && pillContent }\n { isShowWindowLayout ?\n
\n {headline}
\n :\n
{headline}
}\n {showDescriptions &&
/g, 'span>') }}>
}\n
\n {timestamp}\n
\n );\n\n const customBackgroundStyles = {};\n\n customBackgroundStyles['backgroundColor'] = backgroundColor;\n\n if (maintainImageAspectRatio) {\n customBackgroundStyles['backgroundColor'] = imageAspectRatioBackgroundColor;\n\n if (isSmSplitCard || isFullCard) {\n const DEFAULT_TRANSPARENT = '60%';\n const BACKGROUND_TRANSPARENT = {\n sm: '90%',\n md: DEFAULT_TRANSPARENT,\n lg: '30%'\n };\n /* background-image is scaled to width proportionally */\n customBackgroundStyles['backgroundSize'] = '100% auto';\n customBackgroundStyles['backgroundPosition'] = 'top center, bottom';\n /* add linear-gradient for backgroundImage */\n const transparentValue = (gradientDirection === 'top' || gradientDirection === 'bottom') ? DEFAULT_TRANSPARENT : BACKGROUND_TRANSPARENT[widthStyle];\n customBackgroundStyles['backgroundImage'] += `,linear-gradient(to ${gradientDirection}, ${imageAspectRatioBackgroundColor}, transparent ${transparentValue})`;\n }\n } else {\n customBackgroundStyles['backgroundSize'] = 'cover';\n }\n\n /* Number of columns for each breakpoint, default: xs = 12, sm = xs, md = sm, lg = md, xl = lg */\n const {\n xs = 12,\n sm = xs,\n md = sm,\n lg = md,\n xl = lg\n } = spans;\n\n const ratioImageWidth = isSplitCard ? RATIO_SPLIT_CARD_IMAGE[widthStyle] : 1;\n\n /* Breakpoints: XS: 0-767, S: 768-991, M: 992-1199, L: 1200-1469, XL: 1470- */\n const imageBreakpoints = [\n { \"maxWidth\": 640, \"widthVW\": 100},\n { \"maxWidth\": 767, \"widthVW\": Math.round((xs / 12) * 100) },\n { \"maxWidth\": 991, \"widthPX\": Math.round((sm / 12) * 720 * ratioImageWidth)},\n { \"maxWidth\": 1199, \"widthPX\": Math.round((md / 12) * 940 * ratioImageWidth)},\n { \"maxWidth\": 1469, \"widthPX\": Math.round((lg / 12) * 1140 * ratioImageWidth)},\n { \"widthPX\": Math.round((xl / 12) * 1410 * ratioImageWidth)},\n ];\n\n if (isSplitCard) {\n const imageContainerClassNames = classNames(\n `Card-split-imageContainer`,\n {[`Card-imageGradient Card-imageGradient--${gradientDirection}`]: isSmSplitCard},\n `Card-split-imageContainer--${widthStyle}`,\n {[`VideoThumbnail VideoThumbnail-${videoIconPosition}`]: showVideoIcon && videoIconPlacement.includes('image')}\n );\n\n const imageStyles = maintainImageAspectRatio ? {\n objectFit: 'contain'\n } : null;\n\n const thumbnailContent = (\n
\n \n \n );\n\n if (thumbnailAlignment === 'left' || isSmStyle) {\n content.unshift(thumbnailContent);\n } else {\n content.push(thumbnailContent);\n }\n } else { // for both fullCard & text cards, we should still use an image component so that we get the placeholderImage\n content.unshift(
);\n }\n\n const cardStyles = {\n color: textColor,\n backgroundColor\n };\n\n const cardClassNames = classNames(\n 'Card-container',\n `Card-${heightStyle}`,\n `Card-${type}-container`,\n `Card-${type}-container--${widthStyle}`,\n {[`Card-imageGradient Card-imageGradient--${gradientDirection}`]: isFullCard},\n {[`frn-u-foreground-${textColorStyle}`]: textColorStyle},\n {[`frn-u-background-${backgroundColorStyle}`]: backgroundColorStyle}\n );\n\n const cardWrapperClassName = classNames('Card', 'Card-hoverTitle', {'Card-edgeToEdge': edgeToEdge});\n\n return (\n \n { title ?
: null }\n
\n {content}\n
\n
\n { title ?
: null }\n this.cardlist = cardlist}>\n {content}\n
\n {showReadMore &&\n \n
\n }\n {itemNumber}.
\n );\n }\n\n if (showThumbnails) {\n const imageContainerStyles = {};\n\n imageContainerStyles['backgroundColor'] = backgroundColor;\n\n let imageStyles;\n if (maintainImageAspectRatio) {\n imageContainerStyles['backgroundColor'] = imageAspectRatioBackgroundColor;\n imageStyles = {\n objectFit: 'contain'\n };\n }\n\n const imageContainerClassNames = classNames(\n `CardList-item-imageContainer`,\n {'CardList-hoverCardList': isShowWindowLayout},\n `CardList-item-imageContainer--${widthStyle}`,\n {[`VideoThumbnail VideoThumbnail-${videoIconPosition}`]: showVideoIcon && videoIconPlacement.includes('image')}\n );\n\n const imgClassNames = classNames(\n 'CardList-item-imageContainer-image',\n {[`VideoThumbnail VideoThumbnail-${videoIconPosition}`]: showVideoIcon && videoIconPlacement.includes('image')},\n {'CardList-item-imageContainer-image--scale': maintainImageAspectRatio}\n );\n\n const isOnClick = () => {isShowWindowLayout && showWindow(urlIFrameOrUrlLoc, '_blank', dataOfWindowOpen);};\n\n const thumbnailContent = (\n \n \n \n \n );\n\n if (thumbnailAlignment === 'left') {\n content.unshift(thumbnailContent);\n } else {\n content.push(thumbnailContent);\n }\n }\n\n const itemStyles = {\n color: textColor,\n backgroundColor\n };\n\n const itemClassnames = classNames(\n 'CardList-item',\n {\n 'CardList-item-margin--default': !enableDivider,\n 'CardList-item-margin--divider': enableDivider,\n [`frn-u-margin-${dividerHeight}`]: enableDivider,\n 'CardList-item-divider--above-list': enableDivider && dividerAboveList,\n 'CardList-item-divider--between': enableDivider && !dividerAboveList && !dividerBelowList,\n 'CardList-item-divider--below-list': enableDivider && dividerBelowList,\n }\n );\n\n /**\n * Override frn-u-margin-* based on divider position\n */\n if (enableDivider) {\n if (dividerAboveList) {\n itemStyles['marginBottom'] = 0;\n } else {\n itemStyles['marginTop'] = 0;\n }\n }\n\n return (\n \n );\n }\n}\n\nCardListItem = withResources(CardListItem);\nexport default CardList;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/news/CardList.js","import { get, toLower, includes} from 'lodash';\nimport classNames from 'classnames';\nimport React, { Component, PropTypes } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport ComponentTitle from '../shared/ComponentTitle';\nimport ChevronRight from 'components/icons/ChevronRight';\nimport Pagination from 'components/icons/Pagination';\nimport Timestamp from 'components/Timestamp';\nimport Image from 'components/Image';\nimport { showWindow, getDataOfWindowOpen } from 'utils/WindowUtils';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\nimport { filterItems } from 'utils/CategoryUtils';\n\nconst GRID_ITEM_HEIGHT = 280;\nconst HERO_ITEM_HEIGHT = 540;\n\nconst layoutType = {\n HERO: 'hero',\n GRID: 'grid'\n};\n\nconst heroPlacementType = {\n TOP: 'top',\n LEFT: 'left'\n};\n\nconst imageSizingType = {\n FIXED_HEIGHT: 'fixed-height',\n SIXTEEN_NINE: 'sixteen-nine'\n};\n\nconst ItemsPropTypes = {\n columnGridCount: PropTypes.number.isRequired,\n textColor: PropTypes.string,\n showTimestamp: PropTypes.bool,\n showUpdatedDate: PropTypes.bool,\n padding: PropTypes.number,\n showPill: PropTypes.bool,\n videoIconPlacement: PropTypes.string,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n })\n};\n\nconst CategoryGridPropTypes = {\n layout: PropTypes.string,\n showPagination: PropTypes.bool,\n rowGridCount: PropTypes.number.isRequired,\n heroPlacement: PropTypes.string,\n heroCount: PropTypes.number,\n ...ItemsPropTypes\n};\n\nclass CategoryGridWrapper extends Component {\n static propTypes = {\n FRN_rawResponses: PropTypes.array,\n title: PropTypes.string,\n titleColor: PropTypes.string,\n backgroundColor: PropTypes.string,\n showReadMore: PropTypes.bool,\n categoryUrl: PropTypes.string,\n startArticleIndex: PropTypes.number,\n types: PropTypes.array,\n displaySizes: PropTypes.array,\n totalNumberOfItems: PropTypes.number,\n titleType: PropTypes.string,\n imageSizing: PropTypes.oneOf([imageSizingType.FIXED_HEIGHT, imageSizingType.SIXTEEN_NINE]),\n ...CategoryGridPropTypes\n }\n\n static defaultProps = {\n layout: layoutType.GRID,\n startArticleIndex: 0,\n types: ['story', 'link'],\n totalNumberOfItems: 7,\n heroPlacement: heroPlacementType.TOP,\n heroCount: 1,\n rowGridCount: 1,\n columnGridCount: 1,\n backgroundColor: '#FFFFFF',\n textColor: '#FFFFFF',\n titleColor: '#313131',\n showPagination: true,\n showTimestamp: true,\n showUpdatedDate: false,\n showReadMore: true,\n padding: 2,\n videoIconPlacement: 'center',\n titleType: TITLE_TYPE.MODULE_TITLE,\n imageSizing: imageSizingType.FIXED_HEIGHT\n }\n\n render() {\n const {\n FRN_rawResponses: [{\n data: {\n features: items = [],\n headline = ''\n } = {}\n } = {}] = [],\n title,\n layout,\n titleColor,\n backgroundColor,\n textColor,\n showReadMore,\n showTimestamp,\n showUpdatedDate,\n showPill,\n categoryUrl,\n totalNumberOfItems,\n startArticleIndex,\n types,\n displaySizes = [],\n showPagination,\n heroPlacement,\n heroCount,\n rowGridCount,\n columnGridCount,\n videoIconPlacement,\n timestampOptions = {},\n titleType,\n imageSizing\n } = this.props;\n\n const maxValueViolation = (field, value) => {\n return ` the ${field} field must be less than ${value}`;\n };\n const minValueViolation = (field, value) => {\n return ` the ${field} field must be greater than ${value}`;\n };\n\n const validate = (value, field, constraint) => {\n const errors = [];\n\n if (constraint.min !== 'undefined' && value < constraint.min) {\n errors.push(minValueViolation(field, constraint.min));\n }\n if (constraint.max !== 'undefined' && value > constraint.max) {\n errors.push(maxValueViolation(field, constraint.max));\n }\n\n return errors;\n };\n\n let validationRules = {};\n if (layout === layoutType.GRID) {\n validationRules = {\n rowGridCount: {\n min: 1\n },\n columnGridCount: {\n min: 1,\n max: 6\n },\n heroCount: {}\n };\n } else if (layout === layoutType.HERO) {\n validationRules = {\n rowGridCount: {\n min: 0\n },\n columnGridCount: {\n min: 0,\n max: heroPlacement === heroPlacementType.LEFT ? 3 : 6\n },\n heroCount: {\n min: 1,\n max: 3\n }\n };\n }\n\n const sixteenNineImage = (imageSizing === imageSizingType.SIXTEEN_NINE);\n\n const errors = [];\n errors.push(...validate(columnGridCount, 'columnGridCount', validationRules.columnGridCount));\n errors.push(...validate(rowGridCount, 'rowGridCount', validationRules.rowGridCount));\n errors.push(...validate(heroCount, 'heroCount', validationRules.heroCount));\n\n if (errors.length) {\n errors.unshift(`When layout is ${layout}${layout === layoutType.HERO ? ` and heroPlacement is ${heroPlacement}` : ''}`);\n throw new Error(errors);\n }\n\n const offset = Math.max(startArticleIndex, 0);\n const filteredItems = filterItems(items, { type: types, displaysize: displaySizes });\n const itemsToShow = filteredItems.slice(offset, totalNumberOfItems + offset);\n\n if (!itemsToShow.length) {\n return null;\n }\n\n const componentTitle = title || headline;\n const totalItemsOfPage = rowGridCount * columnGridCount;\n const titleClassNames = classNames({ 'CategoryGrid-title': showPagination });\n\n return (\n \n {componentTitle ?\n
\n
: null}\n
\n
\n );\n });\n }\n\n render() {\n const {\n items,\n showPagination,\n heroPlacement,\n heroCount,\n rowGridCount,\n columnGridCount,\n padding,\n totalItemsOfPage\n } = this.props;\n\n const {\n layout,\n page,\n outerWidth\n } = this.state;\n\n const isHeroGrid = (this.props.layout === layoutType.HERO);\n\n const startIndex = page * totalItemsOfPage + (isHeroGrid && page !== 0 ? heroCount : 0);\n const lastIndex = startIndex + totalItemsOfPage + (isHeroGrid && page === 0 ? heroCount : 0);\n\n const pageItems = items.slice(startIndex, lastIndex);\n\n let canNext = true;\n let canBack = true;\n\n let content;\n switch (layout) {\n case layoutType.GRID:\n content = (\n {this._buildGridItems(pageItems, columnGridCount, layoutType.GRID)}
\n );\n\n break;\n case layoutType.HERO:\n const heroItems = pageItems.slice(0, heroCount);\n const gridItems = pageItems.slice(heroCount, pageItems.length);\n switch (heroPlacement) {\n case heroPlacementType.TOP:\n content = [];\n\n content.push(\n {this._buildGridItems(heroItems, heroCount, layoutType.HERO, HERO_ITEM_HEIGHT)}
\n );\n content.push(\n {this._buildGridItems(gridItems, columnGridCount, layoutType.GRID)}
\n );\n\n break;\n case heroPlacementType.LEFT:\n const colProps = {\n xs: 12,\n md: 6\n };\n let height;\n\n if (rowGridCount === 0 || columnGridCount === 0){\n colProps['md'] = 12;\n height = HERO_ITEM_HEIGHT;\n } else {\n height = (rowGridCount * GRID_ITEM_HEIGHT + (rowGridCount - 1) * padding * 2);\n if (heroCount > 1) {\n height = height / heroCount - ((heroCount - 1) * padding * 2) / heroCount;\n }\n }\n\n const heroStyle = {};\n const gridStyle = {};\n\n // Apply for left hero layout at breakpoint md: 992 -> \n if (outerWidth && window.innerWidth > 991) {\n heroStyle.width = (9 * rowGridCount * outerWidth + 14 * padding * columnGridCount * (rowGridCount - heroCount)) / (9 * (heroCount * columnGridCount + rowGridCount));\n gridStyle.width = outerWidth - heroStyle.width;\n }\n\n content = (\n \n this.outerGrid = node}>\n
{this._buildGridItems(heroItems, 1, layoutType.HERO, height)}
\n \n {this._buildGridItems(gridItems, columnGridCount, layoutType.GRID)}
\n \n \n
\n );\n\n break;\n default:\n console.log(`${heroPlacement} not supported.`);\n return null;\n }\n\n break;\n default:\n console.log(`${layout} not supported.`);\n return null;\n }\n\n if (page === 0) {\n canBack = false;\n }\n\n if (items.length <= lastIndex) {\n canNext = false;\n }\n\n return (\n \n {showPagination ?\n
\n
this._onBack()} disabled={canBack ? false : true}>\n \n
this._onNext()} disabled={canNext ? false : true}>\n \n
: null}\n {content}\n
\n { this.props.children }\n \n );\n }\n}\n\nclass Item extends Component {\n static propTypes = {\n item: PropTypes.object.isRequired,\n height: PropTypes.number,\n itemType: PropTypes.string,\n showPill: PropTypes.bool,\n ...ItemsPropTypes\n }\n\n static defaultProps = {\n height: GRID_ITEM_HEIGHT,\n itemType: layoutType.GRID,\n showPill: false\n }\n\n render() {\n const {\n item: {\n type = '',\n headline = '',\n images: {\n abstract: {\n filename: linkImage = ''\n } = {}\n } = {},\n abstractimage: {\n filename: newsImage = '',\n lastEditedDate = ''\n } = {},\n contentClassification: pillLabel = '',\n publishedDate,\n updatedDate,\n options: {\n date: {\n published: {\n showonabstract: showPublished = true\n } = {},\n updated: {\n showonabstract: showUpdated = true\n } = {}\n } = {}\n } = {},\n } = {},\n columnGridCount,\n textColor,\n showTimestamp,\n showUpdatedDate,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n } = {},\n padding,\n height,\n itemType,\n showPill,\n videoIconPlacement,\n sixteenNineImage\n } = this.props;\n\n const wrapperStyles = {\n height: sixteenNineImage ? '100%' : `${height}px`,\n objectFit: 'cover'\n };\n \n const lg = 12 / columnGridCount;\n\n const maxCol = (col) => {\n return Math.max(col, lg);\n };\n\n const isHeroGrid = (itemType === layoutType.HERO);\n\n const colProps = {\n lg: columnGridCount !== 5 ? lg : null,\n md: maxCol(3),\n sm: isHeroGrid ? maxCol(6) : maxCol(4),\n xs: isHeroGrid ? 12 : maxCol(6)\n };\n\n // /* Breakpoints: XS: 0-767, S: 768-991, M: 992-1199, L: 1200-1469, XL: 1470- */\n // // (max-width: 768px) 100vw, (max-width: 992px) 33vw, (max-width: 1200px) 25vw, 20vw (columnGridCount: 5 isHeroGrid: false colProps: {\"lg\":null,\"md\":3,\"sm\":4,\"xs\":6})\n // // colProps is the number of columns that a single thumbnail image should take up. For example, for 3 thubmnails across, each would span 4 columns (out of 12 total).\n // const imageBreakpoints = [\n // { \"maxWidth\": 640, \"widthVW\": 100 }, // set each image to 100% of the viewport\n // { \"maxWidth\": 768, \"widthVW\": Math.round((colProps.xs / 12) * 100) }, // grid is full width. widthVW is % of viewport per img. From example above, 3 / 12 = 25% of viewport for each image\n // { \"maxWidth\": 992, \"widthVW\": Math.round((colProps.sm / 12) * 100 * (690 / 992)) }, // grid scales up to 690 wide, or 70% of a 992 viewport.. At 3/12 exmaple, 70 * 25% = 17.5% of viewport for each image\n // { \"maxWidth\": 1200, \"widthVW\": Math.round((colProps.md / 12) * 100 * (910 / 1200)) }, // grid scales up to 910 wide, same math as above\n // { \"maxWidth\": 1470, \"widthVW\": Math.round(((colProps.lg || (12 / 5)) / 12) * 100 * (1110 / 1470)) }, // grid scales up to 1110 wide. For some reason, when there are 5 images we set colProps.lg to null, so need to add back in 12/5\n // { \"widthPX\": Math.round(((colProps.lg || (12 / 5)) / 12) * 1380) }, // grid is fixed at 1380 wide. same math as above.\n // ];\n\n\n const isVideoAttached = type.toLowerCase() === 'clip';\n\n const imageThumbnailClassName = classNames(\n 'CategoryGrid-thumbnail',\n {\n 'CategoryGrid-element CategoryGrid-coverPhoto': isHeroGrid,\n 'CategoryGrid-gridItem CategoryGrid-item': !isHeroGrid,\n [`VideoThumbnail VideoThumbnail-${videoIconPlacement}`]: isVideoAttached,\n 'SixteenNineImage': sixteenNineImage\n }\n );\n\n let timestamp;\n\n if (showTimestamp) {\n const publishedDateTimestamp = showPublished ? publishedDate : null;\n const updatedDateTimestamp = showUpdated ? updatedDate : null;\n\n const timestampDate = showUpdatedDate ? updatedDateTimestamp : publishedDateTimestamp;\n timestamp = ;\n }\n\n return (\n \n
\n \n {showPill ?
{pillLabel} : null}\n
{headline}
\n {/* Pending Updated and Published timestamps from ticket WEB-566 */}\n {timestamp}\n
;\n\n return (\n \n {title ?
: null}\n {abstract && showAbstract &&
}\n {showTimestamp && showPublishedDate ? timeStamp : null}\n {showTimestamp && showUpdatedDate && Date.parse(publishDate) !== Date.parse(updatedDate) ?\n (
\n Updated: \n \n
) : null}\n
\n
;\n }\n return null;\n }\n return closings[0] !== 'closings' && ;\n }\n}\n\nclass BannerAlert extends Component {\n static propTypes = {\n title: PropTypes.string,\n titleColor: PropTypes.string,\n text: PropTypes.string,\n textColor: PropTypes.string,\n numberColor: PropTypes.string,\n numberBackgroundColor: PropTypes.string,\n cornerStyle: PropTypes.oneOf(['round', 'soft', 'square']),\n backgroundColor: PropTypes.string,\n backgroundStyle: PropTypes.oneOf(['solid', 'outline']),\n outlineColor: PropTypes.string,\n destinationURL: PropTypes.string,\n totalAlerts: PropTypes.number,\n }\n\n static defaultProps = {\n title: 'Closings & Delays',\n text: 'See the latest closings in the area.',\n cornerStyle: 'square',\n backgroundStyle: 'solid'\n }\n\n render() {\n const {\n title,\n titleColor,\n text,\n textColor,\n numberColor,\n numberBackgroundColor,\n cornerStyle,\n backgroundColor,\n backgroundStyle,\n outlineColor: borderColor,\n destinationURL: href,\n totalAlerts\n } = this.props;\n\n const style = { backgroundColor, borderColor };\n\n const className = classNames(\n 'Banner',\n { [`Banner-border--${cornerStyle}`]: cornerStyle },\n [`Banner-style--${backgroundStyle}`]\n );\n\n return (\n \n );\n }\n}\n\nclass FullViewAlert extends Component {\n\n static propTypes = {\n title: PropTypes.string,\n titleColor: PropTypes.string,\n text: PropTypes.string,\n textColor: PropTypes.string,\n statusColor: PropTypes.string,\n closingsData: PropTypes.array,\n abstractText: PropTypes.string,\n backgroundColor: PropTypes.string,\n titleType: PropTypes.string\n }\n\n static defaultProps = {\n title: 'Closings & Delays',\n titleColor: '#000000',\n abstractText: 'The following is a list of the current closings and delays for schools, governments, houses of worship and other organizations.',\n textColor: '#000000',\n statusColor: '#D0021B',\n backgroundColor: '#ffffff',\n titleType: TITLE_TYPE.PAGE_TITLE\n }\n\n state = { categoryClosings: CLOSINGS_TITLE.CLOSINGS_ALL }\n\n _chooseCategory(category) {\n this.setState({\n categoryClosings: category\n });\n }\n\n _renderAlertDataTable(title, statusColor, alertsByGroup) {\n return (\n \n
\n
\n
\n \n {text}\n
\n \n { _.map(listCategory, category => {\n return (\n this._chooseCategory(category)}>\n \n \n );\n })\n }\n
\n \n { _.map(listCategory, category => {\n return category === categoryClosings &&\n this._renderAlertDataTable(category, statusColor, (category === CLOSINGS_TITLE.CLOSINGS_ALL) ? closingsData : alertsByGroup[category]);})\n }\n
\n \n { _.map(listCategory, category => {\n return (category !== CLOSINGS_TITLE.CLOSINGS_ALL) && this._renderAlertDataTable(category, statusColor, alertsByGroup[category]);\n })}\n
\n \n
\n
\n {name} \n {status} \n\n \n {name}
\n {status} \n \n \n );\n });\n }\n\n render() {\n const { title } = this.props;\n const closingsTitle = title.toUpperCase() === CLOSINGS_TITLE.CLOSINGS_ALL ? CLOSINGS_TITLE.CLOSINGS_ALL_TEXT : title;\n\n return (\n \n
{ closingsTitle } \n
\n \n Name \n Status \n \n {this._renderRow()}\n
\n
\n
\n { category.toUpperCase() }\n
\n
\n No closings at this time\n
\n );\n};\n\nexport default ClosingsAlert;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/news/ClosingsAlert.js","import React, { Component, PropTypes } from 'react';\nimport classNames from 'classnames';\nimport ReactCSSTransitionGroup from 'react-addons-css-transition-group';\nimport Swipeable from 'react-swipeable';\nimport _map from 'lodash/map';\nimport _debounce from 'lodash/debounce';\nimport { bylineToString } from 'utils/NewsUtils';\nimport * as AnalyticsUtils from 'utils/AnalyticsUtils';\nimport ComponentTitle from '../shared/ComponentTitle';\nimport Image from 'components/Image';\nimport Timestamp from 'components/Timestamp';\nimport Slideshow from 'components/icons/Slideshow';\nimport Pause from 'components/icons/Pause';\nimport injectTapEventPlugin from \"react-tap-event-plugin\";\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\nconst WIDGETS = 'widgets';\nconst IMAGE_GALLERY = 'ImageGallery';\n\nconst ImagesPropTypes = {\n showPagination: PropTypes.bool,\n showCounter: PropTypes.bool,\n autoChangeInterval: PropTypes.number,\n autoPause: PropTypes.bool,\n showByline: PropTypes.bool,\n showDescription: PropTypes.bool,\n showTimestamp: PropTypes.bool,\n descriptionBackgroundColor: PropTypes.string,\n textColor: PropTypes.string,\n showTitle: PropTypes.bool,\n enableImageAnalytics: PropTypes.bool,\n displayType: PropTypes.oneOf(['cover', 'contain'])\n};\n\nclass ImageSlideshowWrapper extends Component {\n static propTypes = {\n FRN_rawResponses: PropTypes.array.isRequired,\n title: PropTypes.string,\n backgroundColor: PropTypes.string,\n numberOfImagesDisplayed: PropTypes.number,\n titleType: PropTypes.string,\n ...ImagesPropTypes\n }\n\n static defaultProps = {\n showTimestamp: true,\n backgroundColor: '#F3F3F3',\n descriptionBackgroundColor: '#FFFFFF',\n textColor: '#FFFFFF',\n showByline: true,\n showDescription: true,\n numberOfImagesDisplayed: 0,\n showPagination: true,\n showCounter: true,\n autoChangeInterval: 0,\n autoPause: false,\n showTitle: true,\n titleType: TITLE_TYPE.MODULE_TITLE,\n displayType: 'contain'\n }\n\n constructor(props) {\n super(props);\n if (typeof window !== 'undefined') {\n injectTapEventPlugin({\n shouldRejectClick: () => {\n return true;\n }\n });\n }\n }\n\n render() {\n if (!this.props.FRN_rawResponses || this.props.FRN_rawResponses.length === 0 || !this.props.FRN_rawResponses[0].data) {\n return null;\n }\n\n const {\n FRN_rawResponses: [{\n data: {\n id = '',\n contentClassification = '',\n storyimages: storyImages = [],\n features = [],\n headline = '',\n bylines = []\n }\n } = {}] = [],\n title,\n backgroundColor,\n numberOfImagesDisplayed,\n showPagination,\n showCounter,\n autoChangeInterval,\n autoPause,\n showByline,\n showDescription,\n showTimestamp,\n descriptionBackgroundColor,\n textColor,\n showTitle,\n enableImageAnalytics,\n titleType,\n displayType\n } = this.props;\n\n let images;\n\n let metaData;\n\n // The feed contains \"ImageGallery\".\n const widget = features.find(item => item.type === WIDGETS);\n if (widget) {\n const imagesGallery = widget.json.find(item => item.Type === IMAGE_GALLERY);\n if (imagesGallery) {\n images = imagesGallery.images || [];\n\n /** If enableImageAnalytics, set to metadata of slideshow to each item */\n if (enableImageAnalytics) {\n const {\n id: widgetId\n } = widget;\n\n const {\n slideshowHeadline: widgetHeadline,\n adTag\n } = imagesGallery;\n\n metaData = {\n widgetId,\n widgetHeadline,\n adTag\n };\n }\n }\n }\n\n // If the feed doesn't contain \"ImageGallery\", data will be in the \"storyimages\"\n if (!images) {\n images = storyImages.map(item => {\n return {\n 'url': item.filename,\n 'description': item.caption,\n 'lastEditedDate': item.lastEditedDate\n };\n });\n\n /** If enableImageAnalytics, set to metadata of slideshow to each item */\n if (enableImageAnalytics) {\n metaData = {\n widgetId: id,\n widgetHeadline: headline,\n adTag: contentClassification\n };\n }\n }\n\n const componentTitle = title || headline;\n let availableImages = images.slice(0, numberOfImagesDisplayed <= 0 ? images.length : numberOfImagesDisplayed);\n\n if (enableImageAnalytics) {\n availableImages = availableImages.map(item => {\n return { ...item, ...metaData };\n });\n }\n\n return (\n \n {showTitle && componentTitle ?
\n );\n }\n}\n\nclass ImageSlideshow extends Component {\n static propTypes = {\n items: PropTypes.array.isRequired,\n bylines: PropTypes.array,\n ...ImagesPropTypes\n }\n\n state = {\n index: 0,\n type: '',\n paused: false,\n }\n\n componentWillMount() {\n this._onBack = _debounce(this._onBack, 500, { maxWait: 500});\n this._onNext = _debounce(this._onNext, 500, { maxWait: 500});\n }\n\n componentDidMount() {\n const { items, enableImageAnalytics, autoChangeInterval } = this.props;\n\n if (enableImageAnalytics) {\n const firstItemMeta = {\n slideshowData: items[0],\n index: 1,\n numberOfItems: items.length\n };\n\n AnalyticsUtils.triggerSlideshowPageView(firstItemMeta);\n\n if (autoChangeInterval) {\n AnalyticsUtils.triggerSlideshowStart(firstItemMeta);\n }\n }\n\n this._startAutoChangeInterval();\n }\n\n componentWillUnmount() {\n this._clearAutoChangeInterval();\n }\n\n _startAutoChangeInterval() {\n const { autoChangeInterval } = this.props;\n if (autoChangeInterval > 0 && !this.state.paused) {\n this.imageSlideshowInterval = setInterval(() => this._onNext(), autoChangeInterval * 1000);\n }\n }\n\n _clearAutoChangeInterval() {\n const { autoChangeInterval } = this.props;\n if (autoChangeInterval > 0) {\n clearInterval(this.imageSlideshowInterval);\n }\n }\n\n _onNext(e) {\n this._clearAutoChangeInterval();\n\n const { items, enableImageAnalytics } = this.props;\n let { index } = this.state;\n\n index = (index === this.props.items.length - 1 ? 0 : index + 1);\n\n this.setState({\n index,\n type: 'slideNext'\n });\n\n if (enableImageAnalytics) {\n const slideshowEventMeta = {\n slideshowData: items[index],\n index: index + 1,\n numberOfItems: items.length\n };\n\n AnalyticsUtils.triggerSlideshowPageView(slideshowEventMeta);\n\n if (e) {\n AnalyticsUtils.triggerSlideshowSlideNext(slideshowEventMeta);\n }\n }\n\n this._startAutoChangeInterval();\n }\n\n _onBack(e) {\n this._clearAutoChangeInterval();\n\n const { items, enableImageAnalytics } = this.props;\n let { index } = this.state;\n\n index = (index === 0 ? this.props.items.length - 1 : index - 1);\n\n this.setState({\n index,\n type: 'slideBack'\n });\n\n if (enableImageAnalytics) {\n const slideshowEventMeta = {\n slideshowData: items[index],\n index: index + 1,\n numberOfItems: items.length\n };\n\n AnalyticsUtils.triggerSlideshowPageView(slideshowEventMeta);\n\n if (e) {\n AnalyticsUtils.triggerSlideshowSlideBack(slideshowEventMeta);\n }\n }\n\n this._startAutoChangeInterval();\n }\n\n _handleSwipe(e, x) {\n if (x > 0) {\n this._onNext(e);\n } else {\n this._onBack(e);\n }\n }\n\n _handleTouchTap() {\n return this.state.paused ? this._unpause() : this._pause();\n }\n\n _pause() {\n const {\n autoChangeInterval,\n autoPause,\n enableImageAnalytics,\n items\n } = this.props;\n\n const { index } = this.state;\n\n if (autoChangeInterval && autoPause){\n this._clearAutoChangeInterval();\n this.setState({ paused: true });\n\n if (enableImageAnalytics) {\n AnalyticsUtils.triggerSlideshowPause({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n }\n }\n\n _unpause() {\n const {\n autoChangeInterval,\n autoPause,\n enableImageAnalytics,\n items\n } = this.props;\n\n const { index } = this.state;\n\n if (autoChangeInterval && autoPause) {\n this.setState({ paused: false });\n setTimeout(() => !this.state.paused ? this._onNext() : null, 1500);\n\n if (enableImageAnalytics) {\n AnalyticsUtils.triggerSlideshowStart({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n }\n }\n\n render() {\n const {\n items,\n bylines,\n showPagination,\n showCounter,\n showDescription,\n showByline,\n showTimestamp,\n descriptionBackgroundColor,\n textColor,\n displayType\n } = this.props;\n\n const { index, type, paused } = this.state;\n\n const {\n publishingDate,\n url: imageUrl,\n description = '',\n lastEditedDate = ''\n } = items[index];\n\n const authors = _map(bylines, bylineToString);\n\n const timestamp = {\n publishDate: showTimestamp ? publishingDate : null,\n authors: showByline ? authors : null\n };\n\n const isCoverType = displayType === 'cover';\n const wrapperClassName = classNames('image-wrapper', {'image-cover': isCoverType});\n\n return (\n \n
this._pause()}\n onMouseLeave={() => this._unpause()}>\n
this._handleTouchTap()}>\n \n
this._handleSwipe(e, x)}>\n \n \n
\n \n
\n
this._onBack(e)}>\n \n
\n
this._onNext(e)}>\n \n
\n
\n
{index + 1}/{items.length}
\n
\n
\n {showTimestamp ?
: null}\n {showDescription ?\n
: null\n }\n
\n
\n 1 ? 'NewsBanner-text--withToggleBtn' : null)}>\n
\n {index === 0 ?\n \n {title}\n : null }\n {headline}\n
\n {showTimestamp ?\n
\n \n
: null}\n
\n \n
: null}\n\n \n );\n });\n\n const firstNewsItemRow = newsItemRows[0];\n\n if (isExpanded) {\n additionalNewsItemRows = (\n \n {newsItemRows.slice(1, newsItemRows.length)}\n
\n );\n }\n\n const toggleBtnColor = {\n color: backgroundColor\n };\n\n return (\n \n { isDismissable &&
this._dismissAlert()}>
}\n {totalItemsToDisplay > 1 ?\n
: null}\n
\n {firstNewsItemRow}\n {additionalNewsItemRows}\n
\n
\n \n
\n );\n\n const descriptionContent = description ? /g, 'span>') }} /> : null;\n\n const _buildComponent = (components, className) => {\n return components.map((component, index) => {\n return
;\n });\n };\n\n const railComponentContent = _buildComponent(railComponents, 'Rail-railComponent');\n const adComponentContent = _buildComponent(ads, 'Rail-adComponent');\n\n const railContent = (\n \n
\n { componentTitle ?
\n
{ adComponentContent }
\n
\n
\n {content}\n
\n {overflowBackgroundRail &&\n
}\n
\n {showTitle && componentTitle ?
\n );\n }\n}\n\nclass Slideshow extends Component {\n static propTypes = {\n items: PropTypes.array.isRequired,\n ...SlideshowPropTypes\n }\n\n state = {\n index: 0,\n transitionName: '',\n isGridView: false,\n isFullScreen: false,\n activeAdIndex: 0,\n adStatusCounter: 0,\n showAd: false,\n paused: false\n }\n\n componentWillMount() {\n this._onBack = _.debounce(this._onBack, 500, { maxWait: 500, leading: true });\n this._onNext = _.debounce(this._onNext, 500, { maxWait: 500, leading: true });\n }\n\n componentDidMount() {\n const { items, enableImageAnalytics, autoChangeInterval } = this.props;\n\n if (enableImageAnalytics) {\n const firstItemMeta = {\n slideshowData: items[0],\n index: 1,\n numberOfItems: items.length\n };\n\n AnalyticsUtils.triggerSlideshowPageView(firstItemMeta);\n\n if (autoChangeInterval) {\n AnalyticsUtils.triggerSlideshowStart(firstItemMeta);\n }\n }\n\n this._startAutoChangeInterval();\n\n window.addEventListener('keydown', (event) => this._onEscapeKeyPress(event));\n }\n\n componentWillUnmount() {\n this._clearAutoChangeInterval();\n\n window.removeEventListener('keydown', (event) => this._onEscapeKeyPress(event));\n }\n\n _onEscapeKeyPress(event) {\n const { keyCode } = event;\n\n if (keyCode === 27) {\n this.setState({ isFullScreen: false });\n }\n }\n\n _startAutoChangeInterval() {\n const { autoChangeInterval } = this.props;\n if (autoChangeInterval > 0 && !this.state.paused) {\n this.imageSlideshowInterval = setInterval(() => this._onNext(), autoChangeInterval * 1000);\n }\n }\n\n _clearAutoChangeInterval() {\n const { autoChangeInterval } = this.props;\n if (autoChangeInterval > 0) {\n clearInterval(this.imageSlideshowInterval);\n }\n }\n\n _onSwipe(e, x) {\n if (x > 0) {\n this._onNext(e);\n } else {\n this._onBack(e);\n }\n }\n\n _onNext(e) {\n const {\n enableImageAnalytics,\n items\n } = this.props;\n\n let { index } = this.state;\n\n index = index === items.length - 1 ? 0 : index + 1;\n\n this._slide(index, TRANSITION_NEXT_CLASSNAME);\n\n if (enableImageAnalytics && e) {\n AnalyticsUtils.triggerSlideshowSlideNext({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n }\n\n _onBack(e) {\n const {\n enableImageAnalytics,\n items\n } = this.props;\n\n let { index } = this.state;\n\n index = index === 0 ? items.length - 1 : index - 1;\n\n this._slide(index, TRANSITION_BACK_CLASSNAME);\n\n if (enableImageAnalytics && e) {\n AnalyticsUtils.triggerSlideshowSlideBack({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n }\n\n _onSelect(index) {\n const { index: currentIndex } = this.state;\n const transitionName = index > currentIndex ? TRANSITION_NEXT_CLASSNAME : TRANSITION_BACK_CLASSNAME;\n\n this._slide(index, transitionName);\n }\n\n _slide(index, transitionName) {\n const {\n enableImageAnalytics,\n items\n } = this.props;\n\n if (enableImageAnalytics) {\n AnalyticsUtils.triggerSlideshowPageView({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n\n this._clearAutoChangeInterval();\n\n const { adPlacementPattern, ads } = this.props;\n let { activeAdIndex, adStatusCounter, showAd } = this.state;\n\n if (adStatusCounter === adPlacementPattern) {\n adStatusCounter = 0;\n activeAdIndex = activeAdIndex === ads.length - 1 ? 0 : activeAdIndex + 1;\n showAd = true;\n } else {\n adStatusCounter++;\n showAd = false;\n }\n\n this.setState({\n index,\n activeAdIndex,\n adStatusCounter,\n showAd,\n transitionName\n });\n\n this._startAutoChangeInterval();\n }\n\n _onSelectInGridView(index) {\n this._onSelect(index);\n this._toggleGridView();\n }\n\n _onTouchTap() {\n return this.state.paused ? this._unpause() : this._pause();\n }\n\n _pause() {\n const {\n autoChangeInterval,\n autoPause,\n enableImageAnalytics,\n items\n } = this.props;\n\n const { index } = this.state;\n\n if (autoChangeInterval && autoPause){\n this._clearAutoChangeInterval();\n this.setState({ paused: true });\n\n if (enableImageAnalytics) {\n AnalyticsUtils.triggerSlideshowPause({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n }\n }\n\n _unpause() {\n const {\n autoChangeInterval,\n autoPause,\n enableImageAnalytics,\n items\n } = this.props;\n\n const { index } = this.state;\n\n if (autoChangeInterval && autoPause) {\n this.setState({ paused: false });\n setTimeout(() => !this.state.paused ? this._onNext() : null, 1500);\n\n if (enableImageAnalytics) {\n AnalyticsUtils.triggerSlideshowStart({slideshowData: items[index], index: index + 1, numberOfItems: items.length });\n }\n }\n }\n\n _closeAd() {\n this.setState({\n showAd: false\n });\n }\n\n _toggleGridView() {\n let isGridView = !this.state.isGridView;\n\n if (isGridView) {\n this._clearAutoChangeInterval();\n }\n\n this.setState({\n isGridView\n });\n }\n\n _showFullScreen() {\n const { isFullScreen } = this.state;\n\n this.setState({\n isFullScreen: !isFullScreen\n });\n }\n\n render() {\n const {\n items,\n ads,\n showAds,\n backgroundColor,\n maintainImageAspectRatio,\n imageAspectRatioBackgroundColor,\n showScrollBarOnGridview,\n autoChangeInterval,\n showCaption,\n captionBackgroundColor,\n captionTextColor,\n showDrawer,\n showPagination,\n showSettingsPill,\n settingsPillProperties: {\n // TODO: Implement later\n // share = true,\n fullScreen = true,\n gridView = true,\n imageCounter = true\n },\n videoIconPlacement,\n showTimestamp,\n showUpdatedDate,\n showBylines,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n },\n showDescription,\n selectedHighlightColor,\n enableImageAnalytics\n } = this.props;\n\n const {\n isGridView,\n isFullScreen,\n transitionName,\n paused,\n index,\n activeAdIndex,\n showAd\n } = this.state;\n\n const {\n id,\n publishingDate,\n updatedDate,\n url: currentImageUrl,\n lastEditedDate = '',\n description: currentDescription = '',\n headline: currentHeadline = '',\n bylines,\n link,\n type,\n slug\n } = items[index];\n\n const counterContent = (\n {index + 1} / {items.length} \n );\n\n const largeThumbnailStyles = {};\n\n largeThumbnailStyles['backgroundColor'] = imageAspectRatioBackgroundColor;\n\n if (maintainImageAspectRatio) {\n largeThumbnailStyles['backgroundSize'] = 'contain';\n } else {\n largeThumbnailStyles['backgroundSize'] = 'cover';\n }\n\n const largeThumbnailClassNames = classNames(\n 'Slideshow-thumbnail',\n { [`VideoThumbnail VideoThumbnail-${videoIconPlacement}`]: type === CLIP }\n );\n\n const adContent = [];\n\n if (showAds) {\n ads.forEach((ad, i) => {\n adContent.push(\n \n
\n
this._closeAd()}>
\n
\n
\n
this._onSelectInGridView(i)} /> : null;\n\n let timestamp;\n\n if (showTimestamp || showBylines) {\n const timestampDate = showUpdatedDate ? updatedDate : publishingDate;\n timestamp = \n {\n showScrollBarOnGridview ?
\n { gridViewContent }\n
: gridViewContent\n }\n
\n
this._onTouchTap()} onMouseEnter={() => this._pause()} onMouseLeave={() => this._unpause()}>\n
\n this._onSwipe(e, x)}>\n \n
\n \n \n {\n (showSettingsPill && (fullScreen || gridView || imageCounter)) && \n {/* TODO: Implement later\n
\n */}\n { fullScreen &&
this._showFullScreen()}>
}\n { gridView &&
this._toggleGridView()}>
}\n { imageCounter &&
{counterContent}
}\n
this._onBack(e)}>\n \n
\n }\n {\n showPagination && this._onNext(e)}>\n \n
\n }\n {autoChangeInterval > 0 && }\n {\n showCaption && \n
\n {unescape(currentHeadline)}\n
\n {\n showDescription &&
\n }\n {timestamp}\n
\n {\n showDrawer &&
this._onSelect(i)}\n enableImageAnalytics={enableImageAnalytics}\n />\n }\n \n
this.drawerItem = div} onClick={() => select(i)}>\n
\n
this.drawer = div}>\n {canBack ?
this._onBack()}>
: null}\n
this._onSwipe(e, x)}>\n \n {drawerContent}\n
\n \n {canNext ?
this._onNext()}>
: null}\n
this.gridViewItem = div : null} onClick={() => select(startIndex + i)} style={gridViewContentStyles}>\n
\n
\n {\n !showScrollBarOnGridview &&
\n
this._onBack()}>\n \n \n
this._onNext()}>\n \n \n
\n }\n
this.gridViewContainer = div}>\n {\n !showScrollBarOnGridview ? this._onSwipe(e, x)}>\n {gridViewContent}\n : gridViewContent\n }\n
\n
\n {title ?
: null}\n this.headerDomObject = div}\n style={headerStyles}>\n
\n \n {title ?
: null}\n this.headerDomObject = div}\n style={headerStyles}>\n
this.tabContainer = div}\n style={{...shiftLeftStyles}}>\n {\n _.map(tabs, (tab, index) => {\n const tabBackgroundColor = {\n backgroundColor: (index === activeTabIndex) || (index === hoverTabIndex) ? activeTabBackgroundColor : null\n };\n\n const tabbedLineStyles = {\n borderRight: tabbedLineColor && index < tabs.length - 1 ? `1px solid ${tabbedLineColor}` : null\n };\n\n return (\n
this._handleTabChange(index)}\n ref={(currentTab) => this.tabDomObjects[index] = currentTab}\n onMouseEnter={() => this._toggleHover(index)}\n onMouseLeave={() => this._toggleHover(-1)}>\n {tabs[index].title}\n );\n })\n }\n \n {\n this.showPager ?
this.paginationDomObject = div}\n style={{backgroundColor: activeTabBackgroundColor}}>\n
this._onBack()}>\n \n \n
this._onNext()}>\n \n \n
: null\n }\n
\n {ComponentClass && \n this._onChangeFilter(key, event)}>\n {\n !selectedValue && {label} \n }\n {\n displayFilterOptions.map((option, j) => {\n const { text = '', value = ''} = option;\n return {text} ;\n })\n }\n \n \n );\n })\n );\n\n filterContent.push(\n this._clearFilter()}>Clear \n \n );\n }\n\n return (\n \n
Search Results \n
Showing {showing} of {totalNumberOfResults} results for {keyword}
\n
\n this._onSearchButtonClick()}>\n Search\n \n this._toggleFilter()}>\n Advanced\n \n \n {filterContent}\n
\n
\n {remaining > 0 ?\n
\n this._loadMore()}>\n Load {Math.min(remaining, numberOfResultsPerPage)} more results\n \n
\n : null\n }\n
\n {\n codeBlockList.map((item, i) => {\n const {\n bodyCodeBlock,\n headline,\n id\n } = item;\n \n return (\n
\n );\n }\n}\n\nclass InlineCode extends Component {\n static propTypes = {\n codeBlock: PropTypes.string,\n title: PropTypes.string,\n showTitle: PropTypes.bool,\n showBorder: PropTypes.bool,\n borderColor: PropTypes.string,\n content: PropTypes.string,\n titleType: PropTypes.string,\n headline: PropTypes.string,\n domContainerId: PropTypes.string\n }\n\n componentDidMount() {\n const {\n codeBlock,\n content,\n domContainerId\n } = this.props;\n\n if (loadedScriptCodeBlockId.indexOf(domContainerId) < 0) {\n const $ = window['$'];\n\n // remove html from ssr\n $(`#${domContainerId}`).empty();\n\n const postscribe = require('postscribe');\n // use postscribe to allow the script execute document.write when loading page asynchronously \n postscribe(`#${domContainerId}`, codeBlock);\n \n /**\n ** Because the script tags aren't working when using dangerouslySetInnerHTML.\n * So for shortest way, we use jquery to append the code to the container\n * Script tags in `content` need to be unescaped to append in\n */\n $(`#${domContainerId}`).append(unescapeScript(content));\n\n loadedScriptCodeBlockId.push(domContainerId);\n }\n }\n\n componentWillUnmount() {\n const {\n domContainerId\n } = this.props;\n\n if (document) {\n const currentNode = document.getElementById(domContainerId);\n\n if (currentNode) {\n while (currentNode.hasChildNodes()) {\n currentNode.removeChild(currentNode.lastChild);\n }\n }\n }\n }\n\n render() { \n const {\n title,\n showTitle,\n showBorder,\n borderColor,\n titleType,\n headline,\n domContainerId,\n codeBlock\n } = this.props;\n\n const containerStyle = {};\n\n if (showBorder && borderColor) {\n containerStyle.border = `1px solid ${borderColor}`;\n }\n\n return (\n \n {\n showTitle &&
\n }\n
\n
\n \n ) : (\n \n {imageHref}\n
\n );\n\n components.push(componentImage);\n\n if (alignmentOptions[titleAlignment] && title) {\n const componentTitle = (\n \n \n
\n );\n\n if (titleAlignment === alignmentOptions.top || titleAlignment === alignmentOptions.left) {\n components.unshift(componentTitle);\n } else {\n components.push(componentTitle);\n }\n }\n\n return (\n \n {components}\n
\n );\n }\n}\n\nexport default ImageLink;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/shared/ImageLink.js","import React, { Component, PropTypes } from 'react';\nimport ComponentTitle from './ComponentTitle';\nimport classNames from 'classnames';\nimport { checkIOSDevice } from '../../utils/DOMUtils';\nimport { setMetaTags } from 'lib/frankly';\nimport Timestamp from 'components/Timestamp';\nimport { BREAKPOINTS } from '../../constants/FRNBaseStyles';\nimport { getCurrentWindowBreakpointSize } from '../../utils/WindowUtils';\n\nconst ADDTHIS_POSITION = {\n BELOW_BODY: 'below-body',\n ABOVE_BODY: 'above-body'\n};\n\nclass Link extends Component {\n static propTypes = {\n showTitle: PropTypes.bool,\n showTimestamp: PropTypes.bool,\n showAbstract: PropTypes.bool,\n addMetaTags: PropTypes.bool,\n iframeHeight: PropTypes.object,\n FRN_rawResponses: PropTypes.array,\n addThisOptions: PropTypes.shape({\n className: PropTypes.string,\n position: PropTypes.oneOf([ADDTHIS_POSITION.BELOW_BODY, ADDTHIS_POSITION.ABOVE_BODY])\n }),\n }\n\n static defaultProps = {\n showTitle: true,\n showTimestamp: false,\n showAbstract: false,\n addMetaTags: true,\n iframeHeight: {\n xs: {\n height: 1000\n },\n sm: {\n height: 1000\n },\n md: {\n height: 1000\n },\n lg: {\n height: 1000\n },\n xl: {\n height: 1000\n }\n }\n }\n\n state = {\n width: null,\n hieght: null\n }\n\n componentDidMount() {\n this._updateIFrameDimensions();\n\n window.addEventListener('resize', () => this._updateIFrameDimensions());\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', () => this._updateIFrameDimensions());\n }\n\n _updateIFrameDimensions() {\n const { iframeHeight } = this.props;\n const currentWindowBreakpointSize = getCurrentWindowBreakpointSize();\n let height;\n let width;\n\n if (iframeHeight[currentWindowBreakpointSize]) {\n width = iframeHeight[currentWindowBreakpointSize].width;\n height = iframeHeight[currentWindowBreakpointSize].height;\n }\n\n this.setState({\n width,\n height\n });\n }\n\n render() {\n const {\n showTitle,\n showTimestamp,\n showAbstract,\n addMetaTags,\n FRN_rawResponses: [\n {\n data: {\n url = '',\n link = '',\n datetime: {\n created = ''\n } = {},\n seo: {\n robot = '',\n keywords = '',\n description = ''\n } = {},\n images: {\n graphic: {\n filename: imageIFrame\n } = {}\n } = {},\n iframe: {\n bordercolor = '',\n showborder = false,\n showscrollbar = false,\n height: heightFromFeed = ''\n } = {},\n abridged: {\n headline = '',\n abstract = '',\n abstractimage: {\n filename: heroImageFilename = ''\n } = {}\n } = {}\n } = {}\n } = {}\n ] = [],\n addThisOptions: {\n className: addThisClassName = '',\n position = ADDTHIS_POSITION.ABOVE_BODY\n } = {},\n } = this.props;\n\n if (addMetaTags) {\n setMetaTags(this, [{\n name: 'description',\n content: description\n }, {\n name: 'keywords',\n content: keywords\n }, {\n name: 'robots',\n content: robot\n }, {\n rel: 'canonical',\n href: link,\n isLink: true\n }, {\n property: 'og:title',\n content: headline\n }, {\n property: 'og:type',\n content: 'article'\n }, {\n property: 'og:url',\n content: link\n }, {\n property: 'og:image',\n content: heroImageFilename\n }, {\n property: 'og:description',\n content: description\n }, {\n name: 'twitter:card',\n content: 'summary_large_image'\n }, {\n name: 'twitter:description',\n content: description\n }, {\n name: 'twitter:title',\n content: headline\n }, {\n name: 'twitter:image',\n content: heroImageFilename\n }]);\n }\n\n const { width, height } = this.state;\n // heightFromFeed just is used for MD - LG - XL breakpoints\n const hasIFrameHeight = heightFromFeed && (window.innerWidth >= BREAKPOINTS[2][\"minWidth\"]);\n const iframeStyles = {\n width: width ? `${width}px` : null,\n height: hasIFrameHeight ? `${heightFromFeed}px` : `${height}px`\n };\n\n /**\n * Because the iframe isn't responsive in ios browsers\n * issue https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari#answer-23083463\n */\n const isIOSDevice = checkIOSDevice();\n const border = showborder && '1px solid ' + bordercolor;\n const addThisContent =
;\n const hasAboveAddThis = position === ADDTHIS_POSITION.ABOVE_BODY;\n const iframeClassName = classNames('embed-responsive-item', 'Link-item', { 'Link-item--iOS': isIOSDevice });\n let scrolling = showscrollbar ? 'yes' : 'no';\n\n if (isIOSDevice && scrolling === 'yes') {\n iframeStyles['overflow'] = 'auto';\n iframeStyles['-webkit-overflow-scrolling'] = 'touch'; \n\n scrolling = 'no';\n }\n\n return (\n \n { hasAboveAddThis && addThisContent }\n
\n { showTitle &&
}\n { showAbstract &&
}\n
\n { showTimestamp &&
}\n
\n \n
\n { !hasAboveAddThis && addThisContent }\n
{text} :\n {text}
;\n\n return (\n \n { isDismissable &&
this._dismissAlert()}>
}\n {pageAlertBanner}\n
\n {link.imageUri && {label} }\n
);\n }\n }\n\n customComponentStyles['backgroundColor'] = backgroundColor;\n if (textColor) {\n customComponentStyles['color'] = textColor;\n }\n const isPageTitle = this._checkPageTitle(titleType);\n\n const feedMode = mode === TITLE_MODE.feed;\n const primaryTitle = feedMode ? _.get(FRN_rawResponses[0], `data.${mainDataPath}`, '') : mainTitle;\n const secondaryTitle = feedMode ? '' : subTitle;\n\n if (!primaryTitle && !secondaryTitle) {\n return null;\n }\n\n const genTitle = () => (\n \n );\n return (\n \n { isPageTitle \n ?
{genTitle()} \n : {genTitle()} \n }\n { pageTitleSponsor }\n \n \n );\n }\n\n}\n\nexport default PageTitle;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/shared/PageTitle.js","import React, { Component, PropTypes } from 'react';\nimport { Row } from 'react-bootstrap';\nimport Col from 'components/core/Col';\nimport ComponentTitle from './ComponentTitle';\nimport Image from 'components/Image';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\n/**\n * Class representing the clickable images(Toolbox) which can be integrated to any pages defined in the config.\n */\nclass Toolbox extends Component {\n\n static propTypes = {\n title: PropTypes.string,\n titleColor: PropTypes.string,\n textColor: PropTypes.string,\n showImageTitle: PropTypes.bool,\n imageTitleAlignment: PropTypes.string,\n backgroundColor: PropTypes.string,\n titleBackgroundColor: PropTypes.string,\n padding: PropTypes.number,\n spans: PropTypes.object,\n images: PropTypes.array.isRequired,\n titleType: PropTypes.string\n }\n\n static defaultProps = {\n title: 'Toolbox',\n padding: 16,\n spans: {\n 'xs': 6\n },\n titleType: TITLE_TYPE.MODULE_TITLE\n }\n\n render() {\n const {\n title,\n titleColor,\n textColor,\n showImageTitle,\n imageTitleAlignment,\n backgroundColor,\n titleBackgroundColor,\n padding,\n spans,\n images = [],\n titleType\n } = this.props;\n\n if (!images.length) {\n return null;\n }\n\n const inlineDisplay = imageTitleAlignment === 'left' || imageTitleAlignment === 'right';\n const titleFirst = imageTitleAlignment === 'left' || imageTitleAlignment === 'top';\n\n return (\n \n
\n {title ?
\n
\n {images.map((image, i) =>
\n
\n {destinationUri ? {title} : title}\n \n );\n }\n\n let imageWidth;\n if (imageTitleAlignment === 'top' || imageTitleAlignment === 'bottom') {\n imageWidth = '140';\n } else {\n imageWidth = '100';\n }\n\n const imageThumbnail = (\n \n );\n\n if (titleFirst) {\n content.push(imageThumbnail);\n } else {\n content.unshift(imageThumbnail);\n }\n\n return (\n \n \n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/social/DisqusComments.js","import React, { Component, PropTypes } from 'react';\nimport FacebookProvider, { Comments } from 'react-facebook';\n\nexport default class FacebookComments extends Component {\n static propTypes = {\n version: PropTypes.string,\n appId: PropTypes.string.isRequired,\n href: PropTypes.string,\n numPosts: PropTypes.number,\n orderBy: PropTypes.string,\n colorScheme: PropTypes.string,\n width: PropTypes.string\n }\n\n // NOTE: colorScheme and orderBy defaults inside 'react-facebook' turns into all\n // caps, which causes issues. Not 100% sure, but may have to do with our specific\n // build setup. This is a workaround, which works at least for now.\n static defaultProps = {\n version: 'v2.5',\n numPosts: 5,\n colorScheme: 'light',\n width: '100%',\n orderBy: 'social'\n }\n\n render() {\n const {\n version,\n appId: appID,\n href,\n colorScheme,\n width,\n numPosts,\n orderBy\n } = this.props;\n\n const appConfig = {\n version,\n appID\n };\n\n const commentsProps = {\n colorScheme,\n width,\n numPosts,\n orderBy\n };\n\n if (href) {\n commentsProps.href = href;\n } else {\n // WEB-4491 for HTTPS, use the hostname + pathname only: https://stackoverflow.com/questions/43620722/can-we-get-the-fb-comments-made-for-the-http-site-now-that-weve-moved-to-https\n commentsProps.href = window.location.hostname + window.location.pathname; // for now this only runs client-side.\n }\n\n return (\n
\n \n \n
\n );\n }\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/social/FacebookComments.js","import React, { Component, PropTypes } from 'react';\nimport ComponentTitle from '../shared/ComponentTitle';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\nclass TwitterFeed extends Component {\n static propTypes = {\n title: PropTypes.string,\n screenName: PropTypes.string,\n widgetId: PropTypes.string,\n titleType: PropTypes.string\n };\n\n static defaultProps = {\n title: '',\n screenName: '',\n widgetId: '',\n titleType: TITLE_TYPE.MODULE_TITLE\n }\n\n componentDidMount() {\n /* eslint-disable */\n\n window.twttr = (function (d, s, id) {\n var js, fjs = d.getElementsByTagName(s)[0],\n t = window.twttr || {};\n if (d.getElementById(id)) return t;\n js = d.createElement(s);\n js.id = id;\n js.src = \"https://platform.twitter.com/widgets.js\";\n fjs.parentNode.insertBefore(js, fjs);\n\n t._e = [];\n t.ready = function (f) {\n t._e.push(f);\n };\n\n return t;\n } (document, \"script\", \"twitter-wjs\"));\n\n /* eslint-enable */\n }\n\n render() {\n const { title, screenName, widgetId, titleType } = this.props;\n\n return (\n
\n );\n }\n}\n\nexport default TwitterFeed;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/social/TwitterFeed.js","import React, { Component, PropTypes } from 'react';\n\nlet didTraqliScriptLoad = false;\n\nclass Traqli extends Component {\n\tstatic propTypes = {\n traqliClientId: PropTypes.number.isRequired\n }\n\n\tcomponentDidMount() {\n\t\tconst { traqliClientId } = this.props;\n\n\t\tif (!didTraqliScriptLoad) {\n\t\t\tconst e = document.createElement(\"script\");\n\t\t\te.setAttribute(\"id\", \"tqflexsdksel\");\n\t\t\te.setAttribute(\"fusionId\", traqliClientId);\n\t\t\te.type = \"text/javascript\";\n\t\t\te.src = \"https://api.traq.li/public/sdk/v03/sdk.js\";\n\t\t\te.async = true;\n\t\t\tdocument.getElementById(\"traqli\").appendChild(e);\n\t\t\tdidTraqliScriptLoad = true;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n
\n\t\t);\n\t}\n}\n\nexport default Traqli;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/thirdParty/Traqli.js","import React, { Component, PropTypes } from 'react';\nimport { DataStoreDispatcher } from '../../lib/frankly';\n\nlet didVuukleScriptLoad = false;\n\nclass Vuukle extends Component {\n static propTypes = {\n apiKey: PropTypes.string.isRequired,\n color: PropTypes.string,\n languageCode: PropTypes.string\n };\n\n static contextTypes = {\n config: PropTypes.object.isRequired,\n flux: PropTypes.object.isRequired\n }\n\n static defaultProps = {\n color: '#44c8e4',\n languageCode: 'en'\n }\n\n componentDidMount() {\n const {\n color,\n apiKey,\n languageCode\n } = this.props;\n\n const {\n flux,\n config: {\n integrations: {\n frankly: {\n franklyGoogleAnalyticsIdForAffiliate: GACode = ''\n } = {}\n } = {}\n } = {}\n } = this.context;\n\n const metas = flux.getStore('Helmet').getState().metas;\n\n if (!didVuukleScriptLoad && window && document) {\n const vuukleScript = document.createElement('script');\n vuukleScript.type = 'text/javascript';\n vuukleScript.src = 'https://vuukle.com/js/vuukle.js';\n document.body.appendChild(vuukleScript);\n didVuukleScriptLoad = true;\n window.addEventListener('load', () => {\n this.loadVuukle(color, apiKey, languageCode, metas, GACode);\n });\n }\n }\n\n loadVuukle(color, apiKey, languageCode, metas, GACode) {\n const createVuuklePlatform = window['create_vuukle_platform'];\n const metasObj = {};\n\n const franklyDataLayer = window['franklyDataLayer'] || [{}];\n const [{ feature_id: featureId, author: featureAuthor }] = franklyDataLayer;\n\n if (createVuuklePlatform !== 'undefined') {\n metas.forEach(meta => {\n const {\n name: metaName = '',\n property = '',\n content = ''\n } = meta;\n const name = metaName || property;\n\n if (['og:title', 'keywords'].indexOf(name) !== -1) {\n metasObj[name] = content;\n }\n });\n\n const {\n 'og:title': title = '',\n keywords = ''\n } = metasObj;\n\n const articleDataStoreDispatcher = new DataStoreDispatcher('franklyinc.com/article');\n const articleId = articleDataStoreDispatcher.get('articleId') || featureId || '';\n const authorsString = articleDataStoreDispatcher.get('authors') || featureAuthor || '';\n const authors = authorsString.split(/,|&/);\n const vuukleAuthors = [];\n\n authors.forEach(author => {\n vuukleAuthors.push({name: author.trim()});\n });\n const encodedAuthor = btoa(encodeURI(JSON.stringify(vuukleAuthors)));\n\n createVuuklePlatform(\n apiKey,\n articleId,\n '0',\n keywords,\n title,\n languageCode,\n '1',\n '',\n GACode,\n color.substring(1),\n encodedAuthor\n );\n }\n }\n\n render() {\n return (\n
\n );\n }\n}\n\nexport default Vuukle;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/thirdParty/Vuukle.js","import _ from 'lodash';\nimport React, { Component, PropTypes } from 'react';\nimport { Modal } from 'react-bootstrap';\nimport { getWeatherCategoryFromCondition } from '../../utils/WeatherUtils';\nimport { formatWsiDate, formatDate } from '../../utils/DateUtils';\nimport Timestamp from '../Timestamp';\nimport ComponentTitle from '../shared/ComponentTitle';\nimport WeatherAlertIcon from './WeatherAlertIcon';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\n/**\n *\n * Class representing the container for the multiday and hourly weather forecast components.\n *\n */\nclass WeatherAlerts extends Component {\n\n static propTypes = {\n FRN_rawResponses: PropTypes.array,\n title: PropTypes.string,\n alertsPageUri: PropTypes.string,\n allowedAlerts: PropTypes.array,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n })\n }\n\n static contextTypes = {\n flux: PropTypes.object.isRequired,\n location: PropTypes.object.isRequired,\n config: PropTypes.object.isRequired\n }\n\n static defaultProps = {\n title: \"Weather Advisory In Effect\",\n alertsPageUri: '',\n allowedAlerts: []\n }\n\n state = {\n showModal: false,\n expandedAlertIndex: -1,\n showAllAlerts: false\n }\n\n _setModalVisible(alertIndex = -1){\n this.setState({\n showModal: true,\n expandedAlertIndex: alertIndex\n });\n }\n\n // Hide the modal and unassign any expanded alert\n _setModalHidden(){\n this.setState({\n showModal: false,\n expandedAlertIndex: -1\n });\n }\n\n _toggleAlertListItems(){\n this.setState({\n showAllAlerts: !this.state.showAllAlerts\n });\n }\n\n // Assign the alert which will display its full text in the modal\n _setExpandedIndex(alertIndex = -1){\n const { expandedAlertIndex } = this.state;\n const newExpandedIndex = alertIndex !== expandedAlertIndex ? alertIndex : -1;\n\n this.setState({\n expandedAlertIndex: newExpandedIndex\n });\n }\n\n // When a user clicks on an alert show them either the station's default page, or display\n // a modal with the full alert in it.\n _showFullAlerts(alertIndex = -1, event){\n const { config, location } = this.context;\n const { alertsPageUri } = this.props;\n const { affiliate: { locations: stationLocations = [] } = {} } = config;\n\n // If the current location isn't a default location in the config, then show the modal with the alert in it,\n // otherwise the default browser behaviour will follow the link given in the prop alertsPageUri\n if (!_.find(stationLocations, { 'zipcode': Number(location.zipcode)}) || !alertsPageUri){\n event.preventDefault();\n this._setModalVisible(alertIndex);\n }\n }\n\n // Remove any alerts that are not in the filter type, and sort them into the appropriate order. The order is specified\n // by whatever order the allowedAlerts comes in as, and then by date within that list.\n _filterAlertsByType(alerts, allowedAlerts){\n const filteredAlerts = _.filter(alerts,\n (alert) => (_.find(allowedAlerts,\n (filterItem) => this._compareAlertFilter(filterItem, alert)\n )\n )\n );\n\n const alertWithBackgroundColor = _.map(filteredAlerts,\n (alert) => {\n const alertFilter = _.find(allowedAlerts,\n (filterItem) => this._compareAlertFilter(filterItem, alert)\n );\n\n return _.assign(alert, {backgroundColor: alertFilter.backgroundColor});\n }\n );\n\n return _.sortBy(alertWithBackgroundColor,\n (alert) => (_.findIndex(allowedAlerts,\n (filterItem) => this._compareAlertFilter(filterItem, alert)\n )\n )\n );\n }\n\n _compareAlertFilter(filterItem, alert) {\n const alertTitle = alert['headline'] || '';\n\n return filterItem.type.toLowerCase() === alertTitle.split(' ').pop().toLowerCase();\n }\n\n render() {\n const { showModal, expandedAlertIndex, showAllAlerts } = this.state;\n const {\n FRN_rawResponses: [\n {\n data: alerts = []\n } = {}\n ] = [],\n title,\n allowedAlerts = [],\n alertsPageUri,\n timestampOptions = {}\n } = this.props;\n\n let alertsToDisplay;\n if (allowedAlerts.length > 0) {\n alertsToDisplay = this._filterAlertsByType(alerts, allowedAlerts);\n } else {\n alertsToDisplay = alerts;\n }\n\n if (alertsToDisplay.length === 0) {\n return null;\n }\n\n const items = alertsToDisplay.map((alert, i) =>\n
\n
);\n\n return (\n
\n );\n }\n}\n\n/**\n * Class representing a weather alert item.\n */\nclass WeatherAlertItem extends Component {\n static propTypes = {\n alert: PropTypes.object.isRequired,\n onClick: PropTypes.func\n }\n\n _getTimeDuration(startTime, endTime){\n let duration = '';\n\n if (startTime){\n duration = ' From ' + formatDate(formatWsiDate(startTime), 'dddd, MMMM Do Y, h:mm a z');\n }\n\n if (endTime){\n duration += ' until ' + formatDate(formatWsiDate(endTime), 'dddd, MMMM Do Y, h:mm a z');\n }\n\n return duration;\n }\n\n render() {\n const {\n alert: {\n headline: title,\n startTime,\n endTime\n } = {},\n onClick\n } = this.props;\n const category = getWeatherCategoryFromCondition(title);\n\n return (\n
\n
\n
\n
\n
{title} \n \n {this._getTimeDuration(startTime, endTime)}\n \n \n
\n );\n }\n}\n\n/**\n * Class representing the modal for the current weather alerts\n */\nclass WeatherAlertModal extends Component {\n static propTypes = {\n title: PropTypes.string,\n alerts: PropTypes.array.isRequired,\n expandedAlertIndex: PropTypes.number,\n onAlertClick: PropTypes.func,\n showModal: PropTypes.bool.isRequired,\n onHideModal: PropTypes.func.isRequired,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n }),\n titleType: PropTypes.string\n }\n\n render() {\n const {\n title = '',\n alerts = [],\n expandedAlertIndex = -1,\n onAlertClick,\n showModal,\n onHideModal,\n timestampOptions = {},\n titleType = TITLE_TYPE.MODULE_TITLE\n } = this.props;\n\n const weatherAlertItems = alerts.map((alert, i) =>\n
\n );\n\n return (\n \n \n { title ? \n \n );\n }\n}\n\n/**\n * Class representing a weather alert item in the modal list\n */\nclass WeatherAlertModalItem extends Component {\n static propTypes = {\n alert: PropTypes.object.isRequired,\n expanded: PropTypes.bool,\n index: PropTypes.number.isRequired,\n onClick: PropTypes.func,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n })\n }\n\n _onClick() {\n const { onClick, index } = this.props;\n\n if (onClick) {\n onClick(index);\n }\n }\n\n render() {\n const {\n alert: {\n 'headline': title,\n bulletin,\n 'startTime': publishDate,\n backgroundColor = '#d20202'\n } = {},\n expanded = false,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n } = {}\n } = this.props;\n const formattedBulletin = bulletin.toLowerCase();\n const formattedDate = formatWsiDate(publishDate);\n const category = getWeatherCategoryFromCondition(title);\n\n return (\n \n
\n
\n
this._onClick()}>\n
{title} \n \n \n {expanded ?
') }} />\n : null}\n
\n
{cityName}
);\n weatherInfo.push(\n {(temperatureFormat === 'F' ? tempF : tempC) + '°'} \n );\n } else {\n weatherLocation.push(\n \n );\n weatherInfo.push(\n \n
H {`${hiTempF}°`}
\n
L {`${loTempF}°`}
\n
\n {showDetail &&\n {(temperatureFormat === 'F' ? tempF : tempC) + '°'} \n }\n
\n ];\n const currentConditionsLink = link ? (\n \n {currentConditionsContents}\n \n ) : null;\n\n if (!iconCode || !(tempF || tempC)) {\n return null;\n }\n\n return (\n \n {currentConditionsLink || currentConditionsContents}\n
\n );\n }\n}\n\nexport default CurrentConditionsAtAGlance;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/weather/CurrentConditionsAtAGlance.js","import _ from 'lodash';\nimport React, { Component, PropTypes } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport DailyWeatherSummary from './SimpleDailyWeatherSummary';\nimport ComponentTitle from 'components/shared/ComponentTitle';\nimport VideoPlayer from 'components/media/VideoPlayer';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\nclass DailySummaryWithVideo extends Component {\n static propTypes = {\n FRN_rawResponses: PropTypes.array,\n title: PropTypes.string,\n titleColor: PropTypes.string,\n dailySummaryProps: PropTypes.object,\n videoProps: PropTypes.object,\n titleType: PropTypes.string\n }\n\n render() {\n const {\n FRN_rawResponses: [\n dailySummaryData,\n videoPlayerData\n ] = [],\n title,\n titleColor,\n dailySummaryProps,\n videoProps,\n titleType = TITLE_TYPE.MODULE_TITLE\n } = this.props;\n\n const dailySummaryPropsWithData = _.assign(dailySummaryProps, {FRN_rawResponses: [dailySummaryData]});\n const videoPlayerPropsWithData = _.assign(videoProps, {FRN_rawResponses: [videoPlayerData]});\n\n return (\n \n { title ? \n
\n
\n );\n }\n}\n\nexport default DailySummaryWithVideo;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/weather/DailySummaryWithVideo.js","import classNames from 'classnames';\nimport _find from 'lodash/find';\nimport connect from 'connect-alt';\nimport React, { Component, PropTypes } from 'react';\nimport { Row, Col } from 'react-bootstrap';\nimport { DataStoreDispatcher } from '../../lib/frankly';\nimport { formatDate } from '../../utils/DateUtils';\nimport { weatherConditionFromIconCode } from '../../utils/WeatherUtils';\nimport ModuleSubMenu from '../shared/ModuleSubMenu';\nimport LocationSelector from './LocationSelector';\n\n/**\n * Class representing the current day's detailed weather information\n *\n * Dependent on feed - wsi_endpoint\n *\n * Optional props:\n * backgroundImageUri\n * - A string specifying the URI for an image to be displayed behind the summary information. Will always expand to\n * the size of the component (including to the edge of the page if 'expandBackground' is true\n * - This is the highest prioritised prop. No other prop can overrule this one, the image will always be displayed.\n *\n * weatherConditionBackground\n * - A boolean specifying whether or not the background of the module should reflect the weather being displayed\n * for the currently selected timeframe (current, today or tonight).\n * - This is the second highest prioritised prop. This background will display as long as no backgroundImageUri\n * is specified.\n *\n * backgroundColor=\"#0079c4\"\n * - A string specifying the background color of the block, overriding the default. This value can be a Hex value or\n * an RGBA color.\n * E.g. \"#0079c4\", \"rgba(200, 200, 200, 0.5)\"\n * - Slight variations of this color are used for the location menu and search results on the LocationSelector\n * - This is the third highest prioritised prop. A custom color will be displayed for the background as long as no\n * backgroundImageUri is specified, and weatherConditionBackground is set to false.\n *\n * expandBackground\n * - A boolean specifying whether or not the background should expand to the edge of the screen\n * E.g. true, false\n * - This can be set for a custom image, for weatherConditionBackground and for both the custom and default colors.\n *\n\n */\n@connect('Weather')\nclass DailyWeatherSummary extends Component {\n static propTypes = {\n expandBackground: PropTypes.bool,\n backgroundColor: PropTypes.string,\n backgroundImageUri: PropTypes.string,\n weatherConditionBackground: PropTypes.bool,\n WeatherStore: PropTypes.object.isRequired\n }\n\n static contextTypes = {\n flux: PropTypes.object.isRequired\n }\n\n state = {\n temperatureFormat: 'F',\n timeFrameDisplayValue: 'current'\n }\n\n componentWillMount() {\n this._weatherDataStoreDispatcher = new DataStoreDispatcher('franklyinc.com/weather');\n\n this._weatherDataStoreDispatcher.onChange('temperatureFormat', (val) => {\n this.setState({\n temperatureFormat: val\n });\n });\n }\n\n componentWillUnmount() {\n this._weatherDataStoreDispatcher.off();\n this._weatherDataStoreDispatcher = null;\n }\n\n _weatherDataStoreDispatcher = null;\n\n _setDisplayTimeFrame(val, event) {\n this.setState({\n timeFrameDisplayValue: val\n });\n\n event.stopPropagation();\n }\n\n _getClassNames(defaultNames, timeFrameValue) {\n let timeFrameClassNames = defaultNames;\n\n if (this.state.timeFrameDisplayValue === timeFrameValue) {\n timeFrameClassNames += ' is-active';\n }\n\n return timeFrameClassNames;\n }\n\n _handleTemperatureFormatClick(format) {\n this._weatherDataStoreDispatcher.set('temperatureFormat', format);\n }\n\n render() {\n const {\n expandBackground,\n backgroundColor,\n backgroundImageUri,\n weatherConditionBackground,\n WeatherStore: { wsi: { data: weatherData = {} } = {} } } = this.props;\n const {\n temperatureFormat,\n timeFrameDisplayValue } = this.state;\n const {\n Cities: {\n City: {\n CurrentObservation: currentObservation = null,\n DailyForecast: {\n Day: [dailyForecast = null, ] = []\n } = {}\n } = {}\n } = {}\n } = weatherData;\n\n if (!currentObservation || !dailyForecast) {\n return null;\n }\n\n const { '@IconCode': currentIconCode } = currentObservation;\n const {\n '@IconCode': todayIconCode,\n '@IconCodeNight': tonightIconCode,\n } = dailyForecast;\n const componentClassnames = classNames('DailyWeatherSummary', 'DailyWeatherSummary-wrapper');\n const layoutClassnames = classNames('DailyWeatherSummary-layout', {'DailyWeatherSummary--expanded': expandBackground});\n let weatherCode;\n let backgroundClasses;\n let customBackgroundStyles = {};\n let weatherCondition = null;\n let isImgBackground = false;\n\n if (timeFrameDisplayValue === 'current') {\n weatherCode = currentIconCode;\n } else if (timeFrameDisplayValue === 'today') {\n weatherCode = todayIconCode;\n } else {\n weatherCode = tonightIconCode;\n }\n\n // Note that the hierarchy\n if (weatherConditionBackground) {\n weatherCondition = weatherConditionFromIconCode(weatherCode);\n isImgBackground = true;\n }\n\n if (backgroundColor) {\n customBackgroundStyles['backgroundColor'] = backgroundColor;\n }\n\n if (backgroundImageUri) {\n customBackgroundStyles['backgroundImage'] = 'url(' + backgroundImageUri + '?auto=webp&disable=upscale&fit=crop&width=1470)';\n isImgBackground = true;\n }\n\n backgroundClasses = classNames(\n 'DailyWeatherSummary-background',\n (weatherCondition ? 'DailyWeatherSummary-background-' + weatherCondition : ''),\n { expandToEdges: expandBackground });\n\n return (\n \n
\n
\n \n
\n
this._handleTemperatureFormatClick(format)}\n temperatureFormat={temperatureFormat}\n timeFrameDisplayValue={timeFrameDisplayValue}\n />\n \n \n Current \n \n \n Today \n \n \n Tonight \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
{displayTemperature} \n
\n
\n
\n
\n {skyText} \n {(timeFrameDisplayValue === 'current') ?\n [Feels like ,\n
\n { forecastPhrase && showWeatherPhrase ?\n
\n {forecastPhrase}\n
: null\n }\n
\n
\n {\n timeFrameDisplayValue === 'current' ?\n
\n\n
\n
\n {timeFrameDisplayValue === 'current' ?\n
\n
: null }\n
\n
\n
\n
\n
\n
\n );\n }\n}\n\nclass TimeDetailRow extends Component {\n static propTypes = {\n title: PropTypes.string.isRequired,\n value: PropTypes.string,\n valueClassName: PropTypes.string,\n validDateLocal: PropTypes.string.isRequired\n }\n\n render() {\n const { validDateLocal, value } = this.props;\n\n return (\n \n
\n \n All Counties
\n {\n alertData.map((item, key) => \n
\n )\n }\n
\n
this._expendCounty()}>\n
{countyName} ( {numberOfAlert} Alerts ) \n \n\n
\n {expendCounty ?\n {weatherAlertCategories}
: null}\n \n
\n
this._showAlerts()}>\n
{categoryName.toLowerCase()} \n \n\n
\n {showAlerts ?\n {weatherAlertItems}
: null}\n \n\n
\n
this._showAlertDescription()}>\n
\n
\n
{type} \n \n
\n
\n
\n {showAlertDescription ? \n
') }}\n /> : null\n }\n \n
\n
\n {showHourly ?\n \n Hourly \n : null }\n {_.map(customDailyOptionValues, (val) => (\n \n {val + ' Day'} \n \n ))}\n {showWeekend ?\n \n Weekend \n : null }\n \n {isHourlyForecastDisplayed ?\n
:\n
}\n
\n
\n );\n }\n}\n\n/**\n * Class representing the headings panel for the hourly weather forecast component.\n */\nclass HourlyForecastHeadings extends Component {\n render() {\n return (\n \n Description \n Desc \n \n Humidity \n Humid \n \n
\n );\n }\n}\n\n/**\n * Class representing the container for the content within the hourly weather forecast component.\n */\nclass HourlyForecastBody extends Component {\n static propTypes = {\n forecasts: PropTypes.array.isRequired,\n temperatureFormat: PropTypes.string\n };\n\n state = {\n totalHoursToDisplay: 12\n };\n\n _showNextEightHours() {\n this.setState({\n totalHoursToDisplay: this.state.totalHoursToDisplay + 12\n });\n }\n\n render() {\n const {\n temperatureFormat,\n forecasts\n } = this.props;\n const {\n totalHoursToDisplay\n } = this.state;\n\n let forecastComponents;\n if (forecasts) {\n forecastComponents = _.map(\n _.take(forecasts, totalHoursToDisplay),\n (forecast, i) => {\n return (\n \n {forecastComponents}\n {totalHoursToDisplay < forecasts.length ?\n (\n \n this._showNextEightHours()} className=\"next-12-hours-label\">Next 12 Hours \n
\n )\n : null\n }\n
\n );\n }\n}\n\n/**\n * Class representing a row that contains information about a single hour within the hourly weather forecast component.\n */\nclass HourlyForecastRow extends Component {\n static propTypes = {\n forecast: PropTypes.object.isRequired,\n temperatureFormat: PropTypes.string\n };\n\n render() {\n const {\n forecast: {\n '@ValidDateLocal': dateTimeOfForecast,\n '@TempF': TempF,\n '@TempC': TempC,\n '@IconCode': iconCode,\n '@SkyMedium': descriptionText,\n '@PrecipChance': precipitation,\n '@RelHumidity': humidity,\n '@WndSpdMph': windSpeed,\n '@WndDirCardinal': windDirection\n },\n temperatureFormat\n } = this.props;\n\n const temp = (temperatureFormat !== 'C') ? TempF : TempC;\n\n return (\n \n \n {formatDate(dateTimeOfForecast, 'hA')}\n
\n \n {formatDate(dateTimeOfForecast, 'MM/DD')}\n
\n \n {descriptionText} \n \n {precipitation} \n \n {humidity} \n \n {windDirection + \" \" + windSpeed + \" MPH\"} \n \n
\n );\n }\n}\n\n/**\n * Class representing the multiday weather forecast component.\n */\nclass MultiDayForecast extends Component {\n static propTypes = {\n forecasts: PropTypes.array.isRequired,\n daysToDisplay: PropTypes.string,\n temperatureFormat: PropTypes.string,\n hiFirst: PropTypes.bool,\n expandFirstRowByDefault: PropTypes.bool\n };\n\n render() {\n const {\n forecasts,\n daysToDisplay,\n hiFirst,\n expandFirstRowByDefault\n } = this.props;\n\n return (\n \n
\n );\n }\n}\n\n/**\n * Class representing the headings panel for the multiday weather forecast component.\n */\nclass MultiDayForecastHeadings extends Component {\n render() {\n return (\n \n Description \n Desc \n \n Humidity \n Humid \n \n
\n );\n }\n}\n\n/**\n * Class representing the container for the content within the multiday weather forecast component.\n */\nclass MultiDayForecastBody extends Component {\n static propTypes = {\n forecasts: PropTypes.array.isRequired,\n daysToDisplay: PropTypes.string,\n temperatureFormat: PropTypes.string,\n hiFirst: PropTypes.bool,\n expandFirstRowByDefault: PropTypes.bool\n };\n\n state = {\n expandedRowIndex: this.props.expandFirstRowByDefault ? 0 : -1\n }\n\n componentWillReceiveProps(nextProps) {\n const { 'daysToDisplay': oldDaysToDisplay, expandFirstRowByDefault } = nextProps;\n const { newDaysToDisplay } = nextProps;\n const expandedIndex = expandFirstRowByDefault ? 0 : -1;\n\n if (oldDaysToDisplay !== newDaysToDisplay) {\n this.setState({\n expandedRowIndex: expandedIndex\n });\n }\n }\n\n // get first weekend from daily forecast\n _getFirstWeekend(forecasts) {\n const weekend = [];\n\n for (const forecast of forecasts) {\n const date = new Date(forecast['@ValidDateLocal']);\n // Friday: 5, Saturday: 6, Sunday: 0\n if (date.getDay() === 5 || date.getDay() === 6 || date.getDay() === 0) {\n weekend.push(forecast);\n\n if (date.getDay() === 0){\n return weekend;\n }\n }\n }\n return weekend;\n }\n\n _setExpandedRowIndex(value = -1){\n this.setState({\n expandedRowIndex: value\n });\n }\n\n render() {\n const { forecasts, daysToDisplay, temperatureFormat, hiFirst } = this.props;\n const { expandedRowIndex } = this.state;\n const emptyRowIndex = -1;\n\n const totalDaysToDisplay = daysToDisplay;\n let elementsToDisplay;\n let dailyElements;\n\n if (forecasts) {\n if (totalDaysToDisplay === 'weekend') {\n elementsToDisplay = this._getFirstWeekend(forecasts);\n } else {\n elementsToDisplay = _.take(forecasts, Number(totalDaysToDisplay));\n }\n\n dailyElements = _.map(elementsToDisplay, (forecast, i) => {\n return (\n {dailyElements}\n
\n );\n }\n}\n\n/**\n * Class representing a row that contains information about a single day within the multiday weather forecast component.\n */\nclass MultiDayForecastRow extends Component {\n static propTypes = {\n forecast: PropTypes.object.isRequired,\n temperatureFormat: PropTypes.string,\n isExpanded: PropTypes.bool,\n rowIndex: PropTypes.number,\n onExpand: PropTypes.func,\n onCollapse: PropTypes.func,\n hiFirst: PropTypes.bool\n };\n\n constructor(props) {\n super(props);\n\n //Give internal functions correct context\n this._onExpandClick = this._onExpandClick.bind(this);\n this._onCollapseClick = this._onCollapseClick.bind(this);\n this._onSummaryChange = this._onSummaryChange.bind(this);\n this._onOverviewChange = this._onOverviewChange.bind(this);\n this._onRowClick = this._onRowClick.bind(this);\n }\n\n state = {\n showSummary: !this.props.isExpanded,\n showExpanded: this.props.isExpanded\n };\n\n componentWillMount() {\n this.setState({\n isRowExpanded: false\n });\n }\n\n componentWillReceiveProps(nextProps) {\n const { isExpanded } = nextProps;\n const newState = {\n isRowExpanded: isExpanded\n };\n\n if (isExpanded) {\n newState['showSummary'] = false;\n } else {\n newState['showExpanded'] = false;\n }\n\n this.setState(newState);\n }\n\n _onRowClick() {\n const { isExpanded, rowIndex, onExpand, onCollapse } = this.props;\n\n if (isExpanded) {\n onCollapse();\n } else {\n onExpand(rowIndex);\n }\n }\n\n _onExpandClick() {\n const { onExpand, rowIndex } = this.props;\n\n onExpand(rowIndex);\n }\n\n _onCollapseClick() {\n const { onCollapse } = this.props;\n\n onCollapse();\n }\n\n _onSummaryChange(component) {\n const { showSummary, isRowExpanded } = this.state;\n\n if (!component && !showSummary){\n this.setState({\n showExpanded: isRowExpanded,\n showSummary: !isRowExpanded\n });\n }\n }\n\n _onOverviewChange(component) {\n if (!component && !this.state.showSummary){\n this.setState({\n showSummary: true\n });\n }\n }\n\n render() {\n const {\n hiFirst,\n temperatureFormat,\n forecast\n } = this.props;\n const {\n showExpanded,\n showSummary\n } = this.state;\n\n return (\n \n \n {showExpanded ?\n \n
\n );\n }\n}\n\n/**\n * Class representing summarised information about a single day within the multiday weather forecast component.\n */\nclass MultiDayForecastDailySummary extends Component {\n static propTypes = {\n dailyForecast: PropTypes.object.isRequired,\n temperatureFormat: PropTypes.string,\n hiFirst: PropTypes.bool\n };\n\n render() {\n const { dailyForecast, hiFirst } = this.props;\n const {\n '@DayOfWk': dayOfWeek,\n '@HiTempF': hiTempF,\n '@LoTempF': loTempF,\n '@HiTempC': hiTempC,\n '@LoTempC': loTempC,\n '@ValidDateLocal': date,\n '@IconCode': iconCode,\n '@SkyText': descriptionText,\n '@PrecipChance': precipitation,\n '@RelHumidity': humidity,\n '@WndSpdMph': windSpeed,\n '@WndDirCardinal': windDirection\n } = dailyForecast;\n\n // Use the correct unit (celsius vs fahrenheit)\n const highTemp = (this.props.temperatureFormat !== \"C\") ? hiTempF : hiTempC;\n const lowTemp = (this.props.temperatureFormat !== \"C\") ? loTempF : loTempC;\n\n return (\n \n
\n
\n {dayOfWeek.toUpperCase().substring(0, 3)}\n
\n
\n {formatDate(date, 'MM/DD')}\n
\n \n
\n {hiFirst ?\n
\n :
}\n
\n {hiFirst ?\n
\n :
}\n \n
\n
\n
{descriptionText} \n \n
\n
{precipitation} \n \n
\n
{humidity} \n \n
\n
{windDirection + \" \" + windSpeed + \" MPH\"} \n \n
\n
\n
\n {dayOfWeek.toUpperCase()}\n
\n
\n {formatDate(dateTime, 'MM/DD')}\n
\n
\n {descriptionTextDay.toUpperCase()} \n
\n
\n {weatherPhraseDay || ''}\n
\n
\n {sunrise ?\n Sunrise
\n {formatDate(dateOnly + ' ' + sunrise, 'h:mm A')}
\n \n : null\n }\n {sunset ?\n Sunset
\n {formatDate(dateOnly + ' ' + sunset, 'h:mm A')}
\n \n : null\n }\n {uvIndex ?\n UV Index
\n {uvIndex + \" \" + uvDescription.toUpperCase()}
\n \n : null\n }\n {windSpeedDay ?\n Wind
\n {windDirectionDay + \" \" + windSpeedDay + \" MPH\"}
\n \n : null\n }\n {humidityDay ?\n Humidity
\n {humidityDay}
\n \n : null\n }\n {precipitationDay ?\n Precip
\n {precipitationDay}
\n \n : null\n }\n
\n \n
\n
\n {dayOfWeek.toUpperCase() + \" NIGHT\"}\n
\n
\n {descriptionTextNight.toUpperCase()} \n
\n
\n {weatherPhraseNight || ''}\n
\n
\n {moonrise ?\n Moonrise
\n {formatDate(dateOnly + ' ' + moonrise, 'h:mm A')}
\n \n : null\n }\n {moonset ?\n Moonset
\n {formatDate(dateOnly + ' ' + moonset, 'h:mm A')}
\n \n : null\n }\n {moonPhase ?\n Moon Phase
\n {moonPhase}
\n \n : null\n }\n {windSpeedNight ?\n Wind
\n {windDirectionNight + \" \" + windSpeedNight + \" MPH\"}
\n \n : null\n }\n {humidityNight ?\n Humidity
\n {humidityNight}
\n \n : null\n }\n {precipitationNight ?\n Precip
\n {precipitationNight}
\n \n : null\n }\n
\n \n
this._handleClick(location, i) : null}\n onAddClick={mode === LocationListMode.add ? () => this._handleAddClick(location) : null}\n onRemoveClick={mode === LocationListMode.edit ? () => this._handleRemoveClick(i, location) : null}\n onCustomNameChange={mode === LocationListMode.edit ? (e) => this._handleCustomNameChange(i, e.target.value) : null}\n />\n );\n\n return (\n \n {title ?
{title}
: null}\n {locationComponents}\n
,\n {customName}
\n ];\n } else {\n components = [\n
\n ];\n }\n break;\n case LocationListMode.add:\n components = [\n
,\n
\n ];\n break;\n case LocationListMode.edit:\n components = [\n
,\n
,\n \n {components}\n
\n );\n }\n}\n\nclass CityStateString extends Component {\n static propTypes = {\n location: PropTypes.object.isRequired\n }\n\n render() {\n const { location } = this.props;\n\n return {template('${city}, ${stateAbbr}', location)} ;\n }\n}\n\nclass LocationName extends Component {\n static propTypes = {\n location: PropTypes.object.isRequired\n }\n\n render() {\n const { location } = this.props;\n\n return (\n \n {location.customName ? location.customName : EDIT \n
\n );\n }\n}\n\nclass LocationDropdown extends Component {\n static propTypes = {\n backgroundColor: PropTypes.string,\n customLocations: PropTypes.array.isRequired,\n stationLocations: PropTypes.array.isRequired,\n onHide: PropTypes.func\n }\n\n static contextTypes = {\n flux: PropTypes.object.isRequired,\n config: PropTypes.object.isRequired\n }\n\n constructor(props) {\n super(props);\n\n const { customLocations } = props;\n\n this.state = {\n mode: LocationListMode.view,\n customLocations: _cloneDeep(customLocations)\n };\n }\n\n componentWillReceiveProps(nextProps) {\n const { customLocations } = nextProps;\n\n if (customLocations) {\n this.setState({\n customLocations: _cloneDeep(customLocations)\n });\n }\n }\n\n _handleCancelClick() {\n const { customLocations } = this.props;\n const { mode } = this.state;\n\n this.setState({\n customLocations: _cloneDeep(customLocations),\n mode: LocationListMode.view\n }, () => {\n if (mode === LocationListMode.view) {\n const { onHide } = this.props;\n if (onHide) {\n onHide();\n }\n }\n });\n }\n\n _handleEditClick() {\n this.setState({\n mode: LocationListMode.edit\n });\n }\n\n _handleSaveClick() {\n const { customLocations } = this.refs;\n\n if (customLocations) {\n customLocations.save();\n }\n\n this.setState({\n mode: LocationListMode.view\n });\n }\n\n render() {\n const { stationLocations, backgroundColor } = this.props;\n const { mode, customLocations } = this.state;\n const actionButton = (mode === LocationListMode.view) ? this._handleEditClick()}>Edit :\n this._handleSaveClick()}>Save ;\n const customStyle = { backgroundColor };\n\n return (\n \n
this._handleCancelClick()}>Cancel \n {customLocations.length ? actionButton : null}\n
\n {customLocations.length > 0 ?\n
\n
\n
\n {errorMessage ?
{errorMessage}
: null}\n
\n
\n
this._toggleMenuVisibility()}>
\n
\n
\n
\n {showMenu ?\n
this._hideMenu()}\n backgroundColor={backgroundColor}\n /> : null}\n {showSearchResults ?\n : null}\n this._handleClick(location, i) : null}\n onAddClick={mode === LocationListMode.add ? () => this._handleAddClick(location) : null}\n onRemoveClick={mode === LocationListMode.edit ? () => this._handleRemoveClick(i, location) : null}\n onCustomNameChange={mode === LocationListMode.edit ? (e) => this._handleCustomNameChange(i, e.target.value) : null}\n />\n );\n\n return (\n \n {title ?
{title}
: null}\n {locationComponents}\n
,\n {customName}
\n ];\n } else {\n components = [\n
\n ];\n }\n break;\n case LocationListMode.add:\n components = [\n
,\n
\n ];\n break;\n case LocationListMode.edit:\n components = [\n
,\n
,\n \n {components}\n
\n );\n }\n}\n\nclass CityStateString extends Component {\n static propTypes = {\n location: PropTypes.object.isRequired\n }\n\n render() {\n const { location } = this.props;\n\n return {template('${city}, ${stateAbbr}', location)} ;\n }\n}\n\nclass LocationName extends Component {\n static propTypes = {\n location: PropTypes.object.isRequired\n }\n\n render() {\n const { location } = this.props;\n\n return (\n \n {location.customName ? location.customName : EDIT \n
\n );\n }\n}\n\nclass LocationDropdown extends Component {\n static propTypes = {\n backgroundColor: PropTypes.string,\n borderColor: PropTypes.string,\n customLocations: PropTypes.array.isRequired,\n stationLocations: PropTypes.array.isRequired,\n onHide: PropTypes.func\n }\n\n static contextTypes = {\n flux: PropTypes.object.isRequired,\n config: PropTypes.object.isRequired\n }\n\n constructor(props) {\n super(props);\n\n const { customLocations } = props;\n\n this.state = {\n mode: LocationListMode.view,\n customLocations: _cloneDeep(customLocations)\n };\n }\n\n componentWillReceiveProps(nextProps) {\n const { customLocations } = nextProps;\n\n if (customLocations) {\n this.setState({\n customLocations: _cloneDeep(customLocations)\n });\n }\n }\n\n _handleCancelClick() {\n const { customLocations } = this.props;\n const { mode } = this.state;\n\n this.setState({\n customLocations: _cloneDeep(customLocations),\n mode: LocationListMode.view\n }, () => {\n if (mode === LocationListMode.view) {\n const { onHide } = this.props;\n if (onHide) {\n onHide();\n }\n }\n });\n }\n\n _handleEditClick() {\n this.setState({\n mode: LocationListMode.edit\n });\n }\n\n _handleSaveClick() {\n const { customLocations } = this.refs;\n\n if (customLocations) {\n customLocations.save();\n }\n\n this.setState({\n mode: LocationListMode.view\n });\n }\n\n render() {\n const { stationLocations, backgroundColor, borderColor } = this.props;\n const { mode, customLocations } = this.state;\n const borderStyle = {border: borderColor ? `1px solid ${borderColor}` : null};\n const actionButton = (mode === LocationListMode.view) ? this._handleEditClick()}>Edit :\n this._handleSaveClick()}>Save ;\n const customStyle = {\n backgroundColor,\n ...borderStyle\n };\n\n return (\n \n
this._handleCancelClick()}>Cancel \n {customLocations.length ? actionButton : null}\n
\n {customLocations.length > 0 ?\n
\n
\n
\n {errorMessage ?
{errorMessage}
: null}\n
\n
\n
this._toggleMenuVisibility()}>
\n
\n \n
this._hideMenu()}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n /> : null}\n {showSearchResults ?\n : null}\n \n { forecastData.length ?\n
\n
\n
\n \n this._setModalVisible() }>\n
\n
Read more
\n
\n
\n
: null }\n
\n { meteorologistImage ?\n
\n
: null }\n { weatherVideo ?\n
\n
\n : null\n }\n { weatherVideo ?\n
\n
\n : null\n }\n
\n
\n {name || ''}\n
\n
\n {meteorologistTitle || ''}\n
\n
\n {facebookInfo ?
\n
\n
\n\n {backgroundUri ?
: null}\n
\n \n );\n }\n}\n\n/**\n * Class representing the modal for the full meteorologist text\n */\nclass MeteorologistForecastModal extends Component {\n static propTypes = {\n title: PropTypes.string,\n forecastContent: PropTypes.string.isRequired,\n meteorlogistName: PropTypes.string,\n meteorologistTitle: PropTypes.string,\n meteorologistImage: PropTypes.string,\n email: PropTypes.string,\n facebookInfo: PropTypes.string,\n twitterInfo: PropTypes.string,\n googleInfo: PropTypes.string,\n forecastDate: PropTypes.string,\n showModal: PropTypes.bool.isRequired,\n onHideModal: PropTypes.func.isRequired,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n }),\n titleType: PropTypes.string\n }\n\n render() {\n const {\n title = '',\n forecastContent = '',\n meteorlogistName = '',\n meteorologistTitle = '',\n meteorologistImage = '',\n email = '',\n facebookInfo = '',\n twitterInfo = '',\n googleInfo = '',\n forecastDate = '',\n showModal,\n onHideModal,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n } = {},\n titleType = TITLE_TYPE.MODULE_TITLE\n } = this.props;\n\n return (\n
\n \n { title ? \n \n
\n
\n
\n
\n {meteorlogistName}\n
\n
\n {meteorologistTitle}\n
\n
\n {facebookInfo ?
\n
\n
\n \n \n );\n }\n}\n\nexport default MeteorologistForecast;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/weather/MeteorologistForecast.js","import _ from 'lodash';\nimport classNames from 'classnames';\nimport sanitizeHtml from 'sanitize-html';\nimport React, { Component, PropTypes } from 'react';\nimport { Row, Col, Modal} from 'react-bootstrap';\nimport Timestamp from 'components/Timestamp';\nimport Image from 'components/Image';\nimport ComponentTitle from 'components/shared/ComponentTitle';\nimport SocialIcon from 'components/social/SocialIcon';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\n/**\n * Class representing the meteorologists written forecast for the current day.\n *\n * Dependent on feed - station_weather_feed\n *\n */\nclass SimpleMeteorologistForecast extends Component {\n static propTypes = {\n FRN_rawResponses: PropTypes.array,\n showOnUserLocation: PropTypes.bool,\n showForecast: PropTypes.bool,\n showMeteorologistImage: PropTypes.bool,\n showMeteorologistInfo: PropTypes.bool,\n backgroundColor: PropTypes.string,\n backgroundUri: PropTypes.string,\n textColor: PropTypes.string,\n capitalizeForecastTitle: PropTypes.bool,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n }),\n titleType: PropTypes.oneOf(Object.values(TITLE_TYPE))\n }\n\n static contextTypes = {\n location: PropTypes.object.isRequired,\n config: PropTypes.object.isRequired\n }\n\n defaultProps = {\n showForecast: false,\n showMeteorologistImage: false,\n showMeteorologistInfo: false,\n backgroundColor: '#FFF',\n textColor: '#000000',\n showOnUserLocation: false,\n capitalizeForecastTitle: true,\n titleType: TITLE_TYPE.MODULE_TITLE\n }\n\n state = {\n showModal: false\n }\n\n _setModalVisible() {\n this.setState({\n showModal: true\n });\n }\n\n _setModalHidden() {\n this.setState({\n showModal: false\n });\n }\n\n render() {\n const {\n showForecast,\n showMeteorologistImage,\n showMeteorologistInfo,\n backgroundUri,\n backgroundColor = '#FFFFFF',\n textColor = '#000000',\n showOnUserLocation,\n timestampOptions = {},\n capitalizeForecastTitle,\n titleType,\n FRN_rawResponses: [\n { data:\n { features:\n forecastData = []\n } = {}\n } = {}\n ] = []\n } = this.props;\n\n if (!showForecast && !showMeteorologistImage && !showMeteorologistInfo) {\n return null;\n }\n\n const { showModal } = this.state;\n const { config, location } = this.context;\n const { affiliate: { locations: stationLocations = [] } = {} } = config;\n const weatherData = _.find(forecastData, {type: 'weather'}) || {};\n const {\n 'header': forecastTitle = 'Today\\'s Forecast',\n 'currentconditions': forecastDescription = '',\n 'lastupdatedateutc': pubDate = '',\n 'byline': bylineInfo = {} } = weatherData;\n const name = _.get(bylineInfo, 'firstname', \"\") + ' ' + _.get(bylineInfo, 'lastname', '');\n const meteorologistTitle = _.get(bylineInfo, 'title', '');\n const meteorologistImage = _.get(bylineInfo, 'profileimage', '');\n const email = _.get(bylineInfo, 'emailaddress', '');\n const { socialnetworksinfo: {\n facebook: facebookHandle = '',\n twitter: twitterHandle = '',\n google: googlePlusId = ''} = {} } = bylineInfo;\n const facebookInfo = facebookHandle ? 'https://www.facebook.com/' + facebookHandle : '';\n const twitterInfo = twitterHandle ? 'https://twitter.com/' + twitterHandle : '';\n const googleInfo = googlePlusId ? 'https://plus.google.com/' + googlePlusId : '';\n // We reinstate escaped characters removed in the parsing process, and strip out any custom styles added in producer\n const unescapedSanitizedDescription = sanitizeHtml(_.unescape(forecastDescription));\n const { showElapsedTime, displayShortDateTime } = timestampOptions;\n\n let customComponentStyles = {};\n\n // If the current location isn't a default location in the config, then hide the meteorologist report since it's not\n // applicable for the selected location. This can be overriden by setting showOnUserLocation to true in the config\n if (!showOnUserLocation && !_.find(stationLocations, { 'zipcode': Number(location.zipcode)})){\n return null;\n }\n\n customComponentStyles['color'] = textColor;\n customComponentStyles['backgroundColor'] = backgroundColor;\n\n if (backgroundUri) {\n customComponentStyles['backgroundImage'] = 'url(' + backgroundUri + '?auto=webp&disable=upscale&width=1480)';\n }\n\n const textColSpans = {\n md: 6,\n sm: 9,\n xs: 12\n };\n const profileColSpans = {\n md: 6,\n sm: 3,\n xs: 12\n };\n\n if (!showMeteorologistImage && !showMeteorologistInfo) {\n textColSpans['md'] = 12;\n textColSpans['sm'] = 12;\n }\n\n if (!showForecast) {\n profileColSpans['md'] = 12;\n profileColSpans['sm'] = 12;\n }\n\n const forecastTitleClassnames = classNames(\n 'SimpleMeteorologistForecast-title',\n { 'SimpleMeteorologistForecast-title--capitalize': capitalizeForecastTitle }\n );\n\n /* Breakpoints: XS: 0-767, S: 768-991, M: 992-1199, L: 1200-1469, XL: 1470- */\n const imageBreakpoints = [\n { \"maxWidth\": 640, \"widthPX\": 104 },\n { \"maxWidth\": 768, \"widthPX\": 104 },\n { \"maxWidth\": 992, \"widthPX\": 144 },\n { \"maxWidth\": 1200, \"widthPX\": 210 },\n { \"widthPX\": 210 },\n ];\n\n return (\n
\n
\n { showForecast && \n
\n
\n \n this._setModalVisible() }>\n
\n
Read more
\n
\n
\n { (showMeteorologistImage && meteorologistImage) &&\n
\n
}\n { showMeteorologistInfo &&
\n
\n {name || ''}\n
\n
\n {meteorologistTitle || ''}\n
\n
\n {facebookInfo ?
\n
}\n
: null}\n
\n
\n
\n );\n }\n}\n\n/**\n * Class representing the modal for the full meteorologist text\n */\nclass MeteorologistForecastModal extends Component {\n static propTypes = {\n title: PropTypes.string,\n forecastContent: PropTypes.string.isRequired,\n meteorlogistName: PropTypes.string,\n meteorologistTitle: PropTypes.string,\n meteorologistImage: PropTypes.string,\n email: PropTypes.string,\n facebookInfo: PropTypes.string,\n twitterInfo: PropTypes.string,\n googleInfo: PropTypes.string,\n forecastDate: PropTypes.string,\n showModal: PropTypes.bool.isRequired,\n onHideModal: PropTypes.func.isRequired,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n }),\n titleType: PropTypes.string\n }\n\n render() {\n const {\n title = '',\n forecastContent = '',\n meteorlogistName = '',\n meteorologistTitle = '',\n meteorologistImage = '',\n email = '',\n facebookInfo = '',\n twitterInfo = '',\n googleInfo = '',\n forecastDate = '',\n showModal,\n onHideModal,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n } = {},\n titleType = TITLE_TYPE.MODULE_TITLE\n } = this.props;\n\n return (\n
\n \n { title ? \n \n
\n
\n
\n
\n {meteorlogistName}\n
\n
\n {meteorologistTitle}\n
\n
\n {facebookInfo ?
\n
\n
\n \n \n );\n }\n}\n\nexport default SimpleMeteorologistForecast;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/weather/SimpleMeteorologistForecast.js","import classNames from 'classnames';\nimport React, { Component, PropTypes } from 'react';\nimport { Row, Col, Modal, ModalBody, ModalHeader, ModalTitle } from 'react-bootstrap';\nimport CancelIcon from 'components/icons/Cancel';\nimport Image from 'components/Image';\nimport ComponentTitle from '../shared/ComponentTitle';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\n\n/**\n * Class representing the images uploaded by the station for the current weather conditions.\n */\n\nclass StationImages extends Component {\n static propTypes = {\n images: PropTypes.array.isRequired,\n title: PropTypes.string,\n titleColor: PropTypes.string,\n dimensions: PropTypes.object,\n enableModal: PropTypes.bool,\n chromeless: PropTypes.bool,\n titleType: PropTypes.string\n }\n\n static defaultProps = {\n title: '',\n dimensions: {\n 'xs': 6\n },\n titleType: TITLE_TYPE.MODULE_TITLE\n }\n\n render() {\n const { title, titleColor, images = [], dimensions, enableModal, chromeless, titleType } = this.props;\n\n if (!images.length) {\n return null;\n }\n\n return (\n
\n \n {images.map((image, i) =>
\n
\n );\n }\n}\n\nclass StationImageUnit extends Component {\n static propTypes = {\n image: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n enableModal: PropTypes.bool,\n chromeless: PropTypes.bool\n };\n\n state = {\n showModal: false\n }\n\n _toggleModal() {\n this.setState({\n showModal: !this.state.showModal\n });\n }\n\n render() {\n // Use title if no separate alt_text is defined\n const {\n image = {},\n enableModal,\n chromeless,\n dimensions: { xs = 6, md, lg, xl } = {}\n } = this.props;\n\n const { showModal } = this.state;\n\n const { title, staticUri, destinationUri, altText } = image;\n\n const alt = altText || title;\n\n const scaledImage = `${staticUri}?auto=webp&disable=upscale&width=460`;\n const cellStyles = {backgroundImage: `url(${scaledImage})`};\n const componentclassNames = classNames('StationImageUnit', (xl ? `col-xl-${xl}` : ''));\n\n const thumbnailClassnames = classNames(\n 'StationImageUnit-thumbnail',\n {\n 'StationImageUnit-thumbnail--clickable': enableModal\n }\n );\n\n const titleClassnames = classNames(\n 'StationImageUnit-imageTitle',\n {\n 'StationImageUnit-imageTitle--clickable': enableModal\n }\n );\n\n const showHyperlink = destinationUri && !enableModal;\n\n return (\n
\n
this._toggleModal()}>\n {/* The following image tag is here for accessibility purposes */}\n
\n {showHyperlink ?
: null}\n
\n
this._toggleModal()}>\n {showHyperlink ? {title} : title}\n \n { enableModal &&\n
this._toggleModal()}\n chromeless={chromeless}\n />\n }\n \n );\n }\n}\n\nclass ImageModal extends Component {\n static propTypes = {\n title: PropTypes.string,\n altText: PropTypes.string,\n imageSrc: PropTypes.string,\n destinationUri: PropTypes.string,\n showModal: PropTypes.bool.isRequired,\n onHideModal: PropTypes.func.isRequired,\n chromeless: PropTypes.bool\n }\n\n render() {\n const {\n showModal,\n title,\n altText,\n imageSrc,\n destinationUri,\n onHideModal,\n chromeless\n } = this.props;\n\n const imgHeight = (document.documentElement.clientHeight) - 150;\n const imageStyles = {\n objectFit: 'contain'\n };\n\n return (\n \n { title &&\n \n {destinationUri ? {title} : title} \n \n }\n \n { !title && onHideModal()}> }\n \n {destinationUri ? \n \n );\n }\n}\n\nexport default StationImages;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/weather/StationImages.js","import _map from 'lodash/map';\nimport React, { Component, PropTypes } from 'react';\nimport SocialIcon from '../social/SocialIcon';\nimport CircleOChevronRight from '../icons/CircleOChevronRight';\n\n/**\n * Class representing the news subscription items\n *\n * Optional props:\n * subscriptionLinks\n * - An array of objects specifying text and destination uri for the link\n * E.g. [ { \"text\": \"Sign up for weather alerts\", \"destinationUri: \"\" }, { ... }, ... ]\n *\n * socialMediaLinks\n * - An array of objects specifying type and destination uri for the social link\n * E.g. [ { \"type\": \"facebook\", \"destinationUri: \"\" }, { ... }, ... ]\n *\n */\nclass SubscribeModule extends Component {\n static propTypes = {\n title: PropTypes.string,\n titleColor: PropTypes.string,\n subscriptionLinks: PropTypes.array,\n socialMediaLinks: PropTypes.array\n }\n\n render() {\n const {\n title = 'Follow us on social media',\n titleColor = '#000000',\n subscriptionLinks: subLinks = [],\n socialMediaLinks: mediaLinks = []\n } = this.props;\n\n return (\n \n {mediaLinks.length > 0 ?\n
\n
{title} \n
\n {_map(mediaLinks, (mediaItem, i) =>\n mediaItem.type === 'email' ?\n
\n
\n : null}\n {_map(subLinks, (link, i) =>\n
)}\n
\n
\n
\n \n {imageCols}\n \n
\n {shouldDisplayViewMoreButton ?\n
\n View More\n
\n : null\n }\n
{imageElement} ;\n }\n\n return imageElement;\n } else {\n return null;\n }\n }\n\n}\n\nexport default ViewerWeatherMedia;\n\n\n\n// WEBPACK FOOTER //\n// ./app/components/weather/ViewerWeatherMedia.js","import _ from 'lodash';\nimport connect from 'connect-alt';\nimport React, { Component, PropTypes } from 'react';\nimport { Modal } from 'react-bootstrap';\nimport { getWeatherCategoryFromCondition } from '../../utils/WeatherUtils';\nimport { formatWsiDate, formatDate, convertHoursToSeconds, getDateTimeInSeconds } from '../../utils/DateUtils';\nimport { addAlertToStore, findAlertInStore, removeAlertFromStore } from '../../utils/AlertUtils';\nimport Timestamp from '../Timestamp';\nimport ComponentTitle from '../shared/ComponentTitle';\nimport WeatherAlertIcon from './WeatherAlertIcon';\nimport CancelIcon from 'components/icons/Cancel';\nimport { TITLE_TYPE } from '../../constants/FRNBaseStyles';\nimport DedicatedWeatherAlert from './DedicatedWeatherAlert';\n\nconst ALERT_CATEGORIES = ['warning', 'watch', 'advisory', 'statement', 'outlook', 'synopsis', 'forecast', 'alert'];\nconst WEATHER_ALERT_TYPE = {\n banner: 'banner',\n fullView: 'fullView'\n};\n\nclass WeatherAlertWrapper extends Component {\n static propTypes = {\n type: PropTypes.oneOf(Object.keys(WEATHER_ALERT_TYPE)),\n FRN_resourceEndpoints: PropTypes.array\n }\n\n static defaultProps = {\n type: WEATHER_ALERT_TYPE.banner,\n FRN_resourceEndpoints: []\n }\n\n render() {\n const {\n FRN_resourceEndpoints: [{\n url = ''\n } = {}], \n type\n } = this.props;\n\n if (!url) {\n return \n
\n
\n
\n
Weather Alert: {text}\n {showViewAll &&
View all }\n
\n
\n
);\n\n return (\n \n );\n }\n}\n\n/**\n * Class representing a weather alert item.\n */\nclass WeatherAlertItem extends Component {\n static propTypes = {\n alert: PropTypes.object.isRequired,\n onClick: PropTypes.func\n }\n\n _getTimeDuration(startTime, endTime){\n let duration = '';\n\n if (startTime){\n duration = ' From ' + formatDate(formatWsiDate(startTime), 'dddd, MMMM Do Y, h:mm a z');\n }\n\n if (endTime){\n duration += ' until ' + formatDate(formatWsiDate(endTime), 'dddd, MMMM Do Y, h:mm a z');\n }\n\n return duration;\n }\n\n render() {\n const {\n alert: {\n '@Headline': title,\n '@StartTime': startTime,\n '@EndTime': endTime\n } = {},\n onClick\n } = this.props;\n const category = getWeatherCategoryFromCondition(title);\n\n return (\n \n
\n
\n
\n
{title} \n \n {this._getTimeDuration(startTime, endTime)}\n \n \n
\n );\n\n return (\n \n \n { title ? \n \n );\n }\n}\n\n/**\n * Class representing a weather alert item in the modal list\n */\nclass WeatherAlertModalItem extends Component {\n static propTypes = {\n alert: PropTypes.object.isRequired,\n expanded: PropTypes.bool,\n index: PropTypes.number.isRequired,\n onClick: PropTypes.func,\n timestampOptions: PropTypes.shape({\n showElapsedTime: PropTypes.bool,\n displayShortDateTime: PropTypes.bool\n })\n }\n\n _onClick() {\n const { onClick, index } = this.props;\n\n if (onClick) {\n onClick(index);\n }\n }\n\n render() {\n const {\n alert: {\n '@Headline': title,\n '@Bulletin': bulletin,\n '@StartTime': publishDate,\n backgroundColor = '#d20202'\n } = {},\n expanded = false,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n } = {}\n } = this.props;\n const formattedBulletin = bulletin.toLowerCase().replace(/(\\/.*(\\d{6}t\\d{4}z(\\.|-)?){1,3}.*\\/\\n)|((\\D{0,3}\\d{3,}(-|>))+(\\d{3,6})?\\n)|(&&(.*\\n)+\\$\\$)/g, '');\n const formattedDate = formatWsiDate(publishDate);\n const category = getWeatherCategoryFromCondition(title);\n\n return (\n \n
\n
\n
this._onClick()}>\n
{title} \n \n \n {expanded ?
') }} />\n : null}\n
\n
' + html + '
').text();\n }\n\n _cleanXmlObj(arr) {\n return arr.map(obj => ({\n ...obj, \n title: obj.title._cdata, \n description: obj.description._text,\n pubDate: obj.pubDate._text,\n enclosure: obj.enclosure ? {\n ...obj.enclosure,\n '@type': obj.enclosure._attributes.type,\n '@url': obj.enclosure._attributes.url,\n } : {}\n }));\n }\n\n render() {\n if (!this.props.FRN_rawResponses || this.props.FRN_rawResponses.length === 0) {\n return null;\n }\n\n let dataStr = this.props.FRN_rawResponses[0].data;\n try {\n if (dataStr && typeof dataStr === 'string') {\n this.props.FRN_rawResponses[0].data = convert.xml2js(dataStr, {compact: true});\n this.props.FRN_rawResponses[0].data.rss.channel.item = this._cleanXmlObj(this.props.FRN_rawResponses[0].data.rss.channel.item);\n }\n } catch (error) {\n console.log(error);\n }\n\n const {\n title,\n titleType,\n timestampOptions: {\n showElapsedTime,\n displayShortDateTime\n } = {},\n FRN_rawResponses: [\n {\n data: {\n rss: {\n channel: {\n item: [\n blogItem = null\n ] = []\n } = {}\n } = {}\n } = {}\n } = {}\n ] = []\n } = this.props;\n const blog = _.isArray(blogItem) ? blogItem[0] : blogItem;\n\n if (!blog) {\n return null;\n }\n\n const {\n pubDate: publishDate = '',\n title: blogTitle = '',\n link = '',\n 'content:encoded': contentEncoded = '',\n description = ''\n } = blog;\n\n // TODO: Find a better way to fix this\n // Typecast uses 'content:encoded'\n const blogHtml = contentEncoded || _.unescape(description);\n const blogImageUri = this._getImageUri(blog, blogHtml);\n\n let textContent = this._getTextContent(blogHtml);\n if (_.size(textContent) > 200) {\n textContent = textContent.substr(0, 200) + '...';\n }\n\n /* Breakpoints: XS: 0-767, S: 768-991, M: 992-1199, L: 1200-1469, XL: 1470- */\n const imageBreakpoints = [\n { \"maxWidth\": 640, \"widthVW\": 100 },\n { \"maxWidth\": 768, \"widthVW\": 100 },\n { \"maxWidth\": 992, \"widthPX\": 992 },\n { \"maxWidth\": 1200, \"widthPX\": 1200 },\n { \"widthPX\": 1410 },\n ];\n\n return (\n \n
\n
\n
\n {/* The following image tag is here for accessibility purposes */}\n {blogImageUri ?
\n
\n
{blogTitle} \n
\n {textContent} \n
\n
\n \n
\n \n
\n
\n
\n
\n
this._removeRadarCover()}\n />\n \n
\n { _generateRoutesWithPage({ routes, page }) }\n \n );\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/routes.js","/** The size mapping below is taken from legacy web and WorldNow.AdMan */\nconst AD_SIZE_MAPPING = {\n 1: { width: 468, height: 60 },\n 14: { width: 120, height: 600 },\n 16: { width: 1, height: 1 },\n 17: { width: 1, height: 1 },\n 18: { width: 120, height: 240 },\n 20: { width: 180, height: 150 },\n 21: { width: 88, height: 31 },\n 22: { width: 490, height: 25 },\n 23: { width: 120, height: 240 },\n 24: { width: 120, height: 15 },\n 26: { width: 120, height: 60 },\n 27: { width: 120, height: 60 },\n 28: { width: 120, height: 60 },\n 35: { width: 180, height: 150 },\n 40: { width: 468, height: 60 },\n 41: { width: 728, height: 90 },\n 42: { width: 160, height: 600 },\n 43: { width: 300, height: 250 },\n 44: { width: 300, height: 75 },\n 45: { width: 1, height: 1 },\n 46: { width: 728, height: 90 },\n 47: { width: 300, height: 150 },\n 49: { width: 500, height: 300 },\n 50: { width: 300, height: 175 },\n 52: { width: 300, height: 250 },\n 54: { width: 645, height: 300 },\n 63: { width: 300, height: 600 },\n 85: { width: 850, height: 30 },\n 86: { width: 980, height: 30 },\n 101: { width: 300, height: 150 },\n 103: { width: 320, height: 250 },\n 104: { width: 468, height: 60 },\n 105: { width: 320, height: 50 },\n 106: { width: 320, height: 50 }\n};\n\nconst mapAdSizeById = (id) => {\n return AD_SIZE_MAPPING[id] || {};\n};\n\nexport { mapAdSizeById };\n\n\n\n// WEBPACK FOOTER //\n// ./app/utils/AdUtils.js","import {orderBy, groupBy, get } from 'lodash';\n\nconst orderByCriteria = (array, path, order = 'asc') => {\n return (\n orderBy(array, item => {\n return get(item, path, '');\n }, [order])\n );\n};\n\nconst groupByCriteria = (array, path, order = 'asc') => {\n return groupBy(array, item => {\n return get(item, path, '');\n }, [order]);\n};\n\nexport { orderByCriteria, groupByCriteria };\n\n\n\n// WEBPACK FOOTER //\n// ./app/utils/OrderGroupByUtils.js","const buildMetaTags = ({ description = '', keywords = '', robots = '', title = ''}) => {\n return ([\n {\n name: 'description',\n content: description\n },\n {\n name: 'keywords',\n content: keywords\n },\n {\n name: 'robots',\n content: robots\n },\n {\n property: 'og:title',\n content: title\n },\n {\n property: 'og:type',\n content: 'article'\n },\n {\n property: 'og:description',\n content: description\n }, {\n name: 'twitter:card',\n content: 'summary_large_image'\n },\n {\n name: 'twitter:description',\n content: description\n },\n {\n name: 'twitter:title',\n content: title\n }\n ]);\n};\n\nexport { buildMetaTags };\n\n\n\n// WEBPACK FOOTER //\n// ./app/utils/SeoUtils.js","const PROTOCOL = process.env.FEED_PROTOCOL || 'https';\n\nexport default {\n port: parseInt(process.env.PORT, 10) || 3000,\n\n redisEndpoint: 'localhost',\n\n privateRepo: {\n registry: `${PROTOCOL}://next.managewnow.manageddev1.worldnow.com:5005/`,\n username: 'frankly',\n password: 'frankly',\n email: 'frankly@franklyinc.com',\n defaultPackage: 'wnow'\n },\n\n // Set this to simulate specific affiliate site. This is usually used locally\n // in a development environment. e.g., kdrv.web.franklyinc.com\n //\n defaultConfigHost: '0.0.0.0',\n\n apiEndpoint: process.env.API_ENDPOINT || 'https://platform-qa.franklyinc.com'\n\n // AMS endpoint.\n //\n // amsEndpoint: {\n // url: 'https://parse.franklyinc.com/classes/AppConfig',\n // headers: {\n // 'X-Parse-Application-Id': 'wPJuyJsloZ14Rx7rUIk1BLLlpmrVt7rHqD5w3iza'\n // }\n // }\n};\n\n\n\n// WEBPACK FOOTER //\n// ./server/config/development.js","export default {\n locales: ['en', 'fr'],\n\n port: parseInt(process.env.PORT, 10) || 3010,\n\n redisPort: 6379,\n redisEndpoint: 'frankly-platform.ahuod3.ng.0001.use1.cache.amazonaws.com',\n\n privateRepo: {\n registry: 'http://npm.franklyinc.com:80/',\n username: 'frankly',\n password: 'frankly',\n email: 'frankly@franklyinc.com',\n defaultPackage: 'wnow'\n },\n\n // Set this to simulate specific affiliate site. This is usually used locally\n // in a development environment. e.g., kdrv.web.franklyinc.com\n //\n // defaultConfigHost: '0.0.0.0',\n\n // AMS endpoint.\n //\n amsEndpoint: {\n url: 'http://next.managewnow.worldnow.com/config',\n headers: {\n 'X-Parse-Application-Id': 'wPJuyJsloZ14Rx7rUIk1BLLlpmrVt7rHqD5w3iza'\n }\n },\n\n mailServer: {\n host: \"10.1.10.230\",\n port: 25,\n secure: false,\n connectionTimeout: 300000\n },\n newRelicEnabled: process.env.NEW_RELIC_ENABLED === 'true',\n apiEndpoint: process.env.API_ENDPOINT || 'https://platform.franklyinc.com'\n};\n\n\n\n// WEBPACK FOOTER //\n// ./server/config/production.js","export default {\n redisPort: 6379,\n redisEndpoint: 'frankly-platform-qa.ahuod3.ng.0001.use1.cache.amazonaws.com',\n\n privateRepo: {\n registry: 'http://52.91.30.187/',\n username: 'frankly',\n password: 'frankly',\n email: 'frankly@franklyinc.com',\n defaultPackage: 'wnow'\n },\n\n amsEndpoint: {\n url: 'http://next.managewnow.managedsys1.worldnow.com/config',\n headers: {\n 'X-Parse-Application-Id': 'wPJuyJsloZ14Rx7rUIk1BLLlpmrVt7rHqD5w3iza'\n }\n },\n apiEndpoint: process.env.API_ENDPOINT || 'https://platform-qa.franklyinc.com'\n};\n\n\n\n// WEBPACK FOOTER //\n// ./server/config/qa.js","const getSettings = () => {\n const SSR_AFFILIATES = typeof process.env.SSR_AFFILIATES !== 'undefined'\n ? process.env.SSR_AFFILIATES\n : '';\n\n const SSR_ON = (process.env.SSR_ON === 'false'\n || process.env.SSR_ON === '0') ? false : true;\n\n const SSR_PASSING_REDUX = (process.env.SSR_PASSING_REDUX === 'false'\n || process.env.SSR_PASSING_REDUX === '0') ? false : true;\n\n return {SSR_ON, SSR_AFFILIATES, SSR_PASSING_REDUX};\n};\n\nconst isMatchedAffiliates = (affiliateName) => {\n if (!getSettings().SSR_AFFILIATES) {\n return true;\n }\n let arr = getSettings().SSR_AFFILIATES.split(',').map(str => str.trim());\n let isMatched = false;\n for (let i = 0; i < arr.length; i++) {\n if (arr[i].toLowerCase() === affiliateName.toLowerCase()) {\n isMatched = true;\n break;\n }\n }\n return isMatched;\n};\n\nconst isSSR = (affiliateName) => {\n return getSettings().SSR_AFFILIATES\n ? isMatchedAffiliates(affiliateName) && getSettings().SSR_ON\n : getSettings().SSR_ON;\n};\n\n// if match any of config.notAllowableAPIs, then return false;\nconst isAllowable = (url) => {\n let matched = config.notAllowableAPIs.filter(entry => {\n if (typeof entry === 'object' && entry instanceof RegExp && typeof url === 'string' && url.match(entry)) {\n return true;\n } else if (url === entry) {\n return true;\n }\n return false;\n });\n return matched.length > 0 ? false : true;\n};\n\nconst config = {\n isMatchedAffiliates,\n isSSR,\n isAllowable,\n settings: getSettings(),\n components: { // components not specified here will be assumed client-side rendering only\n 'components/core/Header': {ssr: true},\n 'components/core/CollapsibleHeader': {ssr: true},\n 'components/core/TallHeader': {ssr: true},\n 'components/core/SimpleNavigation': {ssr: true},\n 'components/core/FooterNavigation': {ssr: true},\n 'components/core/Footer': {ssr: true},\n 'components/news/CardContainer': {ssr: true},\n 'components/news/Card': {ssr: true},\n 'components/news/CardList': {ssr: true},\n 'components/news/Clip': {ssr: true},\n 'components/news/Article': {ssr: true},\n 'components/news/ArticleList': {ssr: true},\n 'components/news/NewsBanner': {ssr: true},\n 'components/news/AssociatedContent': {ssr: true},\n 'components/weather/MeteorologistForecast': {ssr: true},\n 'components/media/VideoPlayer': {ssr: true},\n 'components/media/NewsyVideo': {ssr: true},\n 'components/media/LiveStreamVideo': {ssr: true},\n 'components/media/VideoThumbnail': {ssr: true},\n 'components/media/Video': {ssr: true},\n 'components/shared/PageTitle': {ssr: true},\n 'components/custom/ssr/gheader': {ssr: true},\n 'components/custom/ssr/gfooter': {ssr: true},\n 'components/custom/ssr/WeatherTakeover': {ssr: true},\n 'components/shared/CodeBlock': {ssr: true},\n 'components/custom/ssr/HomePageTakeover': {ssr: true},\n 'components/news/Slideshow': {ssr: true},\n 'components/news/ImageSlideshow': {ssr: true},\n 'components/news/CategoryGrid': {ssr: true},\n 'components/weather/StationImages': {ssr: true}\n },\n notAllowableAPIs: [\n /\\$/gi,\n '/api/integrations/wsi/current',\n ]\n};\n\nexport default {ssr: config};\n\n\n\n// WEBPACK FOOTER //\n// ./server/config/ssr.js","export default {\n redisPort: 6379,\n redisEndpoint: 'frankly-platformdemo.ahuod3.ng.0001.use1.cache.amazonaws.com',\n\n privateRepo: {\n registry: 'http://52.91.30.187/',\n username: 'frankly',\n password: 'frankly',\n email: 'frankly@franklyinc.com',\n defaultPackage: 'wnow'\n },\n\n amsEndpoint: {\n url: 'http://next.managewnow.managedua1.worldnow.com/config',\n headers: {\n 'X-Parse-Application-Id': 'wPJuyJsloZ14Rx7rUIk1BLLlpmrVt7rHqD5w3iza'\n }\n },\n apiEndpoint: process.env.API_ENDPOINT || 'https://platform-qa.franklyinc.com'\n};\n\n\n\n// WEBPACK FOOTER //\n// ./server/config/uat.js","const { BROWSER, NODE_ENV } = process.env;\n\nclass AltResolver {\n\n didFetchData = false\n pendingActions = []\n\n resolve(action, setImmediate = (NODE_ENV === 'test')) {\n if (BROWSER && !this.didFetchData) {\n return action();\n } else if (setImmediate) {\n return action();\n }\n\n this.pendingActions = [...this.pendingActions, action];\n }\n\n async dispatchPendingActions() {\n for (const action of this.pendingActions) await action();\n }\n\n}\n\nexport default AltResolver;\n\n\n\n// WEBPACK FOOTER //\n// ./shared/alt-resolver.js","/* eslint react/display-name: 0 */\nimport qs from 'qs';\nimport React from 'react';\nimport debug from 'debug';\nimport { render } from 'react-dom';\nimport { renderToString } from 'react-dom/server';\nimport { Router, RouterContext } from 'react-router';\nimport AltContainer from 'alt-container';\nimport {Provider} from 'react-redux';\nimport {makeStore} from 'lib/redux/store';\nimport intlLoader from 'utils/intl-loader';\nimport InternalServerErrorPage from 'components/core/InternalServerErrorPage';\nimport sysConfig from '../server/config';\n\n// We just need something unique\nconst WrapperDomId = '_universalRender-wrapper';\n\nconst { BROWSER, NODE_ENV } = process.env;\n\nconst toParams = (location) => {\n const queryString = location.split('?')[1];\n\n return queryString ? qs.parse(queryString) : {};\n};\n\n// NOTE: This is disabled by default for performance reasons. Enable when we can fix it.\nconst shouldRenderServerSide = (location) => toParams(location).rendering === 'server';\n\n// NOTE: This is disabled until we have a way to define data needs per component.\nconst shouldPrefetchComponentData = (location) => toParams(location).rendering === 'prefetch';\n\nconst appendData = (html, serializedData, reduxData) => {\n return `\n \n ${html}\n
\n \n \n `;\n};\n\n/* eslint space-before-function-paren:0 */\n// https://github.com/eslint/eslint/issues/4442\nexport default async ({ redux, flux, pageUri: location, renderProps, isSSR }) => {\n if (BROWSER) {\n if (NODE_ENV === 'development') {\n require('alt-utils/lib/chromeDebug')(flux);\n }\n\n // NOTE: flux.bootstrap only takes string\n flux.bootstrap(JSON.stringify(window._franklyInitialData));\n\n let newRedux = makeStore(window._reduxData);\n\n // load the intl-polyfill if needed\n // load the correct data/{lang}.json into app\n const { locales: [ locale ] } = flux.getStore('locale').getState();\n const { messages } = await intlLoader(locale);\n flux.getActions('locale').switchLocale({ locale, messages });\n\n const routes = require('routes');\n const { browserHistory } = require('react-router');\n\n const element = (\n \n \n \n \n );\n\n // `alt-resolver` will respect server setting on the first render\n flux.resolver.didFetchData = shouldRenderServerSide(location) || shouldPrefetchComponentData(location);\n\n // Render element in the same container as the SSR\n render(element, document.getElementById(WrapperDomId));\n\n // Tell `alt-resolver` we have done the first render. Next promises will be resolved.\n flux.resolver.didFetchData = false;\n } else {\n let element = (\n \n \n \n \n );\n\n // const routes = require('routes');\n // const { browserHistory } = require('react-router');\n // element = (\n // \n // \n // \n // \n // );\n\n let app;\n let fluxSnapshot;\n let reduxSnapshot;\n\n try {\n const shouldRender = shouldRenderServerSide(location);\n\n if (shouldRender || shouldPrefetchComponentData(location)) {\n // TODO: Figure out/implement a better way to resolve data dependencies\n // Collect promises with a first render\n debug('dev')('first server render');\n renderToString(element);\n\n await flux.resolver.dispatchPendingActions();\n }\n\n //if (shouldRender) {\n if (isSSR || shouldRender) {\n debug('dev')('second server render');\n app = renderToString(element);\n } else {\n app = ' ';\n }\n\n // TODO: Improve performance by taking partial snapshot\n //fluxSnapshot = flux.takeSnapshot();\n fluxSnapshot = flux.takeSnapshot().replace(/>> Redux stringify error:', reduxError);\n }\n } catch (renderErr) {\n // Catch rendering error, render a 500 page\n debug('koa')('rendering error');\n debug('koa')(renderErr);\n\n fluxSnapshot = flux.takeSnapshot();\n app = renderToString(`), return an array of key/value pairs\n if (Array.isArray(val)) {\n return _.map(val, function(val) {\n // We trim replace any line endings (e.g. `\\r` or `\\r\\n` with `\\r\\n`) to guarantee consistency across platforms\n // These can occur inside of `