index.html

---
layout: default
---

<div class="panel-container">
    <div id="editor" class="panel-left content"/>
    </div>

    <div class="splitter">
    </div>

    <div class="panel-right">
        <div class="term1"></div>
    </div>
</div>

<script>
    (function() {
        var font3 = document.createElement('link');
        font3.type = 'text/css';
        font3.rel = 'stylesheet';
        font3.href = '{{site.baseurl}}/css/syntax-highlighting.css';
        var q = document.getElementsByTagName('link')[0];
        q.parentNode.insertBefore(font3, q);
    })();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/dist/jquery-resizable.min.js"></script>
<script src="https://cdn.rawgit.com/play-with-docker/sdk/6f5f37c1e067eb778efecd93e58b25b2457695ef/dist/pwd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
<script>
    pwd.newSession([{selector: '.term1'}], {ImageName: 'franela/pwm'});
$(".panel-left").resizable({
    handleSelector: ".splitter",
    resizeHeight: false,
    onDragEnd: pwd.resize.bind(pwd)
});
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow_night_eighties");
editor.session.setMode("ace/mode/yaml");
editor.setShowPrintMargin(false);

var build = function() {
    var blobAttrs = { type: "text/plain" };
    var content = editor.getValue();
    var blob = new Blob([content], blobAttrs);
    blob.lastModifiedDate = new Date();

    var formData = new FormData();
    formData.append("upload", blob, "os.yml");

    pwd.upload(Object.keys(pwd.instances)[0], formData, function(err) {
        if (!err) {
            var instanceName = Object.keys(pwd.instances)[0];
            pwd.socket.emit('instance terminal in', instanceName, 'moby build os.yml\n');
        } else {
            console.log(err);
            alert('Error trying to build');
        }
    }); 
};

var run = function() {
    var instanceName = Object.keys(pwd.instances)[0];
    pwd.socket.emit('instance terminal in', instanceName, 'linuxkit run os\n');
};

var share = function() {
    var content = editor.getValue();
    $.post( "http://api.play-with-moby.com/shares", content, function(data) {
        var shareElm = document.getElementById('shareInput');
        shareElm.value = 'http://play-with-moby.com?share='+ data;
        shareElm.style.display='inline';
    }).fail(function(err) {
        console.log(err);
    });
};

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

// Hardcode the default code
var shareCode = getParameterByName('share') || "eZWczMlnWd";

if (shareCode) {
    $.get( "http://api.play-with-moby.com/shares/"+shareCode, function(data) {
        editor.setValue(data, -1);
    }).fail(function(err) {
        console.log(err);
    });
}

window.onbeforeunload = function(e) {
    pwd.closeSession(function(){});
    return;
}

</script>