examples/grid.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">
<title>Miew in a Grid</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="../packages/miew/dist/miew.min.css">
<style>
/* https://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio */
.aspect-ratio-wrapper {
width: 100%;
display: inline-block;
position: relative;
}
.aspect-ratio-wrapper:after {
padding-top: 75%;
display: block;
content: '';
}
.miew-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Miew in a Responsive Grid Layout</h1>
<p class="lead">This page demonstrates the molecular viewer and its ability to function inside a DIV element in a
responsive grid layout. Try to <b>resize the browser window</b> or load the page on a <b>mobile device</b>.
The text below is used solely for the purpose of the space filling and is not meant to be read.</p>
</header>
<h2>Aspirin</h2>
<p><a href="http://lipsum.com/">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
<span class="hidden-xs hidden-xs-inline">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</span></p>
<div class="row">
<div class="col-sm-6 col-md-8">
<div class="aspect-ratio-wrapper">
<div class="miew-container">
<div class="miew-message"><p>Please wait<br><small>while viewer is loading</small></p></div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<blockquote>
<p>Aspirin is used in the treatment of a number of conditions, including fever, pain, rheumatic fever, and
inflammatory diseases, such as rheumatoid arthritis, pericarditis, and Kawasaki disease. Lower doses of
aspirin have also been shown to reduce the risk of death from a heart attack, or the risk of stroke in
some circumstances.</p>
<footer><a href="https://en.wikipedia.org/wiki/Aspirin">wikipedia.org</a></footer>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h2>Adverse effects</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<span class="hidden-xs hidden-xs-inline">
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur?</span></p>
</div>
</div>
<hr/>
<footer>
Miew – 3D Molecular Viewer. Copyright (c) 2015–2022 EPAM Systems, Inc.
</footer>
</div>
<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>
<script>
(function() {
const { Miew } = miew
var viewer = new Miew(_.merge({
container: document.getElementsByClassName('miew-container')[0],
load: 'pubchem:aspirin',
reps: [{
mode: 'BS',
colorer: 'EL',
material: 'DF'
}],
settings: {
bg: { color: 0xCCCCCC },
fogFarFactor: 2,
fps: false,
axes: false,
resolution: 'high'
}
}, Miew.options.fromURL(window.location.search)));
if (viewer.init()) {
viewer.run();
}
})();
</script>
</body>
</html>