API Docs for: 0.2.0-beta5
Show:

File: src\viewport.js

/**
 * @module Lyria
 */
define('lyria/viewport', ['root', 'jquery'], function(root, $) {
  'use strict';

  return (function() {
    
    
  /**
   * @class Viewport
   * @constructor
   */
    function Viewport(container, options) {
      var defaultOptions = {
        parent: null,
        trigger: {
          element: window,
          event: 'resize'
        },
        scaleMode: 'scaleToFit'
      };
      
      options = $.extend(options, defaultOptions);
      
      /**
       * The viewport width
       *
       * @property width
       * @type {Number} 
       * @default 800
       */
      this.width = 800;
      
      /**
       * The viewport height
       * 
       * @property height
       * @type {Number}
       * @default 600 
       */
      this.height = 600;
      
      this.transforms = {};
      
      this.scaleMode = options.scaleMode;
      
      // Defaults container to the string 'viewport'
      if (container == null) {
        container = 'viewport';
      }

      /**
       * The viewport element (jQuery object)
       *
       * @property $element
       * @type {jQuery} 
       */
      if ($('#' + container).length > 0) {
        this.$element = $('#' + container);
      } else {
        var createdElement = $(root.document.createElement('div')).attr('id', container).attr('class', 'viewport');
        
        if (options.parent) {
          $(options.parent).prepend(createdElement);
        } else {
          $('body').prepend(createdElement);
        }
        
        this.$element = $('#' + container);
      }
      
      var self = this;
      $(options.trigger.element).on(options.trigger.event, function() {
        var scaleFactor = 0;
        var scaleExp = 0;
        
        switch (self.scaleMode) {
          // TODO: Seperate scaleToFit from scaleHeightToFit
          case 'scaleToFit':
          case 'scaleHeightToFit':
            if (self.height > $(options.trigger.element).innerHeight()) {
              scaleFactor = $(options.trigger.element).innerHeight() / self.height;
              scaleExp = 'scale(' + scaleFactor + ', ' + scaleFactor + ')';
        
              self.$element.css('transform', scaleExp);
            }
            break;
          case 'scaleWidthToFit':
            if (self.width > $(options.trigger.element).innerWidth()) {
              scaleFactor = $(options.trigger.element).innerWidth() / self.width;
              scaleExp = 'scale(' + scaleFactor + ', ' + scaleFactor + ')';
        
              self.$element.css('transform', scaleExp);
            }
            break;
          default: break;
        }
      });
    }
    
    /**
     * Adds a behaviour which will be triggered on certain events
     * 
     * @method behaviour
     * @param {Object} fn
     */
    Viewport.prototype.behaviour = function(fn) {
      
    };
    
    /**
     * Reset all CSS transforms on the viewport
     * 
     * @method resetTransforms 
     */
    Viewport.prototype.resetTransforms = function() {
      this.transforms = {};
    };
    
    /**
     * Updated CSS transforms on the viewport
     *  
     * @method updateTransforms
     */
    Viewport.prototype.updateTransforms = function() {
      if ($.isEmptyObject(this.transforms)) {
        return;
      }
      
      this.$element.css('transform', this.transforms.join(' '));
    };
    
    /**
     * Scales the viewport
     * 
     * @method scale
     * @param {Object} scaleX
     * @param {Object} scaleY
     */
    Viewport.prototype.scale = function(scaleX, scaleY) {
      if (scaleX == null) {
        return;
      }
      
      if (scaleY == null) {
        scaleY = scaleX;
      }
      
      this.transforms.scale = this.transforms.scale || {};
      this.transforms.scale.x = scaleX;
      this.transforms.scale.y = scaleY;
      
      this.$element.css('transform', '');
    };
    
    /**
     * Sets an origin for the viewport
     * 
     * @method origin
     * @param {Number} originX
     * @param {Number} originY
     */
    Viewport.prototype.origin = function(originX, originY) {
      
    };
    
    /**
     * Centers the viewport
     *  
     * @method center
     */
    Viewport.prototype.center = function() {
      
    };
    
    /**
     * Rotate the viewport
     * 
     * @method rotate
     * @param {Number} angle
     */
    Viewport.prototype.rotate = function(angle) {
      if (angle == null) {
        return;
      }
      
      this.transforms.rotate = angle;
      
      this.$element.css('transform', 'rotate(' + angle + ')');
    };
    
    return Viewport;
    
  })();
});