Skip to content

Commit 1ded96b

Browse files
zachradfzachradf
committed
expanding database and adding tooltips
1 parent 8d55fbc commit 1ded96b

File tree

4 files changed

+653
-33
lines changed

4 files changed

+653
-33
lines changed

‎public/svelte.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.svelte

+105-14
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,29 @@
44
import Editor from "./CodeEditor/Editor.svelte";
55
import StateManager from "./StateManager/StateManager.svelte";
66
import { onMount } from "svelte";
7+
import searchDoc from "./SearchProgram.js";
78
89
export let orientation = "columns";
910
export let localhost;
1011
1112
let value = "";
1213
let submit = false;
14+
let docsBool = false;
15+
16+
let documentation;
17+
let url;
18+
$: documentation = `https://svelte.dev/docs#${url}`;
19+
let textVal;
20+
function searchDocumentation(value) {
21+
let result;
22+
for (let item in searchDoc) {
23+
if (searchDoc[item][0].includes(value)) {
24+
console.log("congrats!");
25+
result = item;
26+
return result;
27+
}
28+
}
29+
}
1330
1431
onMount(async () => {
1532
//ST-2022-RJ==========BEGINNING - WORKING CODE FOR RESIZING DOM ELEMENTS USING DIVIDERS===========//
@@ -206,6 +223,25 @@
206223
return false;
207224
}
208225
};
226+
const handleKeyup2 = (event) => {
227+
submit = false;
228+
console.log("handlekeyup 2", textVal);
229+
230+
// event.preventDefault();
231+
232+
url = searchDocumentation(textVal);
233+
234+
console.log("this is the url", searchDocumentation(textVal));
235+
documentation = `https://svelte.dev/docs#"${url}/`;
236+
documentation = documentation;
237+
return false;
238+
};
239+
const handleDocuments = () => {
240+
// submit = false;
241+
console.log("the handleDocs is firing");
242+
docsBool = !docsBool;
243+
// return false;
244+
};
209245
</script>
210246

211247
<body class:orientation>
@@ -224,25 +260,53 @@
224260
<div id="editor-divider" />
225261
<div class="box d root">
226262
<form class="render-wrapper" on:submit|preventDefault={handleSubmit}>
227-
<input
228-
placeholder="Local Host Port"
229-
type="text"
230-
on:keyup|preventDefault={handleKeyup}
231-
/>
232-
{#if submit === true}
263+
{#if docsBool === true}
264+
<div class="parent grid-parent">
265+
<input
266+
class="child"
267+
placeholder="Search Documentation"
268+
type="text"
269+
bind:value={textVal}
270+
/>
271+
<button
272+
class="searchButton"
273+
on:click|preventDefault={handleKeyup2}>Search</button
274+
>
275+
<button class="backButton" on:click={handleDocuments}>Back</button
276+
>
277+
</div>
278+
<iframe class="docs" title="test" src={documentation} />
279+
{/if}
280+
{#if docsBool === false}
281+
<div class="parent grid-parent">
282+
<input
283+
class="child"
284+
placeholder="Local Host Port"
285+
type="text"
286+
on:submit|preventDefault={handleKeyup}
287+
/>
288+
<button
289+
type="button"
290+
class="childButton"
291+
on:click={handleDocuments}>Docs?</button
292+
>
293+
</div>
294+
{#if submit === true && docsBool === false}
295+
<iframe
296+
class="webpage"
297+
title="local host"
298+
src={localhost}
299+
frameBorder="0"
300+
/>
301+
{/if}
302+
233303
<iframe
234304
class="webpage"
235305
title="local host"
236306
src={localhost}
237307
frameBorder="0"
238308
/>
239309
{/if}
240-
<iframe
241-
class="webpage"
242-
title="local host"
243-
src={localhost}
244-
frameBorder="0"
245-
/>
246310
</form>
247311
</div>
248312
</div>
@@ -281,7 +345,13 @@
281345
width: 100%;
282346
z-index: 1;
283347
}
284-
348+
.docs {
349+
overflow: auto;
350+
/* resize: vertical; */
351+
height: 90%;
352+
width: 98%;
353+
color: "grey";
354+
}
285355
.wrapper-upper {
286356
height: 80%;
287357
display: flex;
@@ -320,7 +390,28 @@
320390
width: 100%;
321391
height: 1px;
322392
}
323-
393+
.childButton {
394+
color: grey;
395+
background: transparent;
396+
font-size: small;
397+
border: none;
398+
}
399+
.backButton {
400+
color: lightgray;
401+
background: transparent;
402+
border: 1px;
403+
font-size: small;
404+
border-style: inset;
405+
border-color: grey;
406+
}
407+
.searchButton {
408+
color: lightgray;
409+
background: transparent;
410+
border: 1px;
411+
font-size: small;
412+
border-style: inset;
413+
border-color: grey;
414+
}
324415
#filedir-divider {
325416
height: 100%;
326417
width: 1px;

‎src/CodeEditor/CodeMirror.svelte

+149-18
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,99 @@
1717
import "codemirror/addon/edit/closebrackets.js";
1818
import "codemirror/addon/edit/matchtags.js";
1919
import "codemirror/addon/edit/closetag.js";
20+
import searchDoc from "/Users/zacharyradford/Desktop/Codesmith/Projects/SvelteStorm/src/SearchProgram.js";
21+
22+
const fs = require("fs");
23+
const { ipcRenderer } = require("electron");
24+
export let word;
2025
import {
2126
editorCache,
2227
codeMirrorEditor,
2328
currentTabFilePath,
2429
} from "../Utilities/DirectoryStore.js";
2530
26-
const fs = require("fs");
27-
const { ipcRenderer } = require("electron");
28-
2931
export let value;
3032
export let language;
3133
export let filePath;
34+
let tipContent = "";
3235
let messageObj;
36+
let stillMouse = false;
37+
let hoverCounter = 0;
38+
let lastHoverCounter = 0;
39+
let lastWord;
40+
let src;
41+
let showToolTip;
3342
let containerElt;
43+
let showToolTripTransition = false;
44+
let noUpdate = false;
45+
46+
function searchDocumentation(value) {
47+
if (!value || value === " ") {
48+
tipContent = " ";
49+
return false;
50+
}
51+
// console.log("first console.log of search", value);
52+
for (let item in searchDoc) {
53+
// console.log("here is each item of search", item);
54+
if (searchDoc[item][0].includes(value)) {
55+
// console.log("here is each item, value", item, value);
56+
let result = {};
57+
result.tip = searchDoc[item][1][0];
58+
result.url = item;
59+
return result;
60+
}
61+
}
62+
tipContent = " ";
63+
// console.log(value, "is not in the docs!");
64+
return false;
65+
}
66+
67+
// let toolTipDiv;
68+
src = `https://svelte.dev/docs#`;
69+
function onHover() {
70+
let word;
71+
if (stillMouse && searchDocumentation(lastWord) !== false) {
72+
let searchObj = searchDocumentation(lastWord);
73+
src = `https://svelte.dev/docs#${searchObj.url}`;
74+
showToolTip = true;
75+
tipContent = `${searchObj.tip}`;
76+
// console.log("this is tipcont", tipContent);
77+
noUpdate = true;
78+
lastWord = word;
79+
}
80+
81+
var A1 = $codeMirrorEditor.getCursor().line;
82+
var A2 = $codeMirrorEditor.getCursor().ch;
83+
84+
var B1 = $codeMirrorEditor.findWordAt({ line: A1, ch: A2 }).anchor.ch;
85+
var B2 = $codeMirrorEditor.findWordAt({ line: A1, ch: A2 }).head.ch;
86+
87+
word = $codeMirrorEditor.getRange(
88+
{ line: A1, ch: B1 },
89+
{ line: A1, ch: B2 }
90+
);
91+
92+
lastWord = word;
93+
}
94+
95+
function hoverTest() {
96+
if (hoverCounter > lastHoverCounter) {
97+
lastHoverCounter = hoverCounter;
98+
return;
99+
}
100+
stillMouse = true;
101+
// console.log("hovering", hoverCounter, lastHoverCounter);
102+
showToolTip = true;
103+
// console.log("showToolTip is now true TOOLTIP should appear");
104+
105+
return;
106+
}
107+
108+
setInterval(() => {
109+
hoverTest();
110+
onHover();
111+
// console.log("this is the mouse hover console.log ", word, obj);
112+
}, 700);
34113
35114
onMount(async () => {
36115
$codeMirrorEditor = await CodeMirror.fromTextArea(containerElt, {
@@ -59,22 +138,27 @@
59138
});
60139
61140
afterUpdate(async () => {
62-
if (codeMirrorEditor) {
63-
// retrieve code from DirectoryStore.js and store cached code of the tab that the user clicked on
64-
const cacheCode = $editorCache[$currentTabFilePath];
65-
66-
// if file hans't been cached yet
67-
if (!cacheCode) {
68-
// cache the file and it's value (value=the raw code that'll appear in the editor)
69-
$editorCache[currentTabFilePath] = value;
70-
// set value of current editor to display the current code
71-
$codeMirrorEditor.setValue(value);
72-
} else {
73-
// if file already exists in the cache
74-
$codeMirrorEditor.setValue(cacheCode);
75-
$codeMirrorEditor.setOption("mode", language);
141+
if (!noUpdate && !showToolTripTransition) {
142+
if (codeMirrorEditor) {
143+
// retrieve code from DirectoryStore.js and store cached code of the tab that the user clicked on
144+
const cacheCode = $editorCache[$currentTabFilePath];
145+
146+
// if file hans't been cached yet
147+
if (!cacheCode) {
148+
// cache the file and it's value (value=the raw code that'll appear in the editor)
149+
$editorCache[currentTabFilePath] = value;
150+
// set value of current editor to display the current code
151+
$codeMirrorEditor.setValue(value);
152+
} else {
153+
// if file already exists in the cache
154+
$codeMirrorEditor.setValue(cacheCode);
155+
$codeMirrorEditor.setOption("mode", language);
156+
}
76157
}
77158
}
159+
noUpdate = false;
160+
showToolTripTransition = false;
161+
78162
console.log("afterUpdate complete");
79163
});
80164
@@ -84,7 +168,54 @@
84168
console.log("ipcRenderer complete");
85169
});
86170
171+
function handleMousMove(e) {
172+
// console.log("here is the event listener in handleMouseMove", e);
173+
if (hoverCounter - lastHoverCounter > 12) {
174+
stillMouse = false;
175+
showToolTripTransition = true;
176+
showToolTip = false;
177+
tipContent = " ";
178+
}
179+
hoverCounter++;
180+
// console.log("this is hover counter", hoverCounter);
181+
}
182+
function onClick() {
183+
window.open(
184+
`${src}`,
185+
"_blank",
186+
"top=900,left=200,frame=true,nodeIntegration=no"
187+
);
188+
}
189+
function onType() {
190+
// console.log("this is the key down event");
191+
hoverCounter += 13;
192+
}
87193
</script>
88194

89195
<svelte:head />
90-
<textarea class={$$props.class} bind:this={containerElt} />
196+
<div data-tooltip="tooltip" id="div_span" on:click={onClick}>
197+
{tipContent}
198+
</div>
199+
<div on:mousemove={handleMousMove} on:keydown={onType}>
200+
<textarea id="textarea" class={$$props.class} bind:this={containerElt} />
201+
</div>
202+
203+
<style>
204+
/* [data-tooltip] */
205+
#div_span {
206+
min-height: 2.7em;
207+
max-height: 2.7em;
208+
font-size: 65%;
209+
position: relative;
210+
cursor: help;
211+
background-color: rgba(35, 35, 65, 0.452);
212+
z-index: 2 !important;
213+
/* box-shadow: 2px 2px; */
214+
}
215+
216+
#textarea {
217+
/* width: 100%; */
218+
position: relative;
219+
z-index: 1;
220+
}
221+
</style>

0 commit comments

Comments
 (0)