-
Notifications
You must be signed in to change notification settings - Fork 1
Home
Mandar Deshpande edited this page Sep 29, 2020
·
1 revision
PDB 3D Complex is available as a JS plugin and as a Web-component (custom HTML Element)
1. Include the library script file in your web page
<!-- PDB 3D Complex JS and CSS file -->
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-3d-complex-2.0.0.css">
<script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-3d-complex-plugin-2.0.0.js"></script>
2. Instantiate plugin and provide parameters to render
<script>
//Create plugin instance
const pluginInstance = new Pdb3dComplexPlugin();
//Get element from HTML/Template to place the view
const viewContainer = document.getElementById('pdb-3d-complex');
//Call render method
//Parameters - container HTML element, PDB ID, Assembly ID, Summary view(Boolean, optional)
pluginInstance.render(viewContainer, '1lec', '1', false);
</script>
Check here the example demonstrating all the steps
1. Include the library style and script files in your web page
<!-- Required for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js" defer></script>
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8" defer></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
<!-- PDB-REDO web-component CSS and JS file -->
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-3d-complex-2.0.0.css">
<script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-3d-complex-component-2.0.0.js"></script>
*Until web components are natively supported by all browsers, it is necessary to use polyfills
2. Include PDB 3D complex as HTML Element and set 'pdb-id', 'assembly-id' and 'summary-view' attributes
<pdb-3d-complex pdb-id="1lec" assembly-id="1"></pdb-3d-complex>