<commit_before><!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>django-websocket-request example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            .container {
                margin: 20px auto;
            }
            #snippets {
                float: left;
                width: 200px;
            }
            #iframe-wrapper {
                float: left;
                width: 425px;
            }
            .controls {
                float: left;
                width: 300px;
            }
            .control-panel {
                clear: both;
            }

            #protocols {
                float: left;
                width: 300px;
            }

            #log {
                width: 500px;
                height: 200px;
                overflow: scroll;
                border: 1px solid #000;
                background: #000;
                color: #00CC00;
            }

            #log .error {
                color: red;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <h1>
                Demo application for django-websocket-request
            </h1>
            <div id="snippets">
                <h1>Snippets</h1>
                <ul class="snippets"></ul>
            </div>
            <div id="iframe-wrapper">
                <h1>Preview</h1>
                <div id="iframe-container"></div>
            </div>
            <div class="controls">
                <h2>Create</h2>
                <p><input type="text" class="title" placeholder="Title"></p>
                <p><textarea class="code" cols="30" rows="10" placeholder="Code"></textarea></p>
                <p>
                    <select class="language">
                        <option value="python">Python</option>
                        <option value="js">JavaScript</option>
                        <option value="rb">Ruby</option>
                    </select>
                </p>
                <p>
                    <button class="send" disabled>Create</button>
                </p>
            </div>

            <div class="control-panel">
                <div id="protocols">
                  <ul>
                    <li>
                      <input id="websocket" type="checkbox" value="websocket" checked="checked"></input>
                      <label for="websocket">websocket</label>
                    </li>
                    <li>
                      <input id="xhr-streaming" type="checkbox" value="xhr-streaming" checked="checked"></input>
                      <label for="xhr-streaming">xhr-streaming</label>
                    </li>
                    <li>
                      <input id="iframe-eventsource" type="checkbox" value="iframe-eventsource" checked="checked"></input>
                      <label for="iframe-eventsource">iframe-eventsource</label>
                    </li>
                    <li>
                      <input id="iframe-htmlfile" type="checkbox" value="iframe-htmlfile" checked="checked"></input>
                      <label for="iframe-htmlfile">iframe-htmlfile</label>
                    </li>
                    <li>
                      <input id="xhr-polling" type="checkbox" value="xhr-polling" checked="checked"></input>
                      <label for="xhr-polling">xhr-polling</label>
                    </li>
                    <li>
                      <input id="iframe-xhr-polling" type="checkbox" value="iframe-xhr-polling" checked="checked"></input>
                      <label for="iframe-xhr-polling">iframe-xhr-polling</label>
                    </li>
                    <li>
                      <input id="jsonp-polling" type="checkbox" value="jsonp-polling" checked="checked"></input>
                      <label for="jsonp-polling">jsonp-polling</label>
                    </li>
                  </ul>
                </div>

                <div>
                  <a id="connect" href="#">Connect</a>&nbsp;|&nbsp;Status: <span id="status">disconnected</span>
                </div>
                <div id="log"></div>
            </div>
            <div class="info">
                <p>Source code for this demo application is available in <a href="https://github.com/GetBlimp/django-websocket-request-example" target="_blank">GitHub</a>.</p>
            </div>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    <script>
        var loadedSnippets = [];

        $(function () {

            var conn = null;

            function log(msg) {
                var control = $('#log');
                control.html(control.html() + msg + '<br/>');
                control.scrollTop(control.scrollTop() + 1000);
            };

            function logError(msg) {
                log('<span class="error">' + msg + '</span>');
            };

            function connect() {
                disconnect();

                var transports = $('#protocols input:checked').map(function () {
                    return $(this).attr('id');
                }).get();

                conn = new SockJS('http://' + window.location.host + '/ws/api', transports);

                log('Connecting...');

                conn.onopen = function () {
                    log('Connected.');
                    update_ui();

                    $('.send').attr('disabled', false);

                    var message = {
                        'url': '/api/snippets/'
                    };

                    conn.send(JSON.stringify(message));
                };

                conn.onmessage = function (e) {
                    log('Received: ' + e.data);

                    console.log(e.data);

                    var responseURL = e.data.response.url;
                    var responseData = e.data.response.data;

                    if(responseData.detail) {
                        logError(JSON.stringify(responseData));
                        return false;
                    }

                    if (responseURL === '/api/snippets/') {
                        $snippets = $('.snippets');

                        if (!$.isArray(responseData)) {
                            responseData = [responseData];
                        }

                        $.each(responseData, function (index, value) {
                            if(!value.id && !value.title) {
                                logError(JSON.stringify(value));
                                return false;
                            }

                            var snippet = '<li> \
                                <a class="snippet" href="#" data-id="' + value.id + '">' + value.title + '</a> \
                            </li>';

                            if ($.inArray(value.id, loadedSnippets) === -1) {
                                $snippets.append(snippet);
                                loadedSnippets.push(value.id);
                            }
                        });
                    } else if (responseURL.match(/highlight/)) {
                        updateIframe(responseData);
                    }
                };
                conn.onclose = function () {
                    log('Disconnected.');
                    conn = null;
                    update_ui();

                    $('.send').attr('disabled', true);
                };
            };

            function disconnect() {
                if (conn != null) {
                    log('Disconnecting...');

                    conn.close();
                    conn = null;

                    update_ui();
                }
            };
<commit_msg>Render snippet titles with Handlebars<commit_after><!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>django-websocket-request example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            .container {
                margin: 20px auto;
            }
            #snippets {
                float: left;
                width: 200px;
            }
            #iframe-wrapper {
                float: left;
                width: 425px;
            }
            .controls {
                float: left;
                width: 300px;
            }
            .control-panel {
                clear: both;
            }

            #protocols {
                float: left;
                width: 300px;
            }

            #log {
                width: 500px;
                height: 200px;
                overflow: scroll;
                border: 1px solid #000;
                background: #000;
                color: #00CC00;
            }

            #log .error {
                color: red;
            }
        </style>

    </head>
    <body>
        <div class="container">
            <h1>
                Demo application for django-websocket-request
            </h1>
            <div id="snippets">
                <h1>Snippets</h1>
                <ul class="snippets"></ul>
            </div>
            <div id="iframe-wrapper">
                <h1>Preview</h1>
                <div id="iframe-container"></div>
            </div>
            <div class="controls">
                <h2>Create</h2>
                <p><input type="text" class="title" placeholder="Title"></p>
                <p><textarea class="code" cols="30" rows="10" placeholder="Code"></textarea></p>
                <p>
                    <select class="language">
                        <option value="python">Python</option>
                        <option value="js">JavaScript</option>
                        <option value="rb">Ruby</option>
                    </select>
                </p>
                <p>
                    <button class="send" disabled>Create</button>
                </p>
            </div>

            <div class="control-panel">
                <div id="protocols">
                  <ul>
                    <li>
                      <input id="websocket" type="checkbox" value="websocket" checked="checked"></input>
                      <label for="websocket">websocket</label>
                    </li>
                    <li>
                      <input id="xhr-streaming" type="checkbox" value="xhr-streaming" checked="checked"></input>
                      <label for="xhr-streaming">xhr-streaming</label>
                    </li>
                    <li>
                      <input id="iframe-eventsource" type="checkbox" value="iframe-eventsource" checked="checked"></input>
                      <label for="iframe-eventsource">iframe-eventsource</label>
                    </li>
                    <li>
                      <input id="iframe-htmlfile" type="checkbox" value="iframe-htmlfile" checked="checked"></input>
                      <label for="iframe-htmlfile">iframe-htmlfile</label>
                    </li>
                    <li>
                      <input id="xhr-polling" type="checkbox" value="xhr-polling" checked="checked"></input>
                      <label for="xhr-polling">xhr-polling</label>
                    </li>
                    <li>
                      <input id="iframe-xhr-polling" type="checkbox" value="iframe-xhr-polling" checked="checked"></input>
                      <label for="iframe-xhr-polling">iframe-xhr-polling</label>
                    </li>
                    <li>
                      <input id="jsonp-polling" type="checkbox" value="jsonp-polling" checked="checked"></input>
                      <label for="jsonp-polling">jsonp-polling</label>
                    </li>
                  </ul>
                </div>

                <div>
                  <a id="connect" href="#">Connect</a>&nbsp;|&nbsp;Status: <span id="status">disconnected</span>
                </div>
                <div id="log"></div>
            </div>
            <div class="info">
                <p>Source code for this demo application is available in <a href="https://github.com/GetBlimp/django-websocket-request-example" target="_blank">GitHub</a>.</p>
            </div>
        </div>
    </body>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
    <script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
    <script id="snippet-template" type="text/x-handlebars-template">
        <li>
            <a class="snippet" href="#" data-id="{{!id}}">{{!title}}</a>
        </li>
    </script>
    <script>
        var loadedSnippets = [];

        $(function () {

            var conn = null;

            function log(msg) {
                var control = $('#log');
                control.html(control.html() + msg + '<br/>');
                control.scrollTop(control.scrollTop() + 1000);
            };

            function logError(msg) {
                log('<span class="error">' + msg + '</span>');
            };

            function connect() {
                disconnect();

                var transports = $('#protocols input:checked').map(function () {
                    return $(this).attr('id');
                }).get();

                conn = new SockJS('http://' + window.location.host + '/ws/api', transports);

                log('Connecting...');

                conn.onopen = function () {
                    log('Connected.');
                    update_ui();

                    $('.send').attr('disabled', false);

                    var message = {
                        'url': '/api/snippets/'
                    };

                    conn.send(JSON.stringify(message));
                };

                conn.onmessage = function (e) {
                    log('Received: ' + e.data);

                    console.log(e.data);

                    var responseURL = e.data.response.url;
                    var responseData = e.data.response.data;

                    if($.isArray(responseData.title) || $.isArray(responseData.code)) {
                        logError(JSON.stringify(responseData));
                        return false;
                    }

                    if (responseURL === '/api/snippets/') {
                        $snippets = $('.snippets');

                        if (!$.isArray(responseData)) {
                            responseData = [responseData];
                        }

                        $.each(responseData, function (index, value) {
                            if(!value.id && !value.title) {
                                logError(JSON.stringify(value));
                                return false;
                            }

                            var context = {
                                id: value.id,
                                title: value.title
                            };

                            var source   = $("#snippet-template").html();
                            var template = Handlebars.compile(source);
                            var snippet = template(context);

                            if ($.inArray(value.id, loadedSnippets) === -1) {
                                $snippets.append(snippet);
                                loadedSnippets.push(value.id);
                            }
                        });
                    } else if (responseURL.match(/highlight/)) {
                        updateIframe(responseData);
                    }
                };
                conn.onclose = function () {
                    log('Disconnected.');
                    conn = null;
                    update_ui();

                    $('.send').attr('disabled', true);
                };
            };

            function disconnect() {
                if (conn != null) {
                    log('Disconnecting...');

                    conn.close();
                    conn = null;

                    update_ui();
                }
            };

{'fraction_non_alphanumeric': 0.13623364770307272, 'fraction_numerical': 0.00687557042896258, 'mean_word_length': 1.0591330493610625, 'pattern_counts': {'":': 0, '<': 265, '<?xml version=': 0, '>': 265, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '728741', 'n_tokens_mistral': 4395, 'n_tokens_neox': 3906, 'n_words': 707}