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

docs/GettingStarted.md

@@ -87,10 +87,10 @@ This page will help you install and build your first React Native app. If you al
 
 <div class="toggler">
   <ul role="tablist" >
-    <li id="quickstart" class="button-quickstart" aria-selected="false" role="tab" tabindex="0" aria-controls="quickstarttab" onclick="display('guide', 'quickstart')">
+    <li id="quickstart" class="button-quickstart" aria-selected="false" role="tab" tabindex="0" aria-controls="quickstarttab" onclick="displayTab('guide', 'quickstart')">
       Quick Start
     </li>
-    <li id="native" class="button-native" aria-selected="false" role="tab" tabindex="-1" aria-controls="nativetab" onclick="display('guide', 'native')">
+    <li id="native" class="button-native" aria-selected="false" role="tab" tabindex="-1" aria-controls="nativetab" onclick="displayTab('guide', 'native')">
       Building Projects with Native Code
     </li>
   </ul>
@@ -158,26 +158,26 @@ If you're integrating React Native into an existing project, you'll want to skip
 
 <block class="native mac windows linux ios android" />
 
-<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="docs/getting-started.html" onclick="display('guide', 'quickstart')">Create React Native App</a>, you'll need this section.</p>
+<p>Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from <a href="docs/getting-started.html" onclick="displayTab('guide', 'quickstart')">Create React Native App</a>, you'll need this section.</p>
 
 The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both iOS and Android, that's fine - you just have to pick
 one to start with, since the setup is a bit different.
 
 <div class="toggler">
   <span>Development OS:</span>
-  <a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
+  <a href="javascript:void(0);" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
-  <a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
+  <a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
-  <a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
+  <a href="javascript:void(0);" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
   <span>Target OS:</span>
-  <a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
+  <a href="javascript:void(0);" class="button-ios" onclick="displayTab('platform', 'ios')">iOS</a>
-  <a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
+  <a href="javascript:void(0);" class="button-android" onclick="displayTab('platform', 'android')">Android</a>
 </div>
 
 <block class="native linux windows ios" />
 
 ## Unsupported
 
-<blockquote><p>A Mac is required to build projects with native code for iOS. You can follow the <a href="docs/getting-started.html" onclick="display('guide', 'quickstart')">Quick Start</a> to learn how to build your app using Create React Native App instead.</p></blockquote>
+<blockquote><p>A Mac is required to build projects with native code for iOS. You can follow the <a href="docs/getting-started.html" onclick="displayTab('guide', 'quickstart')">Quick Start</a> to learn how to build your app using Create React Native App instead.</p></blockquote>
 
 <block class="native mac ios" />
 
@@ -640,84 +640,13 @@ to the [Tutorial](docs/tutorial.html).
 If you're curious to learn more about React Native, continue on
 to the [Tutorial](docs/tutorial.html).
 
+
 <script>
-// Convert <div>...<span><block /></span>...</div>
+function displayTab(type, value) {
-// Into <div>...<block />...</div>
-var blocks = document.getElementsByTagName('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.getElementsByTagName('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 display(type, value) {
   var container = document.getElementsByTagName('block')[0].parentNode;
   container.className = 'display-' + type + '-' + value + ' ' +
     container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
-}
+  console.log(container.className);
-
+  event && event.preventDefault();
-// 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 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) {
-            devOS = 'mac';
-          } else if (parent.className.indexOf('linux') > -1) {
-            devOS = 'linux';
-          } else if (parent.className.indexOf('windows') > -1) {
-            devOS = 'windows';
-          } else {
-            break; // assume we don't have anything.
-          }
-
-          // Target Platform
-          if (parent.className.indexOf('ios') > -1) {
-            targetPlatform = 'ios';
-          } else if (parent.className.indexOf('android') > -1) {
-            targetPlatform = 'android';
-          } else {
-            break; // assume we don't have anything.
-          }
-          // We would have broken out if both targetPlatform and devOS hadn't been filled.
-          display('guide', 'native');
-          display('os', devOS);
-          display('platform', targetPlatform);
-          foundHash = true;
-          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';
-  display('guide', 'quickstart');
-  display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
-  display('platform', isMac ? 'ios' : 'android');
 }
 </script>

docs/IntegrationWithExistingApps.md

@@ -59,16 +59,16 @@ previous: testing
     border-radius: 3px;
     text-decoration: none !important;
   }
-  .display-platform-objc .toggler .button-objc,
+  .display-language-objc .toggler .button-objc,
-  .display-platform-swift .toggler .button-swift,
+  .display-language-swift .toggler .button-swift,
-  .display-platform-android .toggler .button-android {
+  .display-language-android .toggler .button-android {
     background-color: #05A5D1;
     color: white;
   }
   block { display: none; }
-  .display-platform-objc .objc,
+  .display-language-objc .objc,
-  .display-platform-swift .swift,
+  .display-language-swift .swift,
-  .display-platform-android .android {
+  .display-language-android .android {
     display: block;
   }
 </style>
@@ -79,13 +79,13 @@ The specific steps are different depending on what platform you're targeting.
 
 <div class="toggler">
   <ul role="tablist" >
-    <li id="objc" class="button-objc" aria-selected="false" role="tab" tabindex="0" aria-controls="objctab" onclick="display('platform', 'objc')">
+    <li id="objc" class="button-objc" aria-selected="false" role="tab" tabindex="0" aria-controls="objctab" onclick="displayTab('language', 'objc')">
       iOS (Objective-C)
     </li>
-    <li id="swift" class="button-swift" aria-selected="false" role="tab" tabindex="0" aria-controls="swifttab" onclick="display('platform', 'swift')">
+    <li id="swift" class="button-swift" aria-selected="false" role="tab" tabindex="0" aria-controls="swifttab" onclick="displayTab('language', 'swift')">
       iOS (Swift)
     </li>
-    <li id="android" class="button-android" aria-selected="false" role="tab" tabindex="0" aria-controls="androidtab" onclick="display('platform', 'android')">
+    <li id="android" class="button-android" aria-selected="false" role="tab" tabindex="0" aria-controls="androidtab" onclick="displayTab('language', 'android')">
       Android (Java)
     </li>
   </ul>
@@ -805,70 +805,11 @@ Now just create a release build of your native app from within Android Studio as
 At this point you can continue developing your app as usual. Refer to our [debugging](/docs/debugging.html) and [deployment](docs/running-on-device.html) docs to learn more about working with React Native.
 
 <script>
-// Convert <div>...<span><block /></span>...</div>
+function displayTab(type, value) {
-// Into <div>...<block />...</div>
-var blocks = document.getElementsByTagName('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.getElementsByTagName('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 display(type, value) {
   var container = document.getElementsByTagName('block')[0].parentNode;
   container.className = 'display-' + type + '-' + value + ' ' +
     container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
   console.log(container.className);
   event && event.preventDefault();
 }
-
-// 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 targetPlatform = null;
-          // Could be more than one target platform, but just choose some sort of order
-          // of priority here.
-
-          // Target Platform
-          if (parent.className.indexOf('objc') > -1) {
-            targetPlatform = 'objc';
-          } else if (parent.className.indexOf('swift') > -1) {
-            targetPlatform = 'swift';
-          } else if (parent.className.indexOf('android') > -1) {
-            targetPlatform = 'android';
-          } else {
-            break; // assume we don't have anything.
-          }
-          // We would have broken out if both targetPlatform and devOS hadn't been filled.
-          display('platform', targetPlatform);
-          foundHash = true;
-          break;
-        }
-        parent = parent.parentElement;
-      }
-    }
-  }
-}
-// Do the default if there is no matching hash
-if (!foundHash) {
-  var isMac = navigator.platform === 'MacIntel';
-  display('platform', isMac ? 'objc' : 'android');
-}
 </script>

docs/RunningOnDevice.md

@@ -9,58 +9,112 @@ next: upgrading
 previous: integration-with-existing-apps
 ---
 
+<style>
+  .toggler li {
+    display: inline-block;
+    position: relative;
+    top: 1px;
+    padding: 10px;
+    margin: 0px 2px 0px 2px;
+    border: 1px solid #05A5D1;
+    border-bottom-color: transparent;
+    border-radius: 3px 3px 0px 0px;
+    color: #05A5D1;
+    background-color: transparent;
+    font-size: 0.99em;
+    cursor: pointer;
+  }
+  .toggler li:first-child {
+    margin-left: 0;
+  }
+  .toggler li:last-child {
+    margin-right: 0;
+  }
+  .toggler ul {
+    width: 100%;
+    display: inline-block;
+    list-style-type: none;
+    margin: 0;
+    border-bottom: 1px solid #05A5D1;
+    cursor: default;
+  }
+  @media screen and (max-width: 960px) {
+    .toggler li,
+    .toggler li:first-child,
+    .toggler li:last-child {
+      display: block;
+      border-bottom-color: #05A5D1;
+      border-radius: 3px;
+      margin: 2px 0px 2px 0px;
+    }
+    .toggler ul {
+      border-bottom: 0;
+    }
+  }
+  .toggler a {
+    display: inline-block;
+    padding: 10px 5px;
+    margin: 2px;
+    border: 1px solid #05A5D1;
+    border-radius: 3px;
+    text-decoration: none !important;
+  }
+  .display-os-mac .toggler .button-mac,
+  .display-os-linux .toggler .button-linux,
+  .display-os-windows .toggler .button-windows,
+  .display-platform-ios .toggler .button-ios,
+  .display-platform-android .toggler .button-android {
+    background-color: #05A5D1;
+    color: white;
+  }
+  block { display: none; }
+  .display-platform-ios.display-os-mac .ios.mac,
+  .display-platform-ios.display-os-linux .ios.linux,
+  .display-platform-ios.display-os-windows .ios.windows,
+  .display-platform-android.display-os-mac .android.mac,
+  .display-platform-android.display-os-linux .android.linux,
+  .display-platform-android.display-os-windows .android.windows {
+    display: block;
+  }
+</style>
+
 It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
 
 <div class="toggler">
-  <style>
-    .toggler a {
-      display: inline-block;
-      padding: 10px 5px;
-      margin: 2px;
-      border: 1px solid #05A5D1;
-      border-radius: 3px;
-      text-decoration: none !important;
-    }
-    .display-os-mac .toggler .button-mac,
-    .display-os-linux .toggler .button-linux,
-    .display-os-windows .toggler .button-windows,
-    .display-platform-ios .toggler .button-ios,
-    .display-platform-android .toggler .button-android {
-      background-color: #05A5D1;
-      color: white;
-    }
-    block { display: none; }
-    .display-platform-ios.display-os-mac .ios.mac,
-    .display-platform-ios.display-os-linux .ios.linux,
-    .display-platform-ios.display-os-windows .ios.windows,
-    .display-platform-android.display-os-mac .android.mac,
-    .display-platform-android.display-os-linux .android.linux,
-    .display-platform-android.display-os-windows .android.windows {
-      display: block;
-    }
-  </style>
-  <span>Development OS:</span>
-  <a href="javascript:void(0);" class="button-mac" onclick="display('os', 'mac')">macOS</a>
-  <a href="javascript:void(0);" class="button-linux" onclick="display('os', 'linux')">Linux</a>
-  <a href="javascript:void(0);" class="button-windows" onclick="display('os', 'windows')">Windows</a>
-  <span>Target OS:</span>
-  <a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
-  <a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
 
+  <ul role="tablist" >
+    <li id="ios" class="button-ios" aria-selected="false" role="tab" tabindex="0" aria-controls="iostab" onclick="displayTab('platform', 'ios')">
+      iOS
+    </li>
+    <li id="android" class="button-android" aria-selected="false" role="tab" tabindex="-1" aria-controls="androidtab" onclick="displayTab('platform', 'android')">
+      Android
+    </li>
+  </ul>
+</div>
+
+<block class="linux windows mac ios" />
+
+## Running your app on iOS devices
+
+<block class="linux windows mac android" />
+
+## Running your app on Android devices
+
+<block class="linux windows mac ios android" />
+
+<div class="toggler">
+<span>Development OS:</span>
+<a href="javascript:void(0);" class="button-mac" onclick="displayTab('os', 'mac')">macOS</a>
+<a href="javascript:void(0);" class="button-linux" onclick="displayTab('os', 'linux')">Linux</a>
+<a href="javascript:void(0);" class="button-windows" onclick="displayTab('os', 'windows')">Windows</a>
 </div>
 
 <block class="linux windows ios" />
 
-## Running your app on iOS devices
-
 A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to the [Quick Start instructions](docs/getting-started.html) to learn how to build your app using Create React Native App, which will allow you to run your app using the Expo client app.
 
 <block class="mac ios" />
 
-## Running your app on iOS devices
-
-Register for a [Apple developer account](https://developer.apple.com/) if you don't have one yet.
-
 ### 1. Plug in your device via USB
 
 Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the `ios` folder in your project, then open the `.xcodeproj` file within it using Xcode.
@@ -69,6 +123,8 @@ If this is your first time running an app on your iOS device, you may need to re
 
 ### 2. Configure code signing
 
+Register for a [Apple developer account](https://developer.apple.com/) if you don't have one yet.
+
 Select your project in the Xcode Project Navigator, then select your main target (it should share the same name as your project). Look for the "General" tab. Go to "Signing" and make sure your Apple developer account or team is selected under the Team dropdown.
 
 ![](img/RunningOnDeviceCodeSigning.png)
@@ -85,8 +141,6 @@ If everything is set up correctly, your device will be listed as the build targe
 
 <block class="mac windows linux android" />
 
-## Running your app on Android devices
-
 ### 1. Enable Debugging over USB
 
 Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.
@@ -268,81 +322,9 @@ You can now build your app for release by tapping `⌘B` or selecting **Product*
 You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for [generating a signed APK](docs/signed-apk-android.html) to learn more.
 
 <script>
-// Convert <div>...<span><block /></span>...</div>
+function displayTab(type, value) {
-// Into <div>...<block />...</div>
-var blocks = document.getElementsByTagName('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.getElementsByTagName('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 display(type, value) {
   var container = document.getElementsByTagName('block')[0].parentNode;
   container.className = 'display-' + type + '-' + value + ' ' +
     container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
 }
-
-// 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 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) {
-            devOS = 'mac';
-          } else if (parent.className.indexOf('linux') > -1) {
-            devOS = 'linux';
-          } else if (parent.className.indexOf('windows') > -1) {
-            devOS = 'windows';
-          } else {
-            break; // assume we don't have anything.
-          }
-
-          // Target Platform
-          if (parent.className.indexOf('ios') > -1) {
-            targetPlatform = 'ios';
-          } else if (parent.className.indexOf('android') > -1) {
-            targetPlatform = 'android';
-          } else {
-            break; // assume we don't have anything.
-          }
-          // We would have broken out if both targetPlatform and devOS hadn't been filled.
-          display('os', devOS);
-          display('platform', targetPlatform);      
-          foundHash = true;
-          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';
-  display('os', isMac ? 'mac' : (isWindows ? 'windows' : 'linux'));
-  display('platform', isMac ? 'ios' : 'android');
-}
 </script>

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 modalButtonOpenList = document.querySelectorAll(
-    var modalButtonClose = document.querySelector('.modal-button-close');
+      '.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');
+    }
+  }
 })();