Home

PDB-REDO

PDB-REDO is available as a JS plugin and as a Web-component (custom HTML Element)

Setup

• PDB-REDO as JS plugin
• PDB-REDO as web component
• Working Examples

PDB-REDO as JS plugin

Steps to include PDB-REDO as a JavaScript plugin in a web application

1. Include the library script file in your web page

 <!-- PDB-REDO JS and CSS file -->
 <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-redo-2.0.0.css">
 <script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-redo-plugin-2.0.0.js"></script>

2. Instantiate plugin and provide parameters to render

<script>
  //Create plugin instance
  var pluginInstance = new PdbRedoPlugin();
  
  //Get element from HTML/Template to place the view
  var viewContainer = document.getElementById('pdb-redo');
  
  //Call render method
  //Parameters - container HTML element, PDB ID
  pluginInstance.render(viewContainer, '1cbs');
      
</script>

Check here the example demonstrating all the steps

PDB-REDO as Web-component

Steps to include PDB-REDO as a web-component in a web application

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-redo-2.0.0.css">
<script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-redo-component-2.0.0.js"></script>

*Until web components are natively supported by all browsers, it is necessary to use polyfills

2. Include PDB-REDO as HTML Element and set 'pdb-id' attribute

<pdb-redo pdb-id="1cbs"></pdb-redo>

Check here the example demonstrating all the steps

Working Example

• PDB-REDO Plugin demo
• PDB-REDO web-component demo