Skip to content

Commit f5b7262

Browse files
Advait-NairAdvait-Nair
committed
complete
1 parent c07a520 commit f5b7262

File tree

12 files changed

+639
-58
lines changed

12 files changed

+639
-58
lines changed

‎advasearch/src/functions.ts

Lines changed: 354 additions & 14 deletions
Large diffs are not rendered by default.

‎advasearch/src/lib/Button.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
const dispatch = createEventDispatcher();
55
66
export let icon = '';
7-
7+
export let blur = false;
88
99
</script>
1010

11-
<button class="flex center-flex" on:click={() => dispatch('click')}>
11+
<button class:blur class="flex center-flex" on:click={() => dispatch('click')}>
1212
{#if icon.trim() != ''}
1313
<span class="material-symbols-outlined">
1414
{icon}

‎advasearch/src/lib/DynamicBackground.svelte

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<script lang="ts">
2-
let noImages = 30;
2+
let noImages = 29;
33
let currentURI = getRandomImageURI();
44
let lastURI = currentURI;
55
let appear = true;
66
7+
let lastRandom:number;
78
function getRandomImageURI():string {
8-
return '/images/photo_' + Math.floor(Math.random() * noImages) + '.jpg';
9+
let random = Math.floor(Math.random() * noImages)
10+
while (lastRandom == random) {
11+
random = Math.floor(Math.random() * noImages)
12+
}
13+
return '/images/photo_' + random + '.jpg';
914
}
1015
1116
import { onMount, onDestroy } from 'svelte';
@@ -27,11 +32,11 @@
2732

2833
<div class="background">
2934
<div class="image-transitioner">
30-
<img src={lastURI} alt="background" class="background-image" />
35+
<img draggable="false" src={lastURI} alt="background" class="background-image" />
3136
</div>
3237
{#key currentURI}
3338
<div class="image-transitioner" class:appear>
34-
<img src={currentURI} alt="background" class="background-image" />
39+
<img draggable="false" src={currentURI} alt="background" class="background-image" />
3540
</div>
3641
{/key}
3742
</div>

‎advasearch/src/lib/SearchBar.svelte

Lines changed: 169 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import {createEventDispatcher, onMount} from 'svelte';
33
import type {DomainObject} from 'fn';
4-
import {processInput} from 'fn';
4+
import {processInput, colourCoded, allPossibleCombinations} from 'fn';
55
66
const dispatch = createEventDispatcher();
77
export let svalue = '';
@@ -11,55 +11,210 @@
1111
1212
export let placeholder = 'Search';
1313
export let icon = 'search';
14+
let conflict = false;
1415
1516
1617
let processedInput = value;
1718
let richOutput;
19+
let generatedURI = '';
20+
let suggestions:string[] = (allPossibleCombinations(packJSONData));
21+
let suggestionsFormatted:string[] = colourCoded(allPossibleCombinations(packJSONData));
1822
1923
let v:string;
2024
2125
function valueChanged(e:any) {
2226
v = v.replaceAll(' ', ' ').replaceAll('. ', ' ');
2327
value = e.target.value.replaceAll(' ', ' ').replaceAll('. ', ' ');
2428
richOutput = processInput(packJSONData, value);
29+
generatedURI = richOutput.generatedURI;
30+
suggestions = richOutput.autocomplete;
31+
suggestionsFormatted = richOutput.autocompleteFormatted;
32+
conflict = richOutput.conflict
33+
// console.log(suggestions)
34+
// console.log(generatedURI, richOutput);
2535
processedInput = richOutput.processedInput;
2636
dispatch('val', value);
2737
}
2838
2939
let pointerActive = true;
40+
let suggestionActive = true;
41+
// export let viewDomains = false;
3042
3143
// focus on input asap
3244
onMount(() => {
3345
input.focus();
3446
});
3547
36-
48+
function suggestionClick (i:number) {
49+
v = suggestions[i];
50+
valueChanged({target: {value: suggestions[i]}});
51+
suggestionActive = false;
52+
}
53+
54+
function decideSuggestionVisibility (e:any) {
55+
// if the target is not the suggestions div, hide suggestions
56+
if (!e.relatedTarget || !e.relatedTarget.classList.contains('suggestion')) {
57+
suggestionActive = false;
58+
}
59+
60+
}
61+
62+
let searchBegun = false;
63+
let timeout = false;
64+
65+
function searchInitiated(e:any) {
66+
e.preventDefault();
67+
// if (!conflict)
68+
searchBegun = true;
69+
suggestionActive = false;
70+
let currentURI = location.href
71+
location.href = (generatedURI)
72+
73+
setTimeout(() => {
74+
searchBegun = false;
75+
suggestionActive = true;
76+
timeout = true;
77+
location.assign(currentURI)
78+
setTimeout(
79+
() => timeout = false, 5000
80+
)
81+
}, 5000)
82+
}
3783
3884
</script>
3985

4086
<!-- <input spellcheck="false" autocapitalize="false" autocorrect="off" on:keypress={() => dispatch('val', value)} bind:value> -->
4187

4288
<!-- An invisible input will listen for keyboard input, while a span will render with color data -->
4389

44-
<div class="wrap">
45-
46-
<input bind:value={v} bind:this={input} class:pointerActive on:focus={() => pointerActive = false} on:blur={() => pointerActive = true} class="flex center-flex flex-col left-align" spellcheck="false" autocapitalize="false" autocorrect="off" autocomplete="off" on:input={valueChanged}>
47-
<div class="render-point flex center-flex center-align left-flex">
48-
<div class="whitespace-allower">
49-
{@html processedInput}
90+
<div class="search-aspect">
91+
<div class="wrap">
92+
<form on:submit={searchInitiated}>
93+
<input on:blur={(e) => {pointerActive = true; decideSuggestionVisibility(e)}} bind:value={v} bind:this={input} class:pointerActive on:focus={() => {pointerActive = false; suggestionActive = true;}} class="flex center-flex flex-col left-align" spellcheck="false" autocapitalize="false" autocorrect="off" autocomplete="off" on:input={valueChanged}>
94+
</form>
95+
<div class="render-point flex center-flex center-align left-flex">
96+
<div class="whitespace-allower">
97+
{@html processedInput}
98+
</div>
99+
</div>
100+
<div class="conflict flex center-flex top-pad center-align fw" class:warning-invisible={!conflict}>
101+
<span class="material-symbols-outlined">
102+
warning
103+
</span>
104+
Search syntax is incomplete. Submitting this search triggers Google.
105+
<!-- {generatedURI} -->
106+
</div>
107+
<div class="conflict flex center-flex top-pad center-align fw" class:warning-invisible={!timeout}>
108+
<span class="material-symbols-outlined">
109+
warning
110+
</span>
111+
Search timed out at 5000ms.
112+
<!-- {generatedURI} -->
113+
</div>
114+
<div class="placeholder flex center-flex" class:placeholder-visible={processedInput.trim() == '' && pointerActive}>
115+
<span class="material-symbols-outlined">
116+
{icon}
117+
</span>
118+
{placeholder}
50119
</div>
51120
</div>
52-
<div class="placeholder flex center-flex" class:placeholder-visible={processedInput.trim() == '' && pointerActive}>
53-
<span class="material-symbols-outlined">
54-
{icon}
55-
</span>
56-
{placeholder}
121+
<div class="suggestions" class:invisible={!suggestionActive}>
122+
{#key suggestionsFormatted}
123+
{#each suggestionsFormatted as suggestionFormatted, i}
124+
<div
125+
on:click={() => suggestionClick(i)}
126+
on:keydown={() => suggestionClick(i)}
127+
role="button"
128+
tabindex="0"
129+
class="flex center-flex center-align left-flex suggestion">
130+
{@html suggestionFormatted}
131+
</div>
132+
{/each}
133+
{/key}
57134
</div>
58135
</div>
59136

137+
<div class="telewrap flex center-align center-flex" class:invisible={!searchBegun}>
138+
139+
</div>
140+
60141
<style lang="scss">
142+
.telewrap {
143+
position: fixed;
144+
top: 0;
145+
left: 0;
146+
right: 0;
147+
bottom: 0;
148+
backdrop-filter: blur(10px);
149+
-webkit-backdrop-filter: blur(10px);
150+
transition: all 300ms ease;
151+
// z-index: 100;
152+
}
153+
.invisible {
154+
opacity: 0;
155+
pointer-events: none;
156+
backdrop-filter: blur(0);
157+
-webkit-backdrop-filter: blur(0);
158+
}
159+
.search-aspect {
160+
position: relative;
161+
}
162+
163+
.warning-invisible {
164+
pointer-events: none;
165+
opacity: 0;
166+
}
167+
168+
.conflict {
169+
transition: 200ms ease;
170+
font-size: 1rem;
171+
gap: 1rem;
172+
position: absolute;
173+
top: -3.5rem;
174+
user-select: none;
175+
background: rgba(181, 77, 12, 0.472);
176+
padding-top: 0.25rem;
177+
padding-bottom: 4.25rem;
178+
backdrop-filter: blur(10px);
179+
-webkit-backdrop-filter: blur(10px);
180+
bottom: 0;
181+
border-radius: 2rem;
182+
color: #ffdbcfe0;
183+
}
184+
185+
186+
.suggestions {
187+
transition: 200ms ease;
188+
position: absolute;
189+
top: 140%;
190+
left: 0;
191+
width:100%;
192+
background: #11111155;
193+
--webkit-backdrop-filter: blur(10px);
194+
backdrop-filter: blur(10px);
195+
color: #ffffffc8;
196+
z-index: 4;
197+
border-radius: 1rem;
198+
max-height: 15rem;
199+
overflow-y: auto;
200+
.suggestion {
201+
padding: 1rem 2.5rem;
202+
font-size: 1rem;
203+
cursor: pointer;
204+
transition: 200ms ease all;
205+
border-top: solid 1px #ffffff24;
206+
&:first-child {
207+
border-top: none;
208+
}
209+
&:hover {
210+
background: #11111183;
211+
}
212+
gap: .5rem;
213+
}
214+
}
215+
61216
.wrap {
62-
max-width: 90%;
217+
width: 100%;
63218
width: 45rem;
64219
height: calc(4rem + 2px);
65220
font-size: 2rem;

‎advasearch/src/lib/StatusBar.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
<!-- <Container> -->
4141
<div class="status-bar flex space-between">
4242
<div class="flex left-flex left-align flex-col">
43-
<img src="/three_strike_white.png" alt="logo" class="logo scaled-logo" />
43+
<img draggable="false" src="/three_strike_white.png" alt="logo" class="logo scaled-logo" />
4444
</div>
4545
<div class="time flex right-flex right-align flex-col">
4646
<div class="currentTime">{currentTime}</div>

‎advasearch/src/routes/Loader.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</script>
99

1010
<div class="flex center-flex flex-col splash-container" class:out={$done}>
11-
<img src="/three_strike.png" alt="Three Strike" />
11+
<img draggable="false" src="/three_strike.png" alt="Three Strike" />
1212
<div class="bottom-info flex flex-col center-flex">
1313
<p class="version">{getVersion()}</p>
1414
<p class="copyright">Copyright Adva Group, Advait Nair © 2024</p>

0 commit comments

Comments
 (0)