Move tabbing logic back to individual docs
Summary: In preparation for an upcoming website update, we need to host the tabbing logic used by Getting Started, Integration with Existing Apps, and Running on Device, in the individual documents themselves. The website update will allow us to use actual React components to implement this behavior. When the website update is live, we can work on the React alternative. Ran website, verified tabbing worked as expected in all three documents. Closes https://github.com/facebook/react-native/pull/15758 Differential Revision: D5758202 Pulled By: hramos fbshipit-source-id: bd00c6c2ac9377b4427022b30ca7ed7787eb3a86
This commit is contained in:
Hector Ramos
Facebook Github Bot
parent
b11587b19f
commit
5b79ee6808
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
id: quick-start-getting-started
|
||||
id: getting-started
|
||||
title: Getting Started
|
||||
layout: docs
|
||||
category: The Basics
|
||||
|
|
@ -638,12 +638,133 @@ 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>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
|
||||
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 guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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') {
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -812,10 +812,132 @@ 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>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
event && event.preventDefault();
|
||||
}
|
||||
|
||||
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 guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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') {
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -360,9 +360,131 @@ 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>
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
}
|
||||
function displayTab(type, value) {
|
||||
var container = document.getElementsByTagName('block')[0].parentNode;
|
||||
container.className = 'display-' + type + '-' + value + ' ' +
|
||||
container.className.replace(RegExp('display-' + type + '-[a-z]+ ?'), '');
|
||||
}
|
||||
|
||||
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 guessPlatformAndOS() {
|
||||
if (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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') {
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -75,10 +75,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// handle tabs in docs
|
||||
convertBlocks();
|
||||
guessPlatformAndOS();
|
||||
|
||||
var backdrop = document.querySelector(
|
||||
'.modal-backdrop'
|
||||
);
|
||||
|
|
@ -160,138 +156,4 @@
|
|||
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 (!document.querySelector('block')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 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') {
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue