Skip to content

C
crscd-view12.10
Switch branch/tag
Find file
Normal viewHistoryPermalink
detached.html 5.08 KB
Newer Older
YazhouChen's avatar
11
82002de4
 
YazhouChen committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 
<!DOCTYPE html>
<html>

  <head>
    <script src="../build/element-resize-detector.js"></script>
    <style>
        html, body {
            box-sizing: border-box;
        }
    </style>
  </head>

  <body>
    <div id="container">
        <button id="add-detached-object">Add detached (object)</button>
        <button id="add-detached-scroll">Add detached (scroll)</button>
        <button id="add-unrendered-object">Add unrendered (object)</button>
        <button id="add-unrendered-scroll">Add unrendered (scroll)</button>
        <button id="add-detached-unrendered-object">Add detached unrendered (object)</button>
        <button id="add-detached-unrendered-scroll">Add detached unrendered (scroll)</button>
    </div>

    <script>
        var container = document.querySelector('#container');
        var erdObject = elementResizeDetectorMaker({
            strategy: "object",
            debug: true
        });
        var erdScroll = elementResizeDetectorMaker({
            strategy: "scroll",
            debug: true
        });

        function addDetached(erd, container, content) {
            console.log("Creating detached element");
            var div = document.createElement("div");
            div.innerHTML = content;
            div.style.background = "grey";
            div.style.margin = "10px";
            erd.listenTo({
                callOnAdd: false
            }, div, function (el) {
                var style = getComputedStyle(el);
                console.log('el change size: ', style.width, style.height);
            });
            setTimeout(function () {
                console.log('Adding element to DOM');
                container.appendChild(div);
            }, 2000);
        }

        function addUnrendered(erd, container, content, n) {
            function add(erd, container, content) {
                console.log("Creating unrendered element");
                var div = document.createElement("div");
                div.innerHTML = content;
                div.style.background = "grey";
                div.style.margin = "10px";
                div.style.display = "none";
                div.style.position = "relative";
                container.appendChild(div);
                erd.listenTo({
                    callOnAdd: false
                }, div, function (el) {
                    var style = getComputedStyle(el);
                    console.log('el change size: ', style.width, style.height);
                });
                return div;
            }

            var divs = [];
            for (var i = 0; i < n; i++) {
                divs.push(add(erd, container, content));
            }

            setTimeout(function () {
                console.log('rendering elements');
                divs.forEach(function (div) {
                    div.style.display = "block";
                });
            }, 2000);
        }

        function addDetachedUnrendered(erd, container, content, n) {
            function add(erd, container, content) {
                console.log("Creating detached unrendered element");
                var div = document.createElement("div");
                div.innerHTML = content;
                div.style.background = "grey";
                div.style.margin = "10px";
                div.style.display = "none";
                div.style.position = "relative";
                erd.listenTo({
                    callOnAdd: false
                }, div, function (el) {
                    var style = getComputedStyle(el);
                    console.log('el change size: ', style.width, style.height);
                });
                return div;
            }

            var divs = [];
            for (var i = 0; i < n; i++) {
                divs.push(add(erd, container, content));
            }

            setTimeout(function () {
                console.log('Adding element to DOM');
                divs.forEach(function (div) {
                    container.appendChild(div);
                });
            }, 1000);

            setTimeout(function () {
                console.log('rendering elements');
                divs.forEach(function (div) {
                    div.style.display = "block";
                });
            }, 2000);
        }

        document.querySelector("#add-detached-object").onclick = addDetached.bind(null, erdObject, container, "detached object");
        document.querySelector("#add-detached-scroll").onclick = addDetached.bind(null, erdScroll, container, "detached scroll");
        document.querySelector("#add-unrendered-object").onclick = addUnrendered.bind(null, erdObject, container, "unrendered object", 1);
        document.querySelector("#add-unrendered-scroll").onclick = addUnrendered.bind(null, erdScroll, container, "unrendered scroll", 1);
        document.querySelector("#add-detached-unrendered-object").onclick = addDetachedUnrendered.bind(null, erdObject, container, "detached unrendered object", 1);
        document.querySelector("#add-detached-unrendered-scroll").onclick = addDetachedUnrendered.bind(null, erdScroll, container, "detached unrendered scroll", 1);
    </script>
  </body>
</html>