partiql-playground 0.1.0

PartiQL Playground
Documentation 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Editor</title>
  <style type="text/css" media="screen">

    .ace_editor {
        border: 1px solid lightgray;
        margin: auto;
        height: 800px;
        width: 400px;
        font-size: 26px!important;
        max-width: 30%;
    }
    .scrollmargin {
        height: 80px;
        text-align: center;
        
    }
    #editor1, #editor2, #editor3 {
        display:inline-block
    }
    .wrapper {
        text-align: center;
        perspective: 500px;
        margin-top: 50px;
    }

    #editor1 {
        transform: rotateY(10deg) rotateX(-1deg);
    }
    #editor2 {
        transform: translateZ(-36px) rotateX(-1deg);
    }
    #editor3 {
        transform: rotateY(-10deg) rotateX(-1deg);
    }
    #editor4 {
        transform: scale(-1,1) rotateX(-1deg);
    }
    .transformed {
        transform: scale(0.5);
        transform-origin: center 12%
    }
    #editor {
        width: 100%;
        min-width: 100%
    }
    body {
        background: #a9bfc7;
    }
    .scrollmargin input > {margin: 10px}
    </style>
</head>
<body>
<div class="transformed">
    <div class="wrapper">
        <pre id="editor1">editor1</pre>
        <pre id="editor2">editor2</pre>
        <pre id="editor3">editor3</pre> 
    </div>
    <div class="scrollmargin"></div>
    <pre id="editor4">editor4</pre>
    <div class="scrollmargin">
        <textarea></textarea>
    </div>
    <pre id="editor">editor</pre>
    <div class="scrollmargin" style="transform: scale(2) translateY(3em);">
        <input type="checkbox" id="option">Auto scroll into view</input>

        <input type="range" onchange="document.body.style.zoom = 1 + value/250">css Zoom</input>
        <input type="range" onchange="document.body.style.transform = 'rotateZ(' + (this.value * 18) +'deg)'">css Transform</input>
    </div>
</div>

<div class="scrollmargin">
</div>

<!-- load ace -->
<script src="../src/ace.js"></script>
<!-- load ace language_tools extension -->
<script src="../src/ext-language_tools.js"></script>
<script>

    var editor1 = ace.edit("editor1");
    editor1.setOptions({
        hasCssTransforms: true,
        theme: "ace/theme/tomorrow_night_blue",
        mode: "ace/mode/html"
    });
    
    var editor2 = ace.edit("editor2", {
        hasCssTransforms: true,
        theme: "ace/theme/kuroir",
        mode: "ace/mode/html",
        enableBasicAutocompletion: true,
    });
    
    var editor3 = ace.edit("editor3", {
        hasCssTransforms: true,
        theme: "ace/theme/tomorrow_night_eighties",
        mode: "ace/mode/html",
        enableBasicAutocompletion: true,
    });
    
    
    var editor4 = ace.edit("editor4", {
        hasCssTransforms: true,
        theme: "ace/theme/solarized_light",
        mode: "ace/mode/html",
        enableBasicAutocompletion: true,
    });

    var editor = ace.edit("editor", {
        hasCssTransforms: true,
        mode: "ace/mode/html",
        value: "editor 4\n from a mirror",
        enableBasicAutocompletion: true,
    });
    editor.renderer.setScrollMargin(10, 10, 10, 10);
    
    
    var checkbox = document.getElementById("option");
    checkbox.onchange = function() {
        editor1.setOption("autoScrollEditorIntoView", checkbox.checked);
        editor2.setOption("autoScrollEditorIntoView", checkbox.checked);
        editor3.setOption("autoScrollEditorIntoView", checkbox.checked);
        editor4.setOption("autoScrollEditorIntoView", checkbox.checked);
        editor.setOption("autoScrollEditorIntoView", checkbox.checked);
    };
    checkbox.onchange();
    window.editor = editor;
    window.editor4 = editor4;
</script>

<script src="./show_own_source.js"></script>

</body>
</html>