// Custom scripts go here /** * * Use this function to adjust the logic which is used when an issue is displayed as locked. * An issue will always be displayed as locked if it is purchasable: true and purchased: false. * The checks defined here are run if the mandatory first check returns false. * * @param issue * @param publicationCache * @param issueCache * * @returns {boolean} */ window.isIssueLocked = function(issue, publicationCache, issueCache) { return false; } /** * Custom UserTags from user data such as bought subscriptions, issues and products. * Type hints are copied from purple/purpleInterface.js * See calculateStorefrontUserTags on how to use this feature. * * >>> Typings copied from gitlab / purple / purple-javascript-api / purpleInterface.js * >>> copies from merge requests are noted before the block */ // >>> AppSubscrption part from MergeReq #42 /** * @typedef {Object} EligibilityInfo * * @property {boolean} [trial] Is user eligible for trial periods. Returns true/false if the server knows that the user can/cannot use a trial or null if not enough data is available to determine eligibility. Trial is only available when returned in store.getPrice-API (PriceInfo). * @property {boolean} introductoryPricing Is user eligible for introductory pricing for this subscription. Introductory pricing is only available when returned in store.getPrice-API (PriceInfo). * @property {boolean} discountOffers Is user eligible for discounted pricing for this subscription. Discounted pricing is only available when returned in store.getPrice-API (PriceInfo). * * * @typedef {Object} CurrentReceiptInfo * * @property {boolean} isTrialPeriod Current subscription period is a trial period. * @property {boolean} isIntroOfferPeriod Current subscription period is a introductory pricing period. * @property {number} expirationDate When purchased, the date of expiration for the current period, in milliseconds since epoch. * @property {number} [autoResumeDate] For paused subscription, the date when the subscription would resume, in milliseconds since epoch. NOTE: A paused subscription will have purchased set to false and a non-null value of autoResumeDate. * @property {boolean} autoRenewing When false the subscription was cancelled by the user and will end after the current subscription period. * * * @typedef {Object} HistoricReceiptInfo * * @property {boolean} hadPurchased User has purchased this subscription in the past. * @property {boolean} hadIntroductoryPricing User has previously used introductory pricing for this subscription. * @property {boolean} hadTrial User has previously used a trial for this subscription. * * * @typedef {Object} AppSubscription * * @property {string} id * @property {string} name * @property {string} description * @property {string} type * @property {"ONE_MONTH" | "TWO_MONTHS" | "THREE_MONTHS" | "SIX_MONTHS" | "ONE_YEAR"} duration * @property {boolean} hidden * @property {string} productId * @property {string} [groupId] iOS only: The group identifier for this subscription. * @property {boolean} purchased * @property {number} [expirationDate] When purchased, the date of expiration for the current period, in milliseconds since epoch. * @property {number} [autoResumeDate] For paused subscription, the date when the subscription would resume, in milliseconds since epoch. NOTE: A paused subscription will have purchased set to false and a non-null value of autoResumeDate. * @property {boolean} autoRenewing When false the subscription was cancelled by the user and will end after the current subscription period. * @property {boolean} [isEligibleForTrial] Is user eligible for trial periods. Returns true/false if the server knows that the user can/cannot use a trial or null if not enough data is available to determine eligibility. Trial is only available when returned in store.getPrice-API (PriceInfo). * @property {boolean} isEligibleForIntroductoryPrice Is user eligible for introductory pricing for this subscription. Introductory pricing is only available when returned in store.getPrice-API (PriceInfo). * @property {EligibilityInfo} eligibilityInfo Information about eligibility for trials, introductory pricing and discount offers. * @property {CurrentReceiptInfo} [currentReceiptInfo] Current or latest receipt for this subscription. If subscription lapsed it will still provide information about the last subscription period. * @property {HistoricReceiptInfo} historicReceiptInfo Historic data for this subscription. Contains information about the complete history of the subscription. * * @property {Map} thumbnails The default thumbnail is always available under the default-key. Additional thumbnails can be available under separate unique keys. * @property {Map} properties * @property {Object} publications * * * @typedef {Object} CatalogIssue * * @property {string} id * @property {string} publicationId * @property {number} version * @property {string} name * @property {string} [description] * @property {string} [alias] null, if not available * @property {string} [externalIssueId] null, if not available * @property {number} publicationDate * @property {boolean} comingSoon * @property {number} index * @property {number} contentLength * @property {number} numberOfPages * @property {boolean} purchasable * @property {boolean} purchased * @property {("APP_STORE_PURCHASE", "APP_STORE_SUBSCRIPTION", "ENTITLEMENT", "SUBSCRIPTION_CODE", "TRIAL")[]} purchasedBy * @property {string} [productId] * @property {Map} properties * @property {Map} thumbnails The default thumbnail is always available under the default-key. Additional thumbnails can be available under separate unique keys. * @property {string[]} categories * @property {string[]} tags * @property {CatalogPreviewIssue} [previewIssue] * @property {CatalogIssueState} state * * >>> from MergeReq #37 * * @typedef {("BACK_ISSUE_COMPLETION")} PublicationProductType * * @typedef {Object} PublicationProduct * * @property {string} id * @property {string} name * @property {string} description * @property {PublicationProductType} type * @property {boolean} hidden * @property {string} productId * @property {boolean} purchased * @property {number} orderIndex * * @property {Map} thumbnails The default thumbnail is always available under the default-key. Additional thumbnails can be available under separate unique keys. * @property {Map} properties * * @property {Object} publications * * @typedef {Object} PublicationProductPublication * @property {string} publicationId * @property {UnlockableIssue[]} unlockableIssues all unpurchased issues older than current pub issue (currentIssueId) * * This function gets called to calculate the user tags. * Tags, which are set to true can be accessed through $context.userTags. IS_SET * !!! Must always return all possible tags, else the tracking service can't remove unused tags. !!! * @param {AppSubscription[]} subs purchased subscriptions * @param {CatalogIssue[]} issues all purchased Issues * @param {PublicationProduct[]} pubProds all purchased publication products (TODO: check typedef after merge of #37) */ window.calculateStorefrontUserTags = (subs, issues, pubProds) => { return {} } window.$functions = { arrayEmptyClass: (arr) => (!arr || arr.length > 0) ? '' : 'empty', getCategoryWithoutHighlighted: (categoriesArr) => (arr && arr.find(c => c !== 'highlighted')) || '', /** * @param {string | undefined} urlParamValue * @returns Capiltaized string with fallback to lookup the message for ARCHIVE_DYN_HEADER/DESCRIPTION */ toArchiveMessageKey: (urlParamValue) => urlParamValue ? urlParamValue.toUpperCase() : 'REPLICA', getContext: (context) => { console.log(context); return '1234'; }, } /* Zephr integration this scripts loads the zephr CDN API and calls the `zephrBrowser.run()` method after navigation The necessary URLs are configured in storefront/assets/zephr-config.json */ const url = new URL(window.location.href) // don't run integration for dev environment or non-zephr cdn let isDevEnvironment = url.hostname === 'localhost' || url.hostname.includes('purplemanager.com') if (url.searchParams.has('debug-zephr-script')) { // allows to run the script even on localhost isDevEnvironment = false; } //const isDevEnvironment = false; async function waitForPurpleService() { while (!window.PurpleService || !window.PurpleService.getCatalogContents) { await new Promise(res => setTimeout(res, 10)) } } window.zephrIntegration = () => { console.log('init zephrIntegration') // === Zephr integration === // fetch doesn't work on non-http schema, copied from purple-web / commons / util.ts const loadJson = (url) => new Promise((resolve, reject) => { // use fetch for ssr storefront, xhrrequest for apps if (window.XMLHttpRequest) { const xhr = new XMLHttpRequest(); xhr.addEventListener('load', () => { if (xhr.status >= 400) { reject({ message: '' + xhr.status }); } try { resolve(JSON.parse(xhr.responseText)); } catch (e) { reject({ message: 'No JSON' }); } }); xhr.addEventListener('error', () => { reject({ message: 'Unknown Error' }); }); xhr.open('GET', url); xhr.send(); } else { fetch(url).then(r => r.json()).then(resolve).catch(reject); } }); // load config /** * The config stored in storefront/assets/zephr-config.json * @type { undefined | { scriptUrl: string, baseUrl: string }} */ window.zephrConfig = undefined // await this to check if you are in SSR context or SSR-Client code AND the interactive page is loaded // Hack to make missing preboot completed event work: always resolve after 1000ms const prebootCompleted = Promise.race([ new Promise(res => document.addEventListener('PrebootComplete', res)), // if no apps are in prebootData array, the preboot phase is already finished new Promise(res => { if (window.prebootData.apps.length === 0) res(); }) ]); const PROD_ZEPHR_CONFIG = 'https://members.todaysgolfer.co.uk/delivery/web/dynamicResources/dd50162e-7e84-4af8-9c43-664f321e66d8/storefront/assets/zephr-config.json?preview=false'; function initGtm(gtmCode) { var gtmScript = document.createElement('script'); gtmScript.type = 'text/javascript'; gtmScript.text = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push( {'gtm.start': new Date().getTime(),event:'gtm.js'} );var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.hdcimplant.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','${gtmCode}');`; document.head.insertBefore(gtmScript, this.document.head.firstChild); } /** * Don't start when dev environment * @type {undefined | Promise} Promise if loading, undefined if loaded (no need to wait anymore) */ let zephrLoadPromise = (!isDevEnvironment) && loadJson(PROD_ZEPHR_CONFIG).then(c => { window.zephrConfig = c; if (c.gtmCode) { initGtm(c.gtmCode); } else { console.error(`Missing "gtmCode" in zephr-config.json`) } const zephrScript = document.createElement('script'); document.head.appendChild(zephrScript); zephrScript.src = window.zephrConfig.scriptUrl; return new Promise(res => zephrScript.onload = res); }) let loadContentResolve; let updateCounter = 0 /** * store last setTimeout to cancel when a new view change happened */ let lastViewChangeTimeout = undefined let firstViewUrl = location.href /** * @param {{ * event: AngularRouterEvent, * viewContext: StorefrontViewContext * }} params */ async function onViewChange(params) { if (updateCounter === 1 && firstViewUrl === location.href) { console.log('Skipping double call to zephr API'); return; } window.dataLayer = window.dataLayer || []; window.dataLayer.push({event: 'SPA-pageview'}); updateCounter++; if (isDevEnvironment) { // remove div after client side rendering was done const removeCover = (count) => { const COVER_ID = 'content-cover-container' let coverDiv = document.querySelector(`#${COVER_ID}`); let storefrontElParent = coverDiv && coverDiv.closest('storefront-element'); if (storefrontElParent) { storefrontElParent.remove() } else if (count < 3) setTimeout(() => removeCover(count + 1), 100) else { console.warn(`Tried to remove cover container with id ${COVER_ID} (the closest storefront-element parent) ${count} times, not found`) } } prebootCompleted.then(() => removeCover(0)) } if (isDevEnvironment) return; const loadContentPromise = new Promise(function(resolve, reject){ loadContentResolve = resolve; }); if (lastViewChangeTimeout) { clearTimeout(lastViewChangeTimeout); lastViewChangeTimeout = undefined; } //console.log('onViewChange', params.viewContext); // either the post (if in bundle view) or the content (if viewing a post) let ctnt = params.viewContext.post || params.viewContext.content || params.viewContext.collection?.[0]; if (!ctnt) { // extract post and bundle from slugs in url (=dynamic URL) /read/.... // if URL schema changes, adapt here const DYNAMIC_PATH_REGEX = /\/read\/(?[\w\d-]+)(?\/([\w\d-]+))?/g const match = DYNAMIC_PATH_REGEX.exec(window.location.href) if (match) { const firstSlug = match.groups.slug1 const secondSlug = (match.groups.slug2)?.substr(1) const postSlug = secondSlug || firstSlug console.log('detected slugs', firstSlug, secondSlug) const t0 = performance.now(); await waitForPurpleService(); const t1 = performance.now(); console.log(`Call to waitForPurpleService() took ${t1 - t0} milliseconds.`); ctnt = (await window.PurpleService.getCatalogContents({ contentFilter: { AND: [ { properties: { key: 'slug', value: postSlug } }, { contentType: { value: 'ISSUE', negated: true } } ] }, first: 1 })).nodes[0]; console.log('got content from slug ' + postSlug, ctnt) } } let bundle = ctnt let fetchBundlePromise = Promise.resolve() // case when content is opened as single post -> first element is Post and not the bundle if (bundle && bundle.contentType !== 'BUNDLE') { // try to get the "real bundle" await waitForPurpleService(); fetchBundlePromise = window.PurpleService.getCatalogContents({ contentFilter: { AND: [ { contentType: { value: 'BUNDLE' } }, { properties: { key: 'purple_source_issue', value: ctnt.properties.purple_source_issue } } ] }, first: 1 }).then(page => { // set bundle if (page.nodes.length) { bundle = page.nodes[0] } else { console.warn('failed to find bundle for', ctnt) } }) } else if (bundle) { console.log('bundle data already present') } // wait for config and script load if not already happened if (zephrLoadPromise instanceof Promise) { await zephrLoadPromise; zephrLoadPromise = undefined; } // await the Preboot phase, should instantly resolve once the page is interactive // bundle should be the right await Promise.all([prebootCompleted, fetchBundlePromise]); console.log('zephr script loaded and client-side preboot phase finished'); // should be available from the loaded script if (!window.zephrBrowser || !window.zephrBrowser.run) { console.error('missing function zephrBrowser.run from' + zephrConfig.scriptUrl); return; } lastViewChangeTimeout = setTimeout(async () => { try { if (!ctnt) { console.log('>>>> calling zephr API without any custom data'); window.zephrBrowser.run(zephrConfig.baseUrl); } else if (ctnt.contentType === 'BUNDLE' && !location.href.includes("collection-details")) { // if ctnt is bundle, seems like we navigated to a route that has /read/ an will redirect to the first article shortly console.log('content found was bundle, waiting for redirect'); } else { let bauerProductCode = ctnt.properties.bauerProductCode || (bundle && bundle.properties.bauerProductCode) || zephrConfig.defaultBauerProductCode; if (!bauerProductCode) { console.warn('zephr-config.json is missing key "defaultBauerProductCode", fallback to cw1'); bauerProductCode = 'cw1'; } let contentTier; if (ctnt.properties.content_tier === 'gated') { contentTier = 'gated'; } else if (ctnt.access === 'FREE') { contentTier = 'free'; } else { contentTier = 'paid'; } console.log(`>>>> calling zephr API base bauerProductCode: ${bauerProductCode} contentTier: ${contentTier}`); const args = { cdnApi: zephrConfig.baseUrl, customData: { contentTier, bauerProductCode } }; await loadContentPromise; window.zephrBrowser.run(args); } lastViewChangeTimeout = undefined; } catch (e) { console.warn('Zephr API failed:', e); } }, 500); } console.log('installed storefrontHooks') window.storefrontHooks = { onNavigationEnd(params) { console.log('onNavigationEnd', params) onViewChange(params); }, onContentLoaded() { console.log('onContentLoaded Hook') loadContentResolve() } }; if (!window.document.body.classList.contains('loaded')) { window.document.body.classList.add('loaded') } // TODO: maybe make sure that it is only called once for the first page? onViewChange({ viewContext: {} }); }; /* replace all '-' in the category names with whitespaces */ window.onscroll = function() { let categories = document.getElementsByClassName('issue-category'); for(let i = 0; i < categories.length; i++){ let spans = categories[i].getElementsByTagName('span'); for(let j = 0; j < spans.length; j++){ let span = spans[j]; let text = span.innerHTML.replaceAll('-',' '); span.innerHTML = text; } } } document.addEventListener("keydown", function (e) { if (e.key === "Enter") { ampersand(); } }); window.onload = ampersand(); function ampersand() { setTimeout(function(){ let titles = document.getElementsByClassName('issue-title'); for(let i = 0; i < titles.length; i++){ let text = titles[i].innerHTML.replaceAll('&','&'); titles[i].innerHTML = text; } }, 3000) } window.onload = function(){ document.querySelectorAll('[src="value"]'); }; loadZephrDataLayer(); window.zephrIntegration(); window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { document.getElementById('current-year').innerHTML = new Date().getFullYear(); }, 500); }); document.addEventListener('zephr.browserDecisionsFinished', () => { const content = document.getElementsByClassName("content-full-body"); if (content && content.length > 0) content[0].style.display = 'block'; }) function loadZephrDataLayer() { console.log("Zephr data layer"); window.Zephr = window.Zephr || {}; window.Zephr.includeOutcomes = true; window.Zephr.outcomesAsEvents = true; window.Zephr.groupFields = true; (function() { var xhr = new(XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0'); xhr.open('GET', '/blaize/datalayer', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { var response; try { response = JSON.parse(xhr.response); } catch (e) { response = xhr.response; } if (xhr.status === 200) { for (var dataLayerFieldName in response) { if (!(dataLayerFieldName in window)) window[dataLayerFieldName] = []; var pageView = response[dataLayerFieldName]; var events = []; if (window.Zephr && window.Zephr.includeOutcomes && window.Zephr.outcomes) { pageView.zephrOutcomes = window.Zephr.outcomes; if (window.Zephr.outcomesAsEvents) { Object.keys(window.Zephr.outcomes || []).forEach(function(outcomeKey) { var outcomeEvent = { event: "zephr-outcome-" + outcomeKey, featureId: outcomeKey, featureLabel: window.Zephr.outcomes[outcomeKey].featureLabel, outcomeId: window.Zephr.outcomes[outcomeKey].outcomeId, outcomeLabel: window.Zephr.outcomes[outcomeKey].outcomeLabel, }; events.push(outcomeEvent); }); } } if (window.Zephr && window.Zephr.accessDetails) { Object.keys((window.Zephr.accessDetails.trials || {})).forEach(function(trialId){ var trial = window.Zephr.accessDetails.trials[trialId] if(trial.reportInDataLayer){ var usedCredits = trial.totalCredits - trial.remainingCredits if (window.Zephr.groupFields && !pageView.zephrTrials) pageView.zephrTrials = {}; var target = window.Zephr.groupFields ? pageView.zephrTrials : pageView if (trial.dataLayerCreditsUsedKey) { target[trial.dataLayerCreditsUsedKey] = usedCredits; } if (trial.dataLayerCreditsRemainingKey) { target[trial.dataLayerCreditsRemainingKey] = trial.remainingCredits; } } }); (window.Zephr.accessDetails.trialTrackingDetails || []).forEach(function(details) { var type = details.entitlementType === 'credits' ? 'credits' : 'meters'; var trial = (window.Zephr.accessDetails[type] || {})[details.entitlementId]; if (!trial) return; if (window.Zephr.groupFields && !pageView.zephrTrials) pageView.zephrTrials = {}; if (details.creditsRemainingKey) { if (window.Zephr.groupFields) { pageView.zephrTrials[details.creditsRemainingKey] = trial.remainingCredits; } else { pageView[details.creditsRemainingKey] = trial.remainingCredits; } } if (details.creditsUsedKey) { if (window.Zephr.groupFields) { pageView.zephrTrials[details.creditsUsedKey] = trial.totalCredits - trial.remainingCredits; } else { pageView[details.creditsUsedKey] = trial.totalCredits - trial.remainingCredits; } } }); try { (Object.keys(window.Zephr.accessDetails.timeTrials || {})).forEach(function(timeTrialId) { var timeTrial = window.Zephr.accessDetails.timeTrials[timeTrialId] if(timeTrial.reportInDataLayer){ if (window.Zephr.groupFields && !pageView.zephrTrials) pageView.zephrTrials = {}; var target = window.Zephr.groupFields ? pageView.zephrTrials : pageView if (timeTrial.dataLayerTrialDurationKey) { target[timeTrial.dataLayerTrialDurationKey] = timeTrial.trialDuration; } if (timeTrial.dataLayerTrialDurationUnitsKey) { target[timeTrial.dataLayerTrialDurationUnitsKey] = timeTrial.trialDurationUnits; } if (timeTrial.dataLayerTrackerEntryTimeKey) { target[timeTrial.dataLayerTrackerEntryTimeKey] = timeTrial.entryTime; } if (timeTrial.dataLayerTrackerHitsKey) { target[timeTrial.dataLayerTrackerHitsKey] = timeTrial.trackerHits; } if (timeTrial.dataLayerTrialTimeRemainingKey) { target[timeTrial.dataLayerTrialTimeRemainingKey] = timeTrial.timeRemainingInTrial; } } }); } catch (err) { console.error("Error aggregating Zephr time trials", err); } } if (Object.keys(pageView).length) { pageView.event = "zephr-pageview"; events.unshift(pageView); } if (!events.length) continue; events.forEach(function(event) { window[dataLayerFieldName].push(event); }); } var readyEvent = document.createEvent('Event'); readyEvent.initEvent('zephr.dataLayerReady', true, true); document.dispatchEvent(readyEvent); } } } xhr.send({}); })(); }