Dialog Events Logger

Logger for all dialog events

<!DOCTYPE html>
<html>
<head>
    <title>Dialog Events Logger</title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button class="gj-button-md" onclick="dialog.open()">Open Dialog</button>
    <button class="gj-button-md" onclick="log.empty()">Clear Log</button>
    <p>
        <div id="logPanel" class="col-xs-12 well pre-scrollable gj-unselectable" style="height: 200px"></div>
    </p>
    <div id="dialog" title="Events Logger" width="350" data-auto-open="false" data-resizable="true" style="display: none">
        <ul>
            <li>Drag me to fire my event for dragging</li>
            <li>Resize me to fire my event for resizing</li>
            <li>Close me to fire my closing events</li>
        </ul>
    </div>
    <script type="text/javascript">
        var dialog, log;
        $(document).ready(function () {
            log = $('#logPanel');
            //attach event handlers with the creation of the dialog
            dialog = $("#dialog").dialog({
                initialized: function (e) {
                    log.append('<div class="row">The initialized event is fired.</div>');
                },
                opening: function (e) {
                    log.append('<div class="row">The opening event is fired.</div>');
                },
                opened: function (e) {
                    log.append('<div class="row">The opened event is fired.</div>');
                },
                closing: function (e) {
                    log.append('<div class="row">The closing event is fired.</div>');
                },
                closed: function (e) {
                    log.append('<div class="row">The closed event is fired.</div>');
                }
            });
            //attach event handlers after the creation of the dialog
            dialog.on('drag', function (e) {
                log.append('<div class="row">The drag event is fired.</div>');
            });
            dialog.on('dragStart', function (e) {
                log.append('<div class="row">The dragStart event is fired.</div>');
            });
            dialog.on('dragStop', function (e) {
                log.append('<div class="row">The dragStop event is fired.</div>');
            });
            dialog.on('resize', function (e) {
                log.append('<div class="row">The resize event is fired.</div>');
            });
            dialog.on('resizeStart', function (e) {
                log.append('<div class="row">The resizeStart event is fired.</div>');
            });
            dialog.on('resizeStop', function (e) {
                log.append('<div class="row">The resizeStop event is fired.</div>');
            });
        });
    </script>
</body>
</html>

;