Deploying to gh-pages from @ 29fd2daf9e 🚀

playground/embed.css

@@ -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;
+}

playground/embed.js

@@ -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);
+}

playground/index.html

@@ -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,

playground/playground.js

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

playground/snippets.js

@@ -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 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-22 (3bfa2)";
+const playgroundVersion = "2020-08-23 (29fd2)";

playground/style.css

@@ -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;