jube-fork/Jube.App/wwwroot/kendo/examples/tilelayout/add-remove.html

<!DOCTYPE html>
<html>
<head>
    <title>Add/Remove</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="main-layout"></div>
    <div id="side-layout"></div>

    <script id="new-customers" type="text/x-kendo-template">
        <div class="info-container">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
            <img src="../content/web/tilelayout/arrow_up_512x512.png" class="arrow-class" />
            <div class="info-holder">
                <span class="item-values">35445</span>
                <span class="text-indicator">New customers</span>
            </div>
        </div>
    </script>

    <script id="returning-customers" type="text/x-kendo-template">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>

        <div id="returning-chart"></div>

        <div class="info-container">
            <div class="info-holder">
                <span class="item-values">17% <img src="../content/web/tilelayout/target_512x512.png" class="arrow-class" /></span>
                <span class="text-indicator">Returning customers</span>
            </div>
        </div>
    </script>

    <script id="new-deals" type="text/x-kendo-template">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>

        <div id="new-deals-chart"></div>

        <div class="info-container">
            <div class="info-holder">
                <span class="item-values">50% <img src="../content/web/tilelayout/handshake_512x512.png" class="arrow-class" /></span>
                <span class="text-indicator">New deals this year</span>
            </div>
        </div>
    </script>

    <script id="new-visitors" type="text/x-kendo-template">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <div class="info-holder">
                <span class="item-values">91694</span>
                <span class="text-indicator">New visitors this year</span>
            </div>
        </div>
    </script>

    <script id="chart-template" type="text/x-kendo-template">
        <div id="chart" style="height:100%; width:100%"></div>
    </script>


    <script id="expense" type="text/x-kendo-template">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <img src="../content/web/tilelayout/arrow_down_512x512.png" class="arrow-class" />
            <div class="info-holder">
                <span class="item-values">$973</span>
                <span class="text-indicator">Expense this period</span>
            </div>
        </div>
    </script>

    <script id="income" type="text/x-kendo-template">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <img src="../content/web/tilelayout/arrow_up_512x512.png" class="arrow-class" />
            <div class="info-holder">
                <span class="item-values">$5890</span>
                <span class="text-indicator">Income this period</span>
            </div>
        </div>
    </script>

    <script id="deals" type="text/x-kendo-template">
        <a class='k-button k-button-icon k-flat k-close-button'><span class='k-icon k-i-close'></span></a>
        <div class="info-container">
            <img src="../content/web/tilelayout/arrow_up_512x512.png" class="arrow-class" />
            <div class="info-holder">
                <span class="item-values">2745</span>
                <span class="text-indicator">Total deals</span>
            </div>
        </div>
    </script>

    <script>
        var VisitorsSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: function () {
                        return "../content/dataviz/dashboards/visitors.json";
                    },
                    dataType: "json"
                }
            },
            group: {
                field: "category", aggregates: [{ field: "customers", aggregate: "sum" }]
            },
        });

        function getChartData() {
            var chartData = [];
            var total = 0;
            var view = VisitorsSource.view();
            for (var idx = 0; idx < view.length; idx++) {
                total += view[idx].aggregates.customers.sum;
            }

            for (var idx = 0; idx < view.length; idx++) {
                chartData.push({
                    category: view[idx].value,
                    customersPc: Math.round(view[idx].aggregates.customers.sum / total * 100)
                });
            }
            return chartData;
        }

        VisitorsSource.fetch(function () {

            VisitorsSource.read();

            createCharts();
        });

        function createCharts() {
            $("#chart").kendoChart({
                title: { text: "Visitors" },
                dataSource: VisitorsSource,
                series: [{
                    type: "column",
                    field: "customers",
                    categoryField: "date",
                    name: "#= group.value # (close)"
                }],
                legend: {
                    position: "bottom"
                },
                valueAxis: {
                    labels: {
                        format: "{0}",
                        skip: 2,
                        step: 2
                    }
                },
                categoryAxis: {
                    labels: {
                        format: "MMM"
                    }
                },
                chartArea: {
                    background: "transparent" 
                },
            });

            $("#returning-chart").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: getChartData(),
                series: [{
                    type: "pie",
                    field: "customersPc",
                    categoryField: "category",
                    aggregate: "sum",
                    padding: 0,
                    color: "red"
                }],
                chartArea: {
                    background: "transparent"
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });

            $("#new-deals-chart").kendoChart({
                legend: {
                    visible: false
                },
                dataSource: getChartData(),
                series: [{
                    type: "pie",
                    field: "customersPc",
                    categoryField: "category",
                    aggregate: "sum",
                    padding: 0
                }],
                chartArea: {
                    background: "transparent"
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });
        }

        var mainLayout = $("#main-layout").kendoTileLayout({
            containers: [{
                colSpan: 2,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#income").html())
            }, {
                colSpan: 2,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#expense").html())
            }, {
                colSpan: 2,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#deals").html())
            }, {
                colSpan: 6,
                rowSpan: 2,
                header: {
                    template: "Customer Growth"
                },
                bodyTemplate: kendo.template($("#chart-template").html())
            }],
            columns: 6,
            width: 1000,
            columnsWidth: 210,
            rowsHeight: 150
        }).data("kendoTileLayout");


        var sideLayout = $("#side-layout").kendoTileLayout({
            containers: [{
                colSpan: 1,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#new-customers").html())
            }, {
                colSpan: 1,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#returning-customers").html())
            }, {
                colSpan: 1,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#new-deals").html())
            }, {
                colSpan: 1,
                rowSpan: 1,
                bodyTemplate: kendo.template($("#new-visitors").html())
            }],
            columns: 1,
            width: 350,
            rowsHeight: 150
        }).data("kendoTileLayout");

        var originalElement;
        var dropHint;

        var draggable = new kendo.ui.Draggable($("#side-layout"), {
            filter: ".k-tilelayout-item",
            autoScroll: true,
            group: "kendo-demo",
            hint: function (target) {
                var item = target;
                var width = item.width();
                var height = item.height();
                var clone = item.clone();

                clone.find(".k-button").hide();
                return clone.width(width).height(height);
            },
            dragstart: function (e) {
                originalElement = $(e.currentTarget).closest(".k-tilelayout-item");
                originalElement.addClass("k-state-active");
            },
            drag: function (e) {
                var elementUnderCursor = kendo.elementUnderCursor(e);
                var hint = e.sender.hint;
                var dropContainer;
                var containerBoundaries;
                var pixelsToLeftBorder;
                var pixelsToRightBorder;
                var direction;
                var newOrder;
                var clone;

                if (containsOrEqualTo(hint[0], elementUnderCursor)) {
                    hint.hide();

                    elementUnderCursor = kendo.elementUnderCursor(e);

                    if (!containsOrEqualTo($("#side-layout")[0], elementUnderCursor)) {

                        dropContainer = $(elementUnderCursor);
                        dropContainer = dropContainer.hasClass("k-tilelayout-item") ? dropContainer : dropContainer.closest(".k-tilelayout-item.k-card");

                        if (dropContainer.hasClass("k-tilelayout-item")) {
                            containerBoundaries = dropContainer[0].getBoundingClientRect();
                            pixelsToLeftBorder = e.clientX - containerBoundaries.left;
                            pixelsToRightBorder = containerBoundaries.right - e.clientX;
                            direction = pixelsToLeftBorder > pixelsToRightBorder ? "right" : "left";
                            newOrder = dropContainer.css("order");

                            if (dropHint && dropHint.attr("direction") !== direction) {
                                clone = dropHint.clone();
                                clone.css("order", newOrder);
                                dropHint.remove();
                                dropHint = clone;

                                insertHint(dropHint, dropContainer, direction);

                                dropHint.attr("direction", direction);
                            }
                        }
                    }
                    hint.show();
                }
            },
            dragend: function (e) {

                originalElement.removeClass("k-state-active");

                if (!dropHint) {
                    return;
                }
                var newOrder = dropHint.index();
                var container = e.currentTarget.closest(".k-tilelayout-item.k-card");
                var itemId = container.attr("id");
                var mainItems = mainLayout.items;
                var item = sideLayout.itemsMap[itemId];
                var sideItems = sideLayout.items;

                dropHint.remove();
                e.sender.hint.remove();
                dropHint = null;

                item.colSpan = 2;

                mainItems.splice(newOrder, 0, item);

                sideItems.splice(sideItems.indexOf(item), 1);

                recreateSetup(mainItems, sideItems);
            }
        });

        $("#main-layout").kendoDropTargetArea({
            filter: ".k-tilelayout-item",
            group: "kendo-demo",
            dragenter: function (e) {
                var dropContainer = $(e.dropTarget);
                var dropContainerBoundaries;
                var pixelsToLeftBorder;
                var pixelsToRightBorder;
                var direction;

                if (originalElement[0] != dropContainer[0]) {

                    dropContainerBoundaries = dropContainer[0].getBoundingClientRect();
                    pixelsToLeftBorder = e.clientX - dropContainerBoundaries.left;
                    pixelsToRightBorder = dropContainerBoundaries.right - e.clientX;
                    direction = pixelsToLeftBorder > pixelsToRightBorder ? "right" : "left";

                    if (dropHint) {
                        dropHint.remove();
                        dropHint = null;
                    }

                    originalElement.hide();

                    dropHint = createDropHint(dropContainer.css("order"));

                    originalElement.hide();

                    insertHint(dropHint, dropContainer, direction);
                }
            }
        });

        $("#main-layout").on("click", ".k-button", function (e) {
            var itemId = $(e.currentTarget).closest(".k-tilelayout-item").attr("id");
            var mainItems = mainLayout.items;
            var sideItems = sideLayout.items;
            var item = mainLayout.itemsMap[itemId];

            mainItems.splice(mainItems.indexOf(item), 1);
            sideItems.push(item);

            item.colSpan = 1;

            recreateSetup(mainItems, sideItems);
        });

        function createDropHint(order) {
            return $("<div class='k-layout-item-hint k-layout-item-hint-reorder'></div>")
                .css({
                    "order": order,
                    "grid-column-end": "span 2",
                    "grid-row-end": "span 1"
                });
        }

        function insertHint(dropHint, dropContainer, direction) {
            if (direction == "right") {
                dropHint.insertAfter(dropContainer);
            } else {
                dropHint.insertBefore(dropContainer);
            }
        }

        function containsOrEqualTo(parent, child) {
            try {
                return $.contains(parent, child) || parent == child;
            } catch (e) {
                return false;
            }
        }

        function recreateSetup(mainItems, sideItems) {
            for (var i = 0; i < Math.max(mainItems.length, sideItems.length); i++) {
                if (mainItems[i]) {
                    mainItems[i].order = i;
                }
                if (sideItems[i]) {
                    sideItems[i].order = i;
                }
            }

            mainLayout.setOptions({ containers: mainItems });
            sideLayout.setOptions({ containers: sideItems });
            createCharts();
        }

        $(window).on("resize", function () {
            kendo.resize($(".k-card-body"));
        });
    </script>
</div>

<style>
    .arrow-class {
        width: 36px;
        vertical-align: bottom;
        align-self: center;
    }

    .close-button {
        float: right;
    }

    .item-values {
        color: #00000099;
        font-size: 25px;
        font-weight: bold;
    }

    .info-container {
        display: flex;
        align-items: start;
    }

    .info-holder {
        margin-left: 10px;
        display: inline-flex;
        flex-direction: column;
    }

    .text-indicator {
        text-align: left;
        letter-spacing: 0.14px;
        color: #A2A2A2;
    }

    .k-close-button {
        position: absolute;
        right: 0;
        top: 0;
        margin: 5px;
    }

    .k-card-body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .k-chart {
        height: 75px;
        width: 75px;
    }

    #example {
        display: flex;
    }

    #side-layout {
        background-color: #D3D3D3;
        border-left: 2px solid #BCBCBC;
    }

    #main-layout {
        background-color: #F6F6F6;
    }

    #side-layout .k-button {
        display: none;
    }

    .k-tilelayout-item:active,
    .k-tilelayout-item.k-state-active {
        opacity: 0.2;
    }

    .k-metroblack .item-values,
    .k-black .item-values,
    .k-highcontrast .item-values,
    .k-materialblack .item-values,
    .k-moonlight .item-values {
        color: #fff;
    }
</style>


    
</body>
</html>