examples/mobile.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>NGL - mobile</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        input {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <script src="../build/js/ngl.dev.js"></script>
    <script>
        document.addEventListener( "DOMContentLoaded", function(){
            var stage = new NGL.Stage( "viewport" );
            stage.viewer.container.addEventListener( "dblclick", function(){
                stage.toggleFullscreen();
            } );
            function handleResize(){ stage.handleResize(); }
            window.addEventListener( "orientationchange", handleResize, false );
            window.addEventListener( "resize", handleResize, false );
            var load = NGL.getQuery( "load" );
            if( load ) stage.loadFile( load, { defaultRepresentation: true } );
            document.getElementById( "pdbidInput" ).addEventListener( "keydown", function( e ){
                if( e.keyCode === 13 ){
                    stage.removeAllComponents();
                    var url = "rcsb://" + e.target.value + ".mmtf";
                    stage.loadFile( url, { defaultRepresentation: true } );
                    e.target.value = "";
                    e.target.blur();
                }
            } );
        } );
    </script>
    <div id="viewport" style="width:100%; height:100%;"></div>
    <div style="text-align:center; position:relative; bottom:3em;">
        <div style="display:inline-block;">
            <input id="pdbidInput" style="opacity:0.7; width:4em;"/>
        </div>
    </div>
</body>
</html>