Commit c39690a8 authored by Pooja Patel's avatar Pooja Patel 😊
Browse files

Fixed duplicate search code

parent 5a74348b
......@@ -248,31 +248,6 @@ Refers to enabling or disabling options.
onfocusout="removeBlueFromSearchIcon('search-icon')" class="w-52" placeholder="Search for content">
</div>
<script>
function addBlueToSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~html
<div id="search" class="search">
<svg id="search-icon-input" class="search-input-icon feather feather-search"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="search" class="static w-50"
onfocus="addBlueToSearchIcon('search-icon-input')"
onfocusout="removeBlueFromSearchIcon('search-icon-input')"
placeholder="Search for content">
</div>
<script>
function addBlueToSearchIcon(id) {
let searchIcon = document.getElementById(id);
......@@ -298,7 +273,7 @@ Refers to enabling or disabling options.
</span>
<input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
placeholder="Search for content">
placeholder="Search for content" style="display: none;">
</div>
<script>
......@@ -344,6 +319,7 @@ Refers to enabling or disabling options.
</script>
<br>
~~~html
<h3 class="mt-8 mb-4">Collapsable Search</h3>
<div id="search" class="search mr-6 mb-2">
<span class="absolute inset-y-1 left-0 flex items-center px-1">
<svg class="search-icon cursor-pointer" id="collapsable-search-icon"
......@@ -356,61 +332,37 @@ Refers to enabling or disabling options.
</span>
<input type="search" id="collapsable-search" onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')" class="w-52"
placeholder="Search for content">
placeholder="Search for content" style="display: none;">
</div>
<script>
function addBlueToCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.add("text-gnome-blue-500");
}
function removeBlueFromCollapsableSearchIcon(id) {
let searchIcon = document.getElementById(id);
searchIcon.classList.remove("text-gnome-blue-500");
}
function toggleSearchInputOpacity(id) {
function toggleSearchInputDisplay(id) {
let collapsableSearch = document.getElementById(id);
if (collapsableSearch.style.opacity == 1) {
collapsableSearch.disabled = true;
collapsableSearch.style.opacity = 0;
console.log(collapsableSearch.style.display);
if (collapsableSearch.style.display === "block") {
hideSearchInput(id);
} else {
collapsableSearch.disabled = false;
collapsableSearch.style.opacity = 1;
console.log("displaying");
collapsableSearch.style.display = "block";
collapsableSearch.focus();
addBlueToCollapsableSearchIcon(id + "-icon");
}
}
</script>
~~~html
<div id="search" class="search">
<svg id="collapsable-search-icon" class="feather feather-search search-input-icon cursor-pointer z-10"
onclick="toggleSearchInputOpacity('collapsable-search-input')"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="search" id="collapsable-search-input" class="static w-50"
disabled="true"
onfocus="addBlueToCollapsableSearchIcon('collapsable-search-icon')"
onfocusout="removeBlueFromCollapsableSearchIcon('collapsable-search-icon')"
placeholder="Search for content">
</div>
<script>
function toggleSearchInputOpacity(id) {
function hideSearchInput(id) {
let collapsableSearch = document.getElementById(id);
if (collapsableSearch.style.opacity == 1) {
collapsableSearch.disabled = true;
collapsableSearch.style.opacity = 0;
removeBlueFromCollapsableSearchIcon(id + "-icon");
if (!collapsableSearch.value) {
collapsableSearch.style.display = "none";
}
}
function toggleSearchIconColor(id) {
let searchIcon = document.getElementById(id);
if (searchIcon.classList.contains("text-gnome-blue-500")) {
removeBlueFromCollapsableSearchIcon(id);
} else {
collapsableSearch.disabled = false;
collapsableSearch.style.opacity = 1;
collapsableSearch.focus();
addBlueToCollapsableSearchIcon(id);
}
}
......@@ -424,4 +376,4 @@ Refers to enabling or disabling options.
searchIcon.classList.remove("text-gnome-blue-500");
}
</script>
~~~
~~~
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment