testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more buttons to the playground

Browse Source
This commit is contained in:
Simon Lydell committed 2017-09-13 23:07:19 +02:00
1 parent 323941bfd8
commit 5b576f4e78
2 files changed
+248 -175
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

website/pages/playground/index.html
+76 -22
View File
@@ -61,6 +61,8 @@
padding: 10px 27px;
background-color: #1a2b34;
color: #e0e0e0;
position: relative;
z-index: 20;
}
@media (max-width: 400px) {
@@ -102,10 +104,6 @@
margin-left: 15px;
}
textarea.loading {
opacity: 0;
}
.editors-container {
display: flex;
flex: 1;
@@ -141,6 +139,10 @@
}
}
.editor.loading {
opacity: 0;
}
.CodeMirror {
height: auto;
position: absolute;
@@ -151,6 +153,40 @@
line-height: 1.6;
}
.bottom-bar {
position: relative;
}
.bottom-bar-buttons {
position: absolute;
z-index: 10;
top: 0;
left: 0;
padding: 9px;
display: flex;
}
.bottom-bar-buttons-right {
left: auto;
right: 0;
}
.bottom-bar-buttons > * + * {
margin-left: 9px;
}
@media (max-width: 799px) {
.bottom-bar-buttons {
top: auto;
bottom: 100%;
padding: 2px;
}
.bottom-bar-buttons > * + * {
margin-left: 2px;
}
}
.options-details {
padding: 8px 0;
}
@@ -204,7 +240,6 @@
display: inline-block;
height: 18px;
padding: 0 5px;
margin: 0;
border: 1px solid #d1d2d3;
border-radius: 0.25em;
background-image: linear-gradient(to bottom, #fafbfc, #e4ebf0);
@@ -212,6 +247,8 @@
line-height: 18px;
font-weight: 600;
font-family: inherit;
color: inherit;
text-decoration: none;
cursor: pointer;
outline: none;
position: relative;
@@ -234,7 +271,7 @@
.tooltip {
position: absolute;
z-index: 1;
top: 100%;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
@@ -247,12 +284,12 @@
.tooltip::before {
content: "";
position: absolute;
bottom: 100%;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top: none;
border-bottom-color: black;
border-bottom: none;
border-top-color: black;
}
</style>
</head>
@@ -261,13 +298,10 @@
<header>
<a href="/" class="logo-wrapper">
<img class="logo" src="/icon.png" alt="">
<h1>Prettier <span class="version"></span></h1>
<h1>Prettier <span id="version"></span></h1>
</a>
<span class="links">
<button type="button" class="btn copy-markdown">
Copy as markdown
</button>
<a
class="github-button"
href="https://github.com/prettier/prettier"
@@ -280,22 +314,28 @@
<div class="editors-container">
<div class="editors">
<div class="editor input">
<textarea class="loading" id="input-editor"></textarea>
<div class="editor loading input">
<textarea id="input-editor"></textarea>
</div>
<div class="editor ast" style="display: none;">
<textarea class="loading" id="ast-editor"></textarea>
<div class="editor loading ast">
<textarea id="ast-editor"></textarea>
</div>
<div class="editor doc" style="display: none;">
<textarea class="loading" id="doc-editor"></textarea>
<div class="editor loading doc">
<textarea id="doc-editor"></textarea>
</div>
<div class="editor output">
<textarea class="loading" id="output-editor"></textarea>
<div class="editor loading output">
<textarea id="output-editor"></textarea>
</div>
</div>
</div>
<div>
<div class="bottom-bar">
<div class="bottom-bar-buttons">
<button type="button" class="btn" id="button-clear">
Clear
</button>
</div>
<details class="options-details">
<summary class="options-summary">Options</summary>
@@ -320,6 +360,20 @@
</div>
</div>
</details>
<div class="bottom-bar-buttons bottom-bar-buttons-right">
<button type="button" class="btn" id="button-copy-link">
Copy link
</button>
<button type="button" class="btn" id="button-copy-markdown">
Copy markdown
</button>
<a href="https://github.com/prettier/prettier/issues/new"
target="_blank" rel="noopener"
class="btn" id="button-report-issue">
Report issue
</a>
</div>
</div>
<script src="/install-service-worker.js"></script>
website/static/playground.js
+172 -153
View File
@@ -8,6 +8,20 @@ var docEditor;
var astEditor;
var outputEditor;
var OPTIONS = [
"printWidth",
"tabWidth",
"singleQuote",
"trailingComma",
"bracketSpacing",
"jsxBracketSameLine",
"parser",
"semi",
"useTabs",
"doc",
"ast"
];
var state = (function loadState(hash) {
try {
return JSON.parse(hash);
@@ -30,12 +44,14 @@ var worker = new Worker("/worker.js");
worker.onmessage = function(message) {
if (prettierVersion === "?") {
prettierVersion = message.data.version;
document.querySelector(".version").textContent = prettierVersion;
document.getElementById("version").textContent = prettierVersion;
}
if (outputEditor && docEditor && astEditor) {
outputEditor.setValue(message.data.formatted);
docEditor.setValue(message.data.doc || "");
astEditor.setValue(message.data.ast || "");
document.getElementById("button-report-issue").search =
"body=" + encodeURIComponent(createIssueTemplate());
}
};
@@ -43,153 +59,8 @@ worker.onmessage = function(message) {
worker.postMessage({ text: "", options: state.options });
window.onload = function() {
var OPTIONS = [
"printWidth",
"tabWidth",
"singleQuote",
"trailingComma",
"bracketSpacing",
"jsxBracketSameLine",
"parser",
"semi",
"useTabs",
"doc",
"ast"
];
state.options && setOptions(state.options);
function setOptions(options) {
OPTIONS.forEach(function(option) {
var elem = document.getElementById(option);
if (elem.tagName === "SELECT") {
elem.value = options[option];
} else if (elem.type === "number") {
elem.value = options[option];
} else {
var isInverted = elem.hasAttribute("data-inverted");
elem.checked = isInverted ? !options[option] : options[option];
}
});
}
function getOptions() {
var options = {};
OPTIONS.forEach(function(option) {
var elem = document.getElementById(option);
if (elem.tagName === "SELECT") {
options[option] = elem.value;
} else if (elem.type === "number") {
options[option] = Number(elem.value);
} else {
var isInverted = elem.hasAttribute("data-inverted");
options[option] = isInverted ? !elem.checked : elem.checked;
}
});
return options;
}
function getCLIOptions() {
return OPTIONS.sort()
.map(function(option) {
var elem = document.getElementById(option);
var match = elem.parentNode.textContent.match(/--\S+/);
if (!match) {
return null;
}
var name = match[0];
if (elem.tagName === "SELECT") {
if (elem.value === elem.options[0].value) {
return null;
}
return [name, elem.value];
} else if (elem.type === "number") {
if (elem.value === elem.getAttribute("value")) {
return null;
}
return [name, elem.value];
} else if (elem.type === "checkbox") {
if (!elem.checked) {
return null;
}
return [name, true];
}
return null;
})
.filter(Boolean);
}
function replaceHash(hash) {
if (
typeof URL === "function" &&
typeof history === "object" &&
typeof history.replaceState === "function"
) {
var url = new URL(location);
url.hash = hash;
history.replaceState(null, null, url);
} else {
location.hash = hash;
}
}
function setCodemirrorMode(editor, mode) {
editor.setOption("mode", mode);
CodeMirror.autoLoadMode(editor, mode);
}
function formatAsync() {
var options = getOptions();
var mode = util.getCodemirrorMode(options);
setCodemirrorMode(inputEditor, mode);
setCodemirrorMode(outputEditor, mode);
outputEditor.setOption("rulers", [
{ column: options.printWidth, color: "#444444" }
]);
document.querySelector(".ast").style.display = options.ast ? "" : "none";
document.querySelector(".doc").style.display = options.doc ? "" : "none";
var value = encodeURIComponent(
JSON.stringify(
Object.assign({ content: inputEditor.getValue(), options: options })
)
);
replaceHash(value);
worker.postMessage({
text: inputEditor.getValue(),
options: options,
ast: options.ast,
doc: options.doc
});
}
function createMarkdown() {
var input = inputEditor.getValue();
var output = outputEditor.getValue();
var options = getOptions();
var cliOptions = getCLIOptions();
var markdown = util.formatMarkdown(
input,
output,
prettierVersion,
window.location.href,
options,
cliOptions
);
return markdown;
}
function showTooltip(elem, text) {
var tooltip = document.createElement("span");
tooltip.className = "tooltip";
tooltip.textContent = text;
elem.appendChild(tooltip);
window.setTimeout(function() {
elem.removeChild(tooltip);
}, 2000);
}
CodeMirror.modeURL =
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/%N/%N.js";
@@ -227,16 +98,28 @@ window.onload = function() {
setCodemirrorMode(docEditor, "javascript");
setCodemirrorMode(astEditor, "javascript");
Array.from(document.querySelectorAll("textarea")).forEach(function(element) {
element.classList.remove("loading");
});
var editors = document.querySelectorAll(".editor");
for (var i = 0; i < editors.length; i++) {
editors[i].classList.remove("loading");
}
inputEditor.setValue(state.content);
document.querySelector(".options-container").onchange = formatAsync;
var clipboard = new Clipboard(".copy-markdown", {
text: function() {
return createMarkdown();
document.getElementById("button-clear").onclick = function() {
inputEditor.setValue("");
};
var clipboard = new Clipboard("#button-copy-link, #button-copy-markdown", {
text: function(trigger) {
switch (trigger.id) {
case "button-copy-link":
return window.location.href;
case "button-copy-markdown":
return createMarkdown();
default:
return "";
}
}
});
clipboard.on("success", function(e) {
@@ -247,13 +130,149 @@ window.onload = function() {
});
};
function setOptions(options) {
OPTIONS.forEach(function(option) {
var elem = document.getElementById(option);
if (elem.tagName === "SELECT") {
elem.value = options[option];
} else if (elem.type === "number") {
elem.value = options[option];
} else {
var isInverted = elem.hasAttribute("data-inverted");
elem.checked = isInverted ? !options[option] : options[option];
}
});
}
function getOptions() {
var options = {};
OPTIONS.forEach(function(option) {
var elem = document.getElementById(option);
if (elem.tagName === "SELECT") {
options[option] = elem.value;
} else if (elem.type === "number") {
options[option] = Number(elem.value);
} else {
var isInverted = elem.hasAttribute("data-inverted");
options[option] = isInverted ? !elem.checked : elem.checked;
}
});
return options;
}
function getCLIOptions() {
return OPTIONS.sort()
.map(function(option) {
var elem = document.getElementById(option);
var match = elem.parentNode.textContent.match(/--\S+/);
if (!match) {
return null;
}
var name = match[0];
if (elem.tagName === "SELECT") {
if (elem.value === elem.options[0].value) {
return null;
}
return [name, elem.value];
} else if (elem.type === "number") {
if (elem.value === elem.getAttribute("value")) {
return null;
}
return [name, elem.value];
} else if (elem.type === "checkbox") {
if (!elem.checked) {
return null;
}
return [name, true];
}
return null;
})
.filter(Boolean);
}
function replaceHash(hash) {
if (
typeof URL === "function" &&
typeof history === "object" &&
typeof history.replaceState === "function"
) {
var url = new URL(location);
url.hash = hash;
history.replaceState(null, null, url);
} else {
location.hash = hash;
}
}
function setCodemirrorMode(editor, mode) {
editor.setOption("mode", mode);
CodeMirror.autoLoadMode(editor, mode);
}
function formatAsync() {
var options = getOptions();
var mode = util.getCodemirrorMode(options);
setCodemirrorMode(inputEditor, mode);
setCodemirrorMode(outputEditor, mode);
outputEditor.setOption("rulers", [
{ column: options.printWidth, color: "#444444" }
]);
document.querySelector(".ast").style.display = options.ast ? "" : "none";
document.querySelector(".doc").style.display = options.doc ? "" : "none";
var value = encodeURIComponent(
JSON.stringify(
Object.assign({ content: inputEditor.getValue(), options: options })
)
);
replaceHash(value);
worker.postMessage({
text: inputEditor.getValue(),
options: options,
ast: options.ast,
doc: options.doc
});
}
function createMarkdown() {
var input = inputEditor.getValue();
var output = outputEditor.getValue();
var options = getOptions();
var cliOptions = getCLIOptions();
var markdown = util.formatMarkdown(
input,
output,
prettierVersion,
window.location.href,
options,
cliOptions
);
return markdown;
}
function createIssueTemplate() {
return [createMarkdown(), "", "**Expected behavior:**", ""].join("\n");
}
function showTooltip(elem, text) {
var tooltip = document.createElement("span");
tooltip.className = "tooltip";
tooltip.textContent = text;
elem.appendChild(tooltip);
window.setTimeout(function() {
elem.removeChild(tooltip);
}, 2000);
}
var util = (function() {
function formatMarkdown(input, output, version, url, options, cliOptions) {
var syntax = getMarkdownSyntax(options);
var optionsString = formatCLIOptions(cliOptions);
return [
"**Prettier " + version,
"**Prettier " + version + "**",
"[Playground link](" + url + ")",
optionsString === "" ? null : codeBlock(optionsString),
"",