mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
149 lines
3.7 KiB
HTML
149 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
<title>React Browser Sandbox</title>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
.header {
|
|
background: #222;
|
|
box-shadow: inset 0 -1px 3px #000;
|
|
overflow: hidden;
|
|
padding: 8px 16px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.header__inner {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header__logo {
|
|
color: #efefef;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.header__logo img {
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.header select {
|
|
display: inline-block;
|
|
float: right;
|
|
margin: 8px 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
iframe {
|
|
display: block;
|
|
height: 98%;
|
|
height: calc(100vh - 52px);
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
width: 100%;
|
|
}
|
|
|
|
.sr-only {
|
|
clip: rect(0, 0, 0, 0);
|
|
height: 0;
|
|
margin: -1px;
|
|
position: absolute;
|
|
width: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<form method="GET" class="header__inner" id="form">
|
|
<span class="header__logo">
|
|
<img src="https://facebook.github.io/react/img/logo.svg" alt="React Browser Sandbox" width="32" height="32" />
|
|
React Sandbox
|
|
</span>
|
|
|
|
<label for="react_version">
|
|
<span class="sr-only">Select a version to test</span>
|
|
<select id="react_version" name="version">
|
|
<option value="local">Local</option>
|
|
</select>
|
|
</label>
|
|
</form>
|
|
</header>
|
|
|
|
<iframe id="frame" frameborder="0"></iframe>
|
|
|
|
<script>
|
|
var frame = document.querySelector('#frame');
|
|
var form = document.querySelector('#form');
|
|
var select = document.querySelector("#react_version");
|
|
|
|
frame.src = "./basic/index.html?" + window.location.search;
|
|
|
|
form.addEventListener('change', function() {
|
|
form.submit();
|
|
});
|
|
|
|
function getVersion () {
|
|
var match = window.location.search.match(/version\=(.*?)($|&)/);
|
|
|
|
return match ? match[1] : select.value;
|
|
}
|
|
|
|
/**
|
|
* Populate the dropdown
|
|
*/
|
|
function addOptions (data) {
|
|
var version = getVersion();
|
|
|
|
JSON.parse(data).forEach(function(row) {
|
|
var option = document.createElement("option");
|
|
|
|
option.value = row.name.slice(1);
|
|
option.text = row.name;
|
|
|
|
select.options.add(option);
|
|
});
|
|
|
|
select.value = getVersion();
|
|
}
|
|
|
|
/**
|
|
* Fetch version information from Github
|
|
*/
|
|
function fetchOptions (callback) {
|
|
var request = new XMLHttpRequest();
|
|
|
|
request.onload = function () {
|
|
if (request.readyState == 4){
|
|
if (request.status >= 400) {
|
|
return console.error('Error ' + request.status + ': Something went wrong fetching React versions from Github.')
|
|
}
|
|
|
|
callback(request.responseText);
|
|
sessionStorage.options = request.responseText;
|
|
}
|
|
}
|
|
|
|
request.open('GET', "http://api.github.com/repos/facebook/react/tags");
|
|
request.send();
|
|
}
|
|
|
|
if ('options' in sessionStorage) {
|
|
addOptions(sessionStorage.options);
|
|
} else {
|
|
fetchOptions(addOptions);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|