@ta-interaktiv/react-masthead
Version:
Display the masthead in standalone projects.
188 lines (179 loc) • 11.6 kB
JavaScript
;
var React = require('react');
var reactShareButtons = require('@ta-interaktiv/react-share-buttons');
var reactWaypoint = require('react-waypoint');
require('@ta-interaktiv/semantic-ui/semantic/dist/components/container.css');
var parseHostname = require('@ta-interaktiv/parse-hostname');
var reactHelmet = require('react-helmet');
var reactPaywall = require('@ta-interaktiv/react-paywall');
var reactTracking = require('@ta-interaktiv/react-tracking');
var apiAccess = require('@ta-interaktiv/api-access');
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var ScrollTracking = function () { return (React.createElement(reactWaypoint.Waypoint, { scrollableAncestor: window, onLeave: function (_a) {
var currentPosition = _a.currentPosition;
if (currentPosition === reactWaypoint.Waypoint.above) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'Interactions',
event_action: 'vertical-scroll',
event_label: 'startReading'
});
}
} })); };
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".masthead-module_mastheadComponent__qAqXB {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 100;\n padding: 0;\n background-color: #fff;\n color: var(--text-color);\n}\n\n.inverted {\n background-color: transparent;\n}\n\n.masthead-module_grid__TNhVH {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 3rem;\n}\n.masthead-module_grid__TNhVH > * {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 33%;\n flex: 1 1 33%;\n}\n\n.masthead-module_logoContainer__BDn1Y {\n display: block;\n}\n\n.masthead-module_logo__2pTCk {\n margin: 1.5ex 0;\n max-height: 3ex;\n min-width: 3ex;\n display: none;\n}\n\n.masthead-module_fullLogo__OZPZx {\n max-width: 100%;\n}\n@media screen and (min-width: 600px) {\n .masthead-module_fullLogo__OZPZx {\n display: block;\n }\n}\n\n.masthead-module_iconOnly__RnVpD {\n max-width: 3ex;\n}\n@media screen and (max-width: 599px) {\n .masthead-module_iconOnly__RnVpD {\n display: block;\n }\n}\n\n.masthead-module_middleContent__eXKxa {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n margin: 0 1rem;\n}\n@media screen and (max-width: 599px) {\n .masthead-module_middleContent__eXKxa {\n display: none;\n }\n}\n\n.masthead-module_shareButtons__1PI6m {\n text-align: right;\n line-height: 1em;\n white-space: nowrap;\n}\n\n.masthead-module_mastheadComponent__qAqXB + * > *:first-child > *:first-child:before {\n content: \"\";\n display: block;\n height: 4.5rem;\n}";
var styles = {"mastheadComponent":"masthead-module_mastheadComponent__qAqXB","grid":"masthead-module_grid__TNhVH","logoContainer":"masthead-module_logoContainer__BDn1Y","fullLogo":"masthead-module_fullLogo__OZPZx masthead-module_logo__2pTCk","iconOnly":"masthead-module_iconOnly__RnVpD masthead-module_logo__2pTCk","middleContent":"masthead-module_middleContent__eXKxa","shareButtons":"masthead-module_shareButtons__1PI6m"};
styleInject(css_248z);
var Masthead = function (props) {
var _a = props.mediaName, mediaName = _a === void 0 ? 'tagesanzeiger' : _a, _b = props.inverted, inverted = _b === void 0 ? false : _b, _c = props.clickHandler, clickHandler = _c === void 0 ? function () { } : _c, _d = props.homepage, homepage = _d === void 0 ? '//www.tagesanzeiger.ch' : _d, _e = props.fullMediaName, fullMediaName = _e === void 0 ? 'Tages-Anzeiger' : _e, url = props.url;
var invertedClass = inverted ? 'inverted' : '';
var invertedImgSrcName = inverted ? '-inverted' : '';
var _f = React.useState(false), isInApp = _f[0], setIsInApp = _f[1];
React.useEffect(function () {
setIsInApp(new URL(window.location.href).searchParams.has('appwebview'));
}, []);
return (React.createElement("div", { className: "ta-masthead masthead-component ".concat(invertedClass, " ").concat(styles.mastheadComponent) },
React.createElement("div", { className: 'ui container ' },
React.createElement("div", { className: styles.grid },
React.createElement("a", { href: homepage, className: styles.logoContainer },
React.createElement("img", { src: "//interaktiv.tagesanzeiger.ch/static/icons/".concat(mediaName).concat(invertedImgSrcName, ".svg"), alt: fullMediaName, className: styles.iconOnly }),
React.createElement("img", { src: "//interaktiv.tagesanzeiger.ch/static/logos/".concat(mediaName).concat(invertedImgSrcName, ".svg"), alt: fullMediaName, className: styles.fullLogo })),
React.createElement("div", { className: styles.middleContent }, props.children),
React.createElement("div", { className: styles.shareButtons }, !isInApp && (React.createElement(reactShareButtons.PureShareButtons, __assign({}, props, { url: url, clickHandler: clickHandler })))))),
React.createElement(ScrollTracking, null)));
};
var PolymorphicMasthead = (function (_super) {
__extends(PolymorphicMasthead, _super);
function PolymorphicMasthead() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.parsedHostname = parseHostname.parseHostname();
_this.articleId = _this.props.articleId;
_this.state = {
locale: _this.props.locale,
clickHandler: function (shareType, event) {
_this.props.clickHandler && _this.props.clickHandler(shareType, event);
reactShareButtons.defaultClickHandler(_this.articleId, shareType, _this.parsedHostname.publicationName, _this.props.url);
},
homepage: _this.props.homepage || "//www.".concat(_this.parsedHostname.publicationDomain),
mediaName: _this.props.mediaName || _this.parsedHostname.publicationName,
fullMediaName: _this.props.fullMediaName || '',
title: window.document.title.toString()
};
_this.errorHandler = function (e) {
console.warn('[Masthead] Could not load data for article ID ' + _this.props.articleId, e);
};
return _this;
}
PolymorphicMasthead.prototype.render = function () {
var paywallIsReady = this.state.doc_type && this.state.main_channel && this.state.sub_channel;
return (React.createElement(Masthead, __assign({}, this.props, this.state),
React.createElement(React.Fragment, null,
React.createElement(reactHelmet.Helmet, { titleTemplate: "%s ".concat(this.state.fullMediaName ? '| ' + this.state.fullMediaName : '') },
React.createElement("title", null, this.state.title)),
this.props.enablePaywall && paywallIsReady && (React.createElement(reactPaywall.Paywall, { isEnabled: this.props.enablePaywall, paywallContainerId: this.props.paywallContainerId, paywallConfiguration: {
cms_id: parseInt(this.props.articleId),
doc_type: this.state.doc_type || 'article',
main_channel: this.state.main_channel,
sub_channel: this.state.sub_channel
} })),
this.state.gtmId && (React.createElement(reactTracking.Tracking, { articleId: this.props.articleId, gtmId: this.state.gtmId })),
this.props.children)));
};
PolymorphicMasthead.prototype.componentDidMount = function () {
var _this = this;
apiAccess.getLanguage(this.parsedHostname.publicationName).then(function (lang) {
_this.setState({ locale: lang });
});
apiAccess.getNiceName(this.parsedHostname.publicationName).then(function (name) {
_this.setState({ fullMediaName: _this.props.fullMediaName || name });
});
apiAccess.getFacebookAppId(this.parsedHostname.publicationName).then(function (id) {
_this.setState({ facebookAppId: id });
});
apiAccess.getTitle(this.parsedHostname.publicationName, this.props.articleId)
.then(function (title) {
_this.setState({ title: title || window.document.title });
})
.catch(this.errorHandler);
apiAccess.getLead(this.parsedHostname.publicationName, this.props.articleId)
.then(function (lead) {
_this.setState({ lead: lead });
})
.catch(this.errorHandler);
apiAccess.getDocType(this.parsedHostname.publicationName, this.props.articleId)
.then(function (docType) {
_this.setState({ doc_type: docType });
})
.catch(this.errorHandler);
apiAccess.getCategory(this.parsedHostname.publicationName, this.props.articleId)
.then(function (category) {
_this.setState({ main_channel: category });
})
.catch(this.errorHandler);
apiAccess.getSubCategory(this.parsedHostname.publicationName, this.props.articleId)
.then(function (subCategory) {
_this.setState({ sub_channel: subCategory });
})
.catch(this.errorHandler);
apiAccess.getGtmId(this.parsedHostname.publicationName).then(function (id) {
_this.setState({ gtmId: id !== null && id !== void 0 ? id : undefined });
});
};
PolymorphicMasthead.defaultProps = {
enablePaywall: true,
defaultLanguage: 'de',
paywallContainerId: 'paywall_container'
};
return PolymorphicMasthead;
}(React.Component));
exports.Masthead = PolymorphicMasthead;
exports.PolymorphicMasthead = PolymorphicMasthead;
exports.PureMasthead = Masthead;
//# sourceMappingURL=index.js.map