Backbone View Module for Globalizing JS Implementation of Box-view API

BoxViewViewer.js

/**
 * boxViewerView.js
 * --------------------------------------------------------------
 * This is the backbone view for generating the JS-implementation of the box-view api
 * document viewer.
 */

define([
  'backbone',
  'docviewer',
  'docviewer_fullscreen'
], function (Backbone) {
  var $controls,
      $controlsCenter,
      $prevBtn,
      $nextBtn,
      $zoomOutBtn,
      $zoomInBtn,
      $currPageNum,
      $numTotalPages,
      $fullScreenBtn;

  /*
   * Sets the global variables for this module based on current DOM context.
   * This way we don't have to keep pulling these values into each individual method and
   * cluttering up the code in the methods with unnecessary namespacing.
   */
  function setEventTargets (context) {
    $controls = context.parent().find('.controls-container');
    $controlsCenter = $controls.find('.controls-center');
    $prevBtn = $controls.find('.scroll-previous-btn');
    $nextBtn = $controls.find('.scroll-next-btn');
    $zoomOutBtn = $controls.find('.zoom-out-btn');
    $zoomInBtn = $controls.find('.zoom-in-btn');
    $currPageNum = $controls.find('.current-page');
    $numTotalPages = $controls.find('.total-pages');
    $fullScreenBtn = $controls.find('.fullscreen-btn');
  }

  var boxViewerView = Backbone.View.extend({

    initialize: function (options) {

      /* Setting defaults for this module. Only domContext has to always be specified
       when creating a viewer, the rest are optional */
      this.options = options || {};
      this.domContext = $(options.domContext);
      this.assetsUrl = this.options.assetsUrl || this.domContext.closest('.js-mce-content').data('document-assets-url');
      this.viewerLayout = this.options.viewerLayout || Crocodoc.LAYOUT_VERTICAL_SINGLE_COLUMN;
      this.enableTextSelection = this.options.enableTextSelection || false;

      this.render();
    },

    render: function () {
      var self = this;
      self.addBoxViewBodyClasses();
      self.buildViewer();

      self.Viewer.on('ready', function () {
        self.bindEvents();
      });

      self.Viewer.on('pagefocus', function (event) {
        self.bindViewerFocus(event)
      });
    },

    buildViewer: function () {
      // initialize Box viewer
      var self = this;

      var viewer = Crocodoc.createViewer(self.options.domContext, {
        url: self.assetsUrl,
        layout: self.viewerLayout,
        enableTextSelection: self.enableTextSelection,
        plugins: {
          fullscreen: {
            useFakeFullscreen: true
          }
        }
      });

      viewer.load();

      // make the Box viewer available to the entire module
      this.Viewer = viewer;
    },

    goToPage: function (pageNum) {
      this.Viewer.scrollTo(pageNum);
    },

    goToPrevPage: function () {
      this.Viewer.scrollTo(Crocodoc.SCROLL_PREVIOUS);
    },

    goToNextPage: function () {
      this.Viewer.scrollTo(Crocodoc.SCROLL_NEXT);
    },

    zoomOut: function () {
      this.Viewer.zoom(Crocodoc.ZOOM_OUT);
    },

    zoomIn: function () {
      this.Viewer.zoom(Crocodoc.ZOOM_IN);
    },

    goFullscreen: function () {
      if (this.Viewer.isFullscreenSupported()) {
        this.Viewer.enterFullscreen();
      }
    },

    bindEvents: function () {
      var self = this;

      $prevBtn.not('[disabled=disabled]').on('click', function () {
        self.goToPrevPage();
      });

      $nextBtn.not('[disabled=disabled]').on('click', function () {
        self.goToNextPage();
      });

      $zoomOutBtn.on('click', function () {
        self.zoomOut();
      });

      $zoomInBtn.on('click', function (event) {
        self.zoomIn();
      });

      $fullScreenBtn.on('click', function () {
        self.goFullscreen();
      });
    },

    addBoxViewBodyClasses: function () {
      var $body = $('body');

      /* add the classes necessary for the boxViewer only if those
       classes aren't already there */
      if (!$body.hasClass('theme-light')) {
        $body.addClass('theme-light ready top scrolling');
      }
    },

    bindViewerFocus: function (e) {
      var self = this;

      /* Here is where we set the variables and context to make each individual
       instance of the player function independently. */
      setEventTargets(self.options.domContext);

      // Adding page numbers for current and total page display at top of viewer
      var currentPageNumVal = e.data.page;
      var totalPages = e.data.numPages;
      $currPageNum.text(currentPageNumVal);
      $numTotalPages.text(totalPages);

      // Here we are setting the states of the prev and next buttons in the doc viewer
      var btnStates = {
        'middlePage': function () {
          $prevBtn.prop('disabled', false);
          $nextBtn.prop('disabled', false);
        },
        'firstPage': function () {
          $prevBtn.prop('disabled', true);
          $nextBtn.prop('disabled', false);
        },
        'lastPage': function () {
          $prevBtn.prop('disabled', false);
          $nextBtn.prop('disabled', true);
        },
        'onePageOnly': function () {
          $controlsCenter.hide();
        }
      };

      if (currentPageNumVal > 1 && currentPageNumVal < totalPages) {
        btnStates.middlePage();
      } else if (currentPageNumVal === 1) {
        if (totalPages === 1) {
          btnStates.onePageOnly();
        } else {
          btnStates.firstPage();
        }
      } else {
        btnStates.lastPage();
      }
    }
  });

  return boxViewerView;
});