pdf2htmlEX/share/pdf2htmlEX.js.in

/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab filetype=javascript : */
/** 
 * @license 
 * pdf2htmlEX.js: Core UI functions for pdf2htmlEX 
 * Copyright 2012,2013 Lu Wang <coolwanglu@gmail.com> and other contributors 
 * https://github.com/coolwanglu/pdf2htmlEX/blob/master/share/LICENSE 
 */

/*
 * Dependencies:
 * jQuery - use it only when necessary
 */

/*
 * Attention:
 * This files is to be optimized by closure-compiler, 
 * so pay attention to the forms of property names:
 *
 * string/bracket form is safe, won't be optimized:
 * var obj={ 'a':'b' }; obj['a'] = 'b';
 * name/dot form will be optimized, the name is likely to be modified:
 * var obj={ a:'b' }; obj.a = 'b';
 *
 * Either form can be used for internal objects, 
 * but must be consistent for each one respectively.
 *
 * string/bracket form must be used for external objects
 * e.g. DEFAULT_CONFIG, object stored in page-data
 * property names are part of the `protocol` in these cases.
 *
 */

'use strict';

(function(pdf2htmlEX, document){
  /** 
   * @const 
   * @struct
   */
  var CSS_CLASS_NAMES = {
    page_frame       : '@CSS_PAGE_FRAME_CN@',
    page_content_box : '@CSS_PAGE_CONTENT_BOX_CN@',
    page_data        : '@CSS_PAGE_DATA_CN@',
    background_image : '@CSS_BACKGROUND_IMAGE_CN@',
    link             : '@CSS_LINK_CN@',
    __dummy__        : 'no comma'
  };

  /** 
   * @const 
   * @dict
   */
  var DEFAULT_CONFIG = {
    // id of the element to put the pages in
    'container_id' : 'page-container',
    // id of the element for sidebar (to open and close)
    'sidebar_id' : 'sidebar',
    // id of the element for outline
    'outline_id' : 'outline',
    // class for the loading indicator
    'loading_indicator_cls' : 'loading-indicator',
    // How many page shall we preload that are below the last visible page
    'preload_pages' : 3,
    // how many ms should we wait before actually rendering the pages and after a scroll event
    'render_timeout' : 100,
    // zoom ratio step for each zoom in/out event
    'scale_step' : 0.9,
    // register global key handler
    'register_key_handler' : true,

    '__dummy__'        : 'no comma'
  };

  /** @const */
  var EPS = 1e-6;

  /************************************/
  /* utility function */
  function invert(ctm) {
    var det = ctm[0] * ctm[3] - ctm[1] * ctm[2];
    return [ ctm[3] / det
            ,-ctm[1] / det
            ,-ctm[2] / det
            ,ctm[0] / det
            ,(ctm[2] * ctm[5] - ctm[3] * ctm[4]) / det
            ,(ctm[1] * ctm[4] - ctm[0] * ctm[5]) / det
          ];
  };
  function transform(ctm, pos) {
    return [ctm[0] * pos[0] + ctm[2] * pos[1] + ctm[4]
           ,ctm[1] * pos[0] + ctm[3] * pos[1] + ctm[5]];
  };

  /**
   * @param{Element} ele
   */
  function get_page_number(ele) {
    return parseInt(ele.getAttribute('data-page-no'), 16);
  };

  function disable_dragstart(eles) {
    for(var i = 0, l = eles.length; i < l; ++i) {
      eles[i].addEventListener('dragstart', function() {
        return false;
      }, false);
    }
  };

  /** 
   * @constructor 
   * @param{Element} page The element for the page
   * @struct
   */
  function Page(page) {
    if(!page) return;

    this.loaded = false;
    this.shown = false;
    this.p = page; // page frame element

    this.n = get_page_number(page);

    // page size
    // Need to make rescale work when page_content_box is not loaded, yet
    this.original_height = page.clientHeight;     
    this.original_width = page.clientWidth;

    // content box
    var content_box = page.getElementsByClassName(CSS_CLASS_NAMES.page_content_box)[0];

    // if page is loaded
    if (content_box) {
      this.content_box = content_box;
      /*
       * scale ratios
       *
       * default_r : the first one
       * set_r : last set
       * cur_r : currently using
       */
      this.default_r = this.set_r = this.cur_r = this.original_height / content_box.clientHeight;
      this.page_data = JSON.parse(page.getElementsByClassName(CSS_CLASS_NAMES.page_data)[0].getAttribute('data-data'));

      this.ctm = this.page_data['ctm'];
      this.ictm = invert(this.ctm);

      this.loaded = true;
    }
  };
  $.extend(Page.prototype, /** @lends {Page.prototype} */ {
    /* hide & show are for contents, the page frame is still there */
    hide : function(){
      if(this.loaded) {
        this.content_box.classList.remove('opened');
        this.shown = false;
      }
    },
    show : function(){
      if (this.loaded) {
        if (! this.shown) {
          this.content_box.classList.add('opened');
          this.shown = true;
        }
      }
    },
    rescale : function(ratio) {
      if(ratio == 0) {
        this.set_r = this.default_r;
      } else {
        this.set_r = ratio;
      }

      if(Math.abs(this.set_r - this.cur_r) > EPS) {
        this.cur_r = this.set_r;
            
        var s = this.content_box.style;
        s.msTransform = s.webkitTransform = s.transform = 'scale('+this.cur_r.toFixed(3)+')';
      }

      var s = this.p.style;
      s.height = (this.original_height * this.set_r) + 'px';
      s.width = (this.original_width * this.set_r) + 'px';
    },
    /* return if any part of this page is shown in the container */
    is_visible : function() {
      var p = this.p;
      var pos = this.position();
      return !((pos[1] > p.clientHeight) || (pos[1] + p.parentNode.clientHeight < 0));
    },
    /* return if this page or any neighbor of it is visible */
    is_nearly_visible : function() {
      var p = this.p;
      var off = this.position();
      /* 
       * I should use the height of the previous page or the next page here
       * but since they are not easily available, just use '*2', which should be a good estimate in most cases
       */
      return !((off[1] > p.clientHeight * 2) || (off[1] + p.parentNode.clientHeight * 2 < 0));
    },
    /*
     * return the coordinate of the top-left corner of container
     * in our coordinate system
     * may or may not work if there are nodes between p.parentNode and p.offsetParent
     */
    position : function () {
      var p = this.p;
      var c = p.parentNode;
      return [ c.scrollLeft - p.offsetLeft - p.clientLeft
             , c.scrollTop - p.offsetTop - p.clientTop];
    },
    height : function () {
      return this.p.clientHeight;
    },
    width : function () {
      return this.p.clientWidth;
    }
  });

  /** 
   * export pdf2htmlEX.Viewer
   * @constructor
   */
  function Viewer(config) {
    /* do nothing if jQuery is not ready */
    if(!jQuery) return;

    this.config = $.extend({}, DEFAULT_CONFIG, config);
    this.pages_loading = [];
    this.init_before_loading_content();

    var _ = this;
    document.addEventListener('DOMContentLoaded', function(){
      _.init_after_loading_content();
    }, false);
  };

  $.extend(Viewer.prototype, /** @lends {Viewer.prototype} */ {
    scale : 1,

    init_before_loading_content : function() {
      /*hide all pages before loading, will reveal only visible ones later */
      this.pre_hide_pages();
    },

    init_after_loading_content : function() {
      this.sidebar = document.getElementById(this.config['sidebar_id']);
      this.outline = document.getElementById(this.config['outline_id']);
      this.container = document.getElementById(this.config['container_id']);
      this.loading_indicator = document.getElementsByClassName(this.config['loading_indicator_cls'])[0];

      
      {
        // Open the outline if nonempty
        var empty = true;
        var nodes = this.outline.childNodes;
        for(var i = 0, l = nodes.length; i < l; ++i) {
          var cur_node = nodes[i];
          if(cur_node.nodeName == 'UL') {
            empty = false;
            break;
          }
        }
        if(!empty)
          this.sidebar.classList.add('opened');
      }

      this.find_pages();


      // disable dragging of background images
      disable_dragstart(document.getElementsByClassName(CSS_CLASS_NAMES.background_image));

      if(this.config['register_key_handler'])
        this.register_key_handler();

      // register schedule rendering
      // renew old schedules since scroll() may be called frequently
      var _ = this;
      this.container.addEventListener('scroll', function() {
        _.schedule_render(true);
      }, false);

      // handle links
      this.container.addEventListener('click', function(e) {
        _.link_handler(e);
      }, false);
      this.outline.addEventListener('click', function(e) {
        _.link_handler(e);
      }, false);

      this.render();
    },

    /*
     * set up this.pages and this.page_map
     * pages is an array holding all the Page objects
     * page-Map maps an original page number (in PDF) to the corresponding index in page
     */
    find_pages : function() {
      var new_pages = [];
      var new_page_map = {};
      var nodes = this.container.childNodes;
      for(var i = 0, l = nodes.length; i < l; ++i) {
        var cur_node = nodes[i];
        if((cur_node.nodeType == Node.ELEMENT_NODE)
            && cur_node.classList.contains(CSS_CLASS_NAMES.page_frame)) {
          var p = new Page(cur_node);
          new_pages.push(p);
          new_page_map[p.n] = new_pages.length - 1;
        }
      }
      this.pages = new_pages;
      this.page_map = new_page_map;
    },

    load_page : function(idx, pages_to_preload, successCallback, errorCallback) {
      var pages = this.pages;
      if (idx >= pages.length)
        return;  // Page does not exist

      var cur_page = pages[idx];
      if (cur_page.loaded)
        return;  // Page is loaded

      if (this.pages_loading[idx])
        return;  // Page is already loading

      var new_loading_indicator = this.loading_indicator.cloneNode();
      new_loading_indicator.classList.add('active');

      var cur_page_ele = cur_page.p;
      cur_page_ele.appendChild(new_loading_indicator);

      var url = cur_page_ele.getAttribute('data-page-url');
      if (url) {
        this.pages_loading[idx] = true;       // Set semaphore

        /* closure variables */
        var _ = this;
        var _idx = idx;

        $.ajax({
          url: url,
          dataType: 'text'
        }).done(function(data){
          // find the page element in the data
          var div = document.createElement('div');
          div.innerHTML = data;

          var new_page = null;
          var nodes = div.childNodes;
          for(var i = 0, l = nodes.length; i < l; ++i) {
            var cur_node = nodes[i];
            if((cur_node.nodeType == Node.ELEMENT_NODE)
                && cur_node.classList.contains(CSS_CLASS_NAMES.page_frame)) {
              new_page = cur_node;
              break;
            }
          }

          // replace the old page with loaded data
          // the loading indicator on this page should also be destroyed
          var p = _.pages[_idx];
          _.container.replaceChild(new_page, p.p);
          p = new Page(new_page);
          _.pages[_idx] = p;

          p.hide();
          p.rescale(_.scale);

          // disable background image dragging
          disable_dragstart(new_page.getElementsByClassName(CSS_CLASS_NAMES.background_image));

          _.schedule_render(false);

          // Reset loading token
          delete _.pages_loading[idx];
          if (successCallback) successCallback(_.pages[_idx]);
        }).fail(function(jqXHR, textStatus, errorThrown){
          // Reset loading token
          delete _.pages_loading[_idx];
          if (errorCallback) errorCallback();
        });
      }
      // Concurrent prefetch of the next pages
      if (pages_to_preload === undefined)
        pages_to_preload = this.config['preload_pages'];

      if (--pages_to_preload > 0)
        this.load_page(idx+1, pages_to_preload);
    },

    pre_hide_pages : function() {
      /* pages might have not been loaded yet, so add a CSS rule */
      var s = '@media screen{.'+CSS_CLASS_NAMES.page_content_box+'{display:none;}}';
      var n = document.createElement('style');
      n.type = 'text/css';
      if (n.styleSheet) {
        n.styleSheet.cssText = s;
      } else {
        n.appendChild(document.createTextNode(s));
      }
      document.getElementsByTagName('head')[0].appendChild(n);
    },

    render : function () {
      /* hide (positional) invisible pages */
      var pl = this.pages;
      var pm = this.page_map;
      for(var i = 0, l = pl.length; i < l; ++i) {
        var p = pl[i];
        if(p.is_nearly_visible()){
          if (p.loaded) {
            p.show();
          } else {
            this.load_page(i);
          }
        } else {
          p.hide();
        }
      }
    },

    /*
     * renew: renew the existing schedule instead of using the old one
     */
    schedule_render : function(renew) {
      if(this.render_timer !== undefined) {
        if(!renew) return;
        clearTimeout(this.render_timer);
      }

      var _ = this;
      this.render_timer = setTimeout(function () {
        _.render();
        delete _.render_timer;
      }, this.config['render_timeout']);
    },

    /*
     * Handling key events, zooming, scrolling etc.
     */
    register_key_handler: function () {
      /* 
       * When user try to zoom in/out using ctrl + +/- or mouse wheel
       * handle this and prevent the default behaviours
       *
       * Code credit to PDF.js
       */
      var _ = this;
      // Firefox specific event, so that we can prevent browser from zooming
      window.addEventListener('DOMMouseScroll', function(e) {
        if (e.ctrlKey) {
          e.preventDefault();
          _.rescale(Math.pow(_.config['scale_step'], e.detail), true);
        }
      }, false);

      window.addEventListener('keydown', function(e) {
        var handled = false;
        /*
        var cmd = (e.ctrlKey ? 1 : 0)
                  | (e.altKey ? 2 : 0)
                  | (e.shiftKey ? 4 : 0)
                  | (e.metaKey ? 8 : 0)
                  ;
                  */
        var with_ctrl = e.ctrlKey || e.metaKey;
        var with_alt = e.altKey;
        switch (e.keyCode) {
          case 61: // FF/Mac '='
          case 107: // FF '+' and '='
          case 187: // Chrome '+'
            if(with_ctrl){
              _.rescale(1.0 / _.config['scale_step'], true);
              handled = true;
            }
            break;
          case 173: // FF/Mac '-'
          case 109: // FF '-'
          case 189: // Chrome '-'
            if(with_ctrl){
              _.rescale(_.config['scale_step'], true);
              handled = true;
            }
            break;
          case 48: // '0'
            if(with_ctrl){
              _.rescale(0, false);
              handled = true;
            }
            break;
          case 33: // Page UP:
            if (with_alt) { // alt-pageup    -> scroll one page up
              _.scroll_to(_.get_prev_page());
            } else { // pageup        -> scroll one screen up
              _.container.scrollTop -= _.container.clientHeight;
            }
            handled = true;
            break;
          case 34: // Page DOWN
            if (with_alt) { // alt-pagedown  -> scroll one page down
              _.scroll_to(_.get_next_page());
            } else { // pagedown      -> scroll one screen down
              _.container.scrollTop += _.container.clientHeight;
            }
            handled = true;
            break;
          case 35: // End
            if (with_ctrl) {
              _.container.scrollTop = _.container.scrollHeight;
              handled = true;
            }
            break;
          case 36: // Home
            if (e.with_ctrl) {
              _.container.scrollTop = 0;
              handled = true;
            }
            break;
        }
        if(handled) {
          e.preventDefault();
          return;
        }
      }, false);
    },

    // TODO
    get_next_page : function() { return undefined; },
    get_prev_page : function() { return undefined; },

    // TODO: offsetX/Y is by default the center of container
    // TODO consider scale on offsetX/Y
    rescale : function (ratio, is_relative, offsetX, offsetY) {
      if (! offsetX)
        offsetX = 0;
      if (! offsetY)
        offsetY = 0;

      // Save offset of the active page
      var active_page = this.get_active_page();
      if(!active_page) return;

      var active_page_ele = active_page.p;
      var prev_offset = [ active_page_ele.offsetLeft, active_page_ele.offsetTop ];
      var old_scale = this.scale;
      var pl = this.pages;

      // Set new scale
      if (ratio == 0) {
        this.scale = 1;
        is_relative = false;
      }
      else if (is_relative)
        this.scale *= ratio;
      else
        this.scale = ratio;

      // Rescale pages
      for(var i = 0, l = pl.length; i < l; ++i) 
          pl[i].rescale(this.scale);  

      var container = this.container;
      // Correct container scroll to keep view aligned while zooming
      var correction_top = active_page_ele.offsetTop - prev_offset[1];
      container.scrollTop += correction_top + offsetY;

      // Take the center of the view as a reference
      var prev_center_x = container.clientWidth / 2 - prev_offset[0];
      // Calculate the difference respect the center of the view after the zooming
      var correction_left = prev_center_x * (this.scale/old_scale - 1) + active_page_ele.offsetLeft - prev_offset[0];
      // Scroll the container accordingly to keep alignment to the initial reference
      container.scrollLeft += correction_left + offsetX;

      // some pages' visibility may be toggled, wait for next render()
      // renew old schedules since rescale() may be called frequently
      this.schedule_render(true);
    },

    fit_width : function () {
      var active_page = this.get_active_page();
      if(!active_page) return;

      this.rescale(this.container.clientWidth / active_page.width(), false);
      this.scroll_to(this.page_map[active_page.n], [0,0]);
    },

    fit_height : function () {
      var active_page = this.get_active_page();
      if(!active_page) return;

      this.rescale(this.container.clientHeight / active_page.height(), false);
      this.scroll_to(this.page_map[active_page.n], [0,0]);
    },

    // TODO: preserve active_page idx after rescaling
    get_active_page : function () {
      var pl = this.pages;
      for(var i = 0, l = pl.length; i < l; ++i) {
        if (pl[i].is_visible())
          return pl[i];
      }
      return;
    },
    /**
     * @param{Node} ele
     */
    get_containing_page : function(ele) {
      /* get the page obj containing obj */
      while(ele) {
        if((ele.nodeType == Node.ELEMENT_NODE)
            && ele.classList.contains(CSS_CLASS_NAMES.page_frame)) {
          /*
           * Get original page number and map it to index of pages
           * TODO: store the index on the dom element
           */
          var pn = get_page_number(/** @type{Element} */(ele));
          var pm = this.page_map;
          return (pn in pm) ? this.pages[pm[pn]] : null;
        }
        ele = ele.parentNode;
      }
      return null;
    },

    link_handler : function (e) {
      var target = e.currentTarget;

      var cur_pos = [0,0];

      // cur_page might be undefined, e.g. from Outline
      var cur_page = this.get_containing_page(target);
      if(cur_page)
      {
        cur_pos = cur_page.position();
        //get the coordinates in default user system
        cur_pos = transform(cur_page.ictm, [cur_pos[0], cur_page.height()-cur_pos[1]]);
      }

      var detail_str = /** @type{string} */ (target.getAttribute('data-dest-detail'));
      if(!detail_str) return;

      var ok = false;
      var detail = JSON.parse(detail_str);

      var target_page_no = detail[0];
      var page_map = this.page_map;
      if(!(target_page_no in page_map)) return;
      var target_page_idx = page_map[target_page_no];
      var target_page = this.pages[target_page_idx];

      var pos = [0,0];
      var upside_down = true;
      // TODO: zoom
      // TODO: BBox
      switch(detail[1]) {
        case 'XYZ':
          pos = [(detail[2] == null) ? cur_pos[0] : detail[2]
            ,(detail[3] == null) ? cur_pos[1] : detail[3]];
          ok = true;
          break;
        case 'Fit':
        case 'FitB':
          pos = [0,0];
          ok = true;
          break;
        case 'FitH':
        case 'FitBH':
          pos = [0, (detail[2] == null) ? cur_pos[1] : detail[2]];
          ok = true;
          break;
        case 'FitV':
        case 'FitBV':
          pos = [(detail[2] == null) ? cur_pos[0] : detail[2], 0];
          ok = true;
          break;
        case 'FitR':
          /* locate the top-left corner of the rectangle */
          pos = [detail[2], detail[5]];
          upside_down = false;
          ok = true;
          break;
        default:
          ok = false;
          break;
      }

      if(ok) {
        /* page should of type Page */
        var transform_and_scroll = function(page) {
          pos = transform(page.ctm, pos);
          if(upside_down) {
            pos[1] = page.height() - pos[1];
          }
          this.scroll_to(target_page_idx, pos);
        };

        if (target_page.loaded) {
          transform_and_scroll(target_page);
        } else {
          // TODO: scroll_to may finish before load_page

          // Scroll to the exact position once loaded.
          this.load_page(target_page_idx, undefined, transform_and_scroll);

          // In the meantime page gets loaded, scroll approximately position for maximum responsiveness.
          this.scroll_to(target_page_idx, [0,0]);
        }
        e.preventDefault();
      }
    }, 

    /* pos=[x,y], where (0,0) is the top-left corner */
    scroll_to : function(page_idx, pos) {
      var target_page = this.pages[page_idx];
      if(target_page === undefined) return;

      if(pos === undefined)
        pos = [0,0];

      var cur_target_pos = target_page.position();

      var container = this.container;
      container.scrollLeft += pos[0] - cur_target_pos[0];
      container.scrollTop += pos[1] - cur_target_pos[1];
    },

    __last_member__ : 'no comma' /*,*/
  });

  pdf2htmlEX['Viewer'] = Viewer;
})((window['pdf2htmlEX'] = window['pdf2htmlEX'] || {}), document);