jube-fork/Jube.App/wwwroot/kendo/examples/window/animation.html

<!DOCTYPE html>
<html>
<head>
    <title>Animation effects</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">

            <div class="configurator">
                <div class="header">Configurator</div>
                <div class="box-col">
                    <h4>Animation Settings</h4>
                    <ul class="options">
                        <li>
                            <input id="default" name="animation" type="radio" checked="checked" /> <label for="default">default/zoom animation</label>
                        </li>
                        <li>
                            <input id="toggle" name="animation" type="radio" /> <label for="toggle">toggle animation</label>
                        </li>
                        <li>
                            <input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label>
                        </li>
                        <li>
                            <input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="window">
                <div style="text-align: center;">
                    <img src="../content/web/window/egg-chair.png" alt="ARNE JACOBSEN EGG CHAIR" />
                    <p>ARNE JACOBSEN EGG CHAIR<br /> Image by: <a href="https://www.conranshop.co.uk/" title="https://www.conranshop.co.uk/">https://www.conranshop.co.uk/</a></p>
                </div>
            </div>

            <span id="undo" style="display:none" class="k-button hidden-on-narrow">Click here to open the window.</span>

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

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

                $(document).ready(function () {
                    var original = $("#window").clone(true);

                    $(".options input").change(function () {
                        var clone = original.clone(true);

                        $("#undo").hide();
                        $("#window").data("kendoWindow").destroy();

                        setTimeout(function () {
                            $("#example").append(clone);
                            initWindow();
                        }, 200);
                    });

                    var getEffects = function () {
                        return (($("#expand")[0].checked ? "expand:vertical " : "") +
                                ($("#opacity")[0].checked ? "fadeIn" : "")) || false;
                    };

                    function initWindow() {
                        var windowOptions = {
                            width: "500px",
                            title: "EGG CHAIR",
                            visible: false,
                            close: onClose
                        };

                        if (!$("#default")[0].checked)
                            windowOptions.animation = { open: { effects: getEffects() }, close: { effects: getEffects(), reverse: true} };

                        $("#window").kendoWindow(windowOptions);

                        $("#undo")
                            .bind("click", function () {
                                $("#window").data("kendoWindow").open();
                                $("#undo").fadeOut(300);
                            });

                        $("#window").data("kendoWindow").open();
                    }

                    initWindow();
                });
            </script>

            <style>

                #example
                {
                    min-height:400px;
                }

                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }

                media screen and (max-width: 1023px) {
                    div.k-window {
                        display: none !important;
                    }
                }
            </style>

        </div>


    
</body>
</html>