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 define == 'function') {
  16         /*
  17          * Require.js is available
  18          */
  19         define(['../../src/xterm'], fit);
  20     } else {
  21         /*
  22          * Plain browser environment
  23          */
  24         fit(this.Xterm);
  25     }
  26 })(function (Xterm) {
  27     Xterm.prototype.proposeGeometry = function () {
  28         var parentElementStyle = window.getComputedStyle(this.element.parentElement),
  29             parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
  30             parentElementWidth = parseInt(parentElementStyle.getPropertyValue('width')),
  31             elementStyle = window.getComputedStyle(this.element),
  32             elementPaddingVer = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
  33             elementPaddingHor = parseInt(elementStyle.getPropertyValue('padding-right')) + parseInt(elementStyle.getPropertyValue('padding-left')),
  34             availableHeight = parentElementHeight - elementPaddingVer,
  35             availableWidth = parentElementWidth - elementPaddingHor,
  36             container = this.rowContainer,
  37             subjectRow = this.rowContainer.firstElementChild,
  38             contentBuffer = subjectRow.innerHTML,
  39             characterHeight,
  40             rows,
  41             characterWidth,
  42             cols,
  43             geometry;
  44
  45         subjectRow.style.display = 'inline';
  46         subjectRow.innerHTML = 'W'; // Common character for measuring width, although on monospace
  47         characterWidth = subjectRow.getBoundingClientRect().width;
  48         subjectRow.style.display = ''; // Revert style before calculating height, since they differ.
  49         characterHeight = parseInt(subjectRow.offsetHeight);
  50         subjectRow.innerHTML = contentBuffer;
  51
  52         rows = parseInt(availableHeight / characterHeight);
  53         cols = parseInt(availableWidth / characterWidth) - 1;
  54
  55         geometry = {cols: cols, rows: rows};
  56         return geometry;
  57     };
  58
  59     Xterm.prototype.fit = function () {
  60         var geometry = this.proposeGeometry();
  61
  62         this.resize(geometry.cols, geometry.rows);
  63     };
  64 });