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 container = this.rowContainer,
  29             subjectRow = this.rowContainer.firstElementChild,
  30             rows,
  31             contentBuffer,
  32             characterWidth,
  33             cols;
  34
  35         subjectRow.style.display = 'inline';
  36
  37         contentBuffer = subjectRow.textContent;
  38
  39         subjectRow.innerHTML = '&nbsp;'; /* Arbitrary character to calculate its dimensions */
  40         characterWidth = parseInt(subjectRow.offsetWidth);
  41         characterHeight = parseInt(subjectRow.offsetHeight);
  42
  43         subjectRow.style.display = '';
  44
  45         cols = container.offsetWidth / characterWidth;
  46         cols = parseInt(cols);
  47
  48         var parentElementStyle = window.getComputedStyle(this.element.parentElement),
  49             parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height')),
  50             elementStyle = window.getComputedStyle(this.element),
  51             elementPadding = parseInt(elementStyle.getPropertyValue('padding-top')) + parseInt(elementStyle.getPropertyValue('padding-bottom')),
  52             availableHeight = parentElementHeight - elementPadding,
  53             rowHeight = this.rowContainer.firstElementChild.offsetHeight;
  54
  55         rows = parseInt(availableHeight / rowHeight);
  56
  57         var geometry = {
  58                 'cols': cols,
  59                 'rows': rows
  60             };
  61
  62         return geometry;
  63     };
  64
  65     Xterm.prototype.fit = function () {
  66         var geometry = this.proposeGeometry();
  67
  68         this.resize(geometry.cols, geometry.rows);
  69     };
  70 });