<?php

require_once '../lib/Kendo/Autoload.php';

$dialog = new \Kendo\UI\Dialog('dialog');
$skipAction = new \Kendo\UI\DialogAction();
$skipAction->text("Skip this version");

$remindAction = new \Kendo\UI\DialogAction();
$remindAction->text("Remind me later");

$intallAction = new \Kendo\UI\DialogAction();
$intallAction->text("Install update")
             ->primary(true);

$dialog->title('Software Update')
       ->width('400px')
       ->closable(false)
       ->modal(false)
       ->close('onClose')
       ->addAction($skipAction, $remindAction, $intallAction)
       ->content('<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>');

echo $dialog->render();
?>

<div style="position: relative;height:40px;">
    <span id="show" style="display:none" class="k-button hidden-on-narrow">Click here to open the dialog.</span>
</div>

<div class="box wide hidden-on-narrow">
    <div class="box-col">
        <h4>Supported keys and user actions</h4>
        <ul class="keyboard-legend">
            <li>
                <span class="button-preview">
                    <span class="key-button leftAlign wider">alt</span>
                    <span class="key-button">w</span>
                </span>
                <span class="button-descr">
                    focuses dialog
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button">esc</span>
                </span>
                <span class="button-descr">
                    closes dialog
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button leftAlign wider">enter</span> /
                    <span class="key-button">space</span>
                </span>
                <span class="button-descr">
                    triggers the focused action and the close button if focused
                </span>
            </li>
        </ul>
    </div>
</div>

<div class="responsive-message"></div>

<script>
    function onClose() {
        $("#show").fadeIn();
    }

    $("#show").click(function () {
        $("#dialog").data("kendoDialog").open();
        $("#show").fadeOut();
    });

    // focus the widget's element
    $(document).on("keydown.examples", function (e) {
        if (e.altKey && e.keyCode === 87 /* w */) {
            $("#dialog").get(0).focus();
        }
    });
</script>

<style>
    #example {
        min-height: 350px;
    }
    
    #example {
        margin-top: 250px;
    }

    #show {
        text-align: center;
        position: absolute;
        white-space: nowrap;
        padding: 1em;
        cursor: pointer;
    }
</style>