247 lines
9.4 KiB
TypeScript
247 lines
9.4 KiB
TypeScript
/**
|
|
* Copyright (c) 2018 The xterm.js authors. All rights reserved.
|
|
* @license MIT
|
|
*/
|
|
|
|
import type { Terminal } from '@xterm/xterm';
|
|
import type { IControlWindow } from '../controlBar';
|
|
|
|
export class AddonsWindow implements IControlWindow {
|
|
public readonly id = 'addons';
|
|
public readonly label = 'Addons';
|
|
|
|
private _addonsContainer: HTMLElement;
|
|
private _findNextInput: HTMLInputElement;
|
|
private _findPreviousInput: HTMLInputElement;
|
|
private _findResultsSpan: HTMLElement;
|
|
private _regexCheckbox: HTMLInputElement;
|
|
private _caseSensitiveCheckbox: HTMLInputElement;
|
|
private _wholeWordCheckbox: HTMLInputElement;
|
|
private _highlightAllMatchesCheckbox: HTMLInputElement;
|
|
private _serializeOutputPre: HTMLPreElement;
|
|
private _htmlSerializeOutputPre: HTMLPreElement;
|
|
private _htmlSerializeOutputResult: HTMLElement;
|
|
private _writeToTerminalCheckbox: HTMLInputElement;
|
|
private _imageStorageLimitInput: HTMLInputElement;
|
|
private _imageShowPlaceholderCheckbox: HTMLInputElement;
|
|
private _imageOptionsTextarea: HTMLTextAreaElement;
|
|
|
|
public build(container: HTMLElement): void {
|
|
// Heading
|
|
const heading = document.createElement('h3');
|
|
heading.textContent = 'Addons';
|
|
container.appendChild(heading);
|
|
|
|
// Description
|
|
const description = document.createElement('p');
|
|
description.textContent = 'Addons can be loaded and unloaded on a particular terminal to extend its functionality.';
|
|
container.appendChild(description);
|
|
|
|
// Addons container (checkboxes go here)
|
|
this._addonsContainer = document.createElement('div');
|
|
this._addonsContainer.id = 'addons-container';
|
|
container.appendChild(this._addonsContainer);
|
|
|
|
// Addons Control section
|
|
const controlHeading = document.createElement('h3');
|
|
controlHeading.textContent = 'Addons Control';
|
|
container.appendChild(controlHeading);
|
|
|
|
// SearchAddon section
|
|
this._buildSearchSection(container);
|
|
|
|
// SerializeAddon section
|
|
this._buildSerializeSection(container);
|
|
|
|
// ImageAddon section
|
|
this._buildImageSection(container);
|
|
}
|
|
|
|
private _buildSearchSection(container: HTMLElement): void {
|
|
const h4 = document.createElement('h4');
|
|
h4.textContent = 'SearchAddon';
|
|
container.appendChild(h4);
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.style.display = 'flex';
|
|
wrapper.style.flexDirection = 'column';
|
|
|
|
// Find next
|
|
const findNextLabel = document.createElement('label');
|
|
findNextLabel.textContent = 'Find next ';
|
|
this._findNextInput = document.createElement('input');
|
|
this._findNextInput.id = 'find-next';
|
|
findNextLabel.appendChild(this._findNextInput);
|
|
wrapper.appendChild(findNextLabel);
|
|
|
|
// Find previous
|
|
const findPrevLabel = document.createElement('label');
|
|
findPrevLabel.textContent = 'Find previous ';
|
|
this._findPreviousInput = document.createElement('input');
|
|
this._findPreviousInput.id = 'find-previous';
|
|
findPrevLabel.appendChild(this._findPreviousInput);
|
|
wrapper.appendChild(findPrevLabel);
|
|
|
|
// Results
|
|
const resultsDiv = document.createElement('div');
|
|
resultsDiv.textContent = 'Results: ';
|
|
this._findResultsSpan = document.createElement('span');
|
|
this._findResultsSpan.id = 'find-results';
|
|
resultsDiv.appendChild(this._findResultsSpan);
|
|
wrapper.appendChild(resultsDiv);
|
|
|
|
// Regex checkbox
|
|
const regexLabel = document.createElement('label');
|
|
this._regexCheckbox = document.createElement('input');
|
|
this._regexCheckbox.type = 'checkbox';
|
|
this._regexCheckbox.id = 'regex';
|
|
regexLabel.appendChild(this._regexCheckbox);
|
|
regexLabel.appendChild(document.createTextNode('Use regex'));
|
|
wrapper.appendChild(regexLabel);
|
|
|
|
// Case sensitive checkbox
|
|
const caseLabel = document.createElement('label');
|
|
this._caseSensitiveCheckbox = document.createElement('input');
|
|
this._caseSensitiveCheckbox.type = 'checkbox';
|
|
this._caseSensitiveCheckbox.id = 'case-sensitive';
|
|
caseLabel.appendChild(this._caseSensitiveCheckbox);
|
|
caseLabel.appendChild(document.createTextNode('Case sensitive'));
|
|
wrapper.appendChild(caseLabel);
|
|
|
|
// Whole word checkbox
|
|
const wholeWordLabel = document.createElement('label');
|
|
this._wholeWordCheckbox = document.createElement('input');
|
|
this._wholeWordCheckbox.type = 'checkbox';
|
|
this._wholeWordCheckbox.id = 'whole-word';
|
|
wholeWordLabel.appendChild(this._wholeWordCheckbox);
|
|
wholeWordLabel.appendChild(document.createTextNode('Whole word'));
|
|
wrapper.appendChild(wholeWordLabel);
|
|
|
|
// Highlight all matches checkbox
|
|
const highlightLabel = document.createElement('label');
|
|
this._highlightAllMatchesCheckbox = document.createElement('input');
|
|
this._highlightAllMatchesCheckbox.type = 'checkbox';
|
|
this._highlightAllMatchesCheckbox.id = 'highlight-all-matches';
|
|
this._highlightAllMatchesCheckbox.checked = true;
|
|
highlightLabel.appendChild(this._highlightAllMatchesCheckbox);
|
|
highlightLabel.appendChild(document.createTextNode('Highlight All Matches'));
|
|
wrapper.appendChild(highlightLabel);
|
|
|
|
container.appendChild(wrapper);
|
|
}
|
|
|
|
private _buildSerializeSection(container: HTMLElement): void {
|
|
const h4 = document.createElement('h4');
|
|
h4.textContent = 'SerializeAddon';
|
|
container.appendChild(h4);
|
|
|
|
const wrapper = document.createElement('div');
|
|
|
|
// Serialize button
|
|
const serializeBtn = document.createElement('button');
|
|
serializeBtn.id = 'serialize';
|
|
serializeBtn.textContent = 'Serialize the content of terminal';
|
|
wrapper.appendChild(serializeBtn);
|
|
|
|
// Write to terminal checkbox
|
|
const writeLabel = document.createElement('label');
|
|
this._writeToTerminalCheckbox = document.createElement('input');
|
|
this._writeToTerminalCheckbox.type = 'checkbox';
|
|
this._writeToTerminalCheckbox.id = 'write-to-terminal';
|
|
writeLabel.appendChild(this._writeToTerminalCheckbox);
|
|
writeLabel.appendChild(document.createTextNode('Write back to terminal'));
|
|
wrapper.appendChild(writeLabel);
|
|
|
|
// Serialize output
|
|
const outputDiv = document.createElement('div');
|
|
this._serializeOutputPre = document.createElement('pre');
|
|
this._serializeOutputPre.id = 'serialize-output';
|
|
outputDiv.appendChild(this._serializeOutputPre);
|
|
wrapper.appendChild(outputDiv);
|
|
|
|
// HTML serialize button
|
|
const htmlSerializeBtn = document.createElement('button');
|
|
htmlSerializeBtn.id = 'htmlserialize';
|
|
htmlSerializeBtn.textContent = 'Serialize the content of terminal in HTML';
|
|
wrapper.appendChild(htmlSerializeBtn);
|
|
|
|
// HTML serialize result
|
|
this._htmlSerializeOutputResult = document.createElement('span');
|
|
this._htmlSerializeOutputResult.id = 'htmlserialize-output-result';
|
|
wrapper.appendChild(this._htmlSerializeOutputResult);
|
|
|
|
// HTML serialize output
|
|
const htmlOutputDiv = document.createElement('div');
|
|
this._htmlSerializeOutputPre = document.createElement('pre');
|
|
this._htmlSerializeOutputPre.id = 'htmlserialize-output';
|
|
htmlOutputDiv.appendChild(this._htmlSerializeOutputPre);
|
|
wrapper.appendChild(htmlOutputDiv);
|
|
|
|
container.appendChild(wrapper);
|
|
}
|
|
|
|
private _buildImageSection(container: HTMLElement): void {
|
|
const h4 = document.createElement('h4');
|
|
h4.textContent = 'Image Addon';
|
|
container.appendChild(h4);
|
|
|
|
const details = document.createElement('details');
|
|
const summary = document.createElement('summary');
|
|
summary.textContent = 'image addon settings';
|
|
details.appendChild(summary);
|
|
|
|
const wrapper = document.createElement('div');
|
|
|
|
// Storage limit
|
|
const storageLimitLabel = document.createElement('label');
|
|
storageLimitLabel.textContent = 'Storage Limit (in MB) ';
|
|
this._imageStorageLimitInput = document.createElement('input');
|
|
this._imageStorageLimitInput.type = 'number';
|
|
this._imageStorageLimitInput.id = 'image-storagelimit';
|
|
storageLimitLabel.appendChild(this._imageStorageLimitInput);
|
|
wrapper.appendChild(storageLimitLabel);
|
|
wrapper.appendChild(document.createElement('br'));
|
|
|
|
// Show placeholder
|
|
const placeholderLabel = document.createElement('label');
|
|
placeholderLabel.textContent = 'Show Placeholder ';
|
|
this._imageShowPlaceholderCheckbox = document.createElement('input');
|
|
this._imageShowPlaceholderCheckbox.type = 'checkbox';
|
|
this._imageShowPlaceholderCheckbox.id = 'image-showplaceholder';
|
|
placeholderLabel.appendChild(this._imageShowPlaceholderCheckbox);
|
|
wrapper.appendChild(placeholderLabel);
|
|
wrapper.appendChild(document.createElement('br'));
|
|
wrapper.appendChild(document.createElement('br'));
|
|
|
|
// Ctor options
|
|
const optionsLabel = document.createElement('label');
|
|
optionsLabel.appendChild(document.createTextNode('Ctor options (applied on addon relaunch)'));
|
|
optionsLabel.appendChild(document.createElement('br'));
|
|
this._imageOptionsTextarea = document.createElement('textarea');
|
|
this._imageOptionsTextarea.id = 'image-options';
|
|
this._imageOptionsTextarea.cols = 40;
|
|
this._imageOptionsTextarea.rows = 12;
|
|
optionsLabel.appendChild(this._imageOptionsTextarea);
|
|
wrapper.appendChild(optionsLabel);
|
|
|
|
details.appendChild(wrapper);
|
|
container.appendChild(details);
|
|
}
|
|
|
|
public get addonsContainer(): HTMLElement {
|
|
return this._addonsContainer;
|
|
}
|
|
|
|
public get findNextInput(): HTMLInputElement {
|
|
return this._findNextInput;
|
|
}
|
|
|
|
public get findPreviousInput(): HTMLInputElement {
|
|
return this._findPreviousInput;
|
|
}
|
|
|
|
public get findResultsSpan(): HTMLElement {
|
|
return this._findResultsSpan;
|
|
}
|
|
}
|