Creating Search/Replace UI

This commit is contained in:
itdominator 2024-04-06 04:35:06 -05:00
parent 99e9e9d3ef
commit 8b555991e4
8 changed files with 177 additions and 1 deletions

View File

@ -23,8 +23,21 @@
</div>
<p id="top-gutter"
class="fixed-top"
data-toggle="popover"
data-placement="bottom">
</p>
<pre id="editor"></pre>
<p id="bottom-gutter"
class="fixed-bottom"
data-toggle="popover"
data-placement="top">
</p>
<!-- Buffers modal -->
<div class="modal" id="buffers-modal" tabindex="-1" role="dialog"
data-bs-theme="dark" data-bs-keyboard="false" data-bs-backdrop="static">
@ -85,6 +98,85 @@
<!-- Template Tags... -->
<template id="search-replace-template">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="resources/css/libs/bootstrap5/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/libs/bootstrap-icons/bootstrap-icons.css">
<!-- Site CSS -->
<!-- <link rel="stylesheet" href="resources/css/newton/context-menu.css"> -->
<link rel="stylesheet" href="resources/css/newton/main.css">
<link rel="stylesheet" href="resources/css/newton/overrides.css">
<style>
</style>
<section>
<div id="search-replace" class="row">
<div class="col">
<div class="row">
<div class="col col-3">
<label id="find-status-lbl">Find in Current Buffer</label>
</div>
<div class="col col-4">
<label id="find-options-lbl">Finding with Options: Case Insensitive</label>
</div>
<div class="col col-5 line-height-32px">
<button title="Close Panel" class="float-end" onclick="hideSearchReplace()">X</button>
<button title="Whole Word" class="float-end">
<img src="resources/imgs/whole-word.png" />
</button>
<button title="Only In Selection" class="float-end">
<img src="resources/imgs/only-in-selection.png" />
</button>
<button title="Match Case" class="float-end">Aa</button>
<button title="Use Regex" class="float-end">.*</button>
</div>
</div>
<div class="margin-tb-1em"></div>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<input id="find-entry" class="sr-input-expand" type="search"
title="Find in current buffer"
placeholder="Find in current buffer"
/>
</div>
<div class="col col-auto">
<button class="float-end width-8em">Find All</button>
<button class="float-end width-8em">Find</button>
</div>
</div>
</div>
</div>
<div class="margin-tb-1em"></div>
<div class="row">
<div class="col">
<input id="replace-entry" class="sr-input-expand" type="search"
title="Replace in current buffer"
placeholder="Replace in current buffer"
/>
</div>
<div class="col col-auto">
<button class="float-end width-8em">Replace All</button>
<button class="float-end width-8em">Replace</button>
</div>
</div>
</div>
</div>
</section>
</template>
<template id="lsp-config-template">
<style>
</style>

View File

@ -45,8 +45,42 @@
overflow-y: auto;
}
#bottom-gutter {
/*position: fixed;*/
bottom: 0px;
}
/* CLASSES */
.popover * {
background: rgba(0, 0, 0, 0.0);
color: rgba(255, 255, 255, 1);
}
.popover {
background: rgba(39, 43, 52, 0.64);
max-width: 80%;
width: 80%;
transform: translate(0px, 0px) !important;
margin: auto 12% !important;
}
.sr-input-expand {
width: 100%;
}
.line-height-32px {
line-height: 32px;
}
.margin-tb-1em {
margin-top: 1em;
margin-bottom: 1em;
}
.width-8em {
width: 8em;
}
.max-height-800 {
max-height: 800px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

View File

@ -175,6 +175,29 @@ class InputCheckboxContainer extends HTMLElement {
}
}
class SearchReplaceContainer extends HTMLElement {
constructor() {
super();
}
loadShaddowRoot(tag = "search-replace-template") {
let template = document.getElementById(tag);
let templateContent = template.content;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild( templateContent.cloneNode(true) );
}
loadSignals() {
let elm = this.shadowRoot.getElementById("find-entry");
elm.addEventListener("keyup", (eve) => {
findEntry(eve.value);
});
}
}
@ -212,3 +235,12 @@ class InputCheckbox extends InputCheckboxContainer {
this.loadShaddowRoot();
}
}
class SearchReplace extends SearchReplaceContainer {
constructor() {
super();
this.loadShaddowRoot();
this.loadSignals();
}
}

View File

@ -9,6 +9,7 @@ window.onload = (eve) => {
console.log("Loading editor...");
loadEditor();
loadSearchFind();
loadPreviewEditor();
loadInitialSession();
loadStartingFiles();
@ -21,6 +22,7 @@ const defineCustomElements = () => {
customElements.define("input-list", InputList, { extends: 'ul' });
customElements.define("input-list-item", InputListItem, { extends: 'li' });
customElements.define("input-checkbox", InputCheckbox, { extends: 'input' });
customElements.define("search-replace", SearchReplace, { extends: 'div' });
}
const loadLSPClientJSFiles = () => {
@ -34,6 +36,12 @@ const loadLSPClientJSFiles = () => {
// sendMessage(topic = "load_javascript", ftype = "", fhash = "", fpath = `${BASE_LINK}/python-service.js`, content = "");
}
const loadSearchFind = () => {
let elm = document.createElement("search-replace");
let options = {container: "html", content: elm, html: true};
$('#bottom-gutter').popover(options);
}
window.onerror = function(msg, url, line, col, error) {
// Note that col & error are new to the HTML 5 spec and may not be supported in every browser.
const suppressErrorAlert = false;

View File

@ -29,7 +29,9 @@ const editorCommands = [
name: "search",
bindKey: {win: "ctrl-f", mac: "ctrl-f"},
exec: function(editor) {
sendMessage("tggl_search_replace", "", "", "", "");
// let selectedStr = session.doc.getTextRange(editor.getSelectionRange());
$('#bottom-gutter').popover('toggle')
// sendMessage("tggl_search_replace", "", "", "", selectedStr);
},
readOnly: true
}, {

View File

@ -297,3 +297,11 @@ const toggleLineHighlight = () => {
highlightLine = !highlightLine;
editor.setHighlightActiveLine(highlightLine);
}
//
const hideSearchReplace = () => {
$('#bottom-gutter').popover('hide')
}