examples/fullscreen.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
<title>Miew in Fullscreen</title>
<link rel="stylesheet" href="../packages/miew/dist/miew.min.css">
<style>
html,
body,
#miew-container {
width: 100%;
height: 100%;
margin: 0;
background-color: #222;
}
.btn {
position: absolute;
width: 44px;
height: 44px;
background-color: #aaa;
color: #222;
border: 1px solid #222;
padding: 5px;
}
#fs {
right: 8px;
bottom: 8px;
}
#app {
left: 8px;
bottom: 8px;
}
</style>
<script src="https://unpkg.com/@babel/polyfill@7/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
<script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
<script src="../packages/miew/dist/miew.min.js"></script>
</head>
<body>
<div id="miew-container"></div>
<button id="fs" class="btn"><img src="data:image/gif;base64,R0lGODlhIAAgAIABAAAAAP///yH5BAEKAAEALAAAAAAgACAAAAJdjI+py+0PIwO01mmtynrxm3yAI24feYaltyIiZbbHC7tvnKr5PAZZ06kBhRjJzIhMKpfMpvO5JBZRhg6mJvXJbLvqTdfVbsXhL+4HtrI4Z9AVzWWv5XF4Wg3N65kFADs=" alt="FS" width="32" height="32" /></button>
<button id="app" class="btn"><b>APP</b></button>
<script>
function fullscreen(e) {
var req = e.requestFullscreen || e.mozRequestFullScreen || e.webkitRequestFullscreen || e.msRequestFullscreen;
if (req) {
req.call(e);
}
}
(function() {
const { Miew } = miew
var viewer = new Miew(_.merge({
load: '1CRN',
settings: {
axes: false,
fps: false,
},
},
Miew.options.fromURL(window.location.search),
));
if (viewer.init()) {
viewer.run();
}
document.getElementById('fs').addEventListener('click', function() {
fullscreen(document.getElementById('miew-container'));
});
document.getElementById('app').addEventListener('click', function() {
var pathname = window.location.pathname;
var slash = pathname.lastIndexOf('/');
slash = pathname.lastIndexOf('/', slash - 1);
if (slash >= 0) {
window.location.pathname = pathname.slice(0, slash);
}
});
})();
</script>
</body>
</html>