examples/basic-list-item-updated.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MegaList - Basic List Example</title>
    <link href="../src/vendor/perfect-scrollbar/css/perfect-scrollbar.css" media="all" rel="stylesheet" />

    <script type="text/javascript" src="../src/vendor/perfect-scrollbar/js/perfect-scrollbar.js"></script>
    <script type="text/javascript" src="../src/vendor/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../src/megalist.js"></script>
    <script type="text/javascript" src="./fixture.js"></script>

    <style>
        #exampleContainer {
            position: relative;
            width: 320px;
            height: 320px;
            border: 1px solid red;
        }
        .item {
            width: 320px;
            height: 90px;
            text-align: center;
        }
        .container .highlight-0 {background: #CCC}
        .container .highlight-1 {background: #FFF}
    </style>
    <script type="text/javascript">
        var itemIds = {};

        // https://stackoverflow.com/a/2450976
        function shuffle(array) {
            var currentIndex = array.length, temporaryValue, randomIndex;

            // While there remain elements to shuffle...
            while (0 !== currentIndex) {

                // Pick a remaining element...
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;

                // And swap it with the current element.
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }

            return array;
        }

        $(document).ready(function() {

            // initialise
            var megaList = new MegaList($('#exampleContainer'), {
                itemWidth: 320,
                itemHeight: 90,
                itemRenderFunction: function(id) {
                    console.debug("Requested from render function: ", id);
                    return $('<div class="item highlight-' + (id % 2) + '">' +
                            'Item #' + (id + 1) + ', updates: ' + itemIds[itemId] +
                        '</div>')[0];
                },
                itemUpdatedFunction: function(id, domNode) {
                    console.log("itemUpdatedFunction", id, itemIds[id]);
                    domNode.innerText = 'Item #' + (parseInt(id, 10) + 1) + ', updates: ' + itemIds[id];
                }
            });

            // example only: expose the megaList object in the console, so that users can play with it in their
            // console
            window.megaList = megaList;

            // example only: add some fake data
            var fixture = new FakeDataGenerator();
            for(var i = 0; i<400; i++) {
                var itemId = fixture.next();
                itemIds[itemId] = 0;
                megaList.add(itemId);
            }

            // render
            megaList.initialRender();
        });

        var updInt = false;
        function startUpdateInterval() {
            if (updInt) {
                clearInterval(updInt);
            }

            setInterval(function() {
                for (var i = 0; i < 100; i++) {
                    var randomItemId = shuffle(Object.keys(itemIds))[0];
                    itemIds[randomItemId]++;
                    megaList.itemUpdated(randomItemId);
                }
            }, 75);
        }
    </script>
</head>
<body>
    <button onclick="startUpdateInterval();">Start interval updates</button>
    <div class="container" id="exampleContainer"></div>
</body>
</html>