Recycling Corner/Duplicate Pop-up

From Jmol
Revision as of 14:05, 23 October 2013 by AngelHerraez (talk | contribs) (moving long sections to subpages)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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 File icon.gifJSmolPopup.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 File icon.gifJSmol.min.js, Folder icon.gifj2s and Folder icon.gifjava

Contributors

AngelHerraez