Turn.js responsive book

And fallback for older browsers

by Alain Martinez

HTML

<script src="http://www.turnjs.com/lib/turn.min.js"></script>
<div class="t">
  <div class="tc rel">
    <div class="book" id="book">
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag1.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag2.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag3.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag4.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag5.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag6.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag7.jpg" alt="" /></div>
      <div class="page"><img src="http://pm.paralleldevs.com/work-shares/rates-doc/pages/pag8.jpg" alt="" /></div>
    </div>
  </div>
</div>

CSS

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background-color: #333;
}

body.hide-overflow {
  overflow: hidden;
}


/* helpers */

.t {
  display: table;
  width: 100%;
  height: 100%;
}

.tc {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.rel {
  position: relative;
}


/* book */

.book {
  margin: 0 auto;
  width: 90%;
  height: 90%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.book .page {
  height: 100%;
}

.book .page img {
  max-width: 100%;
  height: 100%;
}

JavaScript

/*
 * Turn.js responsive book
 */

/*globals window, document, $*/

(function() {
  'use strict';

  var module = {
    ratio: 1.38,
    init: function(id) {
      var me = this;

      // if older browser then don't run javascript
      if (document.addEventListener) {
        this.el = document.getElementById(id);
        this.resize();
        this.plugins();

        // on window resize, update the plugin size
        window.addEventListener('resize', function(e) {
          var size = me.resize();
          $(me.el).turn('size', size.width, size.height);
        });
      }
    },
    resize: function() {
      // reset the width and height to the css defaults
      this.el.style.width = '';
      this.el.style.height = '';

      var width = this.el.clientWidth,
        height = Math.round(width / this.ratio),
        padded = Math.round(document.body.clientHeight * 0.9);

      // if the height is too big for the window, constrain it
      if (height > padded) {
        height = padded;
        width = Math.round(height * this.ratio);
      }

      // set the width and height matching the aspect ratio
      this.el.style.width = width + 'px';
      this.el.style.height = height + 'px';

      return {
        width: width,
        height: height
      };
    },
    plugins: function() {
      // run the plugin
      $(this.el).turn({
        gradients: true,
        acceleration: true
      });
      // hide the body overflow
      document.body.className = 'hide-overflow';
    }
  };

  module.init('book');
}());