mirror of
https://github.com/reanimate/reanimate.git
synced 2026-09-14 01:22:20 +00:00
Deploying to gh-pages from @ f1d945babb 🚀
This commit is contained in:
Lemmih
parent
386bf143b5
commit
c3a2275430
5 changed files with 272 additions and 701 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -22,6 +22,7 @@
|
|||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script src="snippets.js"></script>
|
||||
<script src="playground.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -41,10 +42,6 @@
|
|||
|
||||
<div class="grid">
|
||||
<div class="edit-box">
|
||||
<select class="column-header">
|
||||
<option>Example 1</option>
|
||||
<option>Example 2</option>
|
||||
</select>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
<div class="gutter-column-1"></div>
|
||||
|
|
@ -60,7 +57,10 @@
|
|||
<img id="seek1" src="skip_next-white-48dp.svg">
|
||||
<img id="seek10" src="forward_10-white-48dp.svg">
|
||||
</div>
|
||||
<img id="help" src="help_outline-white-48dp.svg">
|
||||
<div>
|
||||
<img id="examples" src="collections-white-48dp.svg">
|
||||
<img id="help" src="help_outline-white-48dp.svg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="elm"></div>
|
||||
|
|
@ -85,6 +85,45 @@
|
|||
<button class="modal-close is-large" area-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="examples-modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Reanimate Examples</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<!--
|
||||
Title
|
||||
Url
|
||||
Code
|
||||
-->
|
||||
<div class="snippet-container">
|
||||
<!-- <div>
|
||||
<span>drawBox</span>
|
||||
<img src="https://reanimate.clozecards.com/EwyRzmx8zxM/30.svg">
|
||||
</div>
|
||||
<div>
|
||||
<span>drawCircle</span>
|
||||
<img src="https://reanimate.clozecards.com/EwyRzmx8zxM/50.svg">
|
||||
</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>7</div>
|
||||
<div>8</div>
|
||||
<div>9</div>
|
||||
<div>10</div> -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- <footer class="modal-card-foot">
|
||||
</footer> -->
|
||||
</div>
|
||||
<button class="modal-close is-large" area-label="close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var app = playgroundInit('elm');
|
||||
|
||||
|
|
@ -95,54 +134,69 @@
|
|||
lineWrapping: true
|
||||
});
|
||||
|
||||
app.newCode(myCodeMirror.getValue());
|
||||
|
||||
myCodeMirror.on('change', function () {
|
||||
document.querySelector('.media-buttons').classList.remove('paused');
|
||||
app.play();
|
||||
app.newCode(myCodeMirror.getValue());
|
||||
});
|
||||
|
||||
document.getElementById('play').onclick = function() {
|
||||
renderSnippets(document.querySelector('.snippet-container'), myCodeMirror);
|
||||
|
||||
document.getElementById('play').onclick = function () {
|
||||
document.querySelector('.media-buttons').classList.toggle('paused');
|
||||
app.play();
|
||||
};
|
||||
document.getElementById('pause').onclick = function() {
|
||||
document.getElementById('pause').onclick = function () {
|
||||
document.querySelector('.media-buttons').classList.toggle('paused');
|
||||
app.pause();
|
||||
};
|
||||
document.getElementById('seek1').onclick = function() {
|
||||
document.getElementById('seek1').onclick = function () {
|
||||
document.querySelector('.media-buttons').classList.add('paused');
|
||||
app.pause();
|
||||
app.seek1();
|
||||
};
|
||||
document.getElementById('seek10').onclick = function() {
|
||||
document.getElementById('seek10').onclick = function () {
|
||||
document.querySelector('.media-buttons').classList.add('paused');
|
||||
app.pause();
|
||||
app.seek10();
|
||||
};
|
||||
document.getElementById('seek-1').onclick = function() {
|
||||
document.getElementById('seek-1').onclick = function () {
|
||||
document.querySelector('.media-buttons').classList.add('paused');
|
||||
app.pause();
|
||||
app.seek_1();
|
||||
};
|
||||
document.getElementById('seek-10').onclick = function() {
|
||||
document.getElementById('seek-10').onclick = function () {
|
||||
document.querySelector('.media-buttons').classList.add('paused');
|
||||
app.pause();
|
||||
app.seek_10();
|
||||
};
|
||||
document.getElementById('help').onclick = function() {
|
||||
document.getElementById('help').onclick = function () {
|
||||
document.querySelector('#help-modal').classList.add('is-active');
|
||||
};
|
||||
document.querySelector('#help-modal .modal-background').onclick = function() {
|
||||
document.querySelector('#help-modal .modal-background').onclick = function () {
|
||||
document.querySelector('#help-modal').classList.remove('is-active');
|
||||
};
|
||||
document.querySelector('#help-modal .modal-close').onclick = function() {
|
||||
document.querySelector('#help-modal .modal-close').onclick = function () {
|
||||
document.querySelector('#help-modal').classList.remove('is-active');
|
||||
};
|
||||
document.querySelector('#help-modal .delete').onclick = function() {
|
||||
document.querySelector('#help-modal .delete').onclick = function () {
|
||||
document.querySelector('#help-modal').classList.remove('is-active');
|
||||
};
|
||||
|
||||
document.getElementById('examples').onclick = function () {
|
||||
document.querySelector('#examples-modal').classList.add('is-active');
|
||||
};
|
||||
document.querySelector('#examples-modal .modal-background').onclick = function () {
|
||||
document.querySelector('#examples-modal').classList.remove('is-active');
|
||||
};
|
||||
document.querySelector('#examples-modal .modal-close').onclick = function () {
|
||||
document.querySelector('#examples-modal').classList.remove('is-active');
|
||||
};
|
||||
document.querySelector('#examples-modal .delete').onclick = function () {
|
||||
document.querySelector('#examples-modal').classList.remove('is-active');
|
||||
};
|
||||
|
||||
</script>
|
||||
<script>
|
||||
Split({ // gutters specified in options
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@ const backend = "149.56.132.163";
|
|||
function playgroundInit(elt) {
|
||||
var mySockets = {};
|
||||
var frames = {};
|
||||
var lastScript = "";
|
||||
|
||||
function sendSocketCommand(wat) {
|
||||
if (wat.cmd == "connect") {
|
||||
socket = new WebSocket(wat.address);
|
||||
socket.onopen = function (event) {
|
||||
socket.send(lastScript);
|
||||
app.ports.receiveSocketMsg.send({
|
||||
name: wat.name,
|
||||
msg: "data",
|
||||
|
|
@ -42,7 +44,9 @@ function playgroundInit(elt) {
|
|||
socket.onclose = connectionFailedHandler;
|
||||
mySockets[wat.name] = socket;
|
||||
} else if (wat.cmd == "send") {
|
||||
mySockets[wat.name].send(wat.content);
|
||||
if( mySockets[wat.name].readyState === mySockets[wat.name].OPEN ) {
|
||||
mySockets[wat.name].send(wat.content);
|
||||
}
|
||||
} else if (wat.cmd == "close") {
|
||||
mySockets[wat.name].close();
|
||||
delete mySockets[wat.name];
|
||||
|
|
@ -73,7 +77,26 @@ function playgroundInit(elt) {
|
|||
app.ports.receiveControlMsg.send('seek-10');
|
||||
},
|
||||
newCode: function(code) {
|
||||
lastScript = code;
|
||||
app.ports.receiveEditorMsg.send(code);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function renderSnippets(elt, myCodeMirror) {
|
||||
for(var i=0;i<snippets.length;i++) {
|
||||
const div = document.createElement("div");
|
||||
const title = document.createElement("span");
|
||||
const img = document.createElement("img");
|
||||
const code = snippets[i].code;
|
||||
title.innerHTML = snippets[i].title;
|
||||
img.src = snippets[i].url;
|
||||
div.appendChild(title)
|
||||
div.appendChild(img)
|
||||
div.onclick = function () {
|
||||
myCodeMirror.setValue(code);
|
||||
document.querySelector('#examples-modal').classList.remove('is-active');
|
||||
};
|
||||
elt.appendChild(div)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
playground/snippets.js
Normal file
1
playground/snippets.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
const snippets = [{"title": "Composition","url": "https://reanimate.clozecards.com/ATcv1$xjG06/30.svg","code": "animation :: Animation\nanimation = docEnv $\n drawBox `parA` drawCircle\n\n"},{"title": "Color Maps","url": "https://reanimate.clozecards.com/HPNi7PpImrc/15.svg","code": "animation :: Animation\nanimation = docEnv $ staticFrame 1 $\n showColorMap parula\n"}];
|
||||
|
|
@ -106,6 +106,7 @@ pre {
|
|||
}
|
||||
.edit-box #editor {
|
||||
flex: 1 1 auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
.edit-box .app {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -121,6 +122,27 @@ pre {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.snippet-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.snippet-container > div {
|
||||
width: 16em;
|
||||
height: 9em;
|
||||
margin: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.snippet-container > div > span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
padding: 0.2em;
|
||||
}
|
||||
.snippet-container > div > img {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue