split js into exports, lint files

.eslintignore

@@ -1,8 +1,6 @@
 # Ignore all js directories, delete each as eslint errors are fixed
 src/scripts/datadog-docs.js
-src/scripts/main-dd-js.js
 src/scripts/helpers/moveToAnchor.js
-src/scripts/components/codenav.js
 src/scripts/components/global-modals.js
 src/scripts/components/header.js
 src/scripts/components/platforms.js

src/scripts/components/async-loading.js

@@ -0,0 +1,180 @@
+import { updateTOC, buildTOCMap } from './table-of-contents';
+import codeTabs from './codetabs';
+import datadogLogs from './dd-browser-logs-rum';
+import { redirectToRegion } from '../region-redirects';
+import { initializeIntegrations } from './integrations';
+import { initializeSecurityRules } from './security-rules';
+import {updateMainContentAnchors, reloadWistiaVidScripts, gtag } from '../helpers/helpers';
+import configDocs from '../config/config-docs';
+
+const { env } = document.documentElement.dataset;
+const { gaTag } = configDocs[env];
+
+
+function loadPage(newUrl) {
+    // scroll to top of page on new page load
+    window.scroll(0, 0);
+
+    let mainContent = document.getElementById('mainContent');
+
+    if (mainContent) {
+        const currentTOC = document.querySelector('.js-toc-container');
+
+        const httpRequest = new XMLHttpRequest();
+        httpRequest.onreadystatechange = function () {
+            // cancel httprequest if hash is changed to prevent page replacing
+            window.addEventListener('hashchange', function () {
+                httpRequest.abort();
+            });
+
+            if (httpRequest.readyState !== XMLHttpRequest.DONE) {
+                return;
+            }
+
+            const newDocument = httpRequest.responseXML;
+
+            if (newDocument === null) {
+                return;
+            }
+
+            const mainContentWrapper = document.querySelector(
+                '.mainContent-wrapper'
+            );
+            const newmainContentWrapper = httpRequest.responseXML.querySelector(
+                '.mainContent-wrapper'
+            );
+
+            const newContent = httpRequest.responseXML.getElementById(
+                'mainContent'
+            );
+            const newTOC = httpRequest.responseXML.querySelector(
+                '.js-toc-container'
+            );
+
+            if (newContent === null) {
+                return;
+            }
+
+            document.title = newDocument.title;
+
+            const meta = {
+                itemprop: ['name', 'description'],
+                name: [
+                    'twitter\\:site',
+                    'twitter\\:title',
+                    'twitter\\:description',
+                    'twitter\\:creator'
+                ],
+                property: [
+                    'og\\:title',
+                    'og\\:type',
+                    'og\\:url',
+                    'og\\:image',
+                    'og\\:description',
+                    'og\\:site_name',
+                    'article\\:author'
+                ]
+            };
+
+            const keys = Object.keys(meta);
+            for (let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                for (let k = 0; k < meta[key].length; k++) {
+                    const selectorPart = meta[key][k];
+                    try {
+                        if (
+                            newDocument.head.querySelector(
+                                `[${key}=${selectorPart}]`
+                            )
+                        ) {
+                            const { content } = newDocument.head.querySelector(
+                                `[${key}=${selectorPart}][content]`
+                            );
+                            document.head.querySelector(
+                                `[${key}=${selectorPart}][content]`
+                            ).content = content;
+                        }
+                    } catch (e) {
+                        console.log(e); // eslint-disable-line no-console
+                    }
+                }
+            }
+
+            // update data-relPermalink
+            document.documentElement.dataset.relpermalink =
+                newDocument.documentElement.dataset.relpermalink;
+
+            // check if loaded page has inline JS. if so, we want to return as script will not execute
+            const hasScript = newContent.getElementsByTagName('script').length;
+
+            // if there is error finding the element, reload page at requested url
+            if (mainContent.parentElement && !hasScript) {
+                mainContent.parentElement.replaceChild(newContent, mainContent);
+                mainContent = newContent;
+
+                // update mainContent-wrapper classes
+                mainContentWrapper.className = `${newmainContentWrapper.classList}`;
+            } else {
+                window.location.href = newUrl;
+            }
+
+            const wistiaVid = document.querySelector(
+                '.wistia [data-wistia-id]'
+            );
+
+            let wistiaVidId;
+            if (wistiaVid) {
+                wistiaVidId = wistiaVid.dataset.wistiaId;
+            }
+
+            initializeSecurityRules();
+
+            // if newly requested TOC is NOT disabled
+            if (newTOC.querySelector('#TableOfContents')) {
+                currentTOC.replaceWith(newTOC);
+                buildTOCMap();
+                updateTOC();
+                updateMainContentAnchors();
+                reloadWistiaVidScripts(wistiaVidId);
+                initializeIntegrations();
+            } else if (
+                document.querySelector('.js-toc-container #TableOfContents')
+            ) {
+                // toc is disabled, but old TOC exists and needs to be removed.
+                document
+                    .querySelector('.js-toc-container #TableOfContents')
+                    .remove();
+                updateTOC();
+            }
+
+            const pathName = new URL(newUrl).pathname;
+
+            // sets query params if code tabs are present
+
+            codeTabs();
+
+            const regionSelector = document.querySelector('.js-region-selector');
+            if (regionSelector) {
+                redirectToRegion(regionSelector.value);
+            }
+
+            // Gtag virtual pageview
+            gtag('config', gaTag, { page_path: pathName });
+
+            // Marketo
+            if (typeof window.Munchkin !== 'undefined') {
+                window.Munchkin.munchkinFunction('clickLink', { href: newUrl });
+            } else {
+                datadogLogs.logger.info('Munchkin called before ready..');
+            }
+        }; // end onreadystatechange
+
+        httpRequest.responseType = 'document';
+        httpRequest.open('GET', newUrl);
+        httpRequest.send();
+    } else {
+        window.location.href = newUrl;
+    }
+}
+
+export {loadPage};

src/scripts/config/config-docs.js

@@ -8,7 +8,8 @@ export default {
             appId: 'EOIG7V0A2O',
             apiKey: 'c7ec32b3838892b10610af30d06a4e42'
         },
-        img_url: 'https://datadog-docs.imgix.net/'
+        imgUrl: 'https://datadog-docs.imgix.net/',
+        gaTag: 'UA-21102638-5'
     },
     preview: {
         ddClientToken: 'pub36877d3864fab670b5ae7e1d5d26cb08',
@@ -19,7 +20,8 @@ export default {
             appId: 'EOIG7V0A2O',
             apiKey: 'c7ec32b3838892b10610af30d06a4e42'
         },
-        img_url: 'https://datadog-docs-staging.imgix.net/'
+        imgUrl: 'https://datadog-docs-staging.imgix.net/',
+        gaTag: 'UA-21102638-9'
     },
     development: {
         ddClientToken: 'pub36877d3864fab670b5ae7e1d5d26cb0',
@@ -29,6 +31,7 @@ export default {
             appId: 'EOIG7V0A2O',
             apiKey: 'c7ec32b3838892b10610af30d06a4e42'
         },
-        img_url: 'http://localhost:1313/'
+        imgUrl: 'http://localhost:1313/',
+        gaTag: 'UA-21102638-9'
     }
 };