build site
This commit is contained in:
dntzhang
parent
e1fa525f77
commit
52405223ef
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"index.css": "static/css/index.fb9dfd08.css",
|
||||
"index.css.map": "static/css/index.fb9dfd08.css.map",
|
||||
"index.js": "static/js/index.8e0fb980.js",
|
||||
"index.js.map": "static/js/index.8e0fb980.js.map",
|
||||
"static/js/0.71055f5f.chunk.js": "static/js/0.71055f5f.chunk.js",
|
||||
"static/js/0.71055f5f.chunk.js.map": "static/js/0.71055f5f.chunk.js.map",
|
||||
"static/js/1.edfde54e.chunk.js": "static/js/1.edfde54e.chunk.js",
|
||||
"static/js/1.edfde54e.chunk.js.map": "static/js/1.edfde54e.chunk.js.map",
|
||||
"static/js/2.ee3da00b.chunk.js": "static/js/2.ee3da00b.chunk.js",
|
||||
"static/js/2.ee3da00b.chunk.js.map": "static/js/2.ee3da00b.chunk.js.map",
|
||||
"static/js/3.bc63ff79.chunk.js": "static/js/3.bc63ff79.chunk.js",
|
||||
"static/js/3.bc63ff79.chunk.js.map": "static/js/3.bc63ff79.chunk.js.map",
|
||||
"static/js/4.635588a3.chunk.js": "static/js/4.635588a3.chunk.js",
|
||||
"static/js/4.635588a3.chunk.js.map": "static/js/4.635588a3.chunk.js.map",
|
||||
"static/js/5.3b2fb232.chunk.js": "static/js/5.3b2fb232.chunk.js",
|
||||
"static/js/5.3b2fb232.chunk.js.map": "static/js/5.3b2fb232.chunk.js.map",
|
||||
"static/media/omi-logo2019.svg": "static/media/omi-logo2019.923166c3.svg",
|
||||
"zh-cn.css": "static/css/zh-cn.fb9dfd08.css",
|
||||
"zh-cn.css.map": "static/css/zh-cn.fb9dfd08.css.map",
|
||||
"zh-cn.js": "static/js/zh-cn.095aedf9.js",
|
||||
"zh-cn.js.map": "static/js/zh-cn.095aedf9.js.map"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
|
|
@ -0,0 +1,218 @@
|
|||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+json+typescript+jsx+tsx&plugins=line-highlight+line-numbers */
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #272822;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: inherit 0;
|
||||
margin-top: 1em; /* Same as .prism’s padding-top */
|
||||
|
||||
background: hsla(24, 20%, 50%,.08);
|
||||
background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.line-highlight:before,
|
||||
.line-highlight[data-end]:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: .4em;
|
||||
left: .6em;
|
||||
min-width: 1em;
|
||||
padding: 0 .5em;
|
||||
background-color: hsla(24, 20%, 50%,.4);
|
||||
color: hsl(24, 20%, 95%);
|
||||
font: bold 65%/1.5 sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: .3em;
|
||||
border-radius: 999px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
.line-highlight[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: .4em;
|
||||
}
|
||||
|
||||
.line-numbers .line-highlight:before,
|
||||
.line-numbers .line-highlight:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/index.fb9dfd08.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.8e0fb980.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
data = {
|
||||
ios_show: false,
|
||||
android_show: false,
|
||||
menus: [{
|
||||
label: 'Option 1',
|
||||
onClick: () => { }
|
||||
}, {
|
||||
label: 'Option 2',
|
||||
onClick: () => { }
|
||||
}],
|
||||
actions: [
|
||||
{
|
||||
label: 'Cancel',
|
||||
onClick: this.hide
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
hide = () => {
|
||||
Object.assign(this.data, {
|
||||
auto_show: false,
|
||||
ios_show: false,
|
||||
android_show: false,
|
||||
})
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-button type="default"
|
||||
onClick={e => { this.data.ios_show = true; this.update(); }}
|
||||
>
|
||||
IOS ActionSheet</o-button>
|
||||
<o-action-sheet
|
||||
menus={this.data.menus}
|
||||
actions={this.data.actions}
|
||||
show={this.data.ios_show}
|
||||
type="ios"
|
||||
onClose={e => { this.data.ios_show = false; this.update(); }}
|
||||
/>
|
||||
|
||||
<br />
|
||||
|
||||
<o-button type="default"
|
||||
onClick={e => { this.data.android_show = true; this.update(); }}>
|
||||
Android ActionSheet
|
||||
</o-button>
|
||||
<o-action-sheet
|
||||
menus={this.data.menus}
|
||||
actions={this.data.actions}
|
||||
show={this.data.android_show}
|
||||
type="android"
|
||||
onClose={e => { this.data.android_show = false; this.update(); }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-badge content={8}>
|
||||
<o-icon type="chat" isFill color="#07C160" />
|
||||
</o-badge>
|
||||
|
||||
<o-badge content={99}>
|
||||
<o-icon type="pay" isFill color="#07C160" />
|
||||
</o-badge>
|
||||
|
||||
<o-badge content="new">
|
||||
<o-icon type="github" isFill color="black" />
|
||||
</o-badge>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<o-button
|
||||
onClick={() => {
|
||||
console.log('Hello button!')
|
||||
}}
|
||||
>
|
||||
Normal
|
||||
</o-button>
|
||||
<o-button disabled>Disabled</o-button>
|
||||
|
||||
<o-button type="default">Default Normal</o-button>
|
||||
<o-button type="default" disabled>
|
||||
Default Disabled
|
||||
</o-button>
|
||||
|
||||
<o-button type="warn">Warn Normal</o-button>
|
||||
<o-button type="warn" disabled>
|
||||
Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space itemMargin='10px'>
|
||||
<o-button type="default" plain>
|
||||
Default Plain
|
||||
</o-button>
|
||||
<o-button type="primary" plain>
|
||||
Primary Plain
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
|
||||
<o-button type="primary" plain disabled>
|
||||
Primary Plain Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space style='margin-top:10px;background-color:#ddd;'>
|
||||
<o-button size="small">Mini</o-button>
|
||||
<o-button type="default" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
<o-button type="warn" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-checkbox checked label='abc'></o-checkbox>
|
||||
<o-checkbox label='abc'></o-checkbox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
showPicker = false
|
||||
|
||||
selectedDate = '2019-1-10'
|
||||
|
||||
onToggle = () => {
|
||||
this.showPicker = !this.showPicker
|
||||
this.update()
|
||||
}
|
||||
|
||||
onSelect = (date) => {
|
||||
this.selectDate = date
|
||||
this.showPicker = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-date-picker
|
||||
selectedDate={this.selectedDate}
|
||||
onSelect={this.onSelect}
|
||||
show={this.showPicker}
|
||||
onToggle={this.onToggle}>
|
||||
</o-date-picker>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
alertShow = false
|
||||
confirmShow = false
|
||||
|
||||
onClose = (e) => {
|
||||
this.confirmShow = false
|
||||
this.alertShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
onConfirm = (e) => {
|
||||
this.confirmShow = false
|
||||
this.alertShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
showAlert = (e) => {
|
||||
this.alertShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
showConfirm = (e) => {
|
||||
this.confirmShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<o-button onClick={this.showAlert}>Show Alert</o-button>
|
||||
<o-button onClick={this.showConfirm}>Show Confirm</o-button>
|
||||
<o-dialog
|
||||
onClose={this.onClose}
|
||||
type='confirm'
|
||||
onConfirm={this.onConfirm}
|
||||
show={this.confirmShow}
|
||||
title='My Confirm!'
|
||||
msg='My Msg!'
|
||||
cancelText='cancel'
|
||||
confirmText='confirm'
|
||||
/>
|
||||
<o-dialog
|
||||
onClose={this.onClose}
|
||||
type='alert'
|
||||
onConfirm={this.onConfirm}
|
||||
show={this.alertShow}
|
||||
title='My Title'
|
||||
msg='My Alert!'
|
||||
confirmText='OK'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">const path = {
|
||||
pathA: 'M464 512a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm200 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm-400 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm661.2-173.6c-22.6-53.7-55-101.9-96.3-143.3a444.35 444.35 0 0 0-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9a445.35 445.35 0 0 0-142 96.5c-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9A449.4 449.4 0 0 0 112 714v152a46 46 0 0 0 46 46h152.1A449.4 449.4 0 0 0 510 960h2.1c59.9 0 118-11.6 172.7-34.3a444.48 444.48 0 0 0 142.8-95.2c41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z',
|
||||
pathB: 'M678.3 642.4c24.2-13 51.9-20.4 81.4-20.4h.1c3 0 4.4-3.6 2.2-5.6a371.67 371.67 0 0 0-103.7-65.8c-.4-.2-.8-.3-1.2-.5C719.2 505 759.6 431.7 759.6 349c0-137-110.8-248-247.5-248S264.7 212 264.7 349c0 82.7 40.4 156 102.6 201.1-.4.2-.8.3-1.2.5-44.7 18.9-84.8 46-119.3 80.6a373.42 373.42 0 0 0-80.4 119.5A373.6 373.6 0 0 0 137 888.8a8 8 0 0 0 8 8.2h59.9c4.3 0 7.9-3.5 8-7.8 2-77.2 32.9-149.5 87.6-204.3C357 628.2 432.2 597 512.2 597c56.7 0 111.1 15.7 158 45.1a8.1 8.1 0 0 0 8.1.3zM512.2 521c-45.8 0-88.9-17.9-121.4-50.4A171.2 171.2 0 0 1 340.5 349c0-45.9 17.9-89.1 50.3-121.6S466.3 177 512.2 177s88.9 17.9 121.4 50.4A171.2 171.2 0 0 1 683.9 349c0 45.9-17.9 89.1-50.3 121.6C601.1 503.1 558 521 512.2 521zM880 759h-84v-84c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v84h-84c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h84v84c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-84h84c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z',
|
||||
pathC: 'M136 384h56c4.4 0 8-3.6 8-8V200h176c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H196c-37.6 0-68 30.4-68 68v180c0 4.4 3.6 8 8 8zm512-184h176v176c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V196c0-37.6-30.4-68-68-68H648c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zM376 824H200V648c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v180c0 37.6 30.4 68 68 68h180c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm512-184h-56c-4.4 0-8 3.6-8 8v176H648c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h180c37.6 0 68-30.4 68-68V648c0-4.4-3.6-8-8-8zm16-164H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z',
|
||||
pathD: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm159.6-585h-59.5c-3 0-5.8 1.7-7.1 4.4l-90.6 180H511l-90.6-180a8 8 0 0 0-7.1-4.4h-60.7c-1.3 0-2.6.3-3.8 1-3.9 2.1-5.3 7-3.2 10.9L457 515.7h-61.4c-4.4 0-8 3.6-8 8v29.9c0 4.4 3.6 8 8 8h81.7V603h-81.7c-4.4 0-8 3.6-8 8v29.9c0 4.4 3.6 8 8 8h81.7V717c0 4.4 3.6 8 8 8h54.3c4.4 0 8-3.6 8-8v-68.1h82c4.4 0 8-3.6 8-8V611c0-4.4-3.6-8-8-8h-82v-41.5h82c4.4 0 8-3.6 8-8v-29.9c0-4.4-3.6-8-8-8h-62l111.1-204.8c.6-1.2 1-2.5 1-3.8-.1-4.4-3.7-8-8.1-8z'
|
||||
}
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-dropdown-menu >
|
||||
<item icon={{ path: path.pathA, color: '#F2F2F2' }} text='发起群聊'></item>
|
||||
<item icon={{ path: path.pathB, color: '#F2F2F2' }} text='添加朋友'></item>
|
||||
<item icon={{ path: path.pathC, color: '#F2F2F2' }} text='扫一扫吧'></item>
|
||||
<item icon={{ path: path.pathD, color: '#F2F2F2' }} text='收款支付'></item>
|
||||
</o-dropdown-menu>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
showSelect = false
|
||||
|
||||
selectedIndex = 1
|
||||
|
||||
onSelect = (index) => {
|
||||
this.selectedIndex = index
|
||||
this.showSelect = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
onToggle = () => {
|
||||
this.showSelect = !this.showSelect
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-dropdown selectedIndex={this.selectedIndex}
|
||||
show={this.showSelect}
|
||||
onToggle={this.onToggle}
|
||||
onSelect={this.onSelect} style="width:200px;">
|
||||
<item value={1}>Item 1</item>
|
||||
<item value={2}>Item 2</item>
|
||||
<item value={3}>Item 3</item>
|
||||
</o-dropdown>
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
css() {
|
||||
return `
|
||||
div{
|
||||
height:80px;
|
||||
}
|
||||
|
||||
.a{
|
||||
background-color: #07C160;
|
||||
}
|
||||
|
||||
.b{
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
.c{
|
||||
background-color: #171717;
|
||||
}
|
||||
|
||||
.d{
|
||||
background-color: #ECECEC;
|
||||
}
|
||||
|
||||
.e{
|
||||
background-color: #F95050;
|
||||
}
|
||||
`
|
||||
}
|
||||
render(props, data) {
|
||||
return (
|
||||
<o-equal-space style='margin: 0;padding: 0;'>
|
||||
<div class='a'></div>
|
||||
<div class='b'></div>
|
||||
<div class='c'></div>
|
||||
<div class='d'></div>
|
||||
<div class='e'></div>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-icon
|
||||
path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
|
||||
</o-icon>
|
||||
<o-icon paths={[{
|
||||
color: '#F98080',
|
||||
path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
|
||||
}, {
|
||||
color: '#F95050',
|
||||
path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
|
||||
}]}></o-icon>
|
||||
<o-icon type="loading" rotate isFill />
|
||||
<o-icon type="close" isFill />
|
||||
<o-icon type="pay" isFill />
|
||||
<o-icon type="chat" isFill />
|
||||
<o-icon type="scan" isFill />
|
||||
<o-icon type="add-friend" isFill />
|
||||
|
||||
<o-equal-space>
|
||||
<o-icon type="loading" rotate isFill>
|
||||
Loading
|
||||
</o-icon>
|
||||
<o-icon type="close" isFill>
|
||||
Close
|
||||
</o-icon>
|
||||
<o-icon type="pay" isFill>
|
||||
Pay
|
||||
</o-icon>
|
||||
</o-equal-space>
|
||||
|
||||
<o-equal-space>
|
||||
<o-icon type="loading" color='#07C160' rotate isFill>
|
||||
Loading
|
||||
</o-icon>
|
||||
<o-icon type="close" color='#07C160' isFill>
|
||||
Close
|
||||
</o-icon>
|
||||
<o-icon type="pay" color='#07C160' isFill>
|
||||
Pay
|
||||
</o-icon>
|
||||
</o-equal-space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<o-button
|
||||
onClick={() => {
|
||||
console.log('Hello button!')
|
||||
}}
|
||||
>
|
||||
Normal
|
||||
</o-button>
|
||||
<o-button disabled>Disabled</o-button>
|
||||
|
||||
<o-button type="default">Default Normal</o-button>
|
||||
<o-button type="default" disabled>
|
||||
Default Disabled
|
||||
</o-button>
|
||||
|
||||
<o-button type="warn">Warn Normal</o-button>
|
||||
<o-button type="warn" disabled>
|
||||
Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space itemMargin='10px'>
|
||||
<o-button type="default" plain>
|
||||
Default Plain
|
||||
</o-button>
|
||||
<o-button type="primary" plain>
|
||||
Primary Plain
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
|
||||
<o-button type="primary" plain disabled>
|
||||
Primary Plain Disabled
|
||||
</o-button>
|
||||
|
||||
<o-equal-space style='margin-top:10px;background-color:#ddd;'>
|
||||
<o-button size="small">Mini</o-button>
|
||||
<o-button type="default" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
<o-button type="warn" size="small">
|
||||
Mini
|
||||
</o-button>
|
||||
</o-equal-space>
|
||||
<br></br>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
onInputNumberChange = (num) => {
|
||||
console.log(num)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-input-number
|
||||
onChange={this.onInputNumberChange}
|
||||
min={1}
|
||||
max={10}
|
||||
step={1}
|
||||
value={2}
|
||||
label="描述文字"
|
||||
/>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
dataSource = [{
|
||||
id: 1,
|
||||
name: 'xwang',
|
||||
age: 18,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'dntzhang',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'lucy',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'john',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'tim',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}];
|
||||
|
||||
columns = [{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
}]
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-input-table
|
||||
dataSource={this.dataSource}
|
||||
columns={this.columns}>
|
||||
</o-input-table>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
onClick = (e, value) => {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<div>
|
||||
<o-input style="width:200px;" placeholder="Enter your name" />
|
||||
<br /><br />
|
||||
<o-input-label label='UserName' />
|
||||
<br />
|
||||
<o-input-button buttonText='提交' onClick={this.onClick} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,341 @@
|
|||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
height: 300px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror-overwrite .CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: -50px; bottom: -20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
.cm-strikethrough {text-decoration: line-through;}
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
.CodeMirror-composing { border-bottom: 2px solid; }
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
|
||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
background: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after { content: ''; }
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,784 @@
|
|||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
function expressionAllowed(stream, state, backUp) {
|
||||
return /^(?:operator|sof|keyword c|case|new|[\[{}\(,;:]|=>)$/.test(state.lastType) ||
|
||||
(state.lastType == "quasi" && /\{\s*$/.test(stream.string.slice(0, stream.pos - (backUp || 0))))
|
||||
}
|
||||
|
||||
CodeMirror.defineMode("javascript", function(config, parserConfig) {
|
||||
var indentUnit = config.indentUnit;
|
||||
var statementIndent = parserConfig.statementIndent;
|
||||
var jsonldMode = parserConfig.jsonld;
|
||||
var jsonMode = parserConfig.json || jsonldMode;
|
||||
var isTS = parserConfig.typescript;
|
||||
var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
|
||||
|
||||
// Tokenizer
|
||||
|
||||
var keywords = function(){
|
||||
function kw(type) {return {type: type, style: "keyword"};}
|
||||
var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
|
||||
var operator = kw("operator"), atom = {type: "atom", style: "atom"};
|
||||
|
||||
var jsKeywords = {
|
||||
"if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
|
||||
"return": C, "break": C, "continue": C, "new": kw("new"), "delete": C, "throw": C, "debugger": C,
|
||||
"var": kw("var"), "const": kw("var"), "let": kw("var"),
|
||||
"function": kw("function"), "catch": kw("catch"),
|
||||
"for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
|
||||
"in": operator, "typeof": operator, "instanceof": operator,
|
||||
"true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
|
||||
"this": kw("this"), "class": kw("class"), "super": kw("atom"),
|
||||
"yield": C, "export": kw("export"), "import": kw("import"), "extends": C,
|
||||
"await": C, "async": kw("async")
|
||||
};
|
||||
|
||||
// Extend the 'normal' keywords with the TypeScript language extensions
|
||||
if (isTS) {
|
||||
var type = {type: "variable", style: "variable-3"};
|
||||
var tsKeywords = {
|
||||
// object-like things
|
||||
"interface": kw("class"),
|
||||
"implements": C,
|
||||
"namespace": C,
|
||||
"module": kw("module"),
|
||||
"enum": kw("module"),
|
||||
"type": kw("type"),
|
||||
|
||||
// scope modifiers
|
||||
"public": kw("modifier"),
|
||||
"private": kw("modifier"),
|
||||
"protected": kw("modifier"),
|
||||
"abstract": kw("modifier"),
|
||||
|
||||
// operators
|
||||
"as": operator,
|
||||
|
||||
// types
|
||||
"string": type, "number": type, "boolean": type, "any": type
|
||||
};
|
||||
|
||||
for (var attr in tsKeywords) {
|
||||
jsKeywords[attr] = tsKeywords[attr];
|
||||
}
|
||||
}
|
||||
|
||||
return jsKeywords;
|
||||
}();
|
||||
|
||||
var isOperatorChar = /[+\-*&%=<>!?|~^]/;
|
||||
var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
|
||||
|
||||
function readRegexp(stream) {
|
||||
var escaped = false, next, inSet = false;
|
||||
while ((next = stream.next()) != null) {
|
||||
if (!escaped) {
|
||||
if (next == "/" && !inSet) return;
|
||||
if (next == "[") inSet = true;
|
||||
else if (inSet && next == "]") inSet = false;
|
||||
}
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
}
|
||||
|
||||
// Used as scratch variables to communicate multiple values without
|
||||
// consing up tons of objects.
|
||||
var type, content;
|
||||
function ret(tp, style, cont) {
|
||||
type = tp; content = cont;
|
||||
return style;
|
||||
}
|
||||
function tokenBase(stream, state) {
|
||||
var ch = stream.next();
|
||||
if (ch == '"' || ch == "'") {
|
||||
state.tokenize = tokenString(ch);
|
||||
return state.tokenize(stream, state);
|
||||
} else if (ch == "." && stream.match(/^\d+(?:[eE][+\-]?\d+)?/)) {
|
||||
return ret("number", "number");
|
||||
} else if (ch == "." && stream.match("..")) {
|
||||
return ret("spread", "meta");
|
||||
} else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
|
||||
return ret(ch);
|
||||
} else if (ch == "=" && stream.eat(">")) {
|
||||
return ret("=>", "operator");
|
||||
} else if (ch == "0" && stream.eat(/x/i)) {
|
||||
stream.eatWhile(/[\da-f]/i);
|
||||
return ret("number", "number");
|
||||
} else if (ch == "0" && stream.eat(/o/i)) {
|
||||
stream.eatWhile(/[0-7]/i);
|
||||
return ret("number", "number");
|
||||
} else if (ch == "0" && stream.eat(/b/i)) {
|
||||
stream.eatWhile(/[01]/i);
|
||||
return ret("number", "number");
|
||||
} else if (/\d/.test(ch)) {
|
||||
stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
|
||||
return ret("number", "number");
|
||||
} else if (ch == "/") {
|
||||
if (stream.eat("*")) {
|
||||
state.tokenize = tokenComment;
|
||||
return tokenComment(stream, state);
|
||||
} else if (stream.eat("/")) {
|
||||
stream.skipToEnd();
|
||||
return ret("comment", "comment");
|
||||
} else if (expressionAllowed(stream, state, 1)) {
|
||||
readRegexp(stream);
|
||||
stream.match(/^\b(([gimyu])(?![gimyu]*\2))+\b/);
|
||||
return ret("regexp", "string-2");
|
||||
} else {
|
||||
stream.eatWhile(isOperatorChar);
|
||||
return ret("operator", "operator", stream.current());
|
||||
}
|
||||
} else if (ch == "`") {
|
||||
state.tokenize = tokenQuasi;
|
||||
return tokenQuasi(stream, state);
|
||||
} else if (ch == "#") {
|
||||
stream.skipToEnd();
|
||||
return ret("error", "error");
|
||||
} else if (isOperatorChar.test(ch)) {
|
||||
stream.eatWhile(isOperatorChar);
|
||||
return ret("operator", "operator", stream.current());
|
||||
} else if (wordRE.test(ch)) {
|
||||
stream.eatWhile(wordRE);
|
||||
var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
|
||||
return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
|
||||
ret("variable", "variable", word);
|
||||
}
|
||||
}
|
||||
|
||||
function tokenString(quote) {
|
||||
return function(stream, state) {
|
||||
var escaped = false, next;
|
||||
if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
|
||||
state.tokenize = tokenBase;
|
||||
return ret("jsonld-keyword", "meta");
|
||||
}
|
||||
while ((next = stream.next()) != null) {
|
||||
if (next == quote && !escaped) break;
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
if (!escaped) state.tokenize = tokenBase;
|
||||
return ret("string", "string");
|
||||
};
|
||||
}
|
||||
|
||||
function tokenComment(stream, state) {
|
||||
var maybeEnd = false, ch;
|
||||
while (ch = stream.next()) {
|
||||
if (ch == "/" && maybeEnd) {
|
||||
state.tokenize = tokenBase;
|
||||
break;
|
||||
}
|
||||
maybeEnd = (ch == "*");
|
||||
}
|
||||
return ret("comment", "comment");
|
||||
}
|
||||
|
||||
function tokenQuasi(stream, state) {
|
||||
var escaped = false, next;
|
||||
while ((next = stream.next()) != null) {
|
||||
if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
|
||||
state.tokenize = tokenBase;
|
||||
break;
|
||||
}
|
||||
escaped = !escaped && next == "\\";
|
||||
}
|
||||
return ret("quasi", "string-2", stream.current());
|
||||
}
|
||||
|
||||
var brackets = "([{}])";
|
||||
// This is a crude lookahead trick to try and notice that we're
|
||||
// parsing the argument patterns for a fat-arrow function before we
|
||||
// actually hit the arrow token. It only works if the arrow is on
|
||||
// the same line as the arguments and there's no strange noise
|
||||
// (comments) in between. Fallback is to only notice when we hit the
|
||||
// arrow, and not declare the arguments as locals for the arrow
|
||||
// body.
|
||||
function findFatArrow(stream, state) {
|
||||
if (state.fatArrowAt) state.fatArrowAt = null;
|
||||
var arrow = stream.string.indexOf("=>", stream.start);
|
||||
if (arrow < 0) return;
|
||||
|
||||
if (isTS) { // Try to skip TypeScript return type declarations after the arguments
|
||||
var m = /:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(stream.string.slice(stream.start, arrow))
|
||||
if (m) arrow = m.index
|
||||
}
|
||||
|
||||
var depth = 0, sawSomething = false;
|
||||
for (var pos = arrow - 1; pos >= 0; --pos) {
|
||||
var ch = stream.string.charAt(pos);
|
||||
var bracket = brackets.indexOf(ch);
|
||||
if (bracket >= 0 && bracket < 3) {
|
||||
if (!depth) { ++pos; break; }
|
||||
if (--depth == 0) { if (ch == "(") sawSomething = true; break; }
|
||||
} else if (bracket >= 3 && bracket < 6) {
|
||||
++depth;
|
||||
} else if (wordRE.test(ch)) {
|
||||
sawSomething = true;
|
||||
} else if (/["'\/]/.test(ch)) {
|
||||
return;
|
||||
} else if (sawSomething && !depth) {
|
||||
++pos;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (sawSomething && !depth) state.fatArrowAt = pos;
|
||||
}
|
||||
|
||||
// Parser
|
||||
|
||||
var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
|
||||
|
||||
function JSLexical(indented, column, type, align, prev, info) {
|
||||
this.indented = indented;
|
||||
this.column = column;
|
||||
this.type = type;
|
||||
this.prev = prev;
|
||||
this.info = info;
|
||||
if (align != null) this.align = align;
|
||||
}
|
||||
|
||||
function inScope(state, varname) {
|
||||
for (var v = state.localVars; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
for (var cx = state.context; cx; cx = cx.prev) {
|
||||
for (var v = cx.vars; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
}
|
||||
}
|
||||
|
||||
function parseJS(state, style, type, content, stream) {
|
||||
var cc = state.cc;
|
||||
// Communicate our context to the combinators.
|
||||
// (Less wasteful than consing up a hundred closures on every call.)
|
||||
cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
|
||||
|
||||
if (!state.lexical.hasOwnProperty("align"))
|
||||
state.lexical.align = true;
|
||||
|
||||
while(true) {
|
||||
var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
|
||||
if (combinator(type, content)) {
|
||||
while(cc.length && cc[cc.length - 1].lex)
|
||||
cc.pop()();
|
||||
if (cx.marked) return cx.marked;
|
||||
if (type == "variable" && inScope(state, content)) return "variable-2";
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Combinator utils
|
||||
|
||||
var cx = {state: null, column: null, marked: null, cc: null};
|
||||
function pass() {
|
||||
for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
|
||||
}
|
||||
function cont() {
|
||||
pass.apply(null, arguments);
|
||||
return true;
|
||||
}
|
||||
function register(varname) {
|
||||
function inList(list) {
|
||||
for (var v = list; v; v = v.next)
|
||||
if (v.name == varname) return true;
|
||||
return false;
|
||||
}
|
||||
var state = cx.state;
|
||||
cx.marked = "def";
|
||||
if (state.context) {
|
||||
if (inList(state.localVars)) return;
|
||||
state.localVars = {name: varname, next: state.localVars};
|
||||
} else {
|
||||
if (inList(state.globalVars)) return;
|
||||
if (parserConfig.globalVars)
|
||||
state.globalVars = {name: varname, next: state.globalVars};
|
||||
}
|
||||
}
|
||||
|
||||
// Combinators
|
||||
|
||||
var defaultVars = {name: "this", next: {name: "arguments"}};
|
||||
function pushcontext() {
|
||||
cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
|
||||
cx.state.localVars = defaultVars;
|
||||
}
|
||||
function popcontext() {
|
||||
cx.state.localVars = cx.state.context.vars;
|
||||
cx.state.context = cx.state.context.prev;
|
||||
}
|
||||
function pushlex(type, info) {
|
||||
var result = function() {
|
||||
var state = cx.state, indent = state.indented;
|
||||
if (state.lexical.type == "stat") indent = state.lexical.indented;
|
||||
else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
|
||||
indent = outer.indented;
|
||||
state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
|
||||
};
|
||||
result.lex = true;
|
||||
return result;
|
||||
}
|
||||
function poplex() {
|
||||
var state = cx.state;
|
||||
if (state.lexical.prev) {
|
||||
if (state.lexical.type == ")")
|
||||
state.indented = state.lexical.indented;
|
||||
state.lexical = state.lexical.prev;
|
||||
}
|
||||
}
|
||||
poplex.lex = true;
|
||||
|
||||
function expect(wanted) {
|
||||
function exp(type) {
|
||||
if (type == wanted) return cont();
|
||||
else if (wanted == ";") return pass();
|
||||
else return cont(exp);
|
||||
};
|
||||
return exp;
|
||||
}
|
||||
|
||||
function statement(type, value) {
|
||||
if (type == "var") return cont(pushlex("vardef", value.length), vardef, expect(";"), poplex);
|
||||
if (type == "keyword a") return cont(pushlex("form"), parenExpr, statement, poplex);
|
||||
if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
|
||||
if (type == "{") return cont(pushlex("}"), block, poplex);
|
||||
if (type == ";") return cont();
|
||||
if (type == "if") {
|
||||
if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
|
||||
cx.state.cc.pop()();
|
||||
return cont(pushlex("form"), parenExpr, statement, poplex, maybeelse);
|
||||
}
|
||||
if (type == "function") return cont(functiondef);
|
||||
if (type == "for") return cont(pushlex("form"), forspec, statement, poplex);
|
||||
if (type == "variable") return cont(pushlex("stat"), maybelabel);
|
||||
if (type == "switch") return cont(pushlex("form"), parenExpr, pushlex("}", "switch"), expect("{"),
|
||||
block, poplex, poplex);
|
||||
if (type == "case") return cont(expression, expect(":"));
|
||||
if (type == "default") return cont(expect(":"));
|
||||
if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
|
||||
statement, poplex, popcontext);
|
||||
if (type == "class") return cont(pushlex("form"), className, poplex);
|
||||
if (type == "export") return cont(pushlex("stat"), afterExport, poplex);
|
||||
if (type == "import") return cont(pushlex("stat"), afterImport, poplex);
|
||||
if (type == "module") return cont(pushlex("form"), pattern, pushlex("}"), expect("{"), block, poplex, poplex)
|
||||
if (type == "type") return cont(typeexpr, expect("operator"), typeexpr, expect(";"));
|
||||
if (type == "async") return cont(statement)
|
||||
return pass(pushlex("stat"), expression, expect(";"), poplex);
|
||||
}
|
||||
function expression(type) {
|
||||
return expressionInner(type, false);
|
||||
}
|
||||
function expressionNoComma(type) {
|
||||
return expressionInner(type, true);
|
||||
}
|
||||
function parenExpr(type) {
|
||||
if (type != "(") return pass()
|
||||
return cont(pushlex(")"), expression, expect(")"), poplex)
|
||||
}
|
||||
function expressionInner(type, noComma) {
|
||||
if (cx.state.fatArrowAt == cx.stream.start) {
|
||||
var body = noComma ? arrowBodyNoComma : arrowBody;
|
||||
if (type == "(") return cont(pushcontext, pushlex(")"), commasep(pattern, ")"), poplex, expect("=>"), body, popcontext);
|
||||
else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
|
||||
}
|
||||
|
||||
var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
|
||||
if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
|
||||
if (type == "function") return cont(functiondef, maybeop);
|
||||
if (type == "class") return cont(pushlex("form"), classExpression, poplex);
|
||||
if (type == "keyword c" || type == "async") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
|
||||
if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
|
||||
if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
|
||||
if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
|
||||
if (type == "{") return contCommasep(objprop, "}", null, maybeop);
|
||||
if (type == "quasi") return pass(quasi, maybeop);
|
||||
if (type == "new") return cont(maybeTarget(noComma));
|
||||
return cont();
|
||||
}
|
||||
function maybeexpression(type) {
|
||||
if (type.match(/[;\}\)\],]/)) return pass();
|
||||
return pass(expression);
|
||||
}
|
||||
function maybeexpressionNoComma(type) {
|
||||
if (type.match(/[;\}\)\],]/)) return pass();
|
||||
return pass(expressionNoComma);
|
||||
}
|
||||
|
||||
function maybeoperatorComma(type, value) {
|
||||
if (type == ",") return cont(expression);
|
||||
return maybeoperatorNoComma(type, value, false);
|
||||
}
|
||||
function maybeoperatorNoComma(type, value, noComma) {
|
||||
var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
|
||||
var expr = noComma == false ? expression : expressionNoComma;
|
||||
if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
|
||||
if (type == "operator") {
|
||||
if (/\+\+|--/.test(value)) return cont(me);
|
||||
if (value == "?") return cont(expression, expect(":"), expr);
|
||||
return cont(expr);
|
||||
}
|
||||
if (type == "quasi") { return pass(quasi, me); }
|
||||
if (type == ";") return;
|
||||
if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
|
||||
if (type == ".") return cont(property, me);
|
||||
if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
|
||||
}
|
||||
function quasi(type, value) {
|
||||
if (type != "quasi") return pass();
|
||||
if (value.slice(value.length - 2) != "${") return cont(quasi);
|
||||
return cont(expression, continueQuasi);
|
||||
}
|
||||
function continueQuasi(type) {
|
||||
if (type == "}") {
|
||||
cx.marked = "string-2";
|
||||
cx.state.tokenize = tokenQuasi;
|
||||
return cont(quasi);
|
||||
}
|
||||
}
|
||||
function arrowBody(type) {
|
||||
findFatArrow(cx.stream, cx.state);
|
||||
return pass(type == "{" ? statement : expression);
|
||||
}
|
||||
function arrowBodyNoComma(type) {
|
||||
findFatArrow(cx.stream, cx.state);
|
||||
return pass(type == "{" ? statement : expressionNoComma);
|
||||
}
|
||||
function maybeTarget(noComma) {
|
||||
return function(type) {
|
||||
if (type == ".") return cont(noComma ? targetNoComma : target);
|
||||
else return pass(noComma ? expressionNoComma : expression);
|
||||
};
|
||||
}
|
||||
function target(_, value) {
|
||||
if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorComma); }
|
||||
}
|
||||
function targetNoComma(_, value) {
|
||||
if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorNoComma); }
|
||||
}
|
||||
function maybelabel(type) {
|
||||
if (type == ":") return cont(poplex, statement);
|
||||
return pass(maybeoperatorComma, expect(";"), poplex);
|
||||
}
|
||||
function property(type) {
|
||||
if (type == "variable") {cx.marked = "property"; return cont();}
|
||||
}
|
||||
function objprop(type, value) {
|
||||
if (type == "async") {
|
||||
cx.marked = "property";
|
||||
return cont(objprop);
|
||||
} else if (type == "variable" || cx.style == "keyword") {
|
||||
cx.marked = "property";
|
||||
if (value == "get" || value == "set") return cont(getterSetter);
|
||||
return cont(afterprop);
|
||||
} else if (type == "number" || type == "string") {
|
||||
cx.marked = jsonldMode ? "property" : (cx.style + " property");
|
||||
return cont(afterprop);
|
||||
} else if (type == "jsonld-keyword") {
|
||||
return cont(afterprop);
|
||||
} else if (type == "modifier") {
|
||||
return cont(objprop)
|
||||
} else if (type == "[") {
|
||||
return cont(expression, expect("]"), afterprop);
|
||||
} else if (type == "spread") {
|
||||
return cont(expression);
|
||||
} else if (type == ":") {
|
||||
return pass(afterprop)
|
||||
}
|
||||
}
|
||||
function getterSetter(type) {
|
||||
if (type != "variable") return pass(afterprop);
|
||||
cx.marked = "property";
|
||||
return cont(functiondef);
|
||||
}
|
||||
function afterprop(type) {
|
||||
if (type == ":") return cont(expressionNoComma);
|
||||
if (type == "(") return pass(functiondef);
|
||||
}
|
||||
function commasep(what, end) {
|
||||
function proceed(type, value) {
|
||||
if (type == ",") {
|
||||
var lex = cx.state.lexical;
|
||||
if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
|
||||
return cont(function(type, value) {
|
||||
if (type == end || value == end) return pass()
|
||||
return pass(what)
|
||||
}, proceed);
|
||||
}
|
||||
if (type == end || value == end) return cont();
|
||||
return cont(expect(end));
|
||||
}
|
||||
return function(type, value) {
|
||||
if (type == end || value == end) return cont();
|
||||
return pass(what, proceed);
|
||||
};
|
||||
}
|
||||
function contCommasep(what, end, info) {
|
||||
for (var i = 3; i < arguments.length; i++)
|
||||
cx.cc.push(arguments[i]);
|
||||
return cont(pushlex(end, info), commasep(what, end), poplex);
|
||||
}
|
||||
function block(type) {
|
||||
if (type == "}") return cont();
|
||||
return pass(statement, block);
|
||||
}
|
||||
function maybetype(type, value) {
|
||||
if (isTS) {
|
||||
if (type == ":") return cont(typeexpr);
|
||||
if (value == "?") return cont(maybetype);
|
||||
}
|
||||
}
|
||||
function typeexpr(type) {
|
||||
if (type == "variable") {cx.marked = "variable-3"; return cont(afterType);}
|
||||
if (type == "{") return cont(commasep(typeprop, "}"))
|
||||
if (type == "(") return cont(commasep(typearg, ")"), maybeReturnType)
|
||||
}
|
||||
function maybeReturnType(type) {
|
||||
if (type == "=>") return cont(typeexpr)
|
||||
}
|
||||
function typeprop(type) {
|
||||
if (type == "variable" || cx.style == "keyword") {
|
||||
cx.marked = "property"
|
||||
return cont(typeprop)
|
||||
} else if (type == ":") {
|
||||
return cont(typeexpr)
|
||||
}
|
||||
}
|
||||
function typearg(type) {
|
||||
if (type == "variable") return cont(typearg)
|
||||
else if (type == ":") return cont(typeexpr)
|
||||
}
|
||||
function afterType(type, value) {
|
||||
if (value == "<") return cont(commasep(typeexpr, ">"), afterType)
|
||||
if (type == "[") return cont(expect("]"), afterType)
|
||||
}
|
||||
function vardef() {
|
||||
return pass(pattern, maybetype, maybeAssign, vardefCont);
|
||||
}
|
||||
function pattern(type, value) {
|
||||
if (type == "modifier") return cont(pattern)
|
||||
if (type == "variable") { register(value); return cont(); }
|
||||
if (type == "spread") return cont(pattern);
|
||||
if (type == "[") return contCommasep(pattern, "]");
|
||||
if (type == "{") return contCommasep(proppattern, "}");
|
||||
}
|
||||
function proppattern(type, value) {
|
||||
if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
|
||||
register(value);
|
||||
return cont(maybeAssign);
|
||||
}
|
||||
if (type == "variable") cx.marked = "property";
|
||||
if (type == "spread") return cont(pattern);
|
||||
if (type == "}") return pass();
|
||||
return cont(expect(":"), pattern, maybeAssign);
|
||||
}
|
||||
function maybeAssign(_type, value) {
|
||||
if (value == "=") return cont(expressionNoComma);
|
||||
}
|
||||
function vardefCont(type) {
|
||||
if (type == ",") return cont(vardef);
|
||||
}
|
||||
function maybeelse(type, value) {
|
||||
if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
|
||||
}
|
||||
function forspec(type) {
|
||||
if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
|
||||
}
|
||||
function forspec1(type) {
|
||||
if (type == "var") return cont(vardef, expect(";"), forspec2);
|
||||
if (type == ";") return cont(forspec2);
|
||||
if (type == "variable") return cont(formaybeinof);
|
||||
return pass(expression, expect(";"), forspec2);
|
||||
}
|
||||
function formaybeinof(_type, value) {
|
||||
if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
|
||||
return cont(maybeoperatorComma, forspec2);
|
||||
}
|
||||
function forspec2(type, value) {
|
||||
if (type == ";") return cont(forspec3);
|
||||
if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
|
||||
return pass(expression, expect(";"), forspec3);
|
||||
}
|
||||
function forspec3(type) {
|
||||
if (type != ")") cont(expression);
|
||||
}
|
||||
function functiondef(type, value) {
|
||||
if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
|
||||
if (type == "variable") {register(value); return cont(functiondef);}
|
||||
if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, maybetype, statement, popcontext);
|
||||
}
|
||||
function funarg(type) {
|
||||
if (type == "spread") return cont(funarg);
|
||||
return pass(pattern, maybetype, maybeAssign);
|
||||
}
|
||||
function classExpression(type, value) {
|
||||
// Class expressions may have an optional name.
|
||||
if (type == "variable") return className(type, value);
|
||||
return classNameAfter(type, value);
|
||||
}
|
||||
function className(type, value) {
|
||||
if (type == "variable") {register(value); return cont(classNameAfter);}
|
||||
}
|
||||
function classNameAfter(type, value) {
|
||||
if (value == "extends" || value == "implements") return cont(isTS ? typeexpr : expression, classNameAfter);
|
||||
if (type == "{") return cont(pushlex("}"), classBody, poplex);
|
||||
}
|
||||
function classBody(type, value) {
|
||||
if (type == "variable" || cx.style == "keyword") {
|
||||
if ((value == "static" || value == "get" || value == "set" ||
|
||||
(isTS && (value == "public" || value == "private" || value == "protected" || value == "readonly" || value == "abstract"))) &&
|
||||
cx.stream.match(/^\s+[\w$\xa1-\uffff]/, false)) {
|
||||
cx.marked = "keyword";
|
||||
return cont(classBody);
|
||||
}
|
||||
cx.marked = "property";
|
||||
return cont(isTS ? classfield : functiondef, classBody);
|
||||
}
|
||||
if (value == "*") {
|
||||
cx.marked = "keyword";
|
||||
return cont(classBody);
|
||||
}
|
||||
if (type == ";") return cont(classBody);
|
||||
if (type == "}") return cont();
|
||||
}
|
||||
function classfield(type, value) {
|
||||
if (value == "?") return cont(classfield)
|
||||
if (type == ":") return cont(typeexpr, maybeAssign)
|
||||
return pass(functiondef)
|
||||
}
|
||||
function afterExport(_type, value) {
|
||||
if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
|
||||
if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
|
||||
return pass(statement);
|
||||
}
|
||||
function afterImport(type) {
|
||||
if (type == "string") return cont();
|
||||
return pass(importSpec, maybeFrom);
|
||||
}
|
||||
function importSpec(type, value) {
|
||||
if (type == "{") return contCommasep(importSpec, "}");
|
||||
if (type == "variable") register(value);
|
||||
if (value == "*") cx.marked = "keyword";
|
||||
return cont(maybeAs);
|
||||
}
|
||||
function maybeAs(_type, value) {
|
||||
if (value == "as") { cx.marked = "keyword"; return cont(importSpec); }
|
||||
}
|
||||
function maybeFrom(_type, value) {
|
||||
if (value == "from") { cx.marked = "keyword"; return cont(expression); }
|
||||
}
|
||||
function arrayLiteral(type) {
|
||||
if (type == "]") return cont();
|
||||
return pass(commasep(expressionNoComma, "]"));
|
||||
}
|
||||
|
||||
function isContinuedStatement(state, textAfter) {
|
||||
return state.lastType == "operator" || state.lastType == "," ||
|
||||
isOperatorChar.test(textAfter.charAt(0)) ||
|
||||
/[,.]/.test(textAfter.charAt(0));
|
||||
}
|
||||
|
||||
// Interface
|
||||
|
||||
return {
|
||||
startState: function(basecolumn) {
|
||||
var state = {
|
||||
tokenize: tokenBase,
|
||||
lastType: "sof",
|
||||
cc: [],
|
||||
lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
|
||||
localVars: parserConfig.localVars,
|
||||
context: parserConfig.localVars && {vars: parserConfig.localVars},
|
||||
indented: basecolumn || 0
|
||||
};
|
||||
if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
|
||||
state.globalVars = parserConfig.globalVars;
|
||||
return state;
|
||||
},
|
||||
|
||||
token: function(stream, state) {
|
||||
if (stream.sol()) {
|
||||
if (!state.lexical.hasOwnProperty("align"))
|
||||
state.lexical.align = false;
|
||||
state.indented = stream.indentation();
|
||||
findFatArrow(stream, state);
|
||||
}
|
||||
if (state.tokenize != tokenComment && stream.eatSpace()) return null;
|
||||
var style = state.tokenize(stream, state);
|
||||
if (type == "comment") return style;
|
||||
state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
|
||||
return parseJS(state, style, type, content, stream);
|
||||
},
|
||||
|
||||
indent: function(state, textAfter) {
|
||||
if (state.tokenize == tokenComment) return CodeMirror.Pass;
|
||||
if (state.tokenize != tokenBase) return 0;
|
||||
var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical, top
|
||||
// Kludge to prevent 'maybelse' from blocking lexical scope pops
|
||||
if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
|
||||
var c = state.cc[i];
|
||||
if (c == poplex) lexical = lexical.prev;
|
||||
else if (c != maybeelse) break;
|
||||
}
|
||||
while ((lexical.type == "stat" || lexical.type == "form") &&
|
||||
(firstChar == "}" || ((top = state.cc[state.cc.length - 1]) &&
|
||||
(top == maybeoperatorComma || top == maybeoperatorNoComma) &&
|
||||
!/^[,\.=+\-*:?[\(]/.test(textAfter))))
|
||||
lexical = lexical.prev;
|
||||
if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
|
||||
lexical = lexical.prev;
|
||||
var type = lexical.type, closing = firstChar == type;
|
||||
|
||||
if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info + 1 : 0);
|
||||
else if (type == "form" && firstChar == "{") return lexical.indented;
|
||||
else if (type == "form") return lexical.indented + indentUnit;
|
||||
else if (type == "stat")
|
||||
return lexical.indented + (isContinuedStatement(state, textAfter) ? statementIndent || indentUnit : 0);
|
||||
else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
|
||||
return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
|
||||
else if (lexical.align) return lexical.column + (closing ? 0 : 1);
|
||||
else return lexical.indented + (closing ? 0 : indentUnit);
|
||||
},
|
||||
|
||||
electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
|
||||
blockCommentStart: jsonMode ? null : "/*",
|
||||
blockCommentEnd: jsonMode ? null : "*/",
|
||||
lineComment: jsonMode ? null : "//",
|
||||
fold: "brace",
|
||||
closeBrackets: "()[]{}''\"\"``",
|
||||
|
||||
helperType: jsonMode ? "json" : "javascript",
|
||||
jsonldMode: jsonldMode,
|
||||
jsonMode: jsonMode,
|
||||
|
||||
expressionAllowed: expressionAllowed,
|
||||
skipExpression: function(state) {
|
||||
var top = state.cc[state.cc.length - 1]
|
||||
if (top == expression || top == expressionNoComma) state.cc.pop()
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
|
||||
|
||||
CodeMirror.defineMIME("text/javascript", "javascript");
|
||||
CodeMirror.defineMIME("text/ecmascript", "javascript");
|
||||
CodeMirror.defineMIME("application/javascript", "javascript");
|
||||
CodeMirror.defineMIME("application/x-javascript", "javascript");
|
||||
CodeMirror.defineMIME("application/ecmascript", "javascript");
|
||||
CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
|
||||
CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
|
||||
CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true});
|
||||
CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
|
||||
CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,461 @@
|
|||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,235 @@
|
|||
/**
|
||||
@license @nocompile
|
||||
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
(function(){/*
|
||||
|
||||
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
'use strict';var q,aa="undefined"!=typeof window&&window===this?this:"undefined"!=typeof global&&null!=global?global:this,ba="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){a!=Array.prototype&&a!=Object.prototype&&(a[b]=c.value)};function ca(){ca=function(){};aa.Symbol||(aa.Symbol=da)}var da=function(){var a=0;return function(b){return"jscomp_symbol_"+(b||"")+a++}}();
|
||||
function ea(){ca();var a=aa.Symbol.iterator;a||(a=aa.Symbol.iterator=aa.Symbol("iterator"));"function"!=typeof Array.prototype[a]&&ba(Array.prototype,a,{configurable:!0,writable:!0,value:function(){return fa(this)}});ea=function(){}}function fa(a){var b=0;return ha(function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}})}function ha(a){ea();a={next:a};a[aa.Symbol.iterator]=function(){return this};return a}function ia(a){ea();var b=a[Symbol.iterator];return b?b.call(a):fa(a)}
|
||||
function ja(a){for(var b,c=[];!(b=a.next()).done;)c.push(b.value);return c}
|
||||
(function(){if(!function(){var a=document.createEvent("Event");a.initEvent("foo",!0,!0);a.preventDefault();return a.defaultPrevented}()){var a=Event.prototype.preventDefault;Event.prototype.preventDefault=function(){this.cancelable&&(a.call(this),Object.defineProperty(this,"defaultPrevented",{get:function(){return!0},configurable:!0}))}}var b=/Trident/.test(navigator.userAgent);if(!window.CustomEvent||b&&"function"!==typeof window.CustomEvent)window.CustomEvent=function(a,b){b=b||{};var c=document.createEvent("CustomEvent");
|
||||
c.initCustomEvent(a,!!b.bubbles,!!b.cancelable,b.detail);return c},window.CustomEvent.prototype=window.Event.prototype;if(!window.Event||b&&"function"!==typeof window.Event){var c=window.Event;window.Event=function(a,b){b=b||{};var c=document.createEvent("Event");c.initEvent(a,!!b.bubbles,!!b.cancelable);return c};if(c)for(var d in c)window.Event[d]=c[d];window.Event.prototype=c.prototype}if(!window.MouseEvent||b&&"function"!==typeof window.MouseEvent){b=window.MouseEvent;window.MouseEvent=function(a,
|
||||
b){b=b||{};var c=document.createEvent("MouseEvent");c.initMouseEvent(a,!!b.bubbles,!!b.cancelable,b.view||window,b.detail,b.screenX,b.screenY,b.clientX,b.clientY,b.ctrlKey,b.altKey,b.shiftKey,b.metaKey,b.button,b.relatedTarget);return c};if(b)for(d in b)window.MouseEvent[d]=b[d];window.MouseEvent.prototype=b.prototype}Array.from||(Array.from=function(a){return[].slice.call(a)});Object.assign||(Object.assign=function(a,b){for(var c=[].slice.call(arguments,1),d=0,e;d<c.length;d++)if(e=c[d])for(var f=
|
||||
a,n=e,r=Object.getOwnPropertyNames(n),G=0;G<r.length;G++)e=r[G],f[e]=n[e];return a})})(window.WebComponents);(function(){function a(){}function b(a,b){if(!a.childNodes.length)return[];switch(a.nodeType){case Node.DOCUMENT_NODE:return G.call(a,b);case Node.DOCUMENT_FRAGMENT_NODE:return x.call(a,b);default:return r.call(a,b)}}var c="undefined"===typeof HTMLTemplateElement,d=!(document.createDocumentFragment().cloneNode()instanceof DocumentFragment),e=!1;/Trident/.test(navigator.userAgent)&&function(){function a(a,b){if(a instanceof DocumentFragment)for(var d;d=a.firstChild;)c.call(this,d,b);else c.call(this,
|
||||
a,b);return a}e=!0;var b=Node.prototype.cloneNode;Node.prototype.cloneNode=function(a){a=b.call(this,a);this instanceof DocumentFragment&&(a.__proto__=DocumentFragment.prototype);return a};DocumentFragment.prototype.querySelectorAll=HTMLElement.prototype.querySelectorAll;DocumentFragment.prototype.querySelector=HTMLElement.prototype.querySelector;Object.defineProperties(DocumentFragment.prototype,{nodeType:{get:function(){return Node.DOCUMENT_FRAGMENT_NODE},configurable:!0},localName:{get:function(){},
|
||||
configurable:!0},nodeName:{get:function(){return"#document-fragment"},configurable:!0}});var c=Node.prototype.insertBefore;Node.prototype.insertBefore=a;var d=Node.prototype.appendChild;Node.prototype.appendChild=function(b){b instanceof DocumentFragment?a.call(this,b,null):d.call(this,b);return b};var f=Node.prototype.removeChild,g=Node.prototype.replaceChild;Node.prototype.replaceChild=function(b,c){b instanceof DocumentFragment?(a.call(this,b,c),f.call(this,c)):g.call(this,b,c);return c};Document.prototype.createDocumentFragment=
|
||||
function(){var a=this.createElement("df");a.__proto__=DocumentFragment.prototype;return a};var h=Document.prototype.importNode;Document.prototype.importNode=function(a,b){b=h.call(this,a,b||!1);a instanceof DocumentFragment&&(b.__proto__=DocumentFragment.prototype);return b}}();var f=Node.prototype.cloneNode,g=Document.prototype.createElement,h=Document.prototype.importNode,k=Node.prototype.removeChild,m=Node.prototype.appendChild,n=Node.prototype.replaceChild,r=Element.prototype.querySelectorAll,
|
||||
G=Document.prototype.querySelectorAll,x=DocumentFragment.prototype.querySelectorAll,v=function(){if(!c){var a=document.createElement("template"),b=document.createElement("template");b.content.appendChild(document.createElement("div"));a.content.appendChild(b);a=a.cloneNode(!0);return 0===a.content.childNodes.length||0===a.content.firstChild.content.childNodes.length||d}}();if(c){var U=document.implementation.createHTMLDocument("template"),Dc=!0,xa=document.createElement("style");xa.textContent="template{display:none;}";
|
||||
var Ec=document.head;Ec.insertBefore(xa,Ec.firstElementChild);a.prototype=Object.create(HTMLElement.prototype);var mf=!document.createElement("div").hasOwnProperty("innerHTML");a.R=function(b){if(!b.content&&b.namespaceURI===document.documentElement.namespaceURI){b.content=U.createDocumentFragment();for(var c;c=b.firstChild;)m.call(b.content,c);if(mf)b.__proto__=a.prototype;else if(b.cloneNode=function(b){return a.a(this,b)},Dc)try{p(b),Fc(b)}catch(zh){Dc=!1}a.b(b.content)}};var p=function(b){Object.defineProperty(b,
|
||||
"innerHTML",{get:function(){return Gc(this)},set:function(b){U.body.innerHTML=b;for(a.b(U);this.content.firstChild;)k.call(this.content,this.content.firstChild);for(;U.body.firstChild;)m.call(this.content,U.body.firstChild)},configurable:!0})},Fc=function(a){Object.defineProperty(a,"outerHTML",{get:function(){return"<template>"+this.innerHTML+"</template>"},set:function(a){if(this.parentNode){U.body.innerHTML=a;for(a=this.ownerDocument.createDocumentFragment();U.body.firstChild;)m.call(a,U.body.firstChild);
|
||||
n.call(this.parentNode,a,this)}else throw Error("Failed to set the 'outerHTML' property on 'Element': This element has no parent node.");},configurable:!0})};p(a.prototype);Fc(a.prototype);a.b=function(c){c=b(c,"template");for(var d=0,e=c.length,f;d<e&&(f=c[d]);d++)a.R(f)};document.addEventListener("DOMContentLoaded",function(){a.b(document)});Document.prototype.createElement=function(){var b=g.apply(this,arguments);"template"===b.localName&&a.R(b);return b};var nf=/[&\u00A0"]/g,kb=/[&\u00A0<>]/g,
|
||||
l=function(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}};xa=function(a){for(var b={},c=0;c<a.length;c++)b[a[c]]=!0;return b};var F=xa("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),of=xa("style script xmp iframe noembed noframes plaintext noscript".split(" ")),Gc=function(a,b){"template"===a.localName&&(a=a.content);for(var c="",d=b?b(a):a.childNodes,e=0,f=d.length,
|
||||
g;e<f&&(g=d[e]);e++){a:{var h=g;var k=a;var m=b;switch(h.nodeType){case Node.ELEMENT_NODE:for(var n=h.localName,v="<"+n,r=h.attributes,p=0;k=r[p];p++)v+=" "+k.name+'="'+k.value.replace(nf,l)+'"';v+=">";h=F[n]?v:v+Gc(h,m)+"</"+n+">";break a;case Node.TEXT_NODE:h=h.data;h=k&&of[k.localName]?h:h.replace(kb,l);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),Error("not implemented");}}c+=h}return c}}if(c||v){a.a=function(a,b){var c=f.call(a,!1);
|
||||
this.R&&this.R(c);b&&(m.call(c.content,f.call(a.content,!0)),lb(c.content,a.content));return c};var lb=function(c,d){if(d.querySelectorAll&&(d=b(d,"template"),0!==d.length)){c=b(c,"template");for(var e=0,f=c.length,g,h;e<f;e++)h=d[e],g=c[e],a&&a.R&&a.R(h),n.call(g.parentNode,pf.call(h,!0),g)}},pf=Node.prototype.cloneNode=function(b){if(!e&&d&&this instanceof DocumentFragment)if(b)var c=qf.call(this.ownerDocument,this,!0);else return this.ownerDocument.createDocumentFragment();else this.nodeType===
|
||||
Node.ELEMENT_NODE&&"template"===this.localName&&this.namespaceURI==document.documentElement.namespaceURI?c=a.a(this,b):c=f.call(this,b);b&&lb(c,this);return c},qf=Document.prototype.importNode=function(c,d){d=d||!1;if("template"===c.localName)return a.a(c,d);var e=h.call(this,c,d);if(d){lb(e,c);c=b(e,'script:not([type]),script[type="application/javascript"],script[type="text/javascript"]');for(var f,k=0;k<c.length;k++){f=c[k];d=g.call(document,"script");d.textContent=f.textContent;for(var m=f.attributes,
|
||||
l=0,v;l<m.length;l++)v=m[l],d.setAttribute(v.name,v.value);n.call(f.parentNode,d,f)}}return e}}c&&(window.HTMLTemplateElement=a)})();var ka;Array.isArray?ka=Array.isArray:ka=function(a){return"[object Array]"===Object.prototype.toString.call(a)};var la=ka;var ma=0,na,oa="undefined"!==typeof window?window:void 0,pa=oa||{},qa=pa.MutationObserver||pa.WebKitMutationObserver,ra="undefined"===typeof self&&"undefined"!==typeof process&&"[object process]"==={}.toString.call(process),sa="undefined"!==typeof Uint8ClampedArray&&"undefined"!==typeof importScripts&&"undefined"!==typeof MessageChannel;function ta(){return"undefined"!==typeof na?function(){na(ua)}:va()}
|
||||
function wa(){var a=0,b=new qa(ua),c=document.createTextNode("");b.observe(c,{characterData:!0});return function(){c.data=a=++a%2}}function ya(){var a=new MessageChannel;a.port1.onmessage=ua;return function(){return a.port2.postMessage(0)}}function va(){var a=setTimeout;return function(){return a(ua,1)}}var za=Array(1E3);function ua(){for(var a=0;a<ma;a+=2)(0,za[a])(za[a+1]),za[a]=void 0,za[a+1]=void 0;ma=0}var Aa,Ba;
|
||||
if(ra)Ba=function(){return process.xb(ua)};else{var Ca;if(qa)Ca=wa();else{var Da;if(sa)Da=ya();else{var Ea;if(void 0===oa&&"function"===typeof require)try{var Fa=require("vertx");na=Fa.zb||Fa.yb;Ea=ta()}catch(a){Ea=va()}else Ea=va();Da=Ea}Ca=Da}Ba=Ca}Aa=Ba;function Ga(a,b){za[ma]=a;za[ma+1]=b;ma+=2;2===ma&&Aa()};function Ha(a,b){var c=this,d=new this.constructor(Ia);void 0===d[Ja]&&Ka(d);var e=c.o;if(e){var f=arguments[e-1];Ga(function(){return La(e,d,f,c.l)})}else Ma(c,d,a,b);return d};function Na(a){if(a&&"object"===typeof a&&a.constructor===this)return a;var b=new this(Ia);Oa(b,a);return b};var Ja=Math.random().toString(36).substring(16);function Ia(){}var Qa=new Pa;function Ra(a){try{return a.then}catch(b){return Qa.error=b,Qa}}function Sa(a,b,c,d){try{a.call(b,c,d)}catch(e){return e}}function Ta(a,b,c){Ga(function(a){var d=!1,f=Sa(c,b,function(c){d||(d=!0,b!==c?Oa(a,c):t(a,c))},function(b){d||(d=!0,u(a,b))});!d&&f&&(d=!0,u(a,f))},a)}function Ua(a,b){1===b.o?t(a,b.l):2===b.o?u(a,b.l):Ma(b,void 0,function(b){return Oa(a,b)},function(b){return u(a,b)})}
|
||||
function Va(a,b,c){b.constructor===a.constructor&&c===Ha&&b.constructor.resolve===Na?Ua(a,b):c===Qa?(u(a,Qa.error),Qa.error=null):void 0===c?t(a,b):"function"===typeof c?Ta(a,b,c):t(a,b)}function Oa(a,b){if(a===b)u(a,new TypeError("You cannot resolve a promise with itself"));else{var c=typeof b;null===b||"object"!==c&&"function"!==c?t(a,b):Va(a,b,Ra(b))}}function Wa(a){a.xa&&a.xa(a.l);Xa(a)}function t(a,b){void 0===a.o&&(a.l=b,a.o=1,0!==a.U.length&&Ga(Xa,a))}
|
||||
function u(a,b){void 0===a.o&&(a.o=2,a.l=b,Ga(Wa,a))}function Ma(a,b,c,d){var e=a.U,f=e.length;a.xa=null;e[f]=b;e[f+1]=c;e[f+2]=d;0===f&&a.o&&Ga(Xa,a)}function Xa(a){var b=a.U,c=a.o;if(0!==b.length){for(var d,e,f=a.l,g=0;g<b.length;g+=3)d=b[g],e=b[g+c],d?La(c,d,e,f):e(f);a.U.length=0}}function Pa(){this.error=null}var Ya=new Pa;
|
||||
function La(a,b,c,d){var e="function"===typeof c;if(e){try{var f=c(d)}catch(m){Ya.error=m,f=Ya}if(f===Ya){var g=!0;var h=f.error;f.error=null}else var k=!0;if(b===f){u(b,new TypeError("A promises callback cannot return that same promise."));return}}else f=d,k=!0;void 0===b.o&&(e&&k?Oa(b,f):g?u(b,h):1===a?t(b,f):2===a&&u(b,f))}function Za(a,b){try{b(function(b){Oa(a,b)},function(b){u(a,b)})}catch(c){u(a,c)}}var $a=0;function Ka(a){a[Ja]=$a++;a.o=void 0;a.l=void 0;a.U=[]};function ab(a,b){this.Na=a;this.N=new a(Ia);this.N[Ja]||Ka(this.N);if(la(b))if(this.$=this.length=b.length,this.l=Array(this.length),0===this.length)t(this.N,this.l);else{this.length=this.length||0;for(a=0;void 0===this.o&&a<b.length;a++)bb(this,b[a],a);0===this.$&&t(this.N,this.l)}else u(this.N,Error("Array Methods must be provided an Array"))}
|
||||
function bb(a,b,c){var d=a.Na,e=d.resolve;e===Na?(e=Ra(b),e===Ha&&void 0!==b.o?cb(a,b.o,c,b.l):"function"!==typeof e?(a.$--,a.l[c]=b):d===w?(d=new d(Ia),Va(d,b,e),db(a,d,c)):db(a,new d(function(a){return a(b)}),c)):db(a,e(b),c)}function cb(a,b,c,d){var e=a.N;void 0===e.o&&(a.$--,2===b?u(e,d):a.l[c]=d);0===a.$&&t(e,a.l)}function db(a,b,c){Ma(b,void 0,function(b){return cb(a,1,c,b)},function(b){return cb(a,2,c,b)})};function eb(a){return(new ab(this,a)).N};function fb(a){var b=this;return la(a)?new b(function(c,d){for(var e=a.length,f=0;f<e;f++)b.resolve(a[f]).then(c,d)}):new b(function(a,b){return b(new TypeError("You must pass an array to race."))})};function gb(a){var b=new this(Ia);u(b,a);return b};function w(a){this[Ja]=$a++;this.l=this.o=void 0;this.U=[];if(Ia!==a){if("function"!==typeof a)throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(this instanceof w)Za(this,a);else throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");}}w.prototype={constructor:w,then:Ha,a:function(a){return this.then(null,a)}};/*
|
||||
|
||||
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
window.Promise||(window.Promise=w,w.prototype["catch"]=w.prototype.a,w.prototype.then=w.prototype.then,w.all=eb,w.race=fb,w.resolve=Na,w.reject=gb);/*
|
||||
|
||||
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
window.WebComponents=window.WebComponents||{flags:{}};var hb=document.querySelector('script[src*="webcomponents-bundle"]'),ib=/wc-(.+)/,y={};if(!y.noOpts){location.search.slice(1).split("&").forEach(function(a){a=a.split("=");var b;a[0]&&(b=a[0].match(ib))&&(y[b[1]]=a[1]||!0)});if(hb)for(var jb=0,mb;mb=hb.attributes[jb];jb++)"src"!==mb.name&&(y[mb.name]=mb.value||!0);if(y.log&&y.log.split){var nb=y.log.split(",");y.log={};nb.forEach(function(a){y.log[a]=!0})}else y.log={}}
|
||||
window.WebComponents.flags=y;var ob=y.shadydom;ob&&(window.ShadyDOM=window.ShadyDOM||{},window.ShadyDOM.force=ob);var pb=y.register||y.ce;pb&&window.customElements&&(window.customElements.forcePolyfill=pb);/*
|
||||
|
||||
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
function qb(){this.Da=this.root=null;this.da=!1;this.L=this.Z=this.pa=this.assignedSlot=this.assignedNodes=this.S=null;this.childNodes=this.nextSibling=this.previousSibling=this.lastChild=this.firstChild=this.parentNode=this.V=void 0;this.Ia=this.va=!1}qb.prototype.toJSON=function(){return{}};function z(a){a.ka||(a.ka=new qb);return a.ka}function A(a){return a&&a.ka};var B=window.ShadyDOM||{};B.Ua=!(!Element.prototype.attachShadow||!Node.prototype.getRootNode);var rb=Object.getOwnPropertyDescriptor(Node.prototype,"firstChild");B.I=!!(rb&&rb.configurable&&rb.get);B.Ba=B.force||!B.Ua;var sb=navigator.userAgent.match("Trident"),tb=navigator.userAgent.match("Edge");void 0===B.Fa&&(B.Fa=B.I&&(sb||tb));function ub(a){return(a=A(a))&&void 0!==a.firstChild}function C(a){return"ShadyRoot"===a.Oa}function vb(a){a=a.getRootNode();if(C(a))return a}
|
||||
var wb=Element.prototype,xb=wb.matches||wb.matchesSelector||wb.mozMatchesSelector||wb.msMatchesSelector||wb.oMatchesSelector||wb.webkitMatchesSelector;function yb(a,b){if(a&&b)for(var c=Object.getOwnPropertyNames(b),d=0,e;d<c.length&&(e=c[d]);d++){var f=Object.getOwnPropertyDescriptor(b,e);f&&Object.defineProperty(a,e,f)}}function zb(a,b){for(var c=[],d=1;d<arguments.length;++d)c[d-1]=arguments[d];for(d=0;d<c.length;d++)yb(a,c[d]);return a}function Ab(a,b){for(var c in b)a[c]=b[c]}
|
||||
var Bb=document.createTextNode(""),Cb=0,Db=[];(new MutationObserver(function(){for(;Db.length;)try{Db.shift()()}catch(a){throw Bb.textContent=Cb++,a;}})).observe(Bb,{characterData:!0});function Eb(a){Db.push(a);Bb.textContent=Cb++}var Fb=!!document.contains;function Gb(a,b){for(;b;){if(b==a)return!0;b=b.parentNode}return!1};var Hb=[],Ib;function Jb(a){Ib||(Ib=!0,Eb(Kb));Hb.push(a)}function Kb(){Ib=!1;for(var a=!!Hb.length;Hb.length;)Hb.shift()();return a}Kb.list=Hb;function Lb(){this.a=!1;this.addedNodes=[];this.removedNodes=[];this.ca=new Set}function Mb(a){a.a||(a.a=!0,Eb(function(){Nb(a)}))}function Nb(a){if(a.a){a.a=!1;var b=a.takeRecords();b.length&&a.ca.forEach(function(a){a(b)})}}Lb.prototype.takeRecords=function(){if(this.addedNodes.length||this.removedNodes.length){var a=[{addedNodes:this.addedNodes,removedNodes:this.removedNodes}];this.addedNodes=[];this.removedNodes=[];return a}return[]};
|
||||
function Ob(a,b){var c=z(a);c.S||(c.S=new Lb);c.S.ca.add(b);var d=c.S;return{La:b,P:d,Pa:a,takeRecords:function(){return d.takeRecords()}}}function Pb(a){var b=a&&a.P;b&&(b.ca.delete(a.La),b.ca.size||(z(a.Pa).S=null))}
|
||||
function Qb(a,b){var c=b.getRootNode();return a.map(function(a){var b=c===a.target.getRootNode();if(b&&a.addedNodes){if(b=Array.from(a.addedNodes).filter(function(a){return c===a.getRootNode()}),b.length)return a=Object.create(a),Object.defineProperty(a,"addedNodes",{value:b,configurable:!0}),a}else if(b)return a}).filter(function(a){return a})};var D={},Rb=Element.prototype.insertBefore,Sb=Element.prototype.replaceChild,Tb=Element.prototype.removeChild,Ub=Element.prototype.setAttribute,Vb=Element.prototype.removeAttribute,Wb=Element.prototype.cloneNode,Xb=Document.prototype.importNode,Yb=Element.prototype.addEventListener,Zb=Element.prototype.removeEventListener,$b=Window.prototype.addEventListener,ac=Window.prototype.removeEventListener,bc=Element.prototype.dispatchEvent,cc=Node.prototype.contains||HTMLElement.prototype.contains,dc=Document.prototype.getElementById,
|
||||
ec=Element.prototype.querySelector,fc=DocumentFragment.prototype.querySelector,gc=Document.prototype.querySelector,hc=Element.prototype.querySelectorAll,ic=DocumentFragment.prototype.querySelectorAll,jc=Document.prototype.querySelectorAll;D.appendChild=Element.prototype.appendChild;D.insertBefore=Rb;D.replaceChild=Sb;D.removeChild=Tb;D.setAttribute=Ub;D.removeAttribute=Vb;D.cloneNode=Wb;D.importNode=Xb;D.addEventListener=Yb;D.removeEventListener=Zb;D.eb=$b;D.fb=ac;D.dispatchEvent=bc;D.contains=cc;
|
||||
D.getElementById=dc;D.ob=ec;D.sb=fc;D.mb=gc;D.querySelector=function(a){switch(this.nodeType){case Node.ELEMENT_NODE:return ec.call(this,a);case Node.DOCUMENT_NODE:return gc.call(this,a);default:return fc.call(this,a)}};D.pb=hc;D.tb=ic;D.nb=jc;D.querySelectorAll=function(a){switch(this.nodeType){case Node.ELEMENT_NODE:return hc.call(this,a);case Node.DOCUMENT_NODE:return jc.call(this,a);default:return ic.call(this,a)}};var kc=/[&\u00A0"]/g,lc=/[&\u00A0<>]/g;function mc(a){switch(a){case "&":return"&";case "<":return"<";case ">":return">";case '"':return""";case "\u00a0":return" "}}function nc(a){for(var b={},c=0;c<a.length;c++)b[a[c]]=!0;return b}var oc=nc("area base br col command embed hr img input keygen link meta param source track wbr".split(" ")),pc=nc("style script xmp iframe noembed noframes plaintext noscript".split(" "));
|
||||
function qc(a,b){"template"===a.localName&&(a=a.content);for(var c="",d=b?b(a):a.childNodes,e=0,f=d.length,g;e<f&&(g=d[e]);e++){a:{var h=g;var k=a;var m=b;switch(h.nodeType){case Node.ELEMENT_NODE:for(var n=h.localName,r="<"+n,G=h.attributes,x=0;k=G[x];x++)r+=" "+k.name+'="'+k.value.replace(kc,mc)+'"';r+=">";h=oc[n]?r:r+qc(h,m)+"</"+n+">";break a;case Node.TEXT_NODE:h=h.data;h=k&&pc[k.localName]?h:h.replace(lc,mc);break a;case Node.COMMENT_NODE:h="\x3c!--"+h.data+"--\x3e";break a;default:throw window.console.error(h),
|
||||
Error("not implemented");}}c+=h}return c};var E={},H=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,!1),I=document.createTreeWalker(document,NodeFilter.SHOW_ELEMENT,null,!1);function rc(a){var b=[];H.currentNode=a;for(a=H.firstChild();a;)b.push(a),a=H.nextSibling();return b}E.parentNode=function(a){H.currentNode=a;return H.parentNode()};E.firstChild=function(a){H.currentNode=a;return H.firstChild()};E.lastChild=function(a){H.currentNode=a;return H.lastChild()};E.previousSibling=function(a){H.currentNode=a;return H.previousSibling()};
|
||||
E.nextSibling=function(a){H.currentNode=a;return H.nextSibling()};E.childNodes=rc;E.parentElement=function(a){I.currentNode=a;return I.parentNode()};E.firstElementChild=function(a){I.currentNode=a;return I.firstChild()};E.lastElementChild=function(a){I.currentNode=a;return I.lastChild()};E.previousElementSibling=function(a){I.currentNode=a;return I.previousSibling()};E.nextElementSibling=function(a){I.currentNode=a;return I.nextSibling()};
|
||||
E.children=function(a){var b=[];I.currentNode=a;for(a=I.firstChild();a;)b.push(a),a=I.nextSibling();return b};E.innerHTML=function(a){return qc(a,function(a){return rc(a)})};E.textContent=function(a){switch(a.nodeType){case Node.ELEMENT_NODE:case Node.DOCUMENT_FRAGMENT_NODE:a=document.createTreeWalker(a,NodeFilter.SHOW_TEXT,null,!1);for(var b="",c;c=a.nextNode();)b+=c.nodeValue;return b;default:return a.nodeValue}};var J={},sc=B.I,tc=[Node.prototype,Element.prototype,HTMLElement.prototype];function K(a){var b;a:{for(b=0;b<tc.length;b++){var c=tc[b];if(c.hasOwnProperty(a)){b=c;break a}}b=void 0}if(!b)throw Error("Could not find descriptor for "+a);return Object.getOwnPropertyDescriptor(b,a)}
|
||||
var L=sc?{parentNode:K("parentNode"),firstChild:K("firstChild"),lastChild:K("lastChild"),previousSibling:K("previousSibling"),nextSibling:K("nextSibling"),childNodes:K("childNodes"),parentElement:K("parentElement"),previousElementSibling:K("previousElementSibling"),nextElementSibling:K("nextElementSibling"),innerHTML:K("innerHTML"),textContent:K("textContent"),firstElementChild:K("firstElementChild"),lastElementChild:K("lastElementChild"),children:K("children")}:{},uc=sc?{firstElementChild:Object.getOwnPropertyDescriptor(DocumentFragment.prototype,
|
||||
"firstElementChild"),lastElementChild:Object.getOwnPropertyDescriptor(DocumentFragment.prototype,"lastElementChild"),children:Object.getOwnPropertyDescriptor(DocumentFragment.prototype,"children")}:{},vc=sc?{firstElementChild:Object.getOwnPropertyDescriptor(Document.prototype,"firstElementChild"),lastElementChild:Object.getOwnPropertyDescriptor(Document.prototype,"lastElementChild"),children:Object.getOwnPropertyDescriptor(Document.prototype,"children")}:{};J.Ca=L;J.rb=uc;J.lb=vc;J.parentNode=function(a){return L.parentNode.get.call(a)};
|
||||
J.firstChild=function(a){return L.firstChild.get.call(a)};J.lastChild=function(a){return L.lastChild.get.call(a)};J.previousSibling=function(a){return L.previousSibling.get.call(a)};J.nextSibling=function(a){return L.nextSibling.get.call(a)};J.childNodes=function(a){return Array.prototype.slice.call(L.childNodes.get.call(a))};J.parentElement=function(a){return L.parentElement.get.call(a)};J.previousElementSibling=function(a){return L.previousElementSibling.get.call(a)};J.nextElementSibling=function(a){return L.nextElementSibling.get.call(a)};
|
||||
J.innerHTML=function(a){return L.innerHTML.get.call(a)};J.textContent=function(a){return L.textContent.get.call(a)};J.children=function(a){switch(a.nodeType){case Node.DOCUMENT_FRAGMENT_NODE:a=uc.children.get.call(a);break;case Node.DOCUMENT_NODE:a=vc.children.get.call(a);break;default:a=L.children.get.call(a)}return Array.prototype.slice.call(a)};
|
||||
J.firstElementChild=function(a){switch(a.nodeType){case Node.DOCUMENT_FRAGMENT_NODE:return uc.firstElementChild.get.call(a);case Node.DOCUMENT_NODE:return vc.firstElementChild.get.call(a);default:return L.firstElementChild.get.call(a)}};J.lastElementChild=function(a){switch(a.nodeType){case Node.DOCUMENT_FRAGMENT_NODE:return uc.lastElementChild.get.call(a);case Node.DOCUMENT_NODE:return vc.lastElementChild.get.call(a);default:return L.lastElementChild.get.call(a)}};var M=B.Fa?J:E;function wc(a){for(;a.firstChild;)a.removeChild(a.firstChild)}
|
||||
var xc=B.I,yc=document.implementation.createHTMLDocument("inert"),zc=Object.getOwnPropertyDescriptor(Node.prototype,"isConnected"),Ac=zc&&zc.get,Bc=Object.getOwnPropertyDescriptor(Document.prototype,"activeElement"),Cc={parentElement:{get:function(){var a=A(this);(a=a&&a.parentNode)&&a.nodeType!==Node.ELEMENT_NODE&&(a=null);return void 0!==a?a:M.parentElement(this)},configurable:!0},parentNode:{get:function(){var a=A(this);a=a&&a.parentNode;return void 0!==a?a:M.parentNode(this)},configurable:!0},
|
||||
nextSibling:{get:function(){var a=A(this);a=a&&a.nextSibling;return void 0!==a?a:M.nextSibling(this)},configurable:!0},previousSibling:{get:function(){var a=A(this);a=a&&a.previousSibling;return void 0!==a?a:M.previousSibling(this)},configurable:!0},nextElementSibling:{get:function(){var a=A(this);if(a&&void 0!==a.nextSibling){for(a=this.nextSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return M.nextElementSibling(this)},configurable:!0},previousElementSibling:{get:function(){var a=
|
||||
A(this);if(a&&void 0!==a.previousSibling){for(a=this.previousSibling;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return M.previousElementSibling(this)},configurable:!0}},Hc={className:{get:function(){return this.getAttribute("class")||""},set:function(a){this.setAttribute("class",a)},configurable:!0}},Ic={childNodes:{get:function(){if(ub(this)){var a=A(this);if(!a.childNodes){a.childNodes=[];for(var b=this.firstChild;b;b=b.nextSibling)a.childNodes.push(b)}var c=a.childNodes}else c=
|
||||
M.childNodes(this);c.item=function(a){return c[a]};return c},configurable:!0},childElementCount:{get:function(){return this.children.length},configurable:!0},firstChild:{get:function(){var a=A(this);a=a&&a.firstChild;return void 0!==a?a:M.firstChild(this)},configurable:!0},lastChild:{get:function(){var a=A(this);a=a&&a.lastChild;return void 0!==a?a:M.lastChild(this)},configurable:!0},textContent:{get:function(){if(ub(this)){for(var a=[],b=0,c=this.childNodes,d;d=c[b];b++)d.nodeType!==Node.COMMENT_NODE&&
|
||||
a.push(d.textContent);return a.join("")}return M.textContent(this)},set:function(a){if("undefined"===typeof a||null===a)a="";switch(this.nodeType){case Node.ELEMENT_NODE:case Node.DOCUMENT_FRAGMENT_NODE:if(!ub(this)&&xc){var b=this.firstChild;(b!=this.lastChild||b&&b.nodeType!=Node.TEXT_NODE)&&wc(this);J.Ca.textContent.set.call(this,a)}else wc(this),(0<a.length||this.nodeType===Node.ELEMENT_NODE)&&this.appendChild(document.createTextNode(a));break;default:this.nodeValue=a}},configurable:!0},firstElementChild:{get:function(){var a=
|
||||
A(this);if(a&&void 0!==a.firstChild){for(a=this.firstChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.nextSibling;return a}return M.firstElementChild(this)},configurable:!0},lastElementChild:{get:function(){var a=A(this);if(a&&void 0!==a.lastChild){for(a=this.lastChild;a&&a.nodeType!==Node.ELEMENT_NODE;)a=a.previousSibling;return a}return M.lastElementChild(this)},configurable:!0},children:{get:function(){var a;ub(this)?a=Array.prototype.filter.call(this.childNodes,function(a){return a.nodeType===Node.ELEMENT_NODE}):
|
||||
a=M.children(this);a.item=function(b){return a[b]};return a},configurable:!0},innerHTML:{get:function(){return ub(this)?qc("template"===this.localName?this.content:this):M.innerHTML(this)},set:function(a){var b="template"===this.localName?this.content:this;wc(b);var c=this.localName;c&&"template"!==c||(c="div");c=yc.createElement(c);for(xc?J.Ca.innerHTML.set.call(c,a):c.innerHTML=a;c.firstChild;)b.appendChild(c.firstChild)},configurable:!0}},Jc={shadowRoot:{get:function(){var a=A(this);return a&&
|
||||
a.Da||null},configurable:!0}},Kc={activeElement:{get:function(){var a=Bc&&Bc.get?Bc.get.call(document):B.I?void 0:document.activeElement;if(a&&a.nodeType){var b=!!C(this);if(this===document||b&&this.host!==a&&D.contains.call(this.host,a)){for(b=vb(a);b&&b!==this;)a=b.host,b=vb(a);a=this===document?b?null:a:b===this?a:null}else a=null}else a=null;return a},set:function(){},configurable:!0}};
|
||||
function N(a,b,c){for(var d in b){var e=Object.getOwnPropertyDescriptor(a,d);e&&e.configurable||!e&&c?Object.defineProperty(a,d,b[d]):c&&console.warn("Could not define",d,"on",a)}}function Lc(a){N(a,Cc);N(a,Hc);N(a,Ic);N(a,Kc)}
|
||||
function Mc(){var a=Nc.prototype;a.__proto__=DocumentFragment.prototype;N(a,Cc,!0);N(a,Ic,!0);N(a,Kc,!0);Object.defineProperties(a,{nodeType:{value:Node.DOCUMENT_FRAGMENT_NODE,configurable:!0},nodeName:{value:"#document-fragment",configurable:!0},nodeValue:{value:null,configurable:!0}});["localName","namespaceURI","prefix"].forEach(function(b){Object.defineProperty(a,b,{value:void 0,configurable:!0})});["ownerDocument","baseURI","isConnected"].forEach(function(b){Object.defineProperty(a,b,{get:function(){return this.host[b]},
|
||||
configurable:!0})})}var Oc=B.I?function(){}:function(a){var b=z(a);b.va||(b.va=!0,N(a,Cc,!0),N(a,Hc,!0))},Pc=B.I?function(){}:function(a){z(a).Ia||(N(a,Ic,!0),N(a,Jc,!0))};var Qc=M.childNodes;function Rc(a,b,c){Oc(a);c=c||null;var d=z(a),e=z(b),f=c?z(c):null;d.previousSibling=c?f.previousSibling:b.lastChild;if(f=A(d.previousSibling))f.nextSibling=a;if(f=A(d.nextSibling=c))f.previousSibling=a;d.parentNode=b;c?c===e.firstChild&&(e.firstChild=a):(e.lastChild=a,e.firstChild||(e.firstChild=a));e.childNodes=null}
|
||||
function Sc(a,b){var c=z(a);if(void 0===c.firstChild)for(b=b||Qc(a),c.firstChild=b[0]||null,c.lastChild=b[b.length-1]||null,Pc(a),c=0;c<b.length;c++){var d=b[c],e=z(d);e.parentNode=a;e.nextSibling=b[c+1]||null;e.previousSibling=b[c-1]||null;Oc(d)}};var Tc=M.parentNode;
|
||||
function Uc(a,b,c){if(b===a)throw Error("Failed to execute 'appendChild' on 'Node': The new child element contains the parent.");if(c){var d=A(c);d=d&&d.parentNode;if(void 0!==d&&d!==a||void 0===d&&Tc(c)!==a)throw Error("Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.");}if(c===b)return b;b.parentNode&&Vc(b.parentNode,b);var e,f;if(!b.__noInsertionPoint){if(f=e=vb(a)){var g;"slot"===b.localName?g=[b]:b.querySelectorAll&&
|
||||
(g=b.querySelectorAll("slot"));f=g&&g.length?g:void 0}f&&(g=e,d=f,g.a=g.a||[],g.m=g.m||[],g.w=g.w||{},g.a.push.apply(g.a,[].concat(d instanceof Array?d:ja(ia(d)))))}("slot"===a.localName||f)&&(e=e||vb(a))&&Wc(e);if(ub(a)){e=c;Pc(a);f=z(a);void 0!==f.firstChild&&(f.childNodes=null);if(b.nodeType===Node.DOCUMENT_FRAGMENT_NODE){f=b.childNodes;for(g=0;g<f.length;g++)Rc(f[g],a,e);e=z(b);f=void 0!==e.firstChild?null:void 0;e.firstChild=e.lastChild=f;e.childNodes=f}else Rc(b,a,e);e=A(a);if(Xc(a)){Wc(e.root);
|
||||
var h=!0}else e.root&&(h=!0)}h||(h=C(a)?a.host:a,c?(c=Yc(c),D.insertBefore.call(h,b,c)):D.appendChild.call(h,b));Zc(a,b);return b}
|
||||
function Vc(a,b){if(b.parentNode!==a)throw Error("The node to be removed is not a child of this node: "+b);var c=vb(b),d=A(a);if(ub(a)){var e=z(b),f=z(a);b===f.firstChild&&(f.firstChild=e.nextSibling);b===f.lastChild&&(f.lastChild=e.previousSibling);var g=e.previousSibling,h=e.nextSibling;g&&(z(g).nextSibling=h);h&&(z(h).previousSibling=g);e.parentNode=e.previousSibling=e.nextSibling=void 0;void 0!==f.childNodes&&(f.childNodes=null);if(Xc(a)){Wc(d.root);var k=!0}}$c(b);if(c){(e=a&&"slot"===a.localName)&&
|
||||
(k=!0);if(c.m){ad(c);f=c.w;for(v in f)for(g=f[v],h=0;h<g.length;h++){var m=g[h];if(Gb(b,m)){g.splice(h,1);var n=c.m.indexOf(m);0<=n&&c.m.splice(n,1);h--;n=A(m);if(m=n.L)for(var r=0;r<m.length;r++){var G=m[r],x=bd(G);x&&D.removeChild.call(x,G)}n.L=[];n.assignedNodes=[];n=!0}}var v=n}else v=void 0;(v||e)&&Wc(c)}k||(k=C(a)?a.host:a,(!d.root&&"slot"!==b.localName||k===Tc(b))&&D.removeChild.call(k,b));Zc(a,null,b);return b}
|
||||
function $c(a){var b=A(a);if(b&&void 0!==b.V){b=a.childNodes;for(var c=0,d=b.length,e;c<d&&(e=b[c]);c++)$c(e)}if(a=A(a))a.V=void 0}function Yc(a){var b=a;a&&"slot"===a.localName&&(b=(b=(b=A(a))&&b.L)&&b.length?b[0]:Yc(a.nextSibling));return b}function Xc(a){return(a=(a=A(a))&&a.root)&&cd(a)}
|
||||
function dd(a,b){if("slot"===b)a=a.parentNode,Xc(a)&&Wc(A(a).root);else if("slot"===a.localName&&"name"===b&&(b=vb(a))){if(b.m){var c=a.Ja,d=ed(a);if(d!==c){c=b.w[c];var e=c.indexOf(a);0<=e&&c.splice(e,1);c=b.w[d]||(b.w[d]=[]);c.push(a);1<c.length&&(b.w[d]=fd(c))}}Wc(b)}}function Zc(a,b,c){if(a=(a=A(a))&&a.S)b&&a.addedNodes.push(b),c&&a.removedNodes.push(c),Mb(a)}
|
||||
function gd(a){if(a&&a.nodeType){var b=z(a),c=b.V;void 0===c&&(C(a)?(c=a,b.V=c):(c=(c=a.parentNode)?gd(c):a,D.contains.call(document.documentElement,a)&&(b.V=c)));return c}}function hd(a,b,c){var d=[];id(a.childNodes,b,c,d);return d}function id(a,b,c,d){for(var e=0,f=a.length,g;e<f&&(g=a[e]);e++){var h;if(h=g.nodeType===Node.ELEMENT_NODE){h=g;var k=b,m=c,n=d,r=k(h);r&&n.push(h);m&&m(r)?h=r:(id(h.childNodes,k,m,n),h=void 0)}if(h)break}}var jd=null;
|
||||
function kd(a,b,c){jd||(jd=window.ShadyCSS&&window.ShadyCSS.ScopingShim);jd&&"class"===b?jd.setElementClass(a,c):(D.setAttribute.call(a,b,c),dd(a,b))}function ld(a,b){if(a.ownerDocument!==document)return D.importNode.call(document,a,b);var c=D.importNode.call(document,a,!1);if(b){a=a.childNodes;b=0;for(var d;b<a.length;b++)d=ld(a[b],!0),c.appendChild(d)}return c};var md="__eventWrappers"+Date.now(),nd={blur:!0,focus:!0,focusin:!0,focusout:!0,click:!0,dblclick:!0,mousedown:!0,mouseenter:!0,mouseleave:!0,mousemove:!0,mouseout:!0,mouseover:!0,mouseup:!0,wheel:!0,beforeinput:!0,input:!0,keydown:!0,keyup:!0,compositionstart:!0,compositionupdate:!0,compositionend:!0,touchstart:!0,touchend:!0,touchmove:!0,touchcancel:!0,pointerover:!0,pointerenter:!0,pointerdown:!0,pointermove:!0,pointerup:!0,pointercancel:!0,pointerout:!0,pointerleave:!0,gotpointercapture:!0,lostpointercapture:!0,
|
||||
dragstart:!0,drag:!0,dragenter:!0,dragleave:!0,dragover:!0,drop:!0,dragend:!0,DOMActivate:!0,DOMFocusIn:!0,DOMFocusOut:!0,keypress:!0};function od(a,b){var c=[],d=a;for(a=a===window?window:a.getRootNode();d;)c.push(d),d=d.assignedSlot?d.assignedSlot:d.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&d.host&&(b||d!==a)?d.host:d.parentNode;c[c.length-1]===document&&c.push(window);return c}
|
||||
function pd(a,b){if(!C)return a;a=od(a,!0);for(var c=0,d,e,f,g;c<b.length;c++)if(d=b[c],f=d===window?window:d.getRootNode(),f!==e&&(g=a.indexOf(f),e=f),!C(f)||-1<g)return d}
|
||||
var qd={get composed(){!1!==this.isTrusted&&void 0===this.ha&&(this.ha=nd[this.type]);return this.ha||!1},composedPath:function(){this.ta||(this.ta=od(this.__target,this.composed));return this.ta},get target(){return pd(this.currentTarget,this.composedPath())},get relatedTarget(){if(!this.ja)return null;this.wa||(this.wa=od(this.ja,!0));return pd(this.currentTarget,this.wa)},stopPropagation:function(){Event.prototype.stopPropagation.call(this);this.ia=!0},stopImmediatePropagation:function(){Event.prototype.stopImmediatePropagation.call(this);
|
||||
this.ia=this.Ha=!0}};function rd(a){function b(b,d){b=new a(b,d);b.ha=d&&!!d.composed;return b}Ab(b,a);b.prototype=a.prototype;return b}var sd={focus:!0,blur:!0};function td(a){return a.__target!==a.target||a.ja!==a.relatedTarget}function ud(a,b,c){if(c=b.__handlers&&b.__handlers[a.type]&&b.__handlers[a.type][c])for(var d=0,e;(e=c[d])&&(!td(a)||a.target!==a.relatedTarget)&&(e.call(b,a),!a.Ha);d++);}
|
||||
function vd(a){var b=a.composedPath();Object.defineProperty(a,"currentTarget",{get:function(){return d},configurable:!0});for(var c=b.length-1;0<=c;c--){var d=b[c];ud(a,d,"capture");if(a.ia)return}Object.defineProperty(a,"eventPhase",{get:function(){return Event.AT_TARGET}});var e;for(c=0;c<b.length;c++){d=b[c];var f=A(d);f=f&&f.root;if(0===c||f&&f===e)if(ud(a,d,"bubble"),d!==window&&(e=d.getRootNode()),a.ia)break}}
|
||||
function wd(a,b,c,d,e,f){for(var g=0;g<a.length;g++){var h=a[g],k=h.type,m=h.capture,n=h.once,r=h.passive;if(b===h.node&&c===k&&d===m&&e===n&&f===r)return g}return-1}
|
||||
function xd(a,b,c){if(b){var d=typeof b;if("function"===d||"object"===d)if("object"!==d||b.handleEvent&&"function"===typeof b.handleEvent){if(c&&"object"===typeof c){var e=!!c.capture;var f=!!c.once;var g=!!c.passive}else e=!!c,g=f=!1;var h=c&&c.la||this,k=b[md];if(k){if(-1<wd(k,h,a,e,f,g))return}else b[md]=[];k=function(e){f&&this.removeEventListener(a,b,c);e.__target||yd(e);if(h!==this){var g=Object.getOwnPropertyDescriptor(e,"currentTarget");Object.defineProperty(e,"currentTarget",{get:function(){return h},
|
||||
configurable:!0})}if(e.composed||-1<e.composedPath().indexOf(h))if(td(e)&&e.target===e.relatedTarget)e.eventPhase===Event.BUBBLING_PHASE&&e.stopImmediatePropagation();else if(e.eventPhase===Event.CAPTURING_PHASE||e.bubbles||e.target===h||h instanceof Window){var k="function"===d?b.call(h,e):b.handleEvent&&b.handleEvent(e);h!==this&&(g?(Object.defineProperty(e,"currentTarget",g),g=null):delete e.currentTarget);return k}};b[md].push({node:h,type:a,capture:e,once:f,passive:g,gb:k});sd[a]?(this.__handlers=
|
||||
this.__handlers||{},this.__handlers[a]=this.__handlers[a]||{capture:[],bubble:[]},this.__handlers[a][e?"capture":"bubble"].push(k)):(this instanceof Window?D.eb:D.addEventListener).call(this,a,k,c)}}}
|
||||
function zd(a,b,c){if(b){if(c&&"object"===typeof c){var d=!!c.capture;var e=!!c.once;var f=!!c.passive}else d=!!c,f=e=!1;var g=c&&c.la||this,h=void 0;var k=null;try{k=b[md]}catch(m){}k&&(e=wd(k,g,a,d,e,f),-1<e&&(h=k.splice(e,1)[0].gb,k.length||(b[md]=void 0)));(this instanceof Window?D.fb:D.removeEventListener).call(this,a,h||b,c);h&&sd[a]&&this.__handlers&&this.__handlers[a]&&(a=this.__handlers[a][d?"capture":"bubble"],h=a.indexOf(h),-1<h&&a.splice(h,1))}}
|
||||
function Ad(){for(var a in sd)window.addEventListener(a,function(a){a.__target||(yd(a),vd(a))},!0)}function yd(a){a.__target=a.target;a.ja=a.relatedTarget;if(B.I){var b=Object.getPrototypeOf(a);if(!b.hasOwnProperty("__patchProto")){var c=Object.create(b);c.ib=b;yb(c,qd);b.__patchProto=c}a.__proto__=b.__patchProto}else yb(a,qd)}var Bd=rd(window.Event),Cd=rd(window.CustomEvent),Dd=rd(window.MouseEvent);function Ed(a,b){return{index:a,W:[],ba:b}}
|
||||
function Fd(a,b,c,d){var e=0,f=0,g=0,h=0,k=Math.min(b-e,d-f);if(0==e&&0==f)a:{for(g=0;g<k;g++)if(a[g]!==c[g])break a;g=k}if(b==a.length&&d==c.length){h=a.length;for(var m=c.length,n=0;n<k-g&&Gd(a[--h],c[--m]);)n++;h=n}e+=g;f+=g;b-=h;d-=h;if(0==b-e&&0==d-f)return[];if(e==b){for(b=Ed(e,0);f<d;)b.W.push(c[f++]);return[b]}if(f==d)return[Ed(e,b-e)];k=e;g=f;d=d-g+1;h=b-k+1;b=Array(d);for(m=0;m<d;m++)b[m]=Array(h),b[m][0]=m;for(m=0;m<h;m++)b[0][m]=m;for(m=1;m<d;m++)for(n=1;n<h;n++)if(a[k+n-1]===c[g+m-1])b[m][n]=
|
||||
b[m-1][n-1];else{var r=b[m-1][n]+1,G=b[m][n-1]+1;b[m][n]=r<G?r:G}k=b.length-1;g=b[0].length-1;d=b[k][g];for(a=[];0<k||0<g;)0==k?(a.push(2),g--):0==g?(a.push(3),k--):(h=b[k-1][g-1],m=b[k-1][g],n=b[k][g-1],r=m<n?m<h?m:h:n<h?n:h,r==h?(h==d?a.push(0):(a.push(1),d=h),k--,g--):r==m?(a.push(3),k--,d=m):(a.push(2),g--,d=n));a.reverse();b=void 0;k=[];for(g=0;g<a.length;g++)switch(a[g]){case 0:b&&(k.push(b),b=void 0);e++;f++;break;case 1:b||(b=Ed(e,0));b.ba++;e++;b.W.push(c[f]);f++;break;case 2:b||(b=Ed(e,
|
||||
0));b.ba++;e++;break;case 3:b||(b=Ed(e,0)),b.W.push(c[f]),f++}b&&k.push(b);return k}function Gd(a,b){return a===b};var bd=M.parentNode,Hd=M.childNodes,Id={};function Jd(a){var b=[];do b.unshift(a);while(a=a.parentNode);return b}function Nc(a,b,c){if(a!==Id)throw new TypeError("Illegal constructor");this.Oa="ShadyRoot";a=Hd(b);this.host=b;this.b=c&&c.mode;Sc(b,a);c=A(b);c.root=this;c.Da="closed"!==this.b?this:null;c=z(this);c.firstChild=c.lastChild=c.parentNode=c.nextSibling=c.previousSibling=null;c.childNodes=[];this.aa=!1;this.a=this.w=this.m=null;c=0;for(var d=a.length;c<d;c++)D.removeChild.call(b,a[c])}
|
||||
function Wc(a){a.aa||(a.aa=!0,Jb(function(){return Kd(a)}))}function Kd(a){for(var b;a;){a.aa&&(b=a);a:{var c=a;a=c.host.getRootNode();if(C(a))for(var d=c.host.childNodes,e=0;e<d.length;e++)if(c=d[e],"slot"==c.localName)break a;a=void 0}}b&&b._renderRoot()}
|
||||
Nc.prototype._renderRoot=function(){this.aa=!1;if(this.m){ad(this);for(var a=0,b;a<this.m.length;a++){b=this.m[a];var c=A(b),d=c.assignedNodes;c.assignedNodes=[];c.L=[];if(c.pa=d)for(c=0;c<d.length;c++){var e=A(d[c]);e.Z=e.assignedSlot;e.assignedSlot===b&&(e.assignedSlot=null)}}for(b=this.host.firstChild;b;b=b.nextSibling)Ld(this,b);for(a=0;a<this.m.length;a++){b=this.m[a];d=A(b);if(!d.assignedNodes.length)for(c=b.firstChild;c;c=c.nextSibling)Ld(this,c,b);(c=(c=A(b.parentNode))&&c.root)&&cd(c)&&c._renderRoot();
|
||||
Md(this,d.L,d.assignedNodes);if(c=d.pa){for(e=0;e<c.length;e++)A(c[e]).Z=null;d.pa=null;c.length>d.assignedNodes.length&&(d.da=!0)}d.da&&(d.da=!1,Nd(this,b))}a=this.m;b=[];for(d=0;d<a.length;d++)c=a[d].parentNode,(e=A(c))&&e.root||!(0>b.indexOf(c))||b.push(c);for(a=0;a<b.length;a++){d=b[a];c=d===this?this.host:d;e=[];d=d.childNodes;for(var f=0;f<d.length;f++){var g=d[f];if("slot"==g.localName){g=A(g).L;for(var h=0;h<g.length;h++)e.push(g[h])}else e.push(g)}d=void 0;f=Hd(c);g=Fd(e,e.length,f,f.length);
|
||||
for(var k=h=0;h<g.length&&(d=g[h]);h++){for(var m=0,n;m<d.W.length&&(n=d.W[m]);m++)bd(n)===c&&D.removeChild.call(c,n),f.splice(d.index+k,1);k-=d.ba}for(k=0;k<g.length&&(d=g[k]);k++)for(h=f[d.index],m=d.index;m<d.index+d.ba;m++)n=e[m],D.insertBefore.call(c,n,h),f.splice(m,0,n)}}};function Ld(a,b,c){var d=z(b),e=d.Z;d.Z=null;c||(c=(a=a.w[b.slot||"__catchall"])&&a[0]);c?(z(c).assignedNodes.push(b),d.assignedSlot=c):d.assignedSlot=void 0;e!==d.assignedSlot&&d.assignedSlot&&(z(d.assignedSlot).da=!0)}
|
||||
function Md(a,b,c){for(var d=0,e;d<c.length&&(e=c[d]);d++)if("slot"==e.localName){var f=A(e).assignedNodes;f&&f.length&&Md(a,b,f)}else b.push(c[d])}function Nd(a,b){D.dispatchEvent.call(b,new Event("slotchange"));b=A(b);b.assignedSlot&&Nd(a,b.assignedSlot)}function ad(a){if(a.a&&a.a.length){for(var b=a.a,c,d=0;d<b.length;d++){var e=b[d];Sc(e);Sc(e.parentNode);var f=ed(e);a.w[f]?(c=c||{},c[f]=!0,a.w[f].push(e)):a.w[f]=[e];a.m.push(e)}if(c)for(var g in c)a.w[g]=fd(a.w[g]);a.a=[]}}
|
||||
function ed(a){var b=a.name||a.getAttribute("name")||"__catchall";return a.Ja=b}function fd(a){return a.sort(function(a,c){a=Jd(a);for(var b=Jd(c),e=0;e<a.length;e++){c=a[e];var f=b[e];if(c!==f)return a=Array.from(c.parentNode.childNodes),a.indexOf(c)-a.indexOf(f)}})}function cd(a){ad(a);return!(!a.m||!a.m.length)};function Od(a){var b=a.getRootNode();C(b)&&Kd(b);return(a=A(a))&&a.assignedSlot||null}
|
||||
var Pd={addEventListener:xd.bind(window),removeEventListener:zd.bind(window)},Qd={addEventListener:xd,removeEventListener:zd,appendChild:function(a){return Uc(this,a)},insertBefore:function(a,b){return Uc(this,a,b)},removeChild:function(a){return Vc(this,a)},replaceChild:function(a,b){Uc(this,a,b);Vc(this,b);return a},cloneNode:function(a){if("template"==this.localName)var b=D.cloneNode.call(this,a);else if(b=D.cloneNode.call(this,!1),a){a=this.childNodes;for(var c=0,d;c<a.length;c++)d=a[c].cloneNode(!0),
|
||||
b.appendChild(d)}return b},getRootNode:function(){return gd(this)},contains:function(a){return Gb(this,a)},dispatchEvent:function(a){Kb();return D.dispatchEvent.call(this,a)}};
|
||||
Object.defineProperties(Qd,{isConnected:{get:function(){if(Ac&&Ac.call(this))return!0;if(this.nodeType==Node.DOCUMENT_FRAGMENT_NODE)return!1;var a=this.ownerDocument;if(Fb){if(D.contains.call(a,this))return!0}else if(a.documentElement&&D.contains.call(a.documentElement,this))return!0;for(a=this;a&&!(a instanceof Document);)a=a.parentNode||(C(a)?a.host:void 0);return!!(a&&a instanceof Document)},configurable:!0}});
|
||||
var Rd={get assignedSlot(){return Od(this)}},Sd={querySelector:function(a){return hd(this,function(b){return xb.call(b,a)},function(a){return!!a})[0]||null},querySelectorAll:function(a,b){if(b){b=Array.prototype.slice.call(D.querySelectorAll(this,a));var c=this.getRootNode();return b.filter(function(a){return a.getRootNode()==c})}return hd(this,function(b){return xb.call(b,a)})}},Td={assignedNodes:function(a){if("slot"===this.localName){var b=this.getRootNode();C(b)&&Kd(b);return(b=A(this))?(a&&a.flatten?
|
||||
b.L:b.assignedNodes)||[]:[]}}},Ud=zb({setAttribute:function(a,b){kd(this,a,b)},removeAttribute:function(a){D.removeAttribute.call(this,a);dd(this,a)},attachShadow:function(a){if(!this)throw"Must provide a host.";if(!a)throw"Not enough arguments.";return new Nc(Id,this,a)},get slot(){return this.getAttribute("slot")},set slot(a){kd(this,"slot",a)},get assignedSlot(){return Od(this)}},Sd,Td);Object.defineProperties(Ud,Jc);
|
||||
var Vd=zb({importNode:function(a,b){return ld(a,b)},getElementById:function(a){return hd(this,function(b){return b.id==a},function(a){return!!a})[0]||null}},Sd);Object.defineProperties(Vd,{_activeElement:Kc.activeElement});
|
||||
var Wd=HTMLElement.prototype.blur,Xd=zb({blur:function(){var a=A(this);(a=(a=a&&a.root)&&a.activeElement)?a.blur():Wd.call(this)}}),Yd={addEventListener:function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.la=this;this.host.addEventListener(a,b,c)},removeEventListener:function(a,b,c){"object"!==typeof c&&(c={capture:!!c});c.la=this;this.host.removeEventListener(a,b,c)},getElementById:function(a){return hd(this,function(b){return b.id==a},function(a){return!!a})[0]||null}};
|
||||
function Zd(a,b){for(var c=Object.getOwnPropertyNames(b),d=0;d<c.length;d++){var e=c[d],f=Object.getOwnPropertyDescriptor(b,e);f.value?a[e]=f.value:Object.defineProperty(a,e,f)}};if(B.Ba){var ShadyDOM={inUse:B.Ba,patch:function(a){Pc(a);Oc(a);return a},isShadyRoot:C,enqueue:Jb,flush:Kb,settings:B,filterMutations:Qb,observeChildren:Ob,unobserveChildren:Pb,nativeMethods:D,nativeTree:M};window.ShadyDOM=ShadyDOM;window.Event=Bd;window.CustomEvent=Cd;window.MouseEvent=Dd;Ad();var $d=window.customElements&&window.customElements.nativeHTMLElement||HTMLElement;Zd(Nc.prototype,Yd);Zd(window.Node.prototype,Qd);Zd(window.Window.prototype,Pd);Zd(window.Text.prototype,Rd);Zd(window.DocumentFragment.prototype,
|
||||
Sd);Zd(window.Element.prototype,Ud);Zd(window.Document.prototype,Vd);window.HTMLSlotElement&&Zd(window.HTMLSlotElement.prototype,Td);Zd($d.prototype,Xd);B.I&&(Lc(window.Node.prototype),Lc(window.Text.prototype),Lc(window.DocumentFragment.prototype),Lc(window.Element.prototype),Lc($d.prototype),Lc(window.Document.prototype),window.HTMLSlotElement&&Lc(window.HTMLSlotElement.prototype));Mc();window.ShadowRoot=Nc};var ae=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function be(a){var b=ae.has(a);a=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(a);return!b&&a}function O(a){var b=a.isConnected;if(void 0!==b)return b;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return!(!a||!(a.__CE_isImportDocument||a instanceof Document))}
|
||||
function ce(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null}
|
||||
function de(a,b,c){c=void 0===c?new Set:c;for(var d=a;d;){if(d.nodeType===Node.ELEMENT_NODE){var e=d;b(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){d=e.import;if(d instanceof Node&&!c.has(d))for(c.add(d),d=d.firstChild;d;d=d.nextSibling)de(d,b,c);d=ce(a,e);continue}else if("template"===f){d=ce(a,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)de(e,b,c)}d=d.firstChild?d.firstChild:ce(a,d)}}function P(a,b,c){a[b]=c};function ee(){this.a=new Map;this.M=new Map;this.F=[];this.c=!1}function fe(a,b,c){a.a.set(b,c);a.M.set(c.constructor,c)}function ge(a,b){a.c=!0;a.F.push(b)}function he(a,b){a.c&&de(b,function(b){return a.b(b)})}ee.prototype.b=function(a){if(this.c&&!a.__CE_patched){a.__CE_patched=!0;for(var b=0;b<this.F.length;b++)this.F[b](a)}};function Q(a,b){var c=[];de(b,function(a){return c.push(a)});for(b=0;b<c.length;b++){var d=c[b];1===d.__CE_state?a.connectedCallback(d):ie(a,d)}}
|
||||
function R(a,b){var c=[];de(b,function(a){return c.push(a)});for(b=0;b<c.length;b++){var d=c[b];1===d.__CE_state&&a.disconnectedCallback(d)}}
|
||||
function je(a,b,c){c=void 0===c?{}:c;var d=c.bb||new Set,e=c.ga||function(b){return ie(a,b)},f=[];de(b,function(b){if("link"===b.localName&&"import"===b.getAttribute("rel")){var c=b.import;c instanceof Node&&(c.__CE_isImportDocument=!0,c.__CE_hasRegistry=!0);c&&"complete"===c.readyState?c.__CE_documentLoadHandled=!0:b.addEventListener("load",function(){var c=b.import;if(!c.__CE_documentLoadHandled){c.__CE_documentLoadHandled=!0;var f=new Set(d);f.delete(c);je(a,c,{bb:f,ga:e})}})}else f.push(b)},d);
|
||||
if(a.c)for(b=0;b<f.length;b++)a.b(f[b]);for(b=0;b<f.length;b++)e(f[b])}
|
||||
function ie(a,b){if(void 0===b.__CE_state){var c=b.ownerDocument;if(c.defaultView||c.__CE_isImportDocument&&c.__CE_hasRegistry)if(c=a.a.get(b.localName)){c.constructionStack.push(b);var d=c.constructor;try{try{if(new d!==b)throw Error("The custom element constructor did not produce the element being upgraded.");}finally{c.constructionStack.pop()}}catch(g){throw b.__CE_state=2,g;}b.__CE_state=1;b.__CE_definition=c;if(c.attributeChangedCallback)for(c=c.observedAttributes,d=0;d<c.length;d++){var e=c[d],
|
||||
f=b.getAttribute(e);null!==f&&a.attributeChangedCallback(b,e,null,f,null)}O(b)&&a.connectedCallback(b)}}}ee.prototype.connectedCallback=function(a){var b=a.__CE_definition;b.connectedCallback&&b.connectedCallback.call(a)};ee.prototype.disconnectedCallback=function(a){var b=a.__CE_definition;b.disconnectedCallback&&b.disconnectedCallback.call(a)};
|
||||
ee.prototype.attributeChangedCallback=function(a,b,c,d,e){var f=a.__CE_definition;f.attributeChangedCallback&&-1<f.observedAttributes.indexOf(b)&&f.attributeChangedCallback.call(a,b,c,d,e)};function ke(a){var b=document;this.A=a;this.a=b;this.P=void 0;je(this.A,this.a);"loading"===this.a.readyState&&(this.P=new MutationObserver(this.b.bind(this)),this.P.observe(this.a,{childList:!0,subtree:!0}))}function le(a){a.P&&a.P.disconnect()}ke.prototype.b=function(a){var b=this.a.readyState;"interactive"!==b&&"complete"!==b||le(this);for(b=0;b<a.length;b++)for(var c=a[b].addedNodes,d=0;d<c.length;d++)je(this.A,c[d])};function me(){var a=this;this.b=this.a=void 0;this.c=new Promise(function(b){a.b=b;a.a&&b(a.a)})}me.prototype.resolve=function(a){if(this.a)throw Error("Already resolved.");this.a=a;this.b&&this.b(a)};function S(a){this.ma=!1;this.A=a;this.ra=new Map;this.na=function(a){return a()};this.Y=!1;this.oa=[];this.Ma=new ke(a)}q=S.prototype;
|
||||
q.define=function(a,b){var c=this;if(!(b instanceof Function))throw new TypeError("Custom element constructors must be functions.");if(!be(a))throw new SyntaxError("The element name '"+a+"' is not valid.");if(this.A.a.get(a))throw Error("A custom element with name '"+a+"' has already been defined.");if(this.ma)throw Error("A custom element is already being defined.");this.ma=!0;try{var d=function(a){var b=e[a];if(void 0!==b&&!(b instanceof Function))throw Error("The '"+a+"' callback must be a function.");
|
||||
return b},e=b.prototype;if(!(e instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var f=d("connectedCallback");var g=d("disconnectedCallback");var h=d("adoptedCallback");var k=d("attributeChangedCallback");var m=b.observedAttributes||[]}catch(n){return}finally{this.ma=!1}b={localName:a,constructor:b,connectedCallback:f,disconnectedCallback:g,adoptedCallback:h,attributeChangedCallback:k,observedAttributes:m,constructionStack:[]};fe(this.A,a,b);this.oa.push(b);
|
||||
this.Y||(this.Y=!0,this.na(function(){return ne(c)}))};q.ga=function(a){je(this.A,a)};
|
||||
function ne(a){if(!1!==a.Y){a.Y=!1;for(var b=a.oa,c=[],d=new Map,e=0;e<b.length;e++)d.set(b[e].localName,[]);je(a.A,document,{ga:function(b){if(void 0===b.__CE_state){var e=b.localName,f=d.get(e);f?f.push(b):a.A.a.get(e)&&c.push(b)}}});for(e=0;e<c.length;e++)ie(a.A,c[e]);for(;0<b.length;){var f=b.shift();e=f.localName;f=d.get(f.localName);for(var g=0;g<f.length;g++)ie(a.A,f[g]);(e=a.ra.get(e))&&e.resolve(void 0)}}}q.get=function(a){if(a=this.A.a.get(a))return a.constructor};
|
||||
q.whenDefined=function(a){if(!be(a))return Promise.reject(new SyntaxError("'"+a+"' is not a valid custom element name."));var b=this.ra.get(a);if(b)return b.c;b=new me;this.ra.set(a,b);this.A.a.get(a)&&!this.oa.some(function(b){return b.localName===a})&&b.resolve(void 0);return b.c};q.Xa=function(a){le(this.Ma);var b=this.na;this.na=function(c){return a(function(){return b(c)})}};window.CustomElementRegistry=S;S.prototype.define=S.prototype.define;S.prototype.upgrade=S.prototype.ga;
|
||||
S.prototype.get=S.prototype.get;S.prototype.whenDefined=S.prototype.whenDefined;S.prototype.polyfillWrapFlushCallback=S.prototype.Xa;var oe=window.Document.prototype.createElement,pe=window.Document.prototype.createElementNS,qe=window.Document.prototype.importNode,re=window.Document.prototype.prepend,se=window.Document.prototype.append,te=window.DocumentFragment.prototype.prepend,ue=window.DocumentFragment.prototype.append,ve=window.Node.prototype.cloneNode,we=window.Node.prototype.appendChild,xe=window.Node.prototype.insertBefore,ye=window.Node.prototype.removeChild,ze=window.Node.prototype.replaceChild,Ae=Object.getOwnPropertyDescriptor(window.Node.prototype,
|
||||
"textContent"),Be=window.Element.prototype.attachShadow,Ce=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),De=window.Element.prototype.getAttribute,Ee=window.Element.prototype.setAttribute,Fe=window.Element.prototype.removeAttribute,Ge=window.Element.prototype.getAttributeNS,He=window.Element.prototype.setAttributeNS,Ie=window.Element.prototype.removeAttributeNS,Je=window.Element.prototype.insertAdjacentElement,Ke=window.Element.prototype.insertAdjacentHTML,Le=window.Element.prototype.prepend,
|
||||
Me=window.Element.prototype.append,Ne=window.Element.prototype.before,Oe=window.Element.prototype.after,Pe=window.Element.prototype.replaceWith,Qe=window.Element.prototype.remove,Re=window.HTMLElement,Se=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),Te=window.HTMLElement.prototype.insertAdjacentElement,Ue=window.HTMLElement.prototype.insertAdjacentHTML;var Ve=new function(){};function We(){var a=Xe;window.HTMLElement=function(){function b(){var b=this.constructor,d=a.M.get(b);if(!d)throw Error("The custom element being constructed was not registered with `customElements`.");var e=d.constructionStack;if(0===e.length)return e=oe.call(document,d.localName),Object.setPrototypeOf(e,b.prototype),e.__CE_state=1,e.__CE_definition=d,a.b(e),e;d=e.length-1;var f=e[d];if(f===Ve)throw Error("The HTMLElement constructor was either called reentrantly for this constructor or called multiple times.");
|
||||
e[d]=Ve;Object.setPrototypeOf(f,b.prototype);a.b(f);return f}b.prototype=Re.prototype;return b}()};function Ye(a,b,c){function d(b){return function(c){for(var d=[],e=0;e<arguments.length;++e)d[e-0]=arguments[e];e=[];for(var f=[],m=0;m<d.length;m++){var n=d[m];n instanceof Element&&O(n)&&f.push(n);if(n instanceof DocumentFragment)for(n=n.firstChild;n;n=n.nextSibling)e.push(n);else e.push(n)}b.apply(this,d);for(d=0;d<f.length;d++)R(a,f[d]);if(O(this))for(d=0;d<e.length;d++)f=e[d],f instanceof Element&&Q(a,f)}}void 0!==c.fa&&(b.prepend=d(c.fa));void 0!==c.append&&(b.append=d(c.append))};function Ze(){var a=Xe;P(Document.prototype,"createElement",function(b){if(this.__CE_hasRegistry){var c=a.a.get(b);if(c)return new c.constructor}b=oe.call(this,b);a.b(b);return b});P(Document.prototype,"importNode",function(b,c){b=qe.call(this,b,c);this.__CE_hasRegistry?je(a,b):he(a,b);return b});P(Document.prototype,"createElementNS",function(b,c){if(this.__CE_hasRegistry&&(null===b||"http://www.w3.org/1999/xhtml"===b)){var d=a.a.get(c);if(d)return new d.constructor}b=pe.call(this,b,c);a.b(b);return b});
|
||||
Ye(a,Document.prototype,{fa:re,append:se})};function $e(){var a=Xe;function b(b,d){Object.defineProperty(b,"textContent",{enumerable:d.enumerable,configurable:!0,get:d.get,set:function(b){if(this.nodeType===Node.TEXT_NODE)d.set.call(this,b);else{var c=void 0;if(this.firstChild){var e=this.childNodes,h=e.length;if(0<h&&O(this)){c=Array(h);for(var k=0;k<h;k++)c[k]=e[k]}}d.set.call(this,b);if(c)for(b=0;b<c.length;b++)R(a,c[b])}}})}P(Node.prototype,"insertBefore",function(b,d){if(b instanceof DocumentFragment){var c=Array.prototype.slice.apply(b.childNodes);
|
||||
b=xe.call(this,b,d);if(O(this))for(d=0;d<c.length;d++)Q(a,c[d]);return b}c=O(b);d=xe.call(this,b,d);c&&R(a,b);O(this)&&Q(a,b);return d});P(Node.prototype,"appendChild",function(b){if(b instanceof DocumentFragment){var c=Array.prototype.slice.apply(b.childNodes);b=we.call(this,b);if(O(this))for(var e=0;e<c.length;e++)Q(a,c[e]);return b}c=O(b);e=we.call(this,b);c&&R(a,b);O(this)&&Q(a,b);return e});P(Node.prototype,"cloneNode",function(b){b=ve.call(this,b);this.ownerDocument.__CE_hasRegistry?je(a,b):
|
||||
he(a,b);return b});P(Node.prototype,"removeChild",function(b){var c=O(b),e=ye.call(this,b);c&&R(a,b);return e});P(Node.prototype,"replaceChild",function(b,d){if(b instanceof DocumentFragment){var c=Array.prototype.slice.apply(b.childNodes);b=ze.call(this,b,d);if(O(this))for(R(a,d),d=0;d<c.length;d++)Q(a,c[d]);return b}c=O(b);var f=ze.call(this,b,d),g=O(this);g&&R(a,d);c&&R(a,b);g&&Q(a,b);return f});Ae&&Ae.get?b(Node.prototype,Ae):ge(a,function(a){b(a,{enumerable:!0,configurable:!0,get:function(){for(var a=
|
||||
[],b=0;b<this.childNodes.length;b++)a.push(this.childNodes[b].textContent);return a.join("")},set:function(a){for(;this.firstChild;)ye.call(this,this.firstChild);we.call(this,document.createTextNode(a))}})})};function af(a){var b=Element.prototype;function c(b){return function(c){for(var d=[],e=0;e<arguments.length;++e)d[e-0]=arguments[e];e=[];for(var h=[],k=0;k<d.length;k++){var m=d[k];m instanceof Element&&O(m)&&h.push(m);if(m instanceof DocumentFragment)for(m=m.firstChild;m;m=m.nextSibling)e.push(m);else e.push(m)}b.apply(this,d);for(d=0;d<h.length;d++)R(a,h[d]);if(O(this))for(d=0;d<e.length;d++)h=e[d],h instanceof Element&&Q(a,h)}}void 0!==Ne&&(b.before=c(Ne));void 0!==Ne&&(b.after=c(Oe));void 0!==
|
||||
Pe&&P(b,"replaceWith",function(b){for(var c=[],d=0;d<arguments.length;++d)c[d-0]=arguments[d];d=[];for(var g=[],h=0;h<c.length;h++){var k=c[h];k instanceof Element&&O(k)&&g.push(k);if(k instanceof DocumentFragment)for(k=k.firstChild;k;k=k.nextSibling)d.push(k);else d.push(k)}h=O(this);Pe.apply(this,c);for(c=0;c<g.length;c++)R(a,g[c]);if(h)for(R(a,this),c=0;c<d.length;c++)g=d[c],g instanceof Element&&Q(a,g)});void 0!==Qe&&P(b,"remove",function(){var b=O(this);Qe.call(this);b&&R(a,this)})};function bf(){var a=Xe;function b(b,c){Object.defineProperty(b,"innerHTML",{enumerable:c.enumerable,configurable:!0,get:c.get,set:function(b){var d=this,e=void 0;O(this)&&(e=[],de(this,function(a){a!==d&&e.push(a)}));c.set.call(this,b);if(e)for(var f=0;f<e.length;f++){var g=e[f];1===g.__CE_state&&a.disconnectedCallback(g)}this.ownerDocument.__CE_hasRegistry?je(a,this):he(a,this);return b}})}function c(b,c){P(b,"insertAdjacentElement",function(b,d){var e=O(d);b=c.call(this,b,d);e&&R(a,d);O(b)&&Q(a,
|
||||
d);return b})}function d(b,c){function d(b,c){for(var d=[];b!==c;b=b.nextSibling)d.push(b);for(c=0;c<d.length;c++)je(a,d[c])}P(b,"insertAdjacentHTML",function(a,b){a=a.toLowerCase();if("beforebegin"===a){var e=this.previousSibling;c.call(this,a,b);d(e||this.parentNode.firstChild,this)}else if("afterbegin"===a)e=this.firstChild,c.call(this,a,b),d(this.firstChild,e);else if("beforeend"===a)e=this.lastChild,c.call(this,a,b),d(e||this.firstChild,null);else if("afterend"===a)e=this.nextSibling,c.call(this,
|
||||
a,b),d(this.nextSibling,e);else throw new SyntaxError("The value provided ("+String(a)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");})}Be&&P(Element.prototype,"attachShadow",function(a){return this.__CE_shadowRoot=a=Be.call(this,a)});Ce&&Ce.get?b(Element.prototype,Ce):Se&&Se.get?b(HTMLElement.prototype,Se):ge(a,function(a){b(a,{enumerable:!0,configurable:!0,get:function(){return ve.call(this,!0).innerHTML},set:function(a){var b="template"===this.localName,c=b?this.content:
|
||||
this,d=oe.call(document,this.localName);for(d.innerHTML=a;0<c.childNodes.length;)ye.call(c,c.childNodes[0]);for(a=b?d.content:d;0<a.childNodes.length;)we.call(c,a.childNodes[0])}})});P(Element.prototype,"setAttribute",function(b,c){if(1!==this.__CE_state)return Ee.call(this,b,c);var d=De.call(this,b);Ee.call(this,b,c);c=De.call(this,b);a.attributeChangedCallback(this,b,d,c,null)});P(Element.prototype,"setAttributeNS",function(b,c,d){if(1!==this.__CE_state)return He.call(this,b,c,d);var e=Ge.call(this,
|
||||
b,c);He.call(this,b,c,d);d=Ge.call(this,b,c);a.attributeChangedCallback(this,c,e,d,b)});P(Element.prototype,"removeAttribute",function(b){if(1!==this.__CE_state)return Fe.call(this,b);var c=De.call(this,b);Fe.call(this,b);null!==c&&a.attributeChangedCallback(this,b,c,null,null)});P(Element.prototype,"removeAttributeNS",function(b,c){if(1!==this.__CE_state)return Ie.call(this,b,c);var d=Ge.call(this,b,c);Ie.call(this,b,c);var e=Ge.call(this,b,c);d!==e&&a.attributeChangedCallback(this,c,d,e,b)});Te?
|
||||
c(HTMLElement.prototype,Te):Je?c(Element.prototype,Je):console.warn("Custom Elements: `Element#insertAdjacentElement` was not patched.");Ue?d(HTMLElement.prototype,Ue):Ke?d(Element.prototype,Ke):console.warn("Custom Elements: `Element#insertAdjacentHTML` was not patched.");Ye(a,Element.prototype,{fa:Le,append:Me});af(a)};var cf=window.customElements;if(!cf||cf.forcePolyfill||"function"!=typeof cf.define||"function"!=typeof cf.get){var Xe=new ee;We();Ze();Ye(Xe,DocumentFragment.prototype,{fa:te,append:ue});$e();bf();document.__CE_hasRegistry=!0;var customElements=new S(Xe);Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:customElements})};function df(){this.end=this.start=0;this.rules=this.parent=this.previous=null;this.cssText=this.parsedCssText="";this.atRule=!1;this.type=0;this.parsedSelector=this.selector=this.keyframesName=""}
|
||||
function ef(a){a=a.replace(ff,"").replace(gf,"");var b=hf,c=a,d=new df;d.start=0;d.end=c.length;for(var e=d,f=0,g=c.length;f<g;f++)if("{"===c[f]){e.rules||(e.rules=[]);var h=e,k=h.rules[h.rules.length-1]||null;e=new df;e.start=f+1;e.parent=h;e.previous=k;h.rules.push(e)}else"}"===c[f]&&(e.end=f+1,e=e.parent||d);return b(d,a)}
|
||||
function hf(a,b){var c=b.substring(a.start,a.end-1);a.parsedCssText=a.cssText=c.trim();a.parent&&(c=b.substring(a.previous?a.previous.end:a.parent.start,a.start-1),c=jf(c),c=c.replace(kf," "),c=c.substring(c.lastIndexOf(";")+1),c=a.parsedSelector=a.selector=c.trim(),a.atRule=0===c.indexOf("@"),a.atRule?0===c.indexOf("@media")?a.type=lf:c.match(rf)&&(a.type=sf,a.keyframesName=a.selector.split(kf).pop()):a.type=0===c.indexOf("--")?tf:uf);if(c=a.rules)for(var d=0,e=c.length,f;d<e&&(f=c[d]);d++)hf(f,
|
||||
b);return a}function jf(a){return a.replace(/\\([0-9a-f]{1,6})\s/gi,function(a,c){a=c;for(c=6-a.length;c--;)a="0"+a;return"\\"+a})}
|
||||
function vf(a,b,c){c=void 0===c?"":c;var d="";if(a.cssText||a.rules){var e=a.rules,f;if(f=e)f=e[0],f=!(f&&f.selector&&0===f.selector.indexOf("--"));if(f){f=0;for(var g=e.length,h;f<g&&(h=e[f]);f++)d=vf(h,b,d)}else b?b=a.cssText:(b=a.cssText,b=b.replace(wf,"").replace(xf,""),b=b.replace(yf,"").replace(zf,"")),(d=b.trim())&&(d=" "+d+"\n")}d&&(a.selector&&(c+=a.selector+" {\n"),c+=d,a.selector&&(c+="}\n\n"));return c}
|
||||
var uf=1,sf=7,lf=4,tf=1E3,ff=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,gf=/@import[^;]*;/gim,wf=/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?(?:[;\n]|$)/gim,xf=/(?:^[^;\-\s}]+)?--[^;{}]*?:[^{};]*?{[^}]*?}(?:[;\n]|$)?/gim,yf=/@apply\s*\(?[^);]*\)?\s*(?:[;\n]|$)?/gim,zf=/[^;:]*?:[^;]*?var\([^;]*\)(?:[;\n]|$)?/gim,rf=/^@[^\s]*keyframes/,kf=/\s+/g;var T=!(window.ShadyDOM&&window.ShadyDOM.inUse),Af;function Bf(a){Af=a&&a.shimcssproperties?!1:T||!(navigator.userAgent.match(/AppleWebKit\/601|Edge\/15/)||!window.CSS||!CSS.supports||!CSS.supports("box-shadow","0 0 0 var(--foo)"))}window.ShadyCSS&&void 0!==window.ShadyCSS.nativeCss?Af=window.ShadyCSS.nativeCss:window.ShadyCSS?(Bf(window.ShadyCSS),window.ShadyCSS=void 0):Bf(window.WebComponents&&window.WebComponents.flags);var V=Af;var Cf=/(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^)]*?\)|[^};{])+)|\{([^}]*)\}(?:(?=[;\s}])|$))/gi,Df=/(?:^|\W+)@apply\s*\(?([^);\n]*)\)?/gi,Ef=/(--[\w-]+)\s*([:,;)]|$)/gi,Ff=/(animation\s*:)|(animation-name\s*:)/,Gf=/@media\s(.*)/,Hf=/\{[^}]*\}/g;var If=new Set;function Jf(a,b){if(!a)return"";"string"===typeof a&&(a=ef(a));b&&Kf(a,b);return vf(a,V)}function Lf(a){!a.__cssRules&&a.textContent&&(a.__cssRules=ef(a.textContent));return a.__cssRules||null}function Mf(a){return!!a.parent&&a.parent.type===sf}function Kf(a,b,c,d){if(a){var e=!1,f=a.type;if(d&&f===lf){var g=a.selector.match(Gf);g&&(window.matchMedia(g[1]).matches||(e=!0))}f===uf?b(a):c&&f===sf?c(a):f===tf&&(e=!0);if((a=a.rules)&&!e){e=0;f=a.length;for(var h;e<f&&(h=a[e]);e++)Kf(h,b,c,d)}}}
|
||||
function Nf(a,b,c,d){var e=document.createElement("style");b&&e.setAttribute("scope",b);e.textContent=a;Of(e,c,d);return e}var Pf=null;function Of(a,b,c){b=b||document.head;b.insertBefore(a,c&&c.nextSibling||b.firstChild);Pf?a.compareDocumentPosition(Pf)===Node.DOCUMENT_POSITION_PRECEDING&&(Pf=a):Pf=a}
|
||||
function Qf(a,b){var c=a.indexOf("var(");if(-1===c)return b(a,"","","");a:{var d=0;var e=c+3;for(var f=a.length;e<f;e++)if("("===a[e])d++;else if(")"===a[e]&&0===--d)break a;e=-1}d=a.substring(c+4,e);c=a.substring(0,c);a=Qf(a.substring(e+1),b);e=d.indexOf(",");return-1===e?b(c,d.trim(),"",a):b(c,d.substring(0,e).trim(),d.substring(e+1).trim(),a)}function Rf(a,b){T?a.setAttribute("class",b):window.ShadyDOM.nativeMethods.setAttribute.call(a,"class",b)}
|
||||
function Sf(a){var b=a.localName,c="";b?-1<b.indexOf("-")||(c=b,b=a.getAttribute&&a.getAttribute("is")||""):(b=a.is,c=a.extends);return{is:b,X:c}};function Tf(){}function Uf(a,b,c){var d=Vf;a.__styleScoped?a.__styleScoped=null:Wf(d,a,b||"",c)}function Wf(a,b,c,d){b.nodeType===Node.ELEMENT_NODE&&Xf(b,c,d);if(b="template"===b.localName?(b.content||b.jb).childNodes:b.children||b.childNodes)for(var e=0;e<b.length;e++)Wf(a,b[e],c,d)}
|
||||
function Xf(a,b,c){if(b)if(a.classList)c?(a.classList.remove("style-scope"),a.classList.remove(b)):(a.classList.add("style-scope"),a.classList.add(b));else if(a.getAttribute){var d=a.getAttribute(Yf);c?d&&(b=d.replace("style-scope","").replace(b,""),Rf(a,b)):Rf(a,(d?d+" ":"")+"style-scope "+b)}}function Zf(a,b,c){var d=Vf,e=a.__cssBuild;T||"shady"===e?b=Jf(b,c):(a=Sf(a),b=$f(d,b,a.is,a.X,c)+"\n\n");return b.trim()}
|
||||
function $f(a,b,c,d,e){var f=ag(c,d);c=c?bg+c:"";return Jf(b,function(b){b.c||(b.selector=b.G=cg(a,b,a.b,c,f),b.c=!0);e&&e(b,c,f)})}function ag(a,b){return b?"[is="+a+"]":a}function cg(a,b,c,d,e){var f=b.selector.split(dg);if(!Mf(b)){b=0;for(var g=f.length,h;b<g&&(h=f[b]);b++)f[b]=c.call(a,h,d,e)}return f.join(dg)}function eg(a){return a.replace(fg,function(a,c,d){-1<d.indexOf("+")?d=d.replace(/\+/g,"___"):-1<d.indexOf("___")&&(d=d.replace(/___/g,"+"));return":"+c+"("+d+")"})}
|
||||
Tf.prototype.b=function(a,b,c){var d=!1;a=a.trim();var e=fg.test(a);e&&(a=a.replace(fg,function(a,b,c){return":"+b+"("+c.replace(/\s/g,"")+")"}),a=eg(a));a=a.replace(gg,hg+" $1");a=a.replace(ig,function(a,e,h){d||(a=jg(h,e,b,c),d=d||a.stop,e=a.Sa,h=a.value);return e+h});e&&(a=eg(a));return a};
|
||||
function jg(a,b,c,d){var e=a.indexOf(kg);0<=a.indexOf(hg)?a=lg(a,d):0!==e&&(a=c?mg(a,c):a);c=!1;0<=e&&(b="",c=!0);if(c){var f=!0;c&&(a=a.replace(ng,function(a,b){return" > "+b}))}a=a.replace(og,function(a,b,c){return'[dir="'+c+'"] '+b+", "+b+'[dir="'+c+'"]'});return{value:a,Sa:b,stop:f}}function mg(a,b){a=a.split(pg);a[0]+=b;return a.join(pg)}
|
||||
function lg(a,b){var c=a.match(qg);return(c=c&&c[2].trim()||"")?c[0].match(rg)?a.replace(qg,function(a,c,f){return b+f}):c.split(rg)[0]===b?c:sg:a.replace(hg,b)}function tg(a){a.selector===ug&&(a.selector="html")}Tf.prototype.c=function(a){return a.match(kg)?this.b(a,vg):mg(a.trim(),vg)};aa.Object.defineProperties(Tf.prototype,{a:{configurable:!0,enumerable:!0,get:function(){return"style-scope"}}});
|
||||
var fg=/:(nth[-\w]+)\(([^)]+)\)/,vg=":not(.style-scope)",dg=",",ig=/(^|[\s>+~]+)((?:\[.+?\]|[^\s>+~=[])+)/g,rg=/[[.:#*]/,hg=":host",ug=":root",kg="::slotted",gg=new RegExp("^("+kg+")"),qg=/(:host)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,ng=/(?:::slotted)(?:\(((?:\([^)(]*\)|[^)(]*)+?)\))/,og=/(.*):dir\((?:(ltr|rtl))\)/,bg=".",pg=":",Yf="class",sg="should_not_match",Vf=new Tf;function wg(a,b,c,d){this.K=a||null;this.b=b||null;this.sa=c||[];this.T=null;this.X=d||"";this.a=this.H=this.O=null}function xg(a){return a?a.__styleInfo:null}function yg(a,b){return a.__styleInfo=b}wg.prototype.c=function(){return this.K};wg.prototype._getStyleRules=wg.prototype.c;function zg(a){var b=this.matches||this.matchesSelector||this.mozMatchesSelector||this.msMatchesSelector||this.oMatchesSelector||this.webkitMatchesSelector;return b&&b.call(this,a)}var Ag=navigator.userAgent.match("Trident");function Bg(){}function Cg(a){var b={},c=[],d=0;Kf(a,function(a){Dg(a);a.index=d++;a=a.B.cssText;for(var c;c=Ef.exec(a);){var e=c[1];":"!==c[2]&&(b[e]=!0)}},function(a){c.push(a)});a.b=c;a=[];for(var e in b)a.push(e);return a}
|
||||
function Dg(a){if(!a.B){var b={},c={};Eg(a,c)&&(b.J=c,a.rules=null);b.cssText=a.parsedCssText.replace(Hf,"").replace(Cf,"");a.B=b}}function Eg(a,b){var c=a.B;if(c){if(c.J)return Object.assign(b,c.J),!0}else{c=a.parsedCssText;for(var d;a=Cf.exec(c);){d=(a[2]||a[3]).trim();if("inherit"!==d||"unset"!==d)b[a[1].trim()]=d;d=!0}return d}}
|
||||
function Fg(a,b,c){b&&(b=0<=b.indexOf(";")?Gg(a,b,c):Qf(b,function(b,e,f,g){if(!e)return b+g;(e=Fg(a,c[e],c))&&"initial"!==e?"apply-shim-inherit"===e&&(e="inherit"):e=Fg(a,c[f]||f,c)||f;return b+(e||"")+g}));return b&&b.trim()||""}
|
||||
function Gg(a,b,c){b=b.split(";");for(var d=0,e,f;d<b.length;d++)if(e=b[d]){Df.lastIndex=0;if(f=Df.exec(e))e=Fg(a,c[f[1]],c);else if(f=e.indexOf(":"),-1!==f){var g=e.substring(f);g=g.trim();g=Fg(a,g,c)||g;e=e.substring(0,f)+g}b[d]=e&&e.lastIndexOf(";")===e.length-1?e.slice(0,-1):e||""}return b.join(";")}
|
||||
function Hg(a,b){var c={},d=[];Kf(a,function(a){a.B||Dg(a);var e=a.G||a.parsedSelector;b&&a.B.J&&e&&zg.call(b,e)&&(Eg(a,c),a=a.index,e=parseInt(a/32,10),d[e]=(d[e]||0)|1<<a%32)},null,!0);return{J:c,key:d}}
|
||||
function Ig(a,b,c,d){b.B||Dg(b);if(b.B.J){var e=Sf(a);a=e.is;e=e.X;e=a?ag(a,e):"html";var f=b.parsedSelector,g=":host > *"===f||"html"===f,h=0===f.indexOf(":host")&&!g;"shady"===c&&(g=f===e+" > *."+e||-1!==f.indexOf("html"),h=!g&&0===f.indexOf(e));"shadow"===c&&(g=":host > *"===f||"html"===f,h=h&&!g);if(g||h)c=e,h&&(b.G||(b.G=cg(Vf,b,Vf.b,a?bg+a:"",e)),c=b.G||e),d({Za:c,Wa:h,wb:g})}}
|
||||
function Jg(a,b){var c={},d={},e=b&&b.__cssBuild;Kf(b,function(b){Ig(a,b,e,function(e){zg.call(a.kb||a,e.Za)&&(e.Wa?Eg(b,c):Eg(b,d))})},null,!0);return{Ya:d,Va:c}}
|
||||
function Kg(a,b,c,d){var e=Sf(b),f=ag(e.is,e.X),g=new RegExp("(?:^|[^.#[:])"+(b.extends?"\\"+f.slice(0,-1)+"\\]":f)+"($|[.:[\\s>+~])");e=xg(b).K;var h=Lg(e,d);return Zf(b,e,function(b){var e="";b.B||Dg(b);b.B.cssText&&(e=Gg(a,b.B.cssText,c));b.cssText=e;if(!T&&!Mf(b)&&b.cssText){var k=e=b.cssText;null==b.za&&(b.za=Ff.test(e));if(b.za)if(null==b.ea){b.ea=[];for(var r in h)k=h[r],k=k(e),e!==k&&(e=k,b.ea.push(r))}else{for(r=0;r<b.ea.length;++r)k=h[b.ea[r]],e=k(e);k=e}b.cssText=k;b.G=b.G||b.selector;
|
||||
e="."+d;r=b.G.split(",");k=0;for(var G=r.length,x;k<G&&(x=r[k]);k++)r[k]=x.match(g)?x.replace(f,e):e+" "+x;b.selector=r.join(",")}})}function Lg(a,b){a=a.b;var c={};if(!T&&a)for(var d=0,e=a[d];d<a.length;e=a[++d]){var f=e,g=b;f.F=new RegExp("\\b"+f.keyframesName+"(?!\\B|-)","g");f.a=f.keyframesName+"-"+g;f.G=f.G||f.selector;f.selector=f.G.replace(f.keyframesName,f.a);c[e.keyframesName]=Mg(e)}return c}function Mg(a){return function(b){return b.replace(a.F,a.a)}}
|
||||
function Ng(a,b){var c=Og,d=Lf(a);a.textContent=Jf(d,function(a){var d=a.cssText=a.parsedCssText;a.B&&a.B.cssText&&(d=d.replace(wf,"").replace(xf,""),a.cssText=Gg(c,d,b))})}aa.Object.defineProperties(Bg.prototype,{a:{configurable:!0,enumerable:!0,get:function(){return"x-scope"}}});var Og=new Bg;var Pg={},Qg=window.customElements;if(Qg&&!T){var Rg=Qg.define;Qg.define=function(a,b,c){var d=document.createComment(" Shady DOM styles for "+a+" "),e=document.head;e.insertBefore(d,(Pf?Pf.nextSibling:null)||e.firstChild);Pf=d;Pg[a]=d;Rg.call(Qg,a,b,c)}};function Sg(){this.cache={}}Sg.prototype.store=function(a,b,c,d){var e=this.cache[a]||[];e.push({J:b,styleElement:c,H:d});100<e.length&&e.shift();this.cache[a]=e};Sg.prototype.fetch=function(a,b,c){if(a=this.cache[a])for(var d=a.length-1;0<=d;d--){var e=a[d],f;a:{for(f=0;f<c.length;f++){var g=c[f];if(e.J[g]!==b[g]){f=!1;break a}}f=!0}if(f)return e}};function Tg(){}
|
||||
function Ug(a){for(var b=0;b<a.length;b++){var c=a[b];if(c.target!==document.documentElement&&c.target!==document.head)for(var d=0;d<c.addedNodes.length;d++){var e=c.addedNodes[d];if(e.nodeType===Node.ELEMENT_NODE){var f=e.getRootNode();var g=e;var h=[];g.classList?h=Array.from(g.classList):g instanceof window.SVGElement&&g.hasAttribute("class")&&(h=g.getAttribute("class").split(/\s+/));g=h;h=g.indexOf(Vf.a);if((g=-1<h?g[h+1]:"")&&f===e.ownerDocument)Uf(e,g,!0);else if(f.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&
|
||||
(f=f.host))if(f=Sf(f).is,g===f)for(e=window.ShadyDOM.nativeMethods.querySelectorAll.call(e,":not(."+Vf.a+")"),f=0;f<e.length;f++)Xf(e[f],g);else g&&Uf(e,g,!0),Uf(e,f)}}}}
|
||||
if(!T){var Vg=new MutationObserver(Ug),Wg=function(a){Vg.observe(a,{childList:!0,subtree:!0})};if(window.customElements&&!window.customElements.polyfillWrapFlushCallback)Wg(document);else{var Xg=function(){Wg(document.body)};window.HTMLImports?window.HTMLImports.whenReady(Xg):requestAnimationFrame(function(){if("loading"===document.readyState){var a=function(){Xg();document.removeEventListener("readystatechange",a)};document.addEventListener("readystatechange",a)}else Xg()})}Tg=function(){Ug(Vg.takeRecords())}}
|
||||
var Yg=Tg;var Zg={};var $g=Promise.resolve();function ah(a){if(a=Zg[a])a._applyShimCurrentVersion=a._applyShimCurrentVersion||0,a._applyShimValidatingVersion=a._applyShimValidatingVersion||0,a._applyShimNextVersion=(a._applyShimNextVersion||0)+1}function bh(a){return a._applyShimCurrentVersion===a._applyShimNextVersion}function ch(a){a._applyShimValidatingVersion=a._applyShimNextVersion;a.b||(a.b=!0,$g.then(function(){a._applyShimCurrentVersion=a._applyShimNextVersion;a.b=!1}))};var dh=new Sg;function W(){this.Aa={};this.c=document.documentElement;var a=new df;a.rules=[];this.F=yg(this.c,new wg(a));this.M=!1;this.b=this.a=null}q=W.prototype;q.Ga=function(){Yg()};q.Ta=function(a){return Lf(a)};q.ab=function(a){return Jf(a)};
|
||||
q.prepareTemplate=function(a,b,c){if(!a.F){a.F=!0;a.name=b;a.extends=c;Zg[b]=a;var d=(d=a.content.querySelector("style"))?d.getAttribute("css-build")||"":"";var e=[];for(var f=a.content.querySelectorAll("style"),g=0;g<f.length;g++){var h=f[g];if(h.hasAttribute("shady-unscoped")){if(!T){var k=h.textContent;If.has(k)||(If.add(k),k=h.cloneNode(!0),document.head.appendChild(k));h.parentNode.removeChild(h)}}else e.push(h.textContent),h.parentNode.removeChild(h)}e=e.join("").trim();c={is:b,extends:c,hb:d};
|
||||
T||Uf(a.content,b);eh(this);f=Df.test(e)||Cf.test(e);Df.lastIndex=0;Cf.lastIndex=0;e=ef(e);f&&V&&this.a&&this.a.transformRules(e,b);a._styleAst=e;a.M=d;d=[];V||(d=Cg(a._styleAst));if(!d.length||V)e=T?a.content:null,b=Pg[b],f=Zf(c,a._styleAst),b=f.length?Nf(f,c.is,e,b):void 0,a.a=b;a.c=d}};
|
||||
function fh(a){!a.b&&window.ShadyCSS&&window.ShadyCSS.CustomStyleInterface&&(a.b=window.ShadyCSS.CustomStyleInterface,a.b.transformCallback=function(b){a.Ea(b)},a.b.validateCallback=function(){requestAnimationFrame(function(){(a.b.enqueued||a.M)&&a.flushCustomStyles()})})}function eh(a){!a.a&&window.ShadyCSS&&window.ShadyCSS.ApplyShim&&(a.a=window.ShadyCSS.ApplyShim,a.a.invalidCallback=ah);fh(a)}
|
||||
q.flushCustomStyles=function(){eh(this);if(this.b){var a=this.b.processStyles();if(this.b.enqueued){if(V)for(var b=0;b<a.length;b++){var c=this.b.getStyleForCustomStyle(a[b]);if(c&&V&&this.a){var d=Lf(c);eh(this);this.a.transformRules(d);c.textContent=Jf(d)}}else for(gh(this,this.c,this.F),b=0;b<a.length;b++)(c=this.b.getStyleForCustomStyle(a[b]))&&Ng(c,this.F.O);this.b.enqueued=!1;this.M&&!V&&this.styleDocument()}}};
|
||||
q.styleElement=function(a,b){var c=Sf(a).is,d=xg(a);if(!d){var e=Sf(a);d=e.is;e=e.X;var f=Pg[d];d=Zg[d];if(d){var g=d._styleAst;var h=d.c}d=yg(a,new wg(g,f,h,e))}a!==this.c&&(this.M=!0);b&&(d.T=d.T||{},Object.assign(d.T,b));if(V){if(d.T){b=d.T;for(var k in b)null===k?a.style.removeProperty(k):a.style.setProperty(k,b[k])}if(((k=Zg[c])||a===this.c)&&k&&k.a&&!bh(k)){if(bh(k)||k._applyShimValidatingVersion!==k._applyShimNextVersion)eh(this),this.a&&this.a.transformRules(k._styleAst,c),k.a.textContent=
|
||||
Zf(a,d.K),ch(k);T&&(c=a.shadowRoot)&&(c.querySelector("style").textContent=Zf(a,d.K));d.K=k._styleAst}}else if(gh(this,a,d),d.sa&&d.sa.length){c=d;k=Sf(a).is;d=(b=dh.fetch(k,c.O,c.sa))?b.styleElement:null;g=c.H;(h=b&&b.H)||(h=this.Aa[k]=(this.Aa[k]||0)+1,h=k+"-"+h);c.H=h;h=c.H;e=Og;e=d?d.textContent||"":Kg(e,a,c.O,h);f=xg(a);var m=f.a;m&&!T&&m!==d&&(m._useCount--,0>=m._useCount&&m.parentNode&&m.parentNode.removeChild(m));T?f.a?(f.a.textContent=e,d=f.a):e&&(d=Nf(e,h,a.shadowRoot,f.b)):d?d.parentNode||
|
||||
(Ag&&-1<e.indexOf("@media")&&(d.textContent=e),Of(d,null,f.b)):e&&(d=Nf(e,h,null,f.b));d&&(d._useCount=d._useCount||0,f.a!=d&&d._useCount++,f.a=d);h=d;T||(d=c.H,f=e=a.getAttribute("class")||"",g&&(f=e.replace(new RegExp("\\s*x-scope\\s*"+g+"\\s*","g")," ")),f+=(f?" ":"")+"x-scope "+d,e!==f&&Rf(a,f));b||dh.store(k,c.O,h,c.H)}};function hh(a,b){return(b=b.getRootNode().host)?xg(b)?b:hh(a,b):a.c}
|
||||
function gh(a,b,c){a=hh(a,b);var d=xg(a);a=Object.create(d.O||null);var e=Jg(b,c.K);b=Hg(d.K,b).J;Object.assign(a,e.Va,b,e.Ya);b=c.T;for(var f in b)if((e=b[f])||0===e)a[f]=e;f=Og;b=Object.getOwnPropertyNames(a);for(e=0;e<b.length;e++)d=b[e],a[d]=Fg(f,a[d],a);c.O=a}q.styleDocument=function(a){this.styleSubtree(this.c,a)};
|
||||
q.styleSubtree=function(a,b){var c=a.shadowRoot;(c||a===this.c)&&this.styleElement(a,b);if(b=c&&(c.children||c.childNodes))for(a=0;a<b.length;a++)this.styleSubtree(b[a]);else if(a=a.children||a.childNodes)for(b=0;b<a.length;b++)this.styleSubtree(a[b])};q.Ea=function(a){var b=this,c=Lf(a);Kf(c,function(a){if(T)tg(a);else{var c=Vf;a.selector=a.parsedSelector;tg(a);a.selector=a.G=cg(c,a,c.c,void 0,void 0)}V&&(eh(b),b.a&&b.a.transformRule(a))});V?a.textContent=Jf(c):this.F.K.rules.push(c)};
|
||||
q.getComputedStyleValue=function(a,b){var c;V||(c=(xg(a)||xg(hh(this,a))).O[b]);return(c=c||window.getComputedStyle(a).getPropertyValue(b))?c.trim():""};q.$a=function(a,b){var c=a.getRootNode();b=b?b.split(/\s/):[];c=c.host&&c.host.localName;if(!c){var d=a.getAttribute("class");if(d){d=d.split(/\s/);for(var e=0;e<d.length;e++)if(d[e]===Vf.a){c=d[e+1];break}}}c&&b.push(Vf.a,c);V||(c=xg(a))&&c.H&&b.push(Og.a,c.H);Rf(a,b.join(" "))};q.Qa=function(a){return xg(a)};W.prototype.flush=W.prototype.Ga;
|
||||
W.prototype.prepareTemplate=W.prototype.prepareTemplate;W.prototype.styleElement=W.prototype.styleElement;W.prototype.styleDocument=W.prototype.styleDocument;W.prototype.styleSubtree=W.prototype.styleSubtree;W.prototype.getComputedStyleValue=W.prototype.getComputedStyleValue;W.prototype.setElementClass=W.prototype.$a;W.prototype._styleInfoForNode=W.prototype.Qa;W.prototype.transformCustomStyleForDocument=W.prototype.Ea;W.prototype.getStyleAst=W.prototype.Ta;W.prototype.styleAstToString=W.prototype.ab;
|
||||
W.prototype.flushCustomStyles=W.prototype.flushCustomStyles;Object.defineProperties(W.prototype,{nativeShadow:{get:function(){return T}},nativeCss:{get:function(){return V}}});var X=new W,ih,jh;window.ShadyCSS&&(ih=window.ShadyCSS.ApplyShim,jh=window.ShadyCSS.CustomStyleInterface);
|
||||
window.ShadyCSS={ScopingShim:X,prepareTemplate:function(a,b,c){X.flushCustomStyles();X.prepareTemplate(a,b,c)},styleSubtree:function(a,b){X.flushCustomStyles();X.styleSubtree(a,b)},styleElement:function(a){X.flushCustomStyles();X.styleElement(a)},styleDocument:function(a){X.flushCustomStyles();X.styleDocument(a)},flushCustomStyles:function(){X.flushCustomStyles()},getComputedStyleValue:function(a,b){return X.getComputedStyleValue(a,b)},nativeCss:V,nativeShadow:T};ih&&(window.ShadyCSS.ApplyShim=ih);
|
||||
jh&&(window.ShadyCSS.CustomStyleInterface=jh);(function(a){function b(a){""==a&&(f.call(this),this.h=!0);return a.toLowerCase()}function c(a){var b=a.charCodeAt(0);return 32<b&&127>b&&-1==[34,35,60,62,63,96].indexOf(b)?a:encodeURIComponent(a)}function d(a){var b=a.charCodeAt(0);return 32<b&&127>b&&-1==[34,35,60,62,96].indexOf(b)?a:encodeURIComponent(a)}function e(a,e,g){function h(a){kb.push(a)}var k=e||"scheme start",v=0,p="",x=!1,U=!1,kb=[];a:for(;(void 0!=a[v-1]||0==v)&&!this.h;){var l=a[v];switch(k){case "scheme start":if(l&&r.test(l))p+=
|
||||
l.toLowerCase(),k="scheme";else if(e){h("Invalid scheme.");break a}else{p="";k="no scheme";continue}break;case "scheme":if(l&&G.test(l))p+=l.toLowerCase();else if(":"==l){this.g=p;p="";if(e)break a;void 0!==m[this.g]&&(this.D=!0);k="file"==this.g?"relative":this.D&&g&&g.g==this.g?"relative or authority":this.D?"authority first slash":"scheme data"}else if(e){void 0!=l&&h("Code point not allowed in scheme: "+l);break a}else{p="";v=0;k="no scheme";continue}break;case "scheme data":"?"==l?(this.u="?",
|
||||
k="query"):"#"==l?(this.C="#",k="fragment"):void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.qa+=c(l));break;case "no scheme":if(g&&void 0!==m[g.g]){k="relative";continue}else h("Missing scheme."),f.call(this),this.h=!0;break;case "relative or authority":if("/"==l&&"/"==a[v+1])k="authority ignore slashes";else{h("Expected /, got: "+l);k="relative";continue}break;case "relative":this.D=!0;"file"!=this.g&&(this.g=g.g);if(void 0==l){this.i=g.i;this.s=g.s;this.j=g.j.slice();this.u=g.u;this.v=g.v;this.f=g.f;
|
||||
break a}else if("/"==l||"\\"==l)"\\"==l&&h("\\ is an invalid code point."),k="relative slash";else if("?"==l)this.i=g.i,this.s=g.s,this.j=g.j.slice(),this.u="?",this.v=g.v,this.f=g.f,k="query";else if("#"==l)this.i=g.i,this.s=g.s,this.j=g.j.slice(),this.u=g.u,this.C="#",this.v=g.v,this.f=g.f,k="fragment";else{k=a[v+1];var F=a[v+2];if("file"!=this.g||!r.test(l)||":"!=k&&"|"!=k||void 0!=F&&"/"!=F&&"\\"!=F&&"?"!=F&&"#"!=F)this.i=g.i,this.s=g.s,this.v=g.v,this.f=g.f,this.j=g.j.slice(),this.j.pop();k=
|
||||
"relative path";continue}break;case "relative slash":if("/"==l||"\\"==l)"\\"==l&&h("\\ is an invalid code point."),k="file"==this.g?"file host":"authority ignore slashes";else{"file"!=this.g&&(this.i=g.i,this.s=g.s,this.v=g.v,this.f=g.f);k="relative path";continue}break;case "authority first slash":if("/"==l)k="authority second slash";else{h("Expected '/', got: "+l);k="authority ignore slashes";continue}break;case "authority second slash":k="authority ignore slashes";if("/"!=l){h("Expected '/', got: "+
|
||||
l);continue}break;case "authority ignore slashes":if("/"!=l&&"\\"!=l){k="authority";continue}else h("Expected authority, got: "+l);break;case "authority":if("@"==l){x&&(h("@ already seen."),p+="%40");x=!0;for(l=0;l<p.length;l++)F=p[l],"\t"==F||"\n"==F||"\r"==F?h("Invalid whitespace in authority."):":"==F&&null===this.f?this.f="":(F=c(F),null!==this.f?this.f+=F:this.v+=F);p=""}else if(void 0==l||"/"==l||"\\"==l||"?"==l||"#"==l){v-=p.length;p="";k="host";continue}else p+=l;break;case "file host":if(void 0==
|
||||
l||"/"==l||"\\"==l||"?"==l||"#"==l){2!=p.length||!r.test(p[0])||":"!=p[1]&&"|"!=p[1]?(0!=p.length&&(this.i=b.call(this,p),p=""),k="relative path start"):k="relative path";continue}else"\t"==l||"\n"==l||"\r"==l?h("Invalid whitespace in file host."):p+=l;break;case "host":case "hostname":if(":"!=l||U)if(void 0==l||"/"==l||"\\"==l||"?"==l||"#"==l){this.i=b.call(this,p);p="";k="relative path start";if(e)break a;continue}else"\t"!=l&&"\n"!=l&&"\r"!=l?("["==l?U=!0:"]"==l&&(U=!1),p+=l):h("Invalid code point in host/hostname: "+
|
||||
l);else if(this.i=b.call(this,p),p="",k="port","hostname"==e)break a;break;case "port":if(/[0-9]/.test(l))p+=l;else if(void 0==l||"/"==l||"\\"==l||"?"==l||"#"==l||e){""!=p&&(p=parseInt(p,10),p!=m[this.g]&&(this.s=p+""),p="");if(e)break a;k="relative path start";continue}else"\t"==l||"\n"==l||"\r"==l?h("Invalid code point in port: "+l):(f.call(this),this.h=!0);break;case "relative path start":"\\"==l&&h("'\\' not allowed in path.");k="relative path";if("/"!=l&&"\\"!=l)continue;break;case "relative path":if(void 0!=
|
||||
l&&"/"!=l&&"\\"!=l&&(e||"?"!=l&&"#"!=l))"\t"!=l&&"\n"!=l&&"\r"!=l&&(p+=c(l));else{"\\"==l&&h("\\ not allowed in relative path.");if(F=n[p.toLowerCase()])p=F;".."==p?(this.j.pop(),"/"!=l&&"\\"!=l&&this.j.push("")):"."==p&&"/"!=l&&"\\"!=l?this.j.push(""):"."!=p&&("file"==this.g&&0==this.j.length&&2==p.length&&r.test(p[0])&&"|"==p[1]&&(p=p[0]+":"),this.j.push(p));p="";"?"==l?(this.u="?",k="query"):"#"==l&&(this.C="#",k="fragment")}break;case "query":e||"#"!=l?void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.u+=
|
||||
d(l)):(this.C="#",k="fragment");break;case "fragment":void 0!=l&&"\t"!=l&&"\n"!=l&&"\r"!=l&&(this.C+=l)}v++}}function f(){this.v=this.qa=this.g="";this.f=null;this.s=this.i="";this.j=[];this.C=this.u="";this.D=this.h=!1}function g(a,b){void 0===b||b instanceof g||(b=new g(String(b)));this.Ra=a;f.call(this);a=a.replace(/^[ \t\r\n\f]+|[ \t\r\n\f]+$/g,"");e.call(this,a,null,b)}var h=!1;if(!a.qb)try{var k=new URL("b","http://a");k.pathname="c%20d";h="http://a/c%20d"===k.href}catch(v){}if(!h){var m=Object.create(null);
|
||||
m.ftp=21;m.file=0;m.gopher=70;m.http=80;m.https=443;m.ws=80;m.wss=443;var n=Object.create(null);n["%2e"]=".";n[".%2e"]="..";n["%2e."]="..";n["%2e%2e"]="..";var r=/[a-zA-Z]/,G=/[a-zA-Z0-9\+\-\.]/;g.prototype={toString:function(){return this.href},get href(){if(this.h)return this.Ra;var a="";if(""!=this.v||null!=this.f)a=this.v+(null!=this.f?":"+this.f:"")+"@";return this.protocol+(this.D?"//"+a+this.host:"")+this.pathname+this.u+this.C},set href(a){f.call(this);e.call(this,a)},get protocol(){return this.g+
|
||||
":"},set protocol(a){this.h||e.call(this,a+":","scheme start")},get host(){return this.h?"":this.s?this.i+":"+this.s:this.i},set host(a){!this.h&&this.D&&e.call(this,a,"host")},get hostname(){return this.i},set hostname(a){!this.h&&this.D&&e.call(this,a,"hostname")},get port(){return this.s},set port(a){!this.h&&this.D&&e.call(this,a,"port")},get pathname(){return this.h?"":this.D?"/"+this.j.join("/"):this.qa},set pathname(a){!this.h&&this.D&&(this.j=[],e.call(this,a,"relative path start"))},get search(){return this.h||
|
||||
!this.u||"?"==this.u?"":this.u},set search(a){!this.h&&this.D&&(this.u="?","?"==a[0]&&(a=a.slice(1)),e.call(this,a,"query"))},get hash(){return this.h||!this.C||"#"==this.C?"":this.C},set hash(a){this.h||(this.C="#","#"==a[0]&&(a=a.slice(1)),e.call(this,a,"fragment"))},get origin(){var a;if(this.h||!this.g)return"";switch(this.g){case "data":case "file":case "javascript":case "mailto":return"null"}return(a=this.host)?this.g+"://"+a:""}};var x=a.URL;x&&(g.createObjectURL=function(a){return x.createObjectURL.apply(x,
|
||||
arguments)},g.revokeObjectURL=function(a){x.revokeObjectURL(a)});a.URL=g}})(window);var kh={},lh=Object.create,mh=Object.defineProperties,nh=Object.defineProperty;function Y(a,b){b=void 0===b?{}:b;return{value:a,configurable:!!b.ya,writable:!!b.cb,enumerable:!!b.e}}var oh=void 0;try{oh=1===nh({},"y",{get:function(){return 1}}).y}catch(a){oh=!1}var ph={};function qh(a){a=String(a);for(var b="",c=0;ph[a+b];)b=c+=1;ph[a+b]=1;var d="Symbol("+a+""+b+")";oh&&nh(Object.prototype,d,{get:void 0,set:function(a){nh(this,d,Y(a,{ya:!0,cb:!0}))},configurable:!0,enumerable:!1});return d}
|
||||
var rh=lh(null);function Z(a){if(this instanceof Z)throw new TypeError("Symbol is not a constructor");a=void 0===a?"":String(a);var b=qh(a);return oh?lh(rh,{ua:Y(a),Ka:Y(b)}):b}mh(Z,{"for":Y(function(a){a=String(a);if(kh[a])return kh[a];var b=Z(a);return kh[a]=b}),keyFor:Y(function(a){if(oh&&(!a||"Symbol"!==a[Z.toStringTag]))throw new TypeError(""+a+" is not a symbol");for(var b in kh)if(kh[b]===a)return oh?kh[b].ua:kh[b].substr(7,kh[b].length-8)})});
|
||||
mh(Z,{ub:Y(Z("hasInstance")),vb:Y(Z("isConcatSpreadable")),iterator:Y(Z("iterator")),match:Y(Z("match")),replace:Y(Z("replace")),search:Y(Z("search")),Ab:Y(Z("species")),split:Y(Z("split")),Bb:Y(Z("toPrimitive")),toStringTag:Y(Z("toStringTag")),unscopables:Y(Z("unscopables"))});mh(rh,{constructor:Y(Z),toString:Y(function(){return this.Ka}),valueOf:Y(function(){return"Symbol("+this.ua+")"})});oh&&nh(rh,Z.toStringTag,Y("Symbol",{ya:!0}));var sh="function"===typeof Symbol?Symbol:Z;/*
|
||||
|
||||
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
window.Symbol||(window.Symbol=sh,Array.prototype[sh.iterator]=function(){function a(a,e,h){for(;;)switch(b){case 0:c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw h;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d=this,e={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();e[Symbol.iterator]=function(){return this};
|
||||
return e},Set.prototype[sh.iterator]=function(){function a(a,f,k){for(;;)switch(b){case 0:d=[],e.forEach(function(a){d.push(a)}),c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw k;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d,e=this,f={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();f[Symbol.iterator]=function(){return this};
|
||||
return f},Map.prototype[sh.iterator]=function(){function a(a,f,k){for(;;)switch(b){case 0:d=[],e.forEach(function(a,b){d.push([b,a])}),c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw k;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d,e=this,f={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();f[Symbol.iterator]=
|
||||
function(){return this};return f},String.prototype[sh.iterator]=function(){function a(a,e,h){for(;;)switch(b){case 0:c=0;case 1:if(!(c<d.length)){b=3;break}b=4;return{value:d[c],done:!1};case 4:if(1!=a){b=5;break}b=-1;throw h;case 5:case 2:c++;b=1;break;case 3:b=-1;default:return{value:void 0,done:!0}}}var b=0,c,d=this,e={next:function(b){return a(0,b,void 0)},throw:function(b){return a(1,void 0,b)},return:function(){throw Error("Not yet implemented");}};ea();e[Symbol.iterator]=function(){return this};
|
||||
return e});var th=document.createElement("style");th.textContent="body {transition: opacity ease-in 0.2s; } \nbody[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; } \n";var uh=document.querySelector("head");uh.insertBefore(th,uh.firstChild);var vh=window.customElements,wh=!1,xh=null;vh.polyfillWrapFlushCallback&&vh.polyfillWrapFlushCallback(function(a){xh=a;wh&&a()});function yh(){window.HTMLTemplateElement.bootstrap&&window.HTMLTemplateElement.bootstrap(window.document);xh&&xh();wh=!0;window.WebComponents.ready=!0;document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))}
|
||||
"complete"!==document.readyState?(window.addEventListener("load",yh),window.addEventListener("DOMContentLoaded",function(){window.removeEventListener("load",yh);yh()})):yh();}).call(this);
|
||||
|
||||
//# sourceMappingURL=webcomponents-bundle.js.map
|
||||
|
|
@ -0,0 +1,394 @@
|
|||
// CodeMirror, copyright (c) by Marijn Haverbeke and others
|
||||
// Distributed under an MIT license: http://codemirror.net/LICENSE
|
||||
|
||||
(function(mod) {
|
||||
if (typeof exports == "object" && typeof module == "object") // CommonJS
|
||||
mod(require("../../lib/codemirror"));
|
||||
else if (typeof define == "function" && define.amd) // AMD
|
||||
define(["../../lib/codemirror"], mod);
|
||||
else // Plain browser env
|
||||
mod(CodeMirror);
|
||||
})(function(CodeMirror) {
|
||||
"use strict";
|
||||
|
||||
var htmlConfig = {
|
||||
autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
|
||||
'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
|
||||
'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
|
||||
'track': true, 'wbr': true, 'menuitem': true},
|
||||
implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
|
||||
'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
|
||||
'th': true, 'tr': true},
|
||||
contextGrabbers: {
|
||||
'dd': {'dd': true, 'dt': true},
|
||||
'dt': {'dd': true, 'dt': true},
|
||||
'li': {'li': true},
|
||||
'option': {'option': true, 'optgroup': true},
|
||||
'optgroup': {'optgroup': true},
|
||||
'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
|
||||
'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
|
||||
'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
|
||||
'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
|
||||
'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
|
||||
'rp': {'rp': true, 'rt': true},
|
||||
'rt': {'rp': true, 'rt': true},
|
||||
'tbody': {'tbody': true, 'tfoot': true},
|
||||
'td': {'td': true, 'th': true},
|
||||
'tfoot': {'tbody': true},
|
||||
'th': {'td': true, 'th': true},
|
||||
'thead': {'tbody': true, 'tfoot': true},
|
||||
'tr': {'tr': true}
|
||||
},
|
||||
doNotIndent: {"pre": true},
|
||||
allowUnquoted: true,
|
||||
allowMissing: true,
|
||||
caseFold: true
|
||||
}
|
||||
|
||||
var xmlConfig = {
|
||||
autoSelfClosers: {},
|
||||
implicitlyClosed: {},
|
||||
contextGrabbers: {},
|
||||
doNotIndent: {},
|
||||
allowUnquoted: false,
|
||||
allowMissing: false,
|
||||
caseFold: false
|
||||
}
|
||||
|
||||
CodeMirror.defineMode("xml", function(editorConf, config_) {
|
||||
var indentUnit = editorConf.indentUnit
|
||||
var config = {}
|
||||
var defaults = config_.htmlMode ? htmlConfig : xmlConfig
|
||||
for (var prop in defaults) config[prop] = defaults[prop]
|
||||
for (var prop in config_) config[prop] = config_[prop]
|
||||
|
||||
// Return variables for tokenizers
|
||||
var type, setStyle;
|
||||
|
||||
function inText(stream, state) {
|
||||
function chain(parser) {
|
||||
state.tokenize = parser;
|
||||
return parser(stream, state);
|
||||
}
|
||||
|
||||
var ch = stream.next();
|
||||
if (ch == "<") {
|
||||
if (stream.eat("!")) {
|
||||
if (stream.eat("[")) {
|
||||
if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
|
||||
else return null;
|
||||
} else if (stream.match("--")) {
|
||||
return chain(inBlock("comment", "-->"));
|
||||
} else if (stream.match("DOCTYPE", true, true)) {
|
||||
stream.eatWhile(/[\w\._\-]/);
|
||||
return chain(doctype(1));
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else if (stream.eat("?")) {
|
||||
stream.eatWhile(/[\w\._\-]/);
|
||||
state.tokenize = inBlock("meta", "?>");
|
||||
return "meta";
|
||||
} else {
|
||||
type = stream.eat("/") ? "closeTag" : "openTag";
|
||||
state.tokenize = inTag;
|
||||
return "tag bracket";
|
||||
}
|
||||
} else if (ch == "&") {
|
||||
var ok;
|
||||
if (stream.eat("#")) {
|
||||
if (stream.eat("x")) {
|
||||
ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
|
||||
} else {
|
||||
ok = stream.eatWhile(/[\d]/) && stream.eat(";");
|
||||
}
|
||||
} else {
|
||||
ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
|
||||
}
|
||||
return ok ? "atom" : "error";
|
||||
} else {
|
||||
stream.eatWhile(/[^&<]/);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
inText.isInText = true;
|
||||
|
||||
function inTag(stream, state) {
|
||||
var ch = stream.next();
|
||||
if (ch == ">" || (ch == "/" && stream.eat(">"))) {
|
||||
state.tokenize = inText;
|
||||
type = ch == ">" ? "endTag" : "selfcloseTag";
|
||||
return "tag bracket";
|
||||
} else if (ch == "=") {
|
||||
type = "equals";
|
||||
return null;
|
||||
} else if (ch == "<") {
|
||||
state.tokenize = inText;
|
||||
state.state = baseState;
|
||||
state.tagName = state.tagStart = null;
|
||||
var next = state.tokenize(stream, state);
|
||||
return next ? next + " tag error" : "tag error";
|
||||
} else if (/[\'\"]/.test(ch)) {
|
||||
state.tokenize = inAttribute(ch);
|
||||
state.stringStartCol = stream.column();
|
||||
return state.tokenize(stream, state);
|
||||
} else {
|
||||
stream.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/);
|
||||
return "word";
|
||||
}
|
||||
}
|
||||
|
||||
function inAttribute(quote) {
|
||||
var closure = function(stream, state) {
|
||||
while (!stream.eol()) {
|
||||
if (stream.next() == quote) {
|
||||
state.tokenize = inTag;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return "string";
|
||||
};
|
||||
closure.isInAttribute = true;
|
||||
return closure;
|
||||
}
|
||||
|
||||
function inBlock(style, terminator) {
|
||||
return function(stream, state) {
|
||||
while (!stream.eol()) {
|
||||
if (stream.match(terminator)) {
|
||||
state.tokenize = inText;
|
||||
break;
|
||||
}
|
||||
stream.next();
|
||||
}
|
||||
return style;
|
||||
};
|
||||
}
|
||||
function doctype(depth) {
|
||||
return function(stream, state) {
|
||||
var ch;
|
||||
while ((ch = stream.next()) != null) {
|
||||
if (ch == "<") {
|
||||
state.tokenize = doctype(depth + 1);
|
||||
return state.tokenize(stream, state);
|
||||
} else if (ch == ">") {
|
||||
if (depth == 1) {
|
||||
state.tokenize = inText;
|
||||
break;
|
||||
} else {
|
||||
state.tokenize = doctype(depth - 1);
|
||||
return state.tokenize(stream, state);
|
||||
}
|
||||
}
|
||||
}
|
||||
return "meta";
|
||||
};
|
||||
}
|
||||
|
||||
function Context(state, tagName, startOfLine) {
|
||||
this.prev = state.context;
|
||||
this.tagName = tagName;
|
||||
this.indent = state.indented;
|
||||
this.startOfLine = startOfLine;
|
||||
if (config.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
|
||||
this.noIndent = true;
|
||||
}
|
||||
function popContext(state) {
|
||||
if (state.context) state.context = state.context.prev;
|
||||
}
|
||||
function maybePopContext(state, nextTagName) {
|
||||
var parentTagName;
|
||||
while (true) {
|
||||
if (!state.context) {
|
||||
return;
|
||||
}
|
||||
parentTagName = state.context.tagName;
|
||||
if (!config.contextGrabbers.hasOwnProperty(parentTagName) ||
|
||||
!config.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
|
||||
return;
|
||||
}
|
||||
popContext(state);
|
||||
}
|
||||
}
|
||||
|
||||
function baseState(type, stream, state) {
|
||||
if (type == "openTag") {
|
||||
state.tagStart = stream.column();
|
||||
return tagNameState;
|
||||
} else if (type == "closeTag") {
|
||||
return closeTagNameState;
|
||||
} else {
|
||||
return baseState;
|
||||
}
|
||||
}
|
||||
function tagNameState(type, stream, state) {
|
||||
if (type == "word") {
|
||||
state.tagName = stream.current();
|
||||
setStyle = "tag";
|
||||
return attrState;
|
||||
} else {
|
||||
setStyle = "error";
|
||||
return tagNameState;
|
||||
}
|
||||
}
|
||||
function closeTagNameState(type, stream, state) {
|
||||
if (type == "word") {
|
||||
var tagName = stream.current();
|
||||
if (state.context && state.context.tagName != tagName &&
|
||||
config.implicitlyClosed.hasOwnProperty(state.context.tagName))
|
||||
popContext(state);
|
||||
if ((state.context && state.context.tagName == tagName) || config.matchClosing === false) {
|
||||
setStyle = "tag";
|
||||
return closeState;
|
||||
} else {
|
||||
setStyle = "tag error";
|
||||
return closeStateErr;
|
||||
}
|
||||
} else {
|
||||
setStyle = "error";
|
||||
return closeStateErr;
|
||||
}
|
||||
}
|
||||
|
||||
function closeState(type, _stream, state) {
|
||||
if (type != "endTag") {
|
||||
setStyle = "error";
|
||||
return closeState;
|
||||
}
|
||||
popContext(state);
|
||||
return baseState;
|
||||
}
|
||||
function closeStateErr(type, stream, state) {
|
||||
setStyle = "error";
|
||||
return closeState(type, stream, state);
|
||||
}
|
||||
|
||||
function attrState(type, _stream, state) {
|
||||
if (type == "word") {
|
||||
setStyle = "attribute";
|
||||
return attrEqState;
|
||||
} else if (type == "endTag" || type == "selfcloseTag") {
|
||||
var tagName = state.tagName, tagStart = state.tagStart;
|
||||
state.tagName = state.tagStart = null;
|
||||
if (type == "selfcloseTag" ||
|
||||
config.autoSelfClosers.hasOwnProperty(tagName)) {
|
||||
maybePopContext(state, tagName);
|
||||
} else {
|
||||
maybePopContext(state, tagName);
|
||||
state.context = new Context(state, tagName, tagStart == state.indented);
|
||||
}
|
||||
return baseState;
|
||||
}
|
||||
setStyle = "error";
|
||||
return attrState;
|
||||
}
|
||||
function attrEqState(type, stream, state) {
|
||||
if (type == "equals") return attrValueState;
|
||||
if (!config.allowMissing) setStyle = "error";
|
||||
return attrState(type, stream, state);
|
||||
}
|
||||
function attrValueState(type, stream, state) {
|
||||
if (type == "string") return attrContinuedState;
|
||||
if (type == "word" && config.allowUnquoted) {setStyle = "string"; return attrState;}
|
||||
setStyle = "error";
|
||||
return attrState(type, stream, state);
|
||||
}
|
||||
function attrContinuedState(type, stream, state) {
|
||||
if (type == "string") return attrContinuedState;
|
||||
return attrState(type, stream, state);
|
||||
}
|
||||
|
||||
return {
|
||||
startState: function(baseIndent) {
|
||||
var state = {tokenize: inText,
|
||||
state: baseState,
|
||||
indented: baseIndent || 0,
|
||||
tagName: null, tagStart: null,
|
||||
context: null}
|
||||
if (baseIndent != null) state.baseIndent = baseIndent
|
||||
return state
|
||||
},
|
||||
|
||||
token: function(stream, state) {
|
||||
if (!state.tagName && stream.sol())
|
||||
state.indented = stream.indentation();
|
||||
|
||||
if (stream.eatSpace()) return null;
|
||||
type = null;
|
||||
var style = state.tokenize(stream, state);
|
||||
if ((style || type) && style != "comment") {
|
||||
setStyle = null;
|
||||
state.state = state.state(type || style, stream, state);
|
||||
if (setStyle)
|
||||
style = setStyle == "error" ? style + " error" : setStyle;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
indent: function(state, textAfter, fullLine) {
|
||||
var context = state.context;
|
||||
// Indent multi-line strings (e.g. css).
|
||||
if (state.tokenize.isInAttribute) {
|
||||
if (state.tagStart == state.indented)
|
||||
return state.stringStartCol + 1;
|
||||
else
|
||||
return state.indented + indentUnit;
|
||||
}
|
||||
if (context && context.noIndent) return CodeMirror.Pass;
|
||||
if (state.tokenize != inTag && state.tokenize != inText)
|
||||
return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
|
||||
// Indent the starts of attribute names.
|
||||
if (state.tagName) {
|
||||
if (config.multilineTagIndentPastTag !== false)
|
||||
return state.tagStart + state.tagName.length + 2;
|
||||
else
|
||||
return state.tagStart + indentUnit * (config.multilineTagIndentFactor || 1);
|
||||
}
|
||||
if (config.alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
|
||||
var tagAfter = textAfter && /^<(\/)?([\w_:\.-]*)/.exec(textAfter);
|
||||
if (tagAfter && tagAfter[1]) { // Closing tag spotted
|
||||
while (context) {
|
||||
if (context.tagName == tagAfter[2]) {
|
||||
context = context.prev;
|
||||
break;
|
||||
} else if (config.implicitlyClosed.hasOwnProperty(context.tagName)) {
|
||||
context = context.prev;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (tagAfter) { // Opening tag spotted
|
||||
while (context) {
|
||||
var grabbers = config.contextGrabbers[context.tagName];
|
||||
if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
|
||||
context = context.prev;
|
||||
else
|
||||
break;
|
||||
}
|
||||
}
|
||||
while (context && context.prev && !context.startOfLine)
|
||||
context = context.prev;
|
||||
if (context) return context.indent + indentUnit;
|
||||
else return state.baseIndent || 0;
|
||||
},
|
||||
|
||||
electricInput: /<\/[\s\w:]+>$/,
|
||||
blockCommentStart: "<!--",
|
||||
blockCommentEnd: "-->",
|
||||
|
||||
configuration: config.htmlMode ? "html" : "xml",
|
||||
helperType: config.htmlMode ? "html" : "xml",
|
||||
|
||||
skipAttribute: function(state) {
|
||||
if (state.state == attrValueState)
|
||||
state.state = attrState
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
CodeMirror.defineMIME("text/xml", "xml");
|
||||
CodeMirror.defineMIME("application/xml", "xml");
|
||||
if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
|
||||
CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
navIndex = 0
|
||||
|
||||
navChange = index => {
|
||||
this.navIndex = index
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-nav onChange={this.navChange}>
|
||||
<item active={this.navIndex === 0}>我的项目</item>
|
||||
<item active={this.navIndex === 1}>所有项目</item>
|
||||
</o-nav>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
page = 0
|
||||
|
||||
onChange = index => {
|
||||
this.page = index
|
||||
console.log('page' + index)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-pagination
|
||||
total={25}
|
||||
currentPage={this.page}
|
||||
pageSize={5}
|
||||
onChange={this.onChange}
|
||||
/>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">//https://progressbarjs.readthedocs.io/en/latest/api/shape/
|
||||
const options = {
|
||||
strokeWidth: 2,
|
||||
color: '#07C160',
|
||||
trailColor: '#ddd'
|
||||
};
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-path-progress
|
||||
type='Line'
|
||||
progress={0.5}
|
||||
text={'test'}
|
||||
options={options}
|
||||
initialAnimate={true}
|
||||
containerStyle={{
|
||||
width: '200px',
|
||||
height: '20px'
|
||||
}}
|
||||
containerClassName={'.progressbar'}
|
||||
></o-path-progress>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<o-path-progress
|
||||
type='Circle'
|
||||
progress={0.5}
|
||||
text={'test'}
|
||||
options={options}
|
||||
initialAnimate={true}
|
||||
containerStyle={{
|
||||
width: '200px',
|
||||
height: '200px'
|
||||
}}
|
||||
containerClassName={'.progressbar'}
|
||||
></o-path-progress>
|
||||
|
||||
<br /><br /><br />
|
||||
|
||||
<o-path-progress
|
||||
type='SemiCircle'
|
||||
progress={0.5}
|
||||
text={'test'}
|
||||
options={options}
|
||||
initialAnimate={true}
|
||||
containerStyle={{
|
||||
width: '200px',
|
||||
height: '100px'
|
||||
}}
|
||||
containerClassName={'.progressbar'}
|
||||
></o-path-progress>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
popoverIt = (evt) => {
|
||||
this.popoverShow = !this.popoverShow
|
||||
this.popoverTarget = evt.target
|
||||
this.direction = evt.target.innerText
|
||||
this.update()
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.popoverShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
css() {
|
||||
return `.btn{
|
||||
margin-right:5px !important;
|
||||
}`
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style='position:relative;left:120px;top:100px;'>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>top-left</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>top</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>top-right</o-button>
|
||||
<br />
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>left-top</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>left</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>left-bottom</o-button>
|
||||
<br />
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>bottom-left</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>bottom</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>bottom-right</o-button>
|
||||
<br />
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>right-top</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>right</o-button>
|
||||
<o-button size='small' class='btn' onClick={this.popoverIt}>right-bottom</o-button>
|
||||
</div>
|
||||
<o-popover show={this.popoverShow} target={this.popoverTarget} direction={this.direction} onClose={this.onClose}>
|
||||
<div>测试内容....</div>
|
||||
<div>测试内容</div>
|
||||
<div>测试内容测试内容</div>
|
||||
</o-popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
popupShow = false
|
||||
|
||||
onClose = (e) => {
|
||||
this.popupShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
onConfirm = (e) => {
|
||||
this.popupShow = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
showPopup = (e) => {
|
||||
this.popupShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
render(props, data) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<o-button onClick={this.showPopup}>Show popup</o-button>
|
||||
<o-popup
|
||||
onClose={this.onClose}
|
||||
onConfirm={this.onConfirm}
|
||||
show={this.popupShow}
|
||||
title='My Title'
|
||||
cancelText='cancel'
|
||||
confirmText='confirm'
|
||||
>
|
||||
<div>Content</div>
|
||||
<div>Content</div>
|
||||
<div>Content</div>
|
||||
<div>Content</div>
|
||||
</o-popup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://tencent.github.io/omi/packages/omio/dist/omi.min.js"></script>
|
||||
<script src="./libs/omiu.js"></script>
|
||||
|
||||
<script>
|
||||
var createElement = Omi.createElement
|
||||
var define = Omi.define
|
||||
var WeElement = Omi.WeElement
|
||||
var render = Omi.render
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body style="background-color:#eee;">
|
||||
|
||||
<script>
|
||||
var script = document.createElement("script");
|
||||
script.innerHTML = parent._sourceCode;
|
||||
document.body.appendChild(script)
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-progress bgColor="#ccc" innerColor="#07C160" value={50} />
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-radio checked name='group' label='groupA'></o-radio>
|
||||
<o-radio name='group' label='groupB'></o-radio>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
valueA = 0
|
||||
valueB = 2
|
||||
valueC = 3.5
|
||||
|
||||
onSelect = (value) => {
|
||||
this.valueA = value
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-rate total={5} value={this.valueA} color='#07C160' onSelect={this.onSelect} />
|
||||
<br />
|
||||
<o-rate total={5} value={this.valueB} color='#07C160' />
|
||||
<br />
|
||||
<o-rate total={5} value={this.valueC} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
css() {
|
||||
return `
|
||||
.row{
|
||||
margin:6px;
|
||||
}
|
||||
|
||||
.col {
|
||||
color: white;
|
||||
text-align:center;
|
||||
height:60px;
|
||||
line-height:60px;
|
||||
|
||||
}
|
||||
.col:nth-child(odd) {
|
||||
background:#07C160;
|
||||
}
|
||||
.col:nth-child(even) {
|
||||
background:#F95050;
|
||||
}`
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-row class='row'>
|
||||
<col class='col' span={12}>col span 12</col>
|
||||
<col class='col' span={12}>col span 12</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={18}>col span 18</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={18}>col span 18</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
</o-row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
list = [{
|
||||
text: 'Item 1'
|
||||
}, {
|
||||
text: 'Item 2'
|
||||
}, {
|
||||
text: 'Item 3'
|
||||
}, {
|
||||
text: 'Item 4'
|
||||
}, {
|
||||
text: 'Item 5'
|
||||
}, {
|
||||
text: 'Item 6'
|
||||
}, {
|
||||
text: 'Item 7'
|
||||
}]
|
||||
|
||||
selectedIndex = 1
|
||||
|
||||
onSelect = (item, index) => {
|
||||
this.selectedIndex = index
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-select-list
|
||||
onSelect={this.onSelect}
|
||||
list={this.list}
|
||||
selectedIndex={this.selectedIndex}
|
||||
/>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">const state = {
|
||||
DONE: 0,
|
||||
ERROR: 1,
|
||||
DOING: 2,
|
||||
TODO: 3
|
||||
}
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
itemsA = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'In Progress', description: 'This is a description.', state: state.DOING },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: state.TODO }
|
||||
]
|
||||
|
||||
itemsB = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Error', description: 'This is a description.', state: state.ERROR },
|
||||
{ name: 'Waiting', description: 'This is a description.', state: state.TODO }
|
||||
]
|
||||
|
||||
itemsC = [
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE },
|
||||
{ name: 'Finished', description: 'This is a description.', state: state.DONE }
|
||||
]
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-step items={this.itemsA} />
|
||||
<o-step items={this.itemsB} />
|
||||
<o-step items={this.itemsC} />
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
render(props, data) {
|
||||
return (
|
||||
<o-equal-space>
|
||||
<o-switch onChange={this.onChangeB} checked={false}>
|
||||
</o-switch>
|
||||
|
||||
<o-switch onChange={this.onChangeA} checked={true}>
|
||||
</o-switch>
|
||||
</o-equal-space>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
tabIndex = 0
|
||||
|
||||
tabChange = (index) => {
|
||||
this.tabIndex = index
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-tab onChange={this.tabChange}>
|
||||
<item active={this.tabIndex === 0}>朋友相册</item>
|
||||
<item active={this.tabIndex === 1}>时刻视频</item>
|
||||
</o-tab>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
dataSource = [{
|
||||
id: 1,
|
||||
name: 'xwang',
|
||||
age: 18,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'dntzhang',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 3,
|
||||
name: 'lucy',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 4,
|
||||
name: 'john',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}, {
|
||||
id: 5,
|
||||
name: 'tim',
|
||||
age: 12,
|
||||
address: 'Tencent'
|
||||
}];
|
||||
|
||||
columns = [{
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
}, {
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
}, {
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
}, {
|
||||
title: '操作',
|
||||
render: (item) => (
|
||||
<span>
|
||||
<a href="javascript:;" onClick={e => { this.removeItem(item) }}>Delete</a>
|
||||
</span>
|
||||
)
|
||||
}]
|
||||
|
||||
removeItem = (item) => {
|
||||
this.table.removeItem(item)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-table
|
||||
ref={e => { this.table = e }}
|
||||
dataSource={this.dataSource}
|
||||
columns={this.columns}>
|
||||
</o-table>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
render() {
|
||||
return (
|
||||
<o-timeline data={[
|
||||
{ msgA: '2018.11.11', msgB: 'create project', msgC: '15:22:09', msgD: '[sub msg]' },
|
||||
{ msgA: '2018.11.11', msgB: 'delete readme', msgC: '15:22:09', msgD: '[sub msg]' },
|
||||
{ msgA: '2018.11.11', msgB: 'update readme', msgC: '15:22:09', msgD: '[sub msg]' },
|
||||
{ msgA: '2018.11.11', msgB: 'others', msgC: '15:22:09', msgD: '[others]' }
|
||||
]} />
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Omiu REPL</title>
|
||||
<link rel="shortcut icon" href="https://tencent.github.io/omi/assets/md2site/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="./libs/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="./libs/codemirror.css" />
|
||||
<style>
|
||||
.cm-s-default{background-color:#f9f9f9}.cm-s-dark{background-color:#1e1d23;color:#e9eded}.cm-s-dark .CodeMirror-gutters{background-color:#1e1d23;color:#537f7e;border:none}.cm-s-dark .CodeMirror-guttermarker,.cm-s-dark .CodeMirror-guttermarker-subtle,.cm-s-dark .CodeMirror-linenumber{color:#999}.cm-s-dark .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-dark div.CodeMirror-selected{background:hsla(0,0%,100%,.15)}.cm-s-dark .CodeMirror-line::selection,.cm-s-dark .CodeMirror-line>span::selection,.cm-s-dark .CodeMirror-line>span>span::selection,.cm-s-dark.CodeMirror-focused div.CodeMirror-selected{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-line::-moz-selection,.cm-s-dark .CodeMirror-line>span::-moz-selection,.cm-s-dark .CodeMirror-line>span>span::-moz-selection{background:hsla(0,0%,100%,.1)}.cm-s-dark .CodeMirror-activeline-background{background:transparent}.cm-s-dark .cm-keyword{color:#c792ea}.cm-s-dark .cm-operator{color:#e9eded}.cm-s-dark .cm-variable-2{color:#80cbc4}.cm-s-dark .cm-variable-3{color:#82b1ff}.cm-s-dark .cm-builtin{color:#decb6b}.cm-s-dark .cm-atom,.cm-s-dark .cm-number{color:#f77669}.cm-s-dark .cm-def{color:#e9eded}.cm-s-dark .cm-string{color:#c3e88d}.cm-s-dark .cm-string-2{color:#80cbc4}.cm-s-dark .cm-comment{color:#546e7a}.cm-s-dark .cm-variable{color:#82b1ff}.cm-s-dark .cm-meta,.cm-s-dark .cm-tag{color:#80cbc4}.cm-s-dark .cm-attribute{color:#ffcb6b}.cm-s-dark .cm-property{color:#80cbae}.cm-s-dark .cm-qualifier,.cm-s-dark .cm-variable-3{color:#decb6b}.cm-s-dark .cm-tag{color:#ff5370}.cm-s-dark .cm-error{color:#fff;background-color:#ec5f67}.cm-s-dark .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}body{margin:0}#editor{display:none}.container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column}.action-bar{background-color:#3d3d3e;height:40px;display:flex}.playground{display:flex;flex-direction:row;flex:1}.editor{overflow:scroll;flex:1}.CodeMirror{height:100%}.preview{position:relative;width:50%;overflow:hidden;background-color:#eee}.frame{position:absolute;width:100%;height:100%;border:0;background-color:#fff}.notification{position:absolute;z-index:1000;bottom:10px;right:40px;background:#1e1d23;min-width:280px;max-width:700px;border-radius:5px}.notification.hide{display:none}.notification-content{margin:9pt;font-size:10px;line-height:1.4;color:rgb(233, 64, 55)}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.editor{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tool-bar{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.playground {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.playground .editor{
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
}
|
||||
|
||||
.playground .preview{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <a href="https://github.com/Tencent/omi/tree/master/packages/omiu" target="_blank" style="position: absolute;z-index: 1000; right: 0; top: 0;">
|
||||
<img src="https://alloyteam.github.io/github.png" alt="" />
|
||||
</a> -->
|
||||
<div class="container">
|
||||
<div class="tool-bar" style="display:none;">
|
||||
<button style="margin-left:20px;" onclick="run()">Run</button>
|
||||
<div style="margin-left: 10px;display: inline-block;"><input id="autoCheckbox" type="checkbox" checked id="autoRun"><label
|
||||
for="autoRun" style="cursor: pointer;color: white;">Auto Run</label></div>
|
||||
</div>
|
||||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">define('my-app', class extends WeElement {
|
||||
|
||||
successShow = false
|
||||
loadingShow = false
|
||||
|
||||
showSuccess =() => {
|
||||
this.loadingShow = false
|
||||
this.successShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
showLoading =() => {
|
||||
this.successShow = false
|
||||
this.loadingShow = true
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-button onClick={this.showSuccess}>Show Success Toast</o-button>
|
||||
<o-button onClick={this.showLoading}>Show Loading Toast</o-button>
|
||||
<o-toast show={this.successShow}>支付成功</o-toast>
|
||||
<o-toast type='loading' show={this.loadingShow}>加载中</o-toast>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')</textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="notification hide" id="notification">
|
||||
<pre class="notification-content" id="notification-content"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/babel.min.js"></script>
|
||||
<script src="./libs/codemirror.js"></script>
|
||||
<script src="./libs/xml.js"></script>
|
||||
<script src="./libs/javascript.js"></script>
|
||||
|
||||
<script>
|
||||
var style, lastTimer, lastCode, lastScript, queryString = getQueryString(),
|
||||
sourceFromQueryString = queryString.code, backgroundColor = queryString.bgColor, editorTheme = queryString.theme || "dark", notification = document.getElementById("notification"), notificationContent = document.getElementById("notification-content"), frame = document.getElementById("frame"),
|
||||
storageKey = "alloyrender_playground_source",
|
||||
myTextarea = document.getElementById("editor"),
|
||||
editor = CodeMirror.fromTextArea(myTextarea, { lineNumbers: !0, theme: editorTheme, tabSize: 2, mode: "javascript" }), lastStorageSource = localStorage.getItem(storageKey),
|
||||
source = sourceFromQueryString || lastStorageSource || editor.getValue();
|
||||
"dark" === editorTheme && (style = document.createElement("style"), style.innerHTML = ".container {background-color: #1e1d23}", document.body.appendChild(style)), source && (editor.setValue(source), compile(source, !0)), frame.src = "./preview.html";
|
||||
|
||||
function getQueryString() { for (var d, a = {}, b = location.search.slice(1), c = /([^&=]+)=([^&]*)/g; d = c.exec(b);)a[decodeURIComponent(d[1])] = decodeURIComponent(d[2]); return a }
|
||||
function hideNotify() { notification.classList.add("hide") }
|
||||
function showNotify(a, b) { notificationContent.innerHTML = a, notification.classList.remove("hide"), lastTimer && clearTimeout(lastTimer), b && (lastTimer = setTimeout(hideNotify, b)) };
|
||||
function runCompiled(a) {
|
||||
var c, b = frame.contentDocument.body;
|
||||
lastScript && b.removeChild(lastScript);
|
||||
c = document.createElement("script");
|
||||
c.innerHTML = a;
|
||||
window._sourceCode = a
|
||||
lastScript = c;
|
||||
b.appendChild(c)
|
||||
}
|
||||
|
||||
function compile(a, b) {
|
||||
var c, d; a = a || "", lastCode = a, hideNotify(), c = "/* @jsx createElement */\n"; try { d = Babel.transform(c + a, { presets: ["react", "es2015", "stage-1"] }).code } catch (e) { return console.error(e), showNotify(e), void 0 }
|
||||
window._sourceCode = d
|
||||
return d;
|
||||
//return isReady?(runCompiled(d),void 0):(!b&&showNotify("Preview.html is not ready!",3e3),void 0)
|
||||
}
|
||||
|
||||
function run() {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
editor.on("changes", function (a) {
|
||||
var b = a.getValue();
|
||||
compile(b);
|
||||
//localStorage.setItem(storageKey,b);
|
||||
if (document.querySelector('#autoCheckbox').checked) {
|
||||
frame.contentWindow.location.reload(true);
|
||||
}
|
||||
// window.history.pushState({a:1}, "My Profile",window.location.protocol + "//alloyteam.github.io/AlloyRender/repl/index.html?code="+encodeURIComponent(b));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
"use strict";var precacheConfig=[["./index.html","6be9fb6943223ea5d110ac689a7844ff"],["./static/css/index.fb9dfd08.css","414d16d757eb45e170251798229d649f"],["./static/css/zh-cn.fb9dfd08.css","883ead47d8089ccadb7dbbac075871ff"],["./static/js/0.71055f5f.chunk.js","b70268dceb695407c31fdd8f2a041a65"],["./static/js/1.edfde54e.chunk.js","b4ea7a30d922871dd55670f8170bd7d9"],["./static/js/2.ee3da00b.chunk.js","3b3a28b137466d3210daf05f90acd9a8"],["./static/js/3.bc63ff79.chunk.js","41ec4f11c9ed226e95c3deff11c61a6c"],["./static/js/4.635588a3.chunk.js","1adef8224b4c9da2e97b1897469300f0"],["./static/js/5.3b2fb232.chunk.js","c2238b4a1e5209df61a285bce8c3544b"],["./static/js/index.8e0fb980.js","767950cc073bb3554a8e2e84a5ecd15b"],["./static/js/zh-cn.095aedf9.js","b47029212f6b84fb2711844d7ff21839"],["./static/media/omi-logo2019.923166c3.svg","923166c362dce831a15c447b19a622f9"],["./zh-cn.html","ebecd7be196b5588c2fb590a6e37df09"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="./index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
body,html{background-color:#eee;font-family:proxima-nova,Helvetica Neue,Helvetica,Roboto,PT Sans,DejaVu Sans,Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,"sans-serif"}body,html,img,li,ul{margin:0;padding:0;border:0}li,ul{list-style:disc inside}a{text-decoration:none;color:#0366d6}table{border-collapse:collapse}table,td,th{border:1px solid #ccc}td,th{padding:4px 8px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}::-webkit-scrollbar{width:12px;height:12px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}@media only screen and (max-width:768px){body,html{overflow-x:hidden}.content img{width:100%}.content code[class*=language-],.content pre[class*=language-]{font-family:Consolas,Liberation Mono,Courier,monospace;line-height:18px;font-size:13px;margin:0;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.content pre[class*=language-]{padding-left:10px}.content p{font-size:14px}.content h1,.content h2,.content h3,.content h4,.content h5,.content p{padding-left:10px;padding-right:10px}.line-highlight:before,.line-highlight[data-end]:after{top:0}}*{-webkit-box-sizing:border-box;box-sizing:border-box}blockquote:before{content:"";position:absolute;left:0;top:0;background-color:#dfe2e5;height:24px;width:4px}blockquote{position:relative;margin:0;padding-left:20px}pre[data-line]{position:relative;padding:1em 0 1em 1em!important}.line-highlight:before,.line-highlight[data-end]:after{display:none}:not(pre)>code[class*=language-],pre[class*=language-]{font-size:.8em}.content img{max-width:700px;border-radius:5px}
|
||||
/*# sourceMappingURL=index.fb9dfd08.css.map*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["assets/index.css"],"names":[],"mappings":"AACA,UAIE,sBACA,sJAA4J,CAG9J,oBAPE,SACA,UACA,QAAU,CAWZ,MACE,sBAAwB,CAG1B,EACE,qBACA,aAAe,CAGjB,MACE,wBAA0B,CAE5B,YACE,qBAAuB,CAGzB,MACE,eAAiB,CAGnB,0BAEC,gDACA,wBAA0B,CAG3B,oBAEE,WACA,YACD,wBAA0B,CAG3B,0BAEC,gDACA,qBAAuB,CAGxB,yCACE,UAEE,iBAAmB,CAGrB,aACI,UAAY,CAIhB,+DAEI,uDACA,iBACA,eACA,SACA,WACA,8BACQ,qBAAuB,CAGnC,+BACI,iBAAmB,CAEvB,WACI,cAAgB,CAEpB,uEACI,kBACA,kBAAmB,CAGvB,uDACI,KAAS,CACZ,CAGH,EACE,8BACQ,qBAAuB,CAIjC,kBACE,WACA,kBACA,OACA,MACA,yBACA,YACA,SAAW,CAGb,WACE,kBACA,SACA,iBAAmB,CAGrB,eACE,kBACA,+BAAkC,CAGpC,uDACE,YAAc,CAGhB,uDACE,cAAiB,CAGnB,aACE,gBACA,iBAAmB","file":"static/css/index.fb9dfd08.css","sourcesContent":["\nhtml,body{\n margin: 0;\n padding: 0;\n border: 0;\n background-color: #eee;\n font-family:proxima-nova,\"Helvetica Neue\",Helvetica,Roboto, PT Sans, DejaVu Sans, Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';\n}\n\nimg,ul,li{\n margin: 0;\n padding: 0;\n border: 0;\n}\n\nul,li{\n list-style:disc inside ;\n}\n\na{\n text-decoration: none;\n color: #0366d6;\n}\n\ntable{\n border-collapse: collapse;\n}\ntable,td,th{\n border: 1px solid #ccc;\n}\n\ntd,th{\n padding: 4px 8px;\n}\n\n::-webkit-scrollbar-track\n{\n\t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n\tbackground-color: #F5F5F5;\n}\n\n::-webkit-scrollbar\n{\n width: 12px;\n height: 12px;\n\tbackground-color: #F5F5F5;\n}\n\n::-webkit-scrollbar-thumb\n{\n\t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);\n\tbackground-color: #555;\n}\n\n@media only screen and (max-width: 768px) {\n html,body{\n\n overflow-x: hidden;\n }\n\n .content img{\n width: 100%;\n }\n\n\n .content code[class*=\"language-\"],\n .content pre[class*=\"language-\"] {\n font-family: Consolas, \"Liberation Mono\", Courier, monospace;\n line-height: 18px;\n font-size: 13px;\n margin: 0;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n .content pre[class*=\"language-\"] {\n padding-left: 10px;\n }\n .content p{\n font-size: 14px;\n }\n .content p,.content h1,.content h2,.content h3,.content h4,.content h5{\n padding-left:10px;\n padding-right:10px;\n }\n\n .line-highlight:before, .line-highlight[data-end]:after{\n top: 0em;\n }\n}\n\n*{\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n\nblockquote::before{\n content: '';\n position: absolute;\n left: 0;\n top: 0px;\n background-color: #dfe2e5;\n height: 24px;\n width: 4px;\n}\n\nblockquote {\n position: relative;\n margin: 0;\n padding-left: 20px; \n}\n\npre[data-line] {\n position: relative;\n padding: 1em 0 1em 1em !important;\n}\n\n.line-highlight:before, .line-highlight[data-end]:after{\n display: none;\n}\n\n:not(pre) > code[class*=\"language-\"], pre[class*=\"language-\"] {\n font-size: 0.8em;\n}\n\n.content img{\n max-width: 700px;\n border-radius: 5px;\n}\n\n\n// WEBPACK FOOTER //\n// ./src/assets/index.css"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
body,html{background-color:#eee;font-family:proxima-nova,Helvetica Neue,Helvetica,Roboto,PT Sans,DejaVu Sans,Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,"sans-serif"}body,html,img,li,ul{margin:0;padding:0;border:0}li,ul{list-style:disc inside}a{text-decoration:none;color:#0366d6}table{border-collapse:collapse}table,td,th{border:1px solid #ccc}td,th{padding:4px 8px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}::-webkit-scrollbar{width:12px;height:12px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}@media only screen and (max-width:768px){body,html{overflow-x:hidden}.content img{width:100%}.content code[class*=language-],.content pre[class*=language-]{font-family:Consolas,Liberation Mono,Courier,monospace;line-height:18px;font-size:13px;margin:0;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.content pre[class*=language-]{padding-left:10px}.content p{font-size:14px}.content h1,.content h2,.content h3,.content h4,.content h5,.content p{padding-left:10px;padding-right:10px}.line-highlight:before,.line-highlight[data-end]:after{top:0}}*{-webkit-box-sizing:border-box;box-sizing:border-box}blockquote:before{content:"";position:absolute;left:0;top:0;background-color:#dfe2e5;height:24px;width:4px}blockquote{position:relative;margin:0;padding-left:20px}pre[data-line]{position:relative;padding:1em 0 1em 1em!important}.line-highlight:before,.line-highlight[data-end]:after{display:none}:not(pre)>code[class*=language-],pre[class*=language-]{font-size:.8em}.content img{max-width:700px;border-radius:5px}
|
||||
/*# sourceMappingURL=zh-cn.fb9dfd08.css.map*/
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["assets/index.css"],"names":[],"mappings":"AACA,UAIE,sBACA,sJAA4J,CAG9J,oBAPE,SACA,UACA,QAAU,CAWZ,MACE,sBAAwB,CAG1B,EACE,qBACA,aAAe,CAGjB,MACE,wBAA0B,CAE5B,YACE,qBAAuB,CAGzB,MACE,eAAiB,CAGnB,0BAEC,gDACA,wBAA0B,CAG3B,oBAEE,WACA,YACD,wBAA0B,CAG3B,0BAEC,gDACA,qBAAuB,CAGxB,yCACE,UAEE,iBAAmB,CAGrB,aACI,UAAY,CAIhB,+DAEI,uDACA,iBACA,eACA,SACA,WACA,8BACQ,qBAAuB,CAGnC,+BACI,iBAAmB,CAEvB,WACI,cAAgB,CAEpB,uEACI,kBACA,kBAAmB,CAGvB,uDACI,KAAS,CACZ,CAGH,EACE,8BACQ,qBAAuB,CAIjC,kBACE,WACA,kBACA,OACA,MACA,yBACA,YACA,SAAW,CAGb,WACE,kBACA,SACA,iBAAmB,CAGrB,eACE,kBACA,+BAAkC,CAGpC,uDACE,YAAc,CAGhB,uDACE,cAAiB,CAGnB,aACE,gBACA,iBAAmB","file":"static/css/zh-cn.fb9dfd08.css","sourcesContent":["\nhtml,body{\n margin: 0;\n padding: 0;\n border: 0;\n background-color: #eee;\n font-family:proxima-nova,\"Helvetica Neue\",Helvetica,Roboto, PT Sans, DejaVu Sans, Arial,Segoe UI Light,Segoe UI,Microsoft Jhenghei,Mirco Yahei,'sans-serif';\n}\n\nimg,ul,li{\n margin: 0;\n padding: 0;\n border: 0;\n}\n\nul,li{\n list-style:disc inside ;\n}\n\na{\n text-decoration: none;\n color: #0366d6;\n}\n\ntable{\n border-collapse: collapse;\n}\ntable,td,th{\n border: 1px solid #ccc;\n}\n\ntd,th{\n padding: 4px 8px;\n}\n\n::-webkit-scrollbar-track\n{\n\t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n\tbackground-color: #F5F5F5;\n}\n\n::-webkit-scrollbar\n{\n width: 12px;\n height: 12px;\n\tbackground-color: #F5F5F5;\n}\n\n::-webkit-scrollbar-thumb\n{\n\t-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);\n\tbackground-color: #555;\n}\n\n@media only screen and (max-width: 768px) {\n html,body{\n\n overflow-x: hidden;\n }\n\n .content img{\n width: 100%;\n }\n\n\n .content code[class*=\"language-\"],\n .content pre[class*=\"language-\"] {\n font-family: Consolas, \"Liberation Mono\", Courier, monospace;\n line-height: 18px;\n font-size: 13px;\n margin: 0;\n width: 100%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n .content pre[class*=\"language-\"] {\n padding-left: 10px;\n }\n .content p{\n font-size: 14px;\n }\n .content p,.content h1,.content h2,.content h3,.content h4,.content h5{\n padding-left:10px;\n padding-right:10px;\n }\n\n .line-highlight:before, .line-highlight[data-end]:after{\n top: 0em;\n }\n}\n\n*{\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n\nblockquote::before{\n content: '';\n position: absolute;\n left: 0;\n top: 0px;\n background-color: #dfe2e5;\n height: 24px;\n width: 4px;\n}\n\nblockquote {\n position: relative;\n margin: 0;\n padding-left: 20px; \n}\n\npre[data-line] {\n position: relative;\n padding: 1em 0 1em 1em !important;\n}\n\n.line-highlight:before, .line-highlight[data-end]:after{\n display: none;\n}\n\n:not(pre) > code[class*=\"language-\"], pre[class*=\"language-\"] {\n font-size: 0.8em;\n}\n\n.content img{\n max-width: 700px;\n border-radius: 5px;\n}\n\n\n// WEBPACK FOOTER //\n// ./src/assets/index.css"],"sourceRoot":""}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([0],{41:function(n,t){n.exports="## Store \u662f\u4ec0\u4e48\uff1f\n\nStore \u662f Omi \u5185\u7f6e\u7684\u4e2d\u5fc3\u5316\u6570\u636e\u4ed3\u5e93\uff0c\u4ed6\u89e3\u51b3\u548c\u63d0\u4f9b\u4e86\u4e0b\u9762\u95ee\u9898\u548c\u80fd\u529b\uff1a\n\n* \u7ec4\u4ef6\u6811\u6570\u636e\u5171\u4eab\n* \u6570\u636e\u53d8\u66f4\u6309\u9700\u66f4\u65b0\u4f9d\u8d56\u7684\u7ec4\u4ef6\n\n\n\n## \u4e00\u6bb5\u4ee3\u7801\u5b8c\u5168\u4e0a\u624b Store\n\n```js\nimport { render, WeElement, define } from '../../src/omi'\n\ndefine('my-counter', class extends WeElement {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n\n render() {\n return (\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n )\n }\n})\n\nrender(<my-counter />, 'body', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n* \u901a\u8fc7 `static use` \u58f0\u660e\u4f9d\u8d56\u7684 path\n* `store` \u901a\u8fc7 render \u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u4ece\u6839\u8282\u70b9\u6ce8\u5165\u5230\u6240\u6709\u7ec4\u4ef6\u3002\n\n\u4e0b\u9762\u4e3e\u4e00\u4e2a\u590d\u6742\u7684 `use` \u4f8b\u5b50\uff1a\n\n```js\nstatic use = [\n 'count', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.reverseMotto \u8bbf\u95ee\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.fullName \u8bbf\u95ee\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n\u4e0b\u9762\u770b\u770b JSX \u4e2d\u4f7f\u7528:\n\n```jsx\n...\n...\nrender() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n )\n}\n...\n...\n```\n\n\u5982\u679c\u4e0d\u5e26\u6709 alias \uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 `this.store.data.xxx` \u8bbf\u95ee\u3002"}});
|
||||
//# sourceMappingURL=0.71055f5f.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([1],{40:function(n,t){n.exports="<p align=\"center\"><img src=\"https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true\" alt=\"omi\" width=\"300\"/></p>\n<h2 align=\"center\">Omi - \u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u53bb\u4e07\u7269\u7cdf\u7c95\uff0c\u5408\u7cbe\u534e\u4e3a\u4e00\u70b9\u70b9 JS</h2>\n<p align=\"center\"><b>\u57fa\u4e8e Web Components \u5e76\u652f\u6301 IE8+(omio) \u548c \u5c0f\u7a0b\u5e8f(omip)</b></p>\n\n\n## Omi \u662f\u4ec0\u4e48\uff1f\n\nOmi (\u8bfb\u97f3 /\u02c8om\u026a/\uff0c\u7c7b\u4f3c\u4e8e \u6b27\u7c73) \u662f\u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\u652f\u6301 PC Web\u3001\u79fb\u52a8 H5 \u548c\u5c0f\u7a0b\u5e8f\u5f00\u53d1(One framework. Mobile & desktop & mini program)\u3002\n\n## \u4e00\u4e2a HTML \u5b8c\u5168\u4e0a\u624b\n\n\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e0d\u9700\u8981\u4efb\u4f55\u6784\u5efa\u5de5\u5177\u5c31\u53ef\u4ee5\u6267\u884c:\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script>\n const { define, WeElement, h, render } = Omi\n\n define('my-counter', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\n }\n\n sub() {\n this.data.count--\n this.update()\n }\n\n add() {\n this.data.count++\n this.update()\n }\n\n render() {\n return h(\n 'div',\n null,\n h(\n 'button',\n { onClick: this.sub },\n '-'\n ),\n h(\n 'span',\n null,\n this.data.count\n ),\n h(\n 'button',\n { onClick: this.add },\n '+'\n )\n )\n }\n })\n\n render(h('my-counter'), 'body')\n<\/script>\n```\n\n\u901a\u8fc7\u4e0a\u9762\u811a\u672c\u7684\u6267\u884c\uff0c\u4f60\u5df2\u7ecf\u5b9a\u4e49\u597d\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528 render \u65b9\u6cd5\uff0c\u76f4\u63a5\u4f7f\u7528 `my-counter` \u6807\u7b7e\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n* [\u70b9\u51fb\u8fd9\u91cc\u770b\u6267\u884c\u7ed3\u679c](https://tencent.github.io/omi/assets/omi.html)\n* [Omi.js CDN](https://unpkg.com/omi)\n\n\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u6765\u66ff\u4ee3\u5b83\u3002\n\n\n```js {9-12}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\n\u770b\u4e0a\u9762\u9ad8\u4eae\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u52a0\u6837\u5f0f\uff0c\u6bd4\u5982\u4e0a\u9762\u7684 span \u7684\u4f5c\u7528\u57df\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5185\u90e8\uff0c\u4e0d\u4f1a\u6c61\u67d3\u522b\u7684\u7ec4\u4ef6\u3002\u5230\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u5165\u95e8 Omi \u4e86\uff01\u4f60\u5b66\u4f1a\u4e86:\n\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u7ed3\u6784**\uff0c\u5982\u4e0a\u9762\u4f7f\u7528 JSX \u4e66\u5199\u7ed3\u6784\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u884c\u4e3a**\uff0c\u5982\u4e0a\u9762\u7684 `onClick` \u7ed1\u5b9a\u4e8b\u4ef6\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u6837\u5f0f**\uff0c\u5982\u4e0a\u9762\u7684 `static css`\n* \u6e32\u67d3\u7ec4\u4ef6\u5230 body\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610f\u5176\u4ed6\u7ec4\u4ef6\n\n\u606d\u559c\u4f60\uff01"}});
|
||||
//# sourceMappingURL=1.edfde54e.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([2],{39:function(i,n){i.exports='## \u5b89\u88c5 \n\n\u76f4\u63a5\u4e0b\u8f7d\u5e76\u7528 `<script>` \u6807\u7b7e\u5f15\u5165\uff0cOmi \u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omi \u5f00\u53d1\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.js)\n* [Omi \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n* [Omio \u5f00\u53d1\u7248\u672c](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u4e5f\u53ef\u4ee5\u901a\u8fc7 npm \u5b89\u88c5\n\n```bash\nnpm i omi\n```\n\n\u5982\u679c\u9700\u8981\u517c\u5bb9 IE8+\uff0c\u53ef\u4ee5\u9009\u62e9 omio\uff0c\u5b83\u62e5\u6709\u548c omi \u51e0\u4e4e\u4e00\u6837\u7684 API\uff0c\u4e14 Omi \u4e5f\u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omio \u5f00\u53d1\u7248\u672c](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u6216\u8005\n\n```bash\nnpm i omio\n```\n\n## CLI\n\n## omi-cli\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\n\nDirectory description:\n\n```\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 elements //Store all custom elements\n\u2502 \u251c\u2500 store //Store all this store of pages\n\u2502 \u251c\u2500 admin.js //Entry js of compiler\uff0cwill build to admin.html\n\u2502 \u2514\u2500 index.js //Entry js of compiler\uff0cwill build to index.html\n```\n\n\nAbout compiled website URL\uff1a\n\n* [build env doc](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#referencing-environment-variables-in-the-html)\n* [build problem](https://stackoverflow.com/questions/42686149/create-react-app-build-with-public-url)\n\nSuch as in windows:\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "_build": "node scripts/build.js",\n "build":"set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& npm run _build"\n}\n```\n\nIn mac os:\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "_build": "node scripts/build.js",\n "build":"PUBLIC_URL=https://fe.wxpay.oa.com/dv npm run _build",\n "fix": "eslint src --fix"\n },\n```\n\n\n## Project Template\n\n| **Template Type**| **Command**| **Describe**|\n| ------------ | -----------| ----------------- |\n|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|\n|\u5c0f\u7a0b\u5e8f\u6a21\u677f(v3.3.5+)|`omi init-p my-app`| Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f |\n|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|\n|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|\n|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|\n|omi-mp Template(omi-cli v3.0.13+)|`omi init-mp my-app` |Developing web with mini program template.|\n|MVVM Template(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM template.|\n\x3c!-- |[SPA Template](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)(omi-cli v3.0.10+)|`omi init-spa my-app`|Single page application template with omi-router.| --\x3e\n\nCLI\'s auto-created project scaffolding is based on a single-page create-react-app to be converted into a multi-page one, with configuration issues to see [create-react-app user guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md)'}});
|
||||
//# sourceMappingURL=2.ee3da00b.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([3],{38:function(n,t){n.exports="## Store \u662f\u4ec0\u4e48\uff1f\n\nStore \u662f Omi \u5185\u7f6e\u7684\u4e2d\u5fc3\u5316\u6570\u636e\u4ed3\u5e93\uff0c\u4ed6\u89e3\u51b3\u548c\u63d0\u4f9b\u4e86\u4e0b\u9762\u95ee\u9898\u548c\u80fd\u529b\uff1a\n\n* \u7ec4\u4ef6\u6811\u6570\u636e\u5171\u4eab\n* \u6570\u636e\u53d8\u66f4\u6309\u9700\u66f4\u65b0\u4f9d\u8d56\u7684\u7ec4\u4ef6\n\n\n\n## \u4e00\u6bb5\u4ee3\u7801\u5b8c\u5168\u4e0a\u624b Store\n\n```js\nimport { render, WeElement, define } from '../../src/omi'\n\ndefine('my-counter', class extends WeElement {\n static use = [\n { count: 'count' }\n ]\n\n add = () => this.store.add()\n sub = () => this.store.sub()\n\n addIfOdd = () => {\n if (this.use.count % 2 !== 0) {\n this.store.add()\n }\n }\n\n addAsync = () => {\n setTimeout(() => this.store.add(), 1000)\n }\n\n render() {\n return (\n <p>\n Clicked: {this.use.count} times\n {' '}\n <button onClick={this.add}>+</button>\n {' '}\n <button onClick={this.sub}>-</button>\n {' '}\n <button onClick={this.addIfOdd}>\n Add if odd\n </button>\n {' '}\n <button onClick={this.addAsync}>\n Add async\n </button>\n </p>\n )\n }\n})\n\nrender(<my-counter />, 'body', {\n data: {\n count: 0\n },\n sub() {\n this.data.count--\n },\n add() {\n this.data.count++\n },\n})\n```\n\n* \u901a\u8fc7 `static use` \u58f0\u660e\u4f9d\u8d56\u7684 path\n* `store` \u901a\u8fc7 render \u7684\u7b2c\u4e09\u4e2a\u53c2\u6570\u4ece\u6839\u8282\u70b9\u6ce8\u5165\u5230\u6240\u6709\u7ec4\u4ef6\u3002\n\n\u4e0b\u9762\u4e3e\u4e00\u4e2a\u590d\u6742\u7684 `use` \u4f8b\u5b50\uff1a\n\n```js\nstatic use = [\n 'count', //\u76f4\u63a5\u5b57\u7b26\u4e32\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[0] \u8bbf\u95ee\n 'arr[0]', //\u4e5f\u652f\u6301 path\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use[1] \u8bbf\u95ee\n //\u652f\u6301 json\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.reverseMotto \u8bbf\u95ee\n reverseMotto: [\n 'motto', //path\n target => target.split('').reverse().join('') //computed\n ]\n },\n { name: 'arr[1]' }, //{ alias: path }\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.name \u8bbf\u95ee\n {\n //alias\uff0cJSX \u91cc\u53ef\u901a\u8fc7 this.use.fullName \u8bbf\u95ee\n fullName: [\n ['userInfo.firstName', 'userInfo.lastName'], //path array\n (firstName, lastName) => firstName + lastName //computed\n ]\n },\n]\n```\n\n\u4e0b\u9762\u770b\u770b JSX \u4e2d\u4f7f\u7528:\n\n```jsx\n...\n...\nrender() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.use[0]}</span>\n <button onClick={this.add}>+</button>\n <div>\n <span>{this.use[1]}</span>\n <button onClick={this.rename}>rename</button>\n </div>\n <div>{this.use.reverseMotto}</div><button onClick={this.changeMotto}>change motto</button>\n <div>{this.use.name}</div>\n <div>{this.use[3]}</div>\n <div>\n {this.use.fullName}\n <button onClick={this.changeFirstName}>change first name</button>\n </div>\n </div>\n )\n}\n...\n...\n```\n\n\u5982\u679c\u4e0d\u5e26\u6709 alias \uff0c\u4f60\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7 `this.store.data.xxx` \u8bbf\u95ee\u3002"}});
|
||||
//# sourceMappingURL=3.bc63ff79.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([4],{37:function(n,t){n.exports="<p align=\"center\"><img src=\"https://github.com/Tencent/omi/raw/master/assets/omi-logo2019.svg?sanitize=true\" alt=\"omi\" width=\"300\"/></p>\n<h2 align=\"center\">Omi - \u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u53bb\u4e07\u7269\u7cdf\u7c95\uff0c\u5408\u7cbe\u534e\u4e3a\u4e00\u70b9\u70b9 JS</h2>\n<p align=\"center\"><b>\u57fa\u4e8e Web Components \u5e76\u652f\u6301 IE8+(omio) \u548c \u5c0f\u7a0b\u5e8f(omip)</b></p>\n\n\n## Omi \u662f\u4ec0\u4e48\uff1f\n\nOmi (\u8bfb\u97f3 /\u02c8om\u026a/\uff0c\u7c7b\u4f3c\u4e8e \u6b27\u7c73) \u662f\u4e0b\u4e00\u4ee3\u524d\u7aef\u6846\u67b6\uff0c\u57fa\u4e8e Web Components \u8bbe\u8ba1\uff0c\u652f\u6301 PC Web\u3001\u79fb\u52a8 H5 \u548c\u5c0f\u7a0b\u5e8f\u5f00\u53d1(One framework. Mobile & desktop & mini program)\u3002\n\n## \u4e00\u4e2a HTML \u5b8c\u5168\u4e0a\u624b\n\n\u4e0b\u9762\u8fd9\u4e2a\u9875\u9762\u4e0d\u9700\u8981\u4efb\u4f55\u6784\u5efa\u5de5\u5177\u5c31\u53ef\u4ee5\u6267\u884c:\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script>\n const { define, WeElement, h, render } = Omi\n\n define('my-counter', class extends WeElement {\n install() {\n this.data.count = 1\n this.sub = this.sub.bind(this)\n this.add = this.add.bind(this)\n }\n\n sub() {\n this.data.count--\n this.update()\n }\n\n add() {\n this.data.count++\n this.update()\n }\n\n render() {\n return h(\n 'div',\n null,\n h(\n 'button',\n { onClick: this.sub },\n '-'\n ),\n h(\n 'span',\n null,\n this.data.count\n ),\n h(\n 'button',\n { onClick: this.add },\n '+'\n )\n )\n }\n })\n\n render(h('my-counter'), 'body')\n<\/script>\n```\n\n\u901a\u8fc7\u4e0a\u9762\u811a\u672c\u7684\u6267\u884c\uff0c\u4f60\u5df2\u7ecf\u5b9a\u4e49\u597d\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6807\u7b7e\uff0c\u53ef\u4ee5\u4e0d\u4f7f\u7528 render \u65b9\u6cd5\uff0c\u76f4\u63a5\u4f7f\u7528 `my-counter` \u6807\u7b7e\uff1a\n\n```jsx\n<body>\n <my-counter></my-counter>\n</body>\n```\n\n* [\u70b9\u51fb\u8fd9\u91cc\u770b\u6267\u884c\u7ed3\u679c](https://tencent.github.io/omi/assets/omi.html)\n* [Omi.js CDN](https://unpkg.com/omi)\n\n\u4e0a\u9762\u4f7f\u7528\u7684\u662f hyperscript \u7684\u65b9\u5f0f\u6765\u4e66\u5199 HTML \u7ed3\u6784\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JSX \u6765\u66ff\u4ee3\u5b83\u3002\n\n\n```js {9-12}\nimport { render, WeElement, define } from 'omi'\n\ndefine('my-counter', class extends WeElement {\n data = {\n count: 1\n }\n\n static css = `\n span{\n color: red;\n }`\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <div>\n <button onClick={this.sub}>-</button>\n <span>{this.data.count}</span>\n <button onClick={this.add}>+</button>\n </div>\n )\n }\n})\n\nrender(<my-counter />, 'body')\n```\n\n\u770b\u4e0a\u9762\u9ad8\u4eae\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u7ed9\u7ec4\u4ef6\u52a0\u6837\u5f0f\uff0c\u6bd4\u5982\u4e0a\u9762\u7684 span \u7684\u4f5c\u7528\u57df\u4ec5\u4ec5\u5728\u7ec4\u4ef6\u5185\u90e8\uff0c\u4e0d\u4f1a\u6c61\u67d3\u522b\u7684\u7ec4\u4ef6\u3002\u5230\u73b0\u5728\u4f60\u5df2\u7ecf\u6210\u529f\u5165\u95e8 Omi \u4e86\uff01\u4f60\u5b66\u4f1a\u4e86:\n\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u7ed3\u6784**\uff0c\u5982\u4e0a\u9762\u4f7f\u7528 JSX \u4e66\u5199\u7ed3\u6784\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u884c\u4e3a**\uff0c\u5982\u4e0a\u9762\u7684 `onClick` \u7ed1\u5b9a\u4e8b\u4ef6\n* \u4e3a\u7ec4\u4ef6\u6dfb\u52a0**\u6837\u5f0f**\uff0c\u5982\u4e0a\u9762\u7684 `static css`\n* \u6e32\u67d3\u7ec4\u4ef6\u5230 body\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u628a\u7ec4\u4ef6\u6e32\u67d3\u5230\u4efb\u610f\u5176\u4ed6\u7ec4\u4ef6\n\n\u606d\u559c\u4f60\uff01"}});
|
||||
//# sourceMappingURL=4.635588a3.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([5],{36:function(i,n){i.exports='## \u5b89\u88c5 \n\n\u76f4\u63a5\u4e0b\u8f7d\u5e76\u7528 <script> \u6807\u7b7e\u5f15\u5165\uff0cOmi \u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omi \u5f00\u53d1\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.js)\n* [Omi \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n* [Omio \u5f00\u53d1\u7248\u672c](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u4e5f\u53ef\u4ee5\u901a\u8fc7 npm \u5b89\u88c5\n\n```\nnpm i omi\n```\n\n\u5982\u679c\u9700\u8981\u517c\u5bb9 IE8+\uff0c\u53ef\u4ee5\u9009\u62e9 omio\uff0c\u5b83\u62e5\u6709\u548c omi \u51e0\u4e4e\u4e00\u6837\u7684 API\uff0c\u4e14 Omi \u4e5f\u4f1a\u88ab\u6ce8\u518c\u4e3a\u4e00\u4e2a\u5168\u5c40\u53d8\u91cf\u3002\n\n* [Omio \u5f00\u53d1\u7248\u672c](https://unpkg.com/omio@latest/dist/omi.js)\n* [Omio \u538b\u7f29\u7248\u672c](https://unpkg.com/omi@latest/dist/omi.min.js)\n\n\u6216\u8005\n\n```\nnpm i omio\n```\n\n## CLI\n\n## omi-cli\n\n```bash\n$ npm i omi-cli -g # install cli\n$ omi init my-app # init project\n$ cd my-app \n$ npm start # develop\n$ npm run build # release\n```\n\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\n\nDirectory description:\n\n```\n\u251c\u2500 config\n\u251c\u2500 public\n\u251c\u2500 scripts\n\u251c\u2500 src\n\u2502 \u251c\u2500 assets\n\u2502 \u251c\u2500 elements //Store all custom elements\n\u2502 \u251c\u2500 store //Store all this store of pages\n\u2502 \u251c\u2500 admin.js //Entry js of compiler\uff0cwill build to admin.html\n\u2502 \u2514\u2500 index.js //Entry js of compiler\uff0cwill build to index.html\n```\n\n\nAbout compiled website URL\uff1a\n\n* [build env doc](https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#referencing-environment-variables-in-the-html)\n* [build problem](https://stackoverflow.com/questions/42686149/create-react-app-build-with-public-url)\n\nSuch as in windows:\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "_build": "node scripts/build.js",\n "build":"set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& npm run _build"\n}\n```\n\nIn mac os:\n\n```json\n"scripts": {\n "start": "node scripts/start.js",\n "_build": "node scripts/build.js",\n "build":"PUBLIC_URL=https://fe.wxpay.oa.com/dv npm run _build",\n "fix": "eslint src --fix"\n },\n```\n\n\n## Project Template\n\n| **Template Type**| **Command**| **Describe**|\n| ------------ | -----------| ----------------- |\n|Base Template(v3.3.0+)|`omi init my-app`| Basic omi or omio(IE8+) project template.|\n|\u5c0f\u7a0b\u5e8f\u6a21\u677f(v3.3.5+)|`omi init-p my-app`| Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f |\n|Base Template with snapshoot|`omi init-snap my-app`| Basic omi or omio(IE8+) project template with snapshoot prerendering.|\n|TypeScript Template(omi-cli v3.3.0+)|`omi init-ts my-app`|Basic template with typescript.|\n|Mobile Template|`omi init-weui my-app`| Mobile web app template with weui and omi-router.|\n|omi-mp Template(omi-cli v3.0.13+)|`omi init-mp my-app` |Developing web with mini program template.|\n|MVVM Template(omi-cli v3.0.22+)|`omi init-mvvm my-app` |MVVM template.|\n\x3c!-- |[SPA Template](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)(omi-cli v3.0.10+)|`omi init-spa my-app`|Single page application template with omi-router.| --\x3e\n\nCLI\'s auto-created project scaffolding is based on a single-page create-react-app to be converted into a multi-page one, with configuration issues to see [create-react-app user guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md)'}});
|
||||
//# sourceMappingURL=5.3b2fb232.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Creator: CorelDRAW 2017 -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
<![CDATA[
|
||||
.fil0 {fill:none}
|
||||
.fil2 {fill:#171717}
|
||||
.fil1 {fill:#FEFEFE}
|
||||
]]>
|
||||
</style>
|
||||
</defs>
|
||||
<g id="图层_x0020_1">
|
||||
<metadata id="CorelCorpID_0Corel-Layer"/>
|
||||
<rect class="fil0" width="1024" height="1024"/>
|
||||
<rect class="fil0" width="1024" height="1024"/>
|
||||
<g id="_2225049615792">
|
||||
<circle class="fil1" cx="512" cy="512" r="512"/>
|
||||
<polygon class="fil2" points="159.97,807.8 338.71,532.42 509.9,829.62 519.41,829.62 678.85,536.47 864.03,807.8 739.83,194.38 729.2,194.38 517.73,581.23 293.54,194.38 283.33,194.38 "/>
|
||||
<circle class="fil2" cx="839.36" cy="242.47" r="50"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>Omi - Next Front End Framework</title><link href="./static/css/zh-cn.fb9dfd08.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/zh-cn.095aedf9.js"></script></body></html>
|
||||
Loading…
Reference in New Issue