feat(chore): added testing page for jsfiddle fullscreen

jsfiddle.net recently removed the feature to append a /show to any jsfiddle , which was then only showing the result of a jsfiddle. That was a very handy feature to review/test on mobile devices. The only possibility now is to embed the jsfiddle into an iframe. That said, this PR offers a little page which will display the result of any given jsfiddle in an iframe. Maybe i was too lazy, but i could not find another public service which does just that. I am aware, that codepen.io still offers that feature somehow by using /full instead of /pen in their URLs, but as we are using jsfiddle so much often i thought it's a good idea to still have this for jsfiddle as well.
fomantic · Jul 5, 2020 · 7284ccd · 7284ccd
1 parent 75aad0d
commit 7284ccd
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/server/raw/jsfiddle/index.html b/server/raw/jsfiddle/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <title>jsfiddle fullscreen Tester | Fomantic-UI</title>
+    <link rel="stylesheet" type="text/css" href="/dist/semantic.min.css" >
+    <meta name="description" content="Testing jsfiddle fullscreen in Fomantic-UI. Especially for mobile" />
+    <meta name="keywords" content="jsfiddle, fullscreen, fomantic, semantic, mobile, html5, ui, library, framework, javascript, fork, official" />
+</head>
+<style>
+    body {
+        display: flex;
+        flex-direction: column;
+    }
+    iframe {
+        flex-grow:1;
+    }
+    @media only screen and (min-width: 767px) {
+        [class*="mobile only"] {
+            display: none !important;
+        }
+    }
+</style>
+<body>
+    <div class="ui top attached basic segment" >
+        <h3 class="ui header">
+            <a class="ui image" href="/"><img src="/images/logo.png"></a>
+            <div class="content">
+                jsfiddle tester <span class="mobile only">for mobile</span>
+            </div>
+        </h3>
+        <i class="small exclamation triangle icon"></i>
+        The Code below is located at <a id="orgfiddle" href="">https://jsfiddle.net</a> and embedded via an iframe
+    </div>
+    <iframe id="jsfiddle" src="http://" frameborder="0"></iframe>
+</body>
+<script>
+    var jsfiddleInfo = window.location.href.split("#!");
+    if(jsfiddleInfo.length > 1){
+        var orgFiddle = '//jsfiddle.net/'+jsfiddleInfo[1].replace(/[^a-zA-Z0-9\/]/g,'');
+        document.getElementById('jsfiddle').src = orgFiddle+'/embedded/result/';
+        document.getElementById('orgfiddle').href = orgFiddle;
+    }
+    else {
+        window.location.href = '/';
+    }
+</script>
+</html>