dist/addons/fit/fit.js

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