Move out some common JavaScript code to scripts.js

Summary:
Move reusable code into scripts.js

Tested each of the documents locally.
Closes https://github.com/facebook/react-native/pull/14212

Differential Revision: D5142983

Pulled By: hramos

fbshipit-source-id: 84571539860e5848a2bf80c382a482463e58d8bd

website/src/react-native/js/scripts.js

@@ -11,7 +11,6 @@
 
 (function() {
   'use strict';
-
   // Not on browser
   if (typeof document === 'undefined') {
     return;
@@ -28,11 +27,15 @@
         .addEventListener('click', toggleTarget);
     }
 
-    var webPlayerList = document.querySelectorAll('.web-player');
+    var webPlayerList = document.querySelectorAll(
+      '.web-player'
+    );
 
     // Either show interactive or static code block, depending on desktop or mobile
     for (var i = 0; i < webPlayerList.length; ++i) {
-      webPlayerList[i].classList.add(mobile ? 'mobile' : 'desktop');
+      webPlayerList[i].classList.add(
+        mobile ? 'mobile' : 'desktop'
+      );
 
       if (!mobile) {
         // Determine location to look up required assets
@@ -41,14 +44,18 @@
         );
 
         // Set iframe src. Do this dynamically so the iframe never loads on mobile.
-        var iframe = webPlayerList[i].querySelector('iframe');
+        var iframe = webPlayerList[i].querySelector(
+          'iframe'
+        );
         iframe.src = iframe.getAttribute('data-src') +
           '&assetRoot=' +
           assetRoot;
       }
     }
 
-    var snackPlayerList = document.querySelectorAll('.snack-player');
+    var snackPlayerList = document.querySelectorAll(
+      '.snack-player'
+    );
 
     // Either show interactive or static code block, depending on desktop or mobile
     for (var i = 0; i < snackPlayerList.length; ++i) {
@@ -68,25 +75,40 @@
       }
     }
 
-    var backdrop = document.querySelector('.modal-backdrop');
+    // handle tabs in docs
+    convertBlocks();
+    guessPlatformAndOS();
+
+    var backdrop = document.querySelector(
+      '.modal-backdrop'
+    );
     if (!backdrop) {
       return;
     }
 
-    var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
-    var modalButtonClose = document.querySelector('.modal-button-close');
+    var modalButtonOpenList = document.querySelectorAll(
+      '.modal-button-open'
+    );
+    var modalButtonClose = document.querySelector(
+      '.modal-button-close'
+    );
 
     backdrop.addEventListener('click', hideModal);
     modalButtonClose.addEventListener('click', hideModal);
 
     // Bind event to NodeList items
     for (var i = 0; i < modalButtonOpenList.length; ++i) {
-      modalButtonOpenList[i].addEventListener('click', showModal);
+      modalButtonOpenList[i].addEventListener(
+        'click',
+        showModal
+      );
     }
   }
 
   function showModal(e) {
-    var backdrop = document.querySelector('.modal-backdrop');
+    var backdrop = document.querySelector(
+      '.modal-backdrop'
+    );
     if (!backdrop) {
       return;
     }
@@ -98,7 +120,9 @@
   }
 
   function hideModal(e) {
-    var backdrop = document.querySelector('.modal-backdrop');
+    var backdrop = document.querySelector(
+      '.modal-backdrop'
+    );
     if (!backdrop) {
       return;
     }
@@ -121,7 +145,8 @@
       if (toggledTarget === target) {
         toggledTarget.classList.toggle('in');
       } else {
-        toggledTarget && toggledTarget.classList.remove('in');
+        toggledTarget &&
+          toggledTarget.classList.remove('in');
         target.classList.add('in');
       }
 
@@ -135,4 +160,137 @@
       navigator.userAgent
     );
   }
+
+  function convertBlocks() {
+    // Convert <div>...<span><block /></span>...</div>
+    // Into <div>...<block />...</div>
+    var blocks = document.querySelectorAll('block');
+    for (var i = 0; i < blocks.length; ++i) {
+      var block = blocks[i];
+      var span = blocks[i].parentNode;
+      var container = span.parentNode;
+      container.insertBefore(block, span);
+      container.removeChild(span);
+    }
+    // Convert <div>...<block />content<block />...</div>
+    // Into <div>...<block>content</block><block />...</div>
+    blocks = document.querySelectorAll('block');
+    for (var i = 0; i < blocks.length; ++i) {
+      var block = blocks[i];
+      while (
+        block.nextSibling &&
+        block.nextSibling.tagName !== 'BLOCK'
+      ) {
+        block.appendChild(block.nextSibling);
+      }
+    }
+  }
+
+  function displayTab(type, value) {
+    var container = document.querySelectorAll('block')[
+      0
+    ].parentNode;
+    container.className = 'display-' +
+      type +
+      '-' +
+      value +
+      ' ' +
+      container.className.replace(
+        RegExp('display-' + type + '-[a-z]+ ?'),
+        ''
+      );
+  }
+
+  function guessPlatformAndOS() {
+    // If we are coming to the page with a hash in it (i.e. from a search, for example), try to get
+    // us as close as possible to the correct platform and dev os using the hashtag and block walk up.
+    var foundHash = false;
+    if (
+      window.location.hash !== '' &&
+      window.location.hash !== 'content'
+    ) {
+      // content is default
+      var hashLinks = document.querySelectorAll(
+        'a.hash-link'
+      );
+      for (
+        var i = 0;
+        i < hashLinks.length && !foundHash;
+        ++i
+      ) {
+        if (hashLinks[i].hash === window.location.hash) {
+          var parent = hashLinks[i].parentElement;
+          while (parent) {
+            if (parent.tagName === 'BLOCK') {
+              var gettingStartedGuideType = null;
+              var devOS = null;
+              var targetPlatform = null;
+              // Could be more than one target os and dev platform, but just choose some sort of order
+              // of priority here.
+
+              // Dev OS
+              if (parent.className.indexOf('mac') > -1) {
+                displayTab('os', 'mac');
+                foundHash = true;
+              } else if (
+                parent.className.indexOf('linux') > -1
+              ) {
+                displayTab('os', 'linux');
+                foundHash = true;
+              } else if (
+                parent.className.indexOf('windows') > -1
+              ) {
+                displayTab('os', 'windows');
+                foundHash = true;
+              } else {
+                break;
+              }
+
+              // Target Platform
+              if (parent.className.indexOf('ios') > -1) {
+                displayTab('platform', 'ios');
+                foundHash = true;
+              } else if (
+                parent.className.indexOf('android') > -1
+              ) {
+                displayTab('platform', 'android');
+                foundHash = true;
+              } else {
+                break;
+              }
+
+              // Guide
+              if (parent.className.indexOf('native') > -1) {
+                displayTab('guide', 'native');
+                foundHash = true;
+              } else if (
+                parent.className.indexOf('quickstart') > -1
+              ) {
+                displayTab('guide', 'quickstart');
+                foundHash = true;
+              } else {
+                break;
+              }
+
+              break;
+            }
+            parent = parent.parentElement;
+          }
+        }
+      }
+    }
+
+    // Do the default if there is no matching hash
+    if (!foundHash) {
+      var isMac = navigator.platform === 'MacIntel';
+      var isWindows = navigator.platform === 'Win32';
+      displayTab('platform', isMac ? 'ios' : 'android');
+      displayTab(
+        'os',
+        isMac ? 'mac' : isWindows ? 'windows' : 'linux'
+      );
+      displayTab('guide', 'quickstart');
+      displayTab('language', 'objc');
+    }
+  }
 })();