@21epub/epub-thirdparty
Version:
epub-thirdparty
172 lines (171 loc) • 7.64 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import * as dom from '../../../base/browser/dom.js';
import { CaseSensitiveCheckbox, RegexCheckbox, WholeWordsCheckbox } from '../../../base/browser/ui/findinput/findInputCheckboxes.js';
import { Widget } from '../../../base/browser/ui/widget.js';
import { RunOnceScheduler } from '../../../base/common/async.js';
import { FIND_IDS } from './findModel.js';
import { contrastBorder, editorWidgetBackground, editorWidgetForeground, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, widgetShadow } from '../../../platform/theme/common/colorRegistry.js';
import { registerThemingParticipant } from '../../../platform/theme/common/themeService.js';
export class FindOptionsWidget extends Widget {
constructor(editor, state, keybindingService, themeService) {
super();
this._hideSoon = this._register(new RunOnceScheduler(() => this._hide(), 2000));
this._isVisible = false;
this._editor = editor;
this._state = state;
this._keybindingService = keybindingService;
this._domNode = document.createElement('div');
this._domNode.className = 'findOptionsWidget';
this._domNode.style.display = 'none';
this._domNode.style.top = '10px';
this._domNode.setAttribute('role', 'presentation');
this._domNode.setAttribute('aria-hidden', 'true');
const inputActiveOptionBorderColor = themeService.getColorTheme().getColor(inputActiveOptionBorder);
const inputActiveOptionForegroundColor = themeService.getColorTheme().getColor(inputActiveOptionForeground);
const inputActiveOptionBackgroundColor = themeService.getColorTheme().getColor(inputActiveOptionBackground);
this.caseSensitive = this._register(new CaseSensitiveCheckbox({
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
isChecked: this._state.matchCase,
inputActiveOptionBorder: inputActiveOptionBorderColor,
inputActiveOptionForeground: inputActiveOptionForegroundColor,
inputActiveOptionBackground: inputActiveOptionBackgroundColor
}));
this._domNode.appendChild(this.caseSensitive.domNode);
this._register(this.caseSensitive.onChange(() => {
this._state.change({
matchCase: this.caseSensitive.checked
}, false);
}));
this.wholeWords = this._register(new WholeWordsCheckbox({
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
isChecked: this._state.wholeWord,
inputActiveOptionBorder: inputActiveOptionBorderColor,
inputActiveOptionForeground: inputActiveOptionForegroundColor,
inputActiveOptionBackground: inputActiveOptionBackgroundColor
}));
this._domNode.appendChild(this.wholeWords.domNode);
this._register(this.wholeWords.onChange(() => {
this._state.change({
wholeWord: this.wholeWords.checked
}, false);
}));
this.regex = this._register(new RegexCheckbox({
appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
isChecked: this._state.isRegex,
inputActiveOptionBorder: inputActiveOptionBorderColor,
inputActiveOptionForeground: inputActiveOptionForegroundColor,
inputActiveOptionBackground: inputActiveOptionBackgroundColor
}));
this._domNode.appendChild(this.regex.domNode);
this._register(this.regex.onChange(() => {
this._state.change({
isRegex: this.regex.checked
}, false);
}));
this._editor.addOverlayWidget(this);
this._register(this._state.onFindReplaceStateChange((e) => {
let somethingChanged = false;
if (e.isRegex) {
this.regex.checked = this._state.isRegex;
somethingChanged = true;
}
if (e.wholeWord) {
this.wholeWords.checked = this._state.wholeWord;
somethingChanged = true;
}
if (e.matchCase) {
this.caseSensitive.checked = this._state.matchCase;
somethingChanged = true;
}
if (!this._state.isRevealed && somethingChanged) {
this._revealTemporarily();
}
}));
this._register(dom.addDisposableNonBubblingMouseOutListener(this._domNode, (e) => this._onMouseOut()));
this._register(dom.addDisposableListener(this._domNode, 'mouseover', (e) => this._onMouseOver()));
this._applyTheme(themeService.getColorTheme());
this._register(themeService.onDidColorThemeChange(this._applyTheme.bind(this)));
}
_keybindingLabelFor(actionId) {
let kb = this._keybindingService.lookupKeybinding(actionId);
if (!kb) {
return '';
}
return ` (${kb.getLabel()})`;
}
dispose() {
this._editor.removeOverlayWidget(this);
super.dispose();
}
// ----- IOverlayWidget API
getId() {
return FindOptionsWidget.ID;
}
getDomNode() {
return this._domNode;
}
getPosition() {
return {
preference: 0 /* TOP_RIGHT_CORNER */
};
}
highlightFindOptions() {
this._revealTemporarily();
}
_revealTemporarily() {
this._show();
this._hideSoon.schedule();
}
_onMouseOut() {
this._hideSoon.schedule();
}
_onMouseOver() {
this._hideSoon.cancel();
}
_show() {
if (this._isVisible) {
return;
}
this._isVisible = true;
this._domNode.style.display = 'block';
}
_hide() {
if (!this._isVisible) {
return;
}
this._isVisible = false;
this._domNode.style.display = 'none';
}
_applyTheme(theme) {
let inputStyles = {
inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
inputActiveOptionForeground: theme.getColor(inputActiveOptionForeground),
inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground)
};
this.caseSensitive.style(inputStyles);
this.wholeWords.style(inputStyles);
this.regex.style(inputStyles);
}
}
FindOptionsWidget.ID = 'editor.contrib.findOptionsWidget';
registerThemingParticipant((theme, collector) => {
const widgetBackground = theme.getColor(editorWidgetBackground);
if (widgetBackground) {
collector.addRule(`.monaco-editor .findOptionsWidget { background-color: ${widgetBackground}; }`);
}
const widgetForeground = theme.getColor(editorWidgetForeground);
if (widgetForeground) {
collector.addRule(`.monaco-editor .findOptionsWidget { color: ${widgetForeground}; }`);
}
const widgetShadowColor = theme.getColor(widgetShadow);
if (widgetShadowColor) {
collector.addRule(`.monaco-editor .findOptionsWidget { box-shadow: 0 0 8px 2px ${widgetShadowColor}; }`);
}
const hcBorder = theme.getColor(contrastBorder);
if (hcBorder) {
collector.addRule(`.monaco-editor .findOptionsWidget { border: 2px solid ${hcBorder}; }`);
}
});