hashirama/reanimate
Watch
1
0
Fork
You've already forked reanimate
 0
mirror of https://github.com/reanimate/reanimate.git synced 2026-09-15 10:02:45 +00:00
Code Issues Projects Releases Wiki Activity

Deploying to gh-pages from @ 29fd2daf9e 🚀

Browse source
This commit is contained in:
Lemmih 2020-08-23 03:18:09 +00:00
commit c888af14e3
6 changed files with 103 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

46
playground/embed.css Normal file
View file

@ -0,0 +1,46 @@
div.playground-embed {
display: grid;
}
@media (orientation: landscape) {
div.playground-embed {
grid-template-columns: 1fr 1fr;
}
}
@media (orientation: portrait) {
div.playground-embed {
grid-template-rows: 1fr 1fr;
}
}
div.playground-embed div.playground-editor {
border: 1px solid black;
font-size: 14px;
position: relative;
padding-top: 56.25%
}
div.playground-embed div.playground-viewer {
position: relative;
padding-top: 56.25%;
}
div.playground-embed div.playground-player {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
font-size: 14px;
}
div.playground-embed div.playground-player h1 {
font-size: 34px;
}
div.playground-embed .CodeMirror {
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

53
playground/embed.js Normal file
View file

@ -0,0 +1,53 @@
function embedPlayground(parent) {
const code = parent.innerText;
const container = document.createElement("div");
container.classList.add('playground-embed')
const editor = document.createElement("div");
editor.classList.add('playground-editor')
const viewContainer = document.createElement("div");
viewContainer.classList.add('playground-viewer')
const player = document.createElement("div");
player.classList.add('playground-player')
viewContainer.appendChild(player);
const elm = document.createElement("div");
player.appendChild(elm);
var app = playgroundInit(elm);
var playing = true;
player.onclick = function () {
if(playing)
app.pause();
else
app.play();
playing=!playing;
};
var myCodeMirror = CodeMirror(editor, {
lineNumbers: false,
value: code,
mode: "haskell",
lineWrapping: true
});
myCodeMirror.on('change', function () {
app.pause();
app.newCode(myCodeMirror.getValue());
});
app.newCode(myCodeMirror.getValue());
setTimeout(function () {
myCodeMirror.refresh();
},0);
container.appendChild(editor);
container.appendChild(viewContainer);
parent.replaceWith(container);
}
function embedPlaygroundAll(target = '.playground-code') {
document.querySelectorAll(target).forEach(embedPlayground);
}
function embedPlaygroundCode(parent, code) {
parent.innerText = code;
embedPlayground(parent);
}

2
playground/index.html
View file

@ -129,7 +129,7 @@
</div>
<script type="text/javascript">
var app = playgroundInit('elm');
var app = playgroundInit(document.getElementById('elm'));
var myCodeMirror = CodeMirror(document.querySelector('#editor'), {
lineNumbers: true,

2
playground/playground.js
View file

@ -55,7 +55,7 @@ function playgroundInit(elt) {
}
var app = Elm.Main.init({
node: document.getElementById(elt)
node: elt
});
app.ports.sendSocketCommand.subscribe(sendSocketCommand);
return {

4
playground/snippets.js
View file

@ -1,2 +1,2 @@
const snippets = [{"title": "Hello World","url": "https://reanimate.clozecards.com/LMvAjyzwwRi/30.svg","code": "-- This is the interactive Reanimate Playground\n\n-- Here you can write Haskell code and have it\n-- render directly to your browser.\n\n-- There are more examples available if you click\n-- on the 'collections' icon to the far right\n\nanimation :: Animation\nanimation = docEnv drawBox\n"},{"title": "Composition","url": "https://reanimate.clozecards.com/ECv3cbsbuMV/150.svg","code": "animation :: Animation\nanimation = docEnv $ sceneAnimation $ do\n play $ drawBox `parA` drawCircle\n & label \"parA\"\n play $ drawBox `seqA` drawCircle\n & label \"seqA\"\n play $ drawBox `andThen` drawCircle\n & label \"andThen\"\n\nlabel txt = addStatic $\n withFillOpacity 1 $ withStrokeWidth 0 $\n withFillColor \"black\" $\n translate screenLeft (screenBottom+0.2) $\n latex txt\n"},{"title": "Color Maps","url": "https://reanimate.clozecards.com/Ezuf27J2YrF/60.svg","code": "animation :: Animation\nanimation = docEnv $ sceneAnimation $ do\n play $ staticFrame 1 (showColorMap parula)\n & label \"Parula\"\n play $ staticFrame 1 (showColorMap viridis)\n & label \"Viridis\"\n play $ staticFrame 1 (showColorMap turbo)\n & label \"Turbo\"\n play $ staticFrame 1 (showColorMap greyscale)\n & label \"Greyscale\"\n\nlabel txt = overlay $\n withFillOpacity 1 $ withStrokeWidth 0 $\n withFillColor \"white\" $\n translate screenLeft (screenBottom+0.2) $\n latex txt\n\noverlay svg ani = ani `parA` staticFrame (duration ani) svg\n"}];
const playgroundVersion = "2020-08-22 (3bfa2)";
const snippets = [{"title": "Hello World","url": "https://reanimate.clozecards.com/LMvAjyzwwRi/30.svg","code": "-- This is the interactive Reanimate Playground\n\n-- Here you can write Haskell code and have it\n-- render directly to your browser.\n\n-- There are more examples available if you click\n-- on the 'collections' icon to the far right\n\nanimation :: Animation\nanimation = docEnv drawBox\n"},{"title": "Composition","url": "https://reanimate.clozecards.com/ECv3cbsbuMV/150.svg","code": "animation :: Animation\nanimation = docEnv $ sceneAnimation $ do\n play $ drawBox `parA` drawCircle\n & label \"parA\"\n play $ drawBox `seqA` drawCircle\n & label \"seqA\"\n play $ drawBox `andThen` drawCircle\n & label \"andThen\"\n\nlabel txt = addStatic $\n withFillOpacity 1 $ withStrokeWidth 0 $\n withFillColor \"black\" $\n translate screenLeft (screenBottom+0.2) $\n latex txt\n"},{"title": "Color Maps","url": "https://reanimate.clozecards.com/Ezuf27J2YrF/60.svg","code": "animation :: Animation\nanimation = docEnv $ sceneAnimation $ do\n play $ staticFrame 1 (showColorMap parula)\n & label \"Parula\"\n play $ staticFrame 1 (showColorMap viridis)\n & label \"Viridis\"\n play $ staticFrame 1 (showColorMap turbo)\n & label \"Turbo\"\n play $ staticFrame 1 (showColorMap greyscale)\n & label \"Greyscale\"\n\nlabel txt = overlay $\n withFillOpacity 1 $ withStrokeWidth 0 $\n withFillColor \"white\" $\n translate screenLeft (screenBottom+0.2) $\n latex txt\n\noverlay svg ani = ani `parA` staticFrame (duration ani) svg\n"},{"title": "Try it live","url": "https://reanimate.clozecards.com/OwjMi4FCJ4Z/90.svg","code": "background = \"lightblue\"\n\nshape :: SVG\nshape = mkCircle 4\n--shape = mkRect 6 6\n--shape = mkLine (screenLeft, screenBottom) (screenRight, screenTop)\n\nanimation :: Animation\nanimation = docEnv $\n addStatic (mkBackground background) $\n playThenReverseA $\n signalA (curveS 2) $\n setDuration 3 $ animate $ \\t ->\n partialSvg t $ pathify shape\n"}];
const playgroundVersion = "2020-08-23 (29fd2)";

7
playground/style.css
View file

@ -89,13 +89,6 @@ pre {
border: 0px solid #eee;
height: auto;
}
.select2 {
}
.select2-selection--single {
border: 0 !important;
border-bottom: 1px solid #aaa !important;
border-radius: 0 !important;
}
.edit-box {
display: flex;
flex-flow: column;