{% extends base %}

{% block init_vars_block %}
    {% init show_right = False %}
{% end %}

{% block body %}

<style type="text/css">
    tr>th:nth-child(1) {
        width: 30%;
    }

    tr>th:nth-child(2) {
        width: 70%;
    }
</style>

<div class="card">

{% from xnote.plugin import TextLink %}

{% set title = "浏览器信息" %}

{% set parent_link = TextLink(text="开发", href=f"{_server_home}/plugin_list?category=develop") %}
{% include "common/title/base_title.html" %}

</div>

<div class="card">

<table class="table">
    <tr>
        <th>Name</th>
        <th>Value</th>
    </tr>
    <tr>
        <td>User Agent</td>
        <td id="userAgent"></td>
    </tr>
    <tr>
        <td>AppName</td>
        <td id="appName"></td>
    </tr>
    <tr>
        <td>AppVersion</td>
        <td id="appVersion"></td>
    </tr>
    <tr>
        <td>Vendor</td>
        <td id="vendor"></td>
    </tr>
    <tr>
        <td>Screen</td>
        <td id="screen"></td>
    </tr>
    <tr>
        <td>InnerSize</td>
        <td id="innerSize"></td>
    </tr>
    <tr>
        <td>ClientSize</td>
        <td id="clientSize"></td>
    </tr>
    <tr>
        <td>getUserMedia</td>
        <td id="checkGetUserMedia"></td>
    </tr>
    <tr>
        <td>geolocation</td>
        <td id="checkGeolocation"></td>
    </tr>
    <tr>
        <td>RTCPeerConnection</td>
        <td type-name="RTCPeerConnection" class="check-support"></td>
    </tr>
    <tr>
        <td>Worker</td>
        <td id="checkWorker" type-name="Worker" class="check-support"></td>
    </tr>
    <tr>
        <td>FileReader</td>
        <td type-name="FileReader" class="check-support"></td>
    </tr>
    <tr>
        <td>WebSocket</td>
        <td type-name="WebSocket" class="check-support"></td>
    </tr>
    <tr>
        <td>FormData</td>
        <td type-name="FormData" class="check-support"></td>
    </tr>
    <tr>
        <td>Audio</td>
        <td type-name="Audio" class="check-support"></td>
    </tr>
    <tr>
        <td>Notification</td>
        <td type-name="Notification" class="check-support"></td>
    </tr>
    <tr>
        <td>DeviceOrientationEvent</td>
        <td type-name="DeviceOrientationEvent" class="check-support"></td>
    </tr>

    <tr>
        <td>HTML5测试</td>
        <td><a href="https://html5test.com/" class="btn btn-default" target="_blank">前往测试</a></td>
    </tr>

</table>
</div>

<script type="text/javascript">
$(function () {
    $("#userAgent").html(navigator.userAgent);
    $("#appName").html(navigator.appName);
    $("#appVersion").html(navigator.appVersion);
    $("#vendor").html(navigator.vendor);
    $("#screen").html(screen.width+"x"+screen.height);
    $("#innerSize").text(window.innerWidth + "x" + window.innerHeight);
    $("#clientSize").text(document.body.clientWidth + "x" + document.body.clientHeight);
    $("#checkGetUserMedia").html(navigator.getUserMedia ? "Support" : "Unsupport");
    $("#checkGeolocation").html(navigator.geolocation ? "Support" : "Unsupport");

    $(".check-item").each(function (index) {
        var typeName = $(this).attr("type-name");
        console.log(index + ":" + typeName);
        console.log(window[typeName]);
        if (typeof window[typeName]) {
            $(this).html(window[typeName].toString());
        }
    });

    $(".check-support").each(function (index) {
        var typeName = $(this).attr("type-name");
        console.log(index + ":" + typeName);
        console.log(window[typeName]);
        if (typeof window[typeName] != "undefined") {
            $(this).html("Support");
        } else {
            $(this).html("Unsupport");
        }
    });
});
</script>
{% end %}