webvirtcloud/console/templates/console-vnc.html

{% extends "console-base.html" %}
{% load i18n %}
{% load staticfiles %}
{% block head %}
    <script src="{% static "js/novnc/util.js" %}"></script>

{% endblock %}

{% block navbarmenu %}
                <!-- dirty fix for keyboard on iOS devices -->
                <li id="showKeyboard"><a href='#'>{% trans "Show Keyboad" %}</a></li>
{% endblock %}

{% block content %}
    <div id='noVNC_area'>
    <canvas id="noVNC_canvas" width="640px" height="20px">
        {% trans "Canvas not supported." %}
    </canvas>
    </div>

    <!-- Note that Google Chrome on Android doesn't respect any of these,
    html attributes which attempt to disable text suggestions on the
    on-screen keyboard. Let's hope Chrome implements the ime-mode
    style for example -->
    <!-- TODO: check if this is needed on iOS -->
    <textarea id="keyboardinput" autocapitalize="off"
              autocorrect="off" autocomplete="off" spellcheck="false"
              mozactionhint="Enter" onsubmit="return false;"
              style="display: none;">
    </textarea>

{% endblock %}

{% block foot %}
<script>
    /*jslint white: false */
    /*global window, $, Util, RFB, */
    "use strict";

    // dirty fix for keyboard on iOS devices
    var keyboardVisible = false;
    var isTouchDevice = false;
    isTouchDevice = 'ontouchstart' in document.documentElement;

    // Load supporting scripts
    Util.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
        "input.js", "display.js", "jsunzip.js", "rfb.js"]);

    var rfb;

    function passwordRequired(rfb) {
        var modal;
        modal = '<div class="modal fade">';
        modal += '  <div class="modal-dialog">';
        modal += '    <div class="modal-content">';
        modal += '      <div class="modal-header">';
        modal += '        <h4 class="modal-title">{% trans "Password required" %}</h4>';
        modal += '      </div>';
        modal += '      <div class="modal-body">';
        modal += '        <form id="password_form" onsubmit="return setPassword();">';
        modal += '          <div class="form-group">';
        modal += '            <label for="password_input">Password</label>';
        modal += '            <input type="password" class="form-control" id="password_input" placeholder="Password"/>';
        modal += '          </div>';
        modal += '        </form>';
        modal += '      </div>';
        modal += '      <div class="modal-footer">';
        modal += '        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="return setPassword();">{% trans "OK" %}</button>';
        modal += '      </div>';
        modal += '    </div>';
        modal += '  </div>';
        modal += '</div>';
        $('body').append(modal);
        $('div.modal').modal();
    }
    function setPassword() {
        rfb.sendPassword($('#password_input').val());
        return false;
    }
    function sendCtrlAltDel() {
        rfb.sendCtrlAltDel();
        return false;
    }

    function sendCtrlAltFN(f) {
        var keys_code=[0xFFBE,0xFFBF,0xFFC0,0xFFC1,0xFFC2,0xFFC3,0xFFC4,0xFFC5,0xFFC6,0xFFC7,0xFFC8,0xFFC9];
        if (keys_code[f]==undefined) {
            return;
        }
        rfb.sendKey(0xFFE3, 'down');
        rfb.sendKey(0xFFE9, 'down');
        rfb.sendKey(keys_code[f], 'down');
        rfb.sendKey(keys_code[f], 'up');
        rfb.sendKey(0xFFE9, 'up');
        rfb.sendKey(0xFFE3, 'up');
    };

    // dirty fix for keyboard on iOS devices
    function showKeyboard() {
        var kbi, skb, l;
        kbi = $D('keyboardinput');
        skb = $D('showKeyboard');
        l = kbi.value.length;
        if (keyboardVisible === false) {
            kbi.focus();
            try {
                kbi.setSelectionRange(l, l);
            } // Move the caret to the end
            catch (err) {
            } // setSelectionRange is undefined in Google Chrome
            keyboardVisible = true;
            //skb.className = "noVNC_status_button_selected";
        } else if (keyboardVisible === true) {
            kbi.blur();
            //skb.className = "noVNC_status_button";
            keyboardVisible = false;
        }
    }

    function updateState(rfb, state, oldstate, msg) {
        var s, sb, cad, af, level;
        cad = $D('sendCtrlAltDelButton');
        af = $D('askFullscreen');
        switch (state) {
            case 'failed':
                level = "danger";
                break;
            case 'fatal':
                level = "danger";
                break;
            case 'normal':
                level = "info";
                break;
            case 'disconnected':
                level = "info";
                break;
            case 'loaded':
                level = "info";
                break;
            default:
                level = "warning";
                break;
        }

        if (typeof(msg) !== 'undefined') {
            log_message(msg,level);
        }
    }

    function fullscreen() {
        var screen=document.getElementById('main_container');
        if(screen.requestFullscreen) {
            screen.requestFullscreen();
        } else if(screen.mozRequestFullScreen) {
            screen.mozRequestFullScreen();
        } else if(screen.webkitRequestFullscreen) {
            screen.webkitRequestFullscreen();
        } else if(screen.msRequestFullscreen) {
            screen.msRequestFullscreen();
        }
    }

    window.onscriptsload = function () {
        var host, port, password, path, token;

        // dirty fix for keyboard on iOS devices
        if (isTouchDevice) {
            $D('showKeyboard').onclick = showKeyboard;
            // Remove the address bar
            setTimeout(function () {
                window.scrollTo(0, 1);
            }, 100);
        } else {
            $D('showKeyboard').style.display = "none";
        }

        WebUtil.init_logging(WebUtil.getQueryVar('logging', 'warn'));
        document.title = unescape(WebUtil.getQueryVar('title', 'noVNC'));
        // By default, use the host and port of server that served this file
        host = '{{ ws_host }}';
        port = '{{ ws_port }}';
        password = '{{ console_passwd }}';

        if ((!host) || (!port)) {
            updateState('failed',
                    "Must specify host and port in URL");
            return;
        }

        rfb = new RFB({'target': document.getElementById('noVNC_canvas'),
            'encrypt': WebUtil.getQueryVar('encrypt',
                    (window.location.protocol === "https:")),
            'repeaterID': WebUtil.getQueryVar('repeaterID', ''),
            'true_color': WebUtil.getQueryVar('true_color', true),
            'local_cursor': WebUtil.getQueryVar('cursor', true),
            'shared': WebUtil.getQueryVar('shared', true),
            'view_only': WebUtil.getQueryVar('view_only', false),
            'updateState': updateState,
            'onPasswordRequired': passwordRequired});
        rfb.connect(host, port, password, path);
    };
</script>
{% endblock %}