jube-fork/Jube.App/wwwroot/kendo/examples/fx/semantic-zoom.html

<!DOCTYPE html>
<html>
<head>
    <title>Semantic Zoom</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 id="container">
            <div id="view"></div>
        </div>

        <script id="index" type="text/x-kendo-template">
            <div id="tiles" data-role="listview" data-bind="source: artistDS" data-template="album-template">
            </div>
        </script>

        <script id="album-template" type="text/x-kendo-template">
            <a href="\#/detail?id=#: collectionId #" class="large" style="background-image: url(#: artworkUrl100 #)"></a>
        </script>

        <script id="detail" type="text/x-kendo-template">
            <div id="detail-view" data-bind="style: { backgroundImage: largeAlbumCover }">
                <div>
                    <a href="#" class="back-link"><span>&laquo;</span> Back</a>
                    <h2><span data-bind="text: album.collectionName"></span></h2>
                    <ol id="tracks" data-role="listview" data-bind="source: albumDS, events: { dataBound: fadeTracks }" data-template="track-template" data-auto-bind="false">
                    </ol>
                </div>
            </div>
        </script>

        <script id="track-template" type="text/x-kendo-template">
            <li>#: trackName #</li>
        </script>

        <style>
            #view {
                position: relative;
                width: 600px;
                height: 600px;
                padding: 10px;
                margin: 0 auto;
                overflow: hidden;
                background-color: #000;
            }

            .k-fx-szoom.k-fx-end .k-fx-next {
                position: relative;
            }

            #tiles {
                overflow: auto;
                width: 600px;
                height: 600px;
                border: 0;
                background-color: #000;
            }

            #tiles a {
                background: none none left top no-repeat;
                box-sizing: border-box;
                width: 100px;
                height: 100px;
                margin: 10px;
                border: 3px solid #000;
                float: left;
                background: #e4e4e4;
            }

            #tiles a:hover {
                border: 3px solid #ff0;
            }

            #detail-view {
                width: 600px;
                height: 600px;
                background: #000;
            }

            #detail-view div {
                width: 600px;
                height: 600px;
                background: rgba(0,0,0,.65);
                overflow: auto;
            }

            #detail-view h2 {
                padding: 30px 30px 0 30px;
                font-size: 3.5em;
                font-weight: normal;
                line-height: 1em;
                color: #fff;
            }

            #tracks {
                border: 0;
                padding: 0 0 0 30px;
                background: none;
                color: #fff;
            }

            .back-link {
                display: inline-block;
                margin: 30px 0 0 30px;
                text-decoration: none;
                text-transform: uppercase;
                font-weight: bold;
                color: #ff0;
            }

            .back-link:hover {
                text-decoration: none;
                color: #fff;
            }

            .back-link span {
                font-size: 1.3em;
            }
        </style>

        <script type="text/javascript" charset="utf-8">

            function scaleElement(element, origin, scale) {
                element.css({
                    transformOrigin: origin.x + "px " + origin.y + "px",
                    transform: "scale(" + scale + ")"
                });
            }

            var origin = "0 0";
            var scale = 1;

            var router = new kendo.Router();

            router.route("/", function() {
                layout.showIn("#view", index);
            });

            router.route("/detail", function(params) {
                detail.model.set("albumID", params.id);
                layout.showIn("#view", detail, "szoom");
            });

            var artistID = '6487241';

            var layout = new kendo.Layout("#container");

            var scrollTop = 0;

            var artistDS = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "https://itunes.apple.com/lookup?id=" + artistID + "&entity=album",
                            dataType: "jsonp"
                        },
                    },
                    schema: {
                        data: "results",
                        model: {
                            id: "collectionId",
                            fields: {
                                releaseDate: {
                                    type: "date"
                                }
                            }
                        }
                    },
                filter: { field: "wrapperType", operator: "equals", value: "collection" }
            });

            var index = new kendo.View("index", {
                wrap: false,
                model: {
                    artistDS: artistDS,
                },
                init: function() {
                    var element = this.element;

                    element.on("click", "a", function(e) {
                        var targetBox = kendo.effects.box(e.target);
                        var viewBox = kendo.effects.box(element);

                        origin = kendo.effects.transformOrigin(targetBox, viewBox);
                        scale = kendo.effects.fitScale(targetBox, viewBox);
                    });
                },

                transitionStart: function(e) {
                    if (e.type === "show") {
                        scaleElement(this.element, origin, 1 / scale);
                    } else {
                        scaleElement(this.element, origin, 1);
                    }
                },

                transitionEnd: function(e) {
                    if (e.type === "show") {
                        scaleElement(this.element, origin, 1);
                        this.element[0].scrollTop = scrollTop;
                    } else {
                        scaleElement(this.element, origin, 1 / scale);
                        scrollTop = this.element[0].scrollTop;
                    }
                }
            });

            var detail = new kendo.View("detail", {
                wrap: false,
                model: kendo.observable({
                    albumID: null,
                    album: null,
                    largeAlbumCover: function() {
                        if (this.get("album")) {
                            return "url(" + this.get("album").artworkUrl100.replace("100x100", "600x600") + ")";
                        } else {
                            return "none";
                        }
                    },
                    albumDS: new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: function() {
                                    return "https://itunes.apple.com/lookup?id=" + detail.model.get("albumID") + "&entity=song";
                                },
                                dataType: "jsonp"
                            },
                        },
                        schema: {
                            data: "results",
                            model: {
                                fields: {
                                    releaseDate: {
                                        type: "date"
                                    }
                                }
                            }
                        },
                        filter: { field: "wrapperType", operator: "equals", value: "track" }
                    }),

                    fadeTracks: function(e) {
                        e.sender.element.show();
                        kendo.fx(e.sender.element).expand("vertical").play();
                    }
                }),

                transitionStart: function(e) {
                    if (e.type === "show") {
                        scaleElement(this.element, origin, scale);
                    } else {
                        scaleElement(this.element, origin, 1);
                    }
                },

                transitionEnd: function(e) {
                    if (e.type === "show") {
                        scaleElement(this.element, origin, 1);
                    } else {
                        scaleElement(this.element, origin, scale);
                    }
                },

                show: function() {
                    this.model.set("album", artistDS.get(this.model.get("albumID")));
                    this.element.find("#tracks").hide();
                    this.model.albumDS.read();
                }
            });

            router.start();
        </script>
</div>


    
</body>
</html>