React-OpenSeaDragon

OpenSeaDragon Test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
  
</div>

CSS

html, body, #container, .app {
  margin:0; padding:0;
  width: 100%;
  height: 100%;
}
.ocd-div, .ocd, .openseadragon {width:100%; height:100%}

.ocd-div {
  position:relative;
  }

 
 .navigator-wrapper {position:fixed; left:5px; bottom:5px;
    background:#000; overflow:hidden; width:166px; height:178px; border:solid 0px #ffffff; z-index:3100 }
  #navigator {width:166px; height:178px; position:absolute; top:0;  }
  #navigator-displayregion {border-width:1px !important; border-color: #d53015 !important; z-index:4500 !important;
    background:rgba(0,0,0,.2) !important;}
  
  .ocd-toolbar {width:30px; display:block; position:fixed; top:50%; right:1px; list-style:none; z-index:110; padding:0;}
  .ocd-toolbar > li { list-style:none }
  .ocd-toolbar a {width:30px; height:30px; font-height:30px; display:block !important; background:rgba(0,0,0,.6); color:#fff; margin-bottom:1px; cursor:pointer; text-align:center}
  .ocd-toolbar a:hover {background: rgba(158, 46, 0, 0.6); text-decoration:none}
  .ocd-toolbar a > i {display:block; width:30px; height:30px; line-height:30px; font-size:15px; padding-top:2px}
  /* endregion */

React

// helper function to load image using promises
loadImage = (src)=> new Promise(function(resolve, reject) {
  var img = document.createElement('img')
  img.addEventListener('load', function(){  resolve(img) })
  img.addEventListener('error', function(err){ reject(404) })
  img.src = src;
});
             
class OpenSeaDragon extends React.Component {

    constructor(props) {
        super(props)
    }
    
    render() {
        let self = this;
        let { id } = this.props
        return (
            <div className="ocd-div" ref={node => {this.el = node;}}>
                <div className="navigator-wrapper c-shadow">
                    <div id="navigator"></div>
                </div>
                <div className="openseadragon" id={id}></div>
                <ul className="ocd-toolbar">
                    <li><a id="zoom-in"><i className="fa fa-plus"></i></a></li>
                    <li><a id="reset"><i className="fa fa-circle"></i></a></li>
                    <li><a id="zoom-out"><i className="fa fa-minus"></i></a></li>
                    <li><a id="full-page"><i className="fa fa-cog"></i></a></li>
                </ul>
            </div>
        )
    }

    initSeaDragon(){
        let self = this
        let { id, image, type } = this.props
        loadImage(image).then(data =>{
            self.viewer =  OpenSeadragon({
                id: id,
                visibilityRatio: 1.0,
                constrainDuringPan: false,
                defaultZoomLevel: 1,
                minZoomLevel: 1,
                maxZoomLevel: 10,
                zoomInButton: 'zoom-in',
                zoomOutButton: 'zoom-out',
                homeButton: 'reset',
                fullPageButton: 'full-page',
                nextButton: 'next',
                previousButton: 'previous',
                showNavigator: true,
                navigatorId: 'navigator',
                tileSources: {
                    type:type,
                    levels:[ { url:...