hiding off-screen tangrams script

[hanbyul-here]

We've used this code in the Mapzen blog to go easy on the GPU when we have multiple Tangrams on one web page. Might be worth adding somethig similar to styleguide.

<script>
function elementIntersectsViewport (el) {
  var top = el.offsetTop;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    (top + height) > window.pageYOffset
  );
}

function hide(el) {
    iframe = el.getElementsByTagName("iframe")[0];
    if (typeof iframe != "undefined") el.removeChild(iframe);
}
function show(el) {
    iframe = el.getElementsByTagName("iframe")[0];
    if (typeof iframe == "undefined") {
        iframe = document.createElement("iframe");
        el.appendChild(iframe);
        iframe.style.height = "100%";
        iframe.src = el.getAttribute("source");
    }
}

// check visibility every half-second, hide off-screen demos to go easy on the GPU

setInterval( function() {
    var elements = document.getElementsByClassName("demo-wrapper"); //use your own div name here
    for (var i=0; i < elements.length; i++) {
        el = elements[i];
        if (elementIntersectsViewport(el) || (i == 0 && window.pageYOffset < 500)) {
            show(el);
            show(elements[i+1]);
            for (var j=0; j < elements.length; j++) {
                if (j != i && j != i+1) {
                    hide(elements[j]);
                }
            }
            break;
        }
    }
}, 500);

</script>

moved from https://github.com/mapzen/mapzen.js/issues/244

[rfriberg]

@meetar is working on an updated solution for this as part of the Tangram docs re-org. Leaving a note here so we remember to check back with him when he's done. Hopefully, we can pull that code in to the styleguide.

[meetar]

By way of update: the new solution for the docs turned out to be more docs-specific than I'd imagined, due to its specific use of the Tangram Play embed, whereas the other embeds were using a simpler Tangram Frame – but I'm still interested in finding a way to reconcile the two worlds, and at the very least in moving either or both solutions to the styleguide.