Recycling Corner/Duplicate Pop-up
Revision as of 14:05, 23 October 2013 by AngelHerraez (talk | contribs) (moving long sections to subpages)
Opening a duplicate of the model in a resizable pop-up window
The model, with is current state, is duplicated or cloned into a new (pop-up) window so it may be displayed at a larger size (and the user may resize that window at will).
The classic version (not shown here) is good for Jmol.js-based JmolApplet.
This version is for JSmol (in either HTML5, Java or WebGL modalities).
You need a portion of JavaScript code included in your page and a separate html file (for the pop-up), also with the relevant code.
1. Code in your page:
<script type="text/javascript">
var JSmolCloneData = {};
function cloneJSmol(JSmolObject) {
var t = JSmolObject._jmolType; //temp
if ( /_Canvas2D/.test(t) ) { t = 'HTML5'; }
else if ( /_Canvas3D/.test(t) ) { t = 'WebGL'; }
else if ( /_Applet/.test(t) ) { t = 'Java'; }
else { t = null; }
JSmolCloneData.type = t;
JSmolCloneData.state = Jmol.getPropertyAsString(JSmolObject, 'stateInfo');
window.open('JSmolPopup.htm','JSmolPopup','resizable, width=500, height=500');
}
</script>
<input type="button" value="clone JSmol in a popup window" onClick="cloneJSmol(myJmol)">
Note: myJmol should be changed to whatever you have named your JSmol object - and it is the object itself, not a text string.
2. Source code of the
JSmolPopup.htm file:
<!DOCTYPE html>
<html>
<title>cloned JSmol</title>
<head>
<meta charset="utf-8">
<style type="text/css">
html , body { height:100%; overflow:hidden; margin:0; padding:0; }
</style>
<script type="text/javascript" src="JSmol.min.js"></script>
<script type="text/javascript">
if (opener.JSmolCloneData.type == 'WebGL') {
document.writeln('<script src="js/JSmolThree.js" type="text/javascript"><'+'/script>');
document.writeln('<script src="js/JSmolGLmol.js" type="text/javascript"></'+'script>');
}
</script>
</head>
<body>
<script type="text/javascript">
var cloneInfo = {
height: '100%',
width: '100%',
isSigned: false,
jarFile: 'JmolApplet0.jar',
jarPath: 'java',
j2sPath: 'j2s',
script: opener.JSmolCloneData.state.replace(/zoomLarge true/i,'zoomLarge false'),
use: opener.JSmolCloneData.type
};
Jmol.getApplet("JSmolClone", cloneInfo);
</script>
</body>
Note: you need to adjust the paths to
JSmol.min.js,
j2s and
java