addons/fit/fit.js

   1 /*
   2  *  Fit terminal columns and rows to the dimensions of its
   3  *  DOM element.
   4  *
   5  *  Approach:
   6  *    - Rows: Truncate the division of the terminal parent element height
   7  *            by the terminal row height
   8  *
   9  *    - Columns: Truncate the division of the terminal parent element width by
  10  *               the terminal character width (apply display: inline at the
  11  *               terminal row and truncate its width with the current number
  12  *               of columns)
  13  */
  14 (function (fit) {
  15     if (typeof exports === 'object' && typeof module === 'object') {
  16         /*
  17          * CommonJS environment
  18          */
  19         module.exports = fit.call(this);
  20     } else if (typeof define == 'function') {
  21         /*
  22          * Require.js is available
  23          */
  24         define(['../../src/xterm'], fit);
  25     } else {
  26         /*
  27          * Plain browser environment
  28          */
  29         fit(this.Xterm);
  30     }
  31 })(function (Xterm) {
  32     Xterm.prototype.proposeGeometry = function () {
  33         var parentElementStyle = window.getComputedStyle(this.element.parentElement),
  34             parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
  35             parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
  36             elementStyle = window.getComputedStyle(this.element),
  37             elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
  38             elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
  39             availableHeight = parentElementHeight - elementPaddingVer,
  40             availableWidth = parentElementWidth - elementPaddingHor,
  41             container = this.rowContainer,
  42             subjectRow = this.rowContainer.firstElementChild,
  43             contentBuffer = subjectRow.innerHTML,
  44             characterHeight,
  45             rows,
  46             characterWidth,
  47             cols,
  48             geometry;
  49
  50         subjectRow.style.display = 'inline';
  51         subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
  52         characterWidth = subjectRow.getBoundingClientRect().width;
  53         subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
  54         characterHeight = parseInt(subjectRow.offsetHeight);
  55         subjectRow.innerHTML = contentBuffer;
  56
  57         rows = parseInt(availableHeight / characterHeight);
  58         cols = parseInt(availableWidth / characterWidth) - 1;
  59
  60         geometry = {cols: cols, rows: rows};
  61         return geometry;
  62     };
  63
  64     Xterm.prototype.fit = function () {
  65         var geometry = this.proposeGeometry();
  66
  67         this.resize(geometry.cols, geometry.rows);
  68     };
  69 });