+ {options.autoCompleteBoxEnabled && (
+
+ {autoCompleteOptions.map((option, index) => (
+ - {
+ handleAutoCompleteSelect(option);
+ }}
+ onMouseEnter={() => setFocusedOptionIndex(index)}
+ >
+ {option}
+
+ ))}
+
+ )}
+
+ )}
+ >
+ );
+};
+
+export default Search;
diff --git a/src/content-handlers/iiif/modules/uv-pagingheaderpanel-module/css/styles.less b/src/content-handlers/iiif/modules/uv-pagingheaderpanel-module/css/styles.less
index f2bbdb645..182ed1924 100644
--- a/src/content-handlers/iiif/modules/uv-pagingheaderpanel-module/css/styles.less
+++ b/src/content-handlers/iiif/modules/uv-pagingheaderpanel-module/css/styles.less
@@ -2,193 +2,297 @@
.uv {
.headerPanel {
- color: @text-secondary-color;
+ .pagingHeaderPanelLeftOptions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 30px;
+ }
- button.btn.imageBtn {
- padding-left: 2px;
- padding-right: 2px;
-
- &.first,
- &.prev,
- &.next,
- &.last {
- i {
- background-color: @gray;
- &:hover {
- background-color: @gray-dark;
- }
- }
- }
+ color: @text-secondary-color;
- &.disabled,
- &.disabled:hover,
- &.disabled i,
- &.disabled i:hover {
- background-color: transparent;
- }
+ .slide-out-container {
+ height: 30px;
+ display: flex;
+ transition:
+ max-width 0.1s cubic-bezier(0.4, 0, 0.6, 1),
+ opacity 0.2s ease-out;
+ opacity: 0;
+ overflow: hidden;
+ position: relative;
+ align-items: center;
}
- .centerOptions {
- .image-selectionbox-options {
- float: left;
- margin: 0;
- }
+ .slide-out-container.avisible {
+ opacity: 1;
+ }
- .image-selectionbox {
- height: 30px;
- }
+ /* Prevent content wrapping */
+ .slide-out-container > * {
+ white-space: nowrap;
+ align-items: center;
+ }
- .prevOptions {
- float: left;
- margin: 0 15px 0 0;
- }
+ .pager .search-new {
+ display: flex; /* Use flexbox to arrange elements in a row */
+ justify-content: space-between; /* Distribute space evenly between the elements */
+ align-items: center; /* Vertically center the items */
+ height: 30px; /* Set the height of the parent container */
+ }
- .mode {
- float: left;
- margin: 12px 0 0;
- }
+ .search-form {
+ display: flex;
+ align-items: center; /* Vertically center the form elements */
+ height: 100%; /* Ensure the form takes up the full height of the parent */
+ margin: 0; /* Remove any default margin from the form */
+ position: relative; /* To position the autocomplete dropdown relative to the form */
+ }
- .search {
- float: left;
- margin: 6px 0 0 5px;
- width: auto;
+ .search-input-container {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ margin-right: 8px;
+ margin-left: 8px;
+ position: relative;
+ }
- .searchText {
- border: none;
- padding: 0 0 0 2px;
- }
- }
+ .search-input {
+ padding: 0 4px;
+ // border: 1px solid @gray;
+ border: none;
+ border-radius: 0;
+ outline: none;
+ z-index: 10; /* Ensures the input is above the dropdown */
+ text-align: right;
+ color: black;
+ background-color: white;
+ }
- .nextOptions {
- float: left;
- margin: 0 0 0 15px;
- }
+ .dropdown-portal {
+ position: fixed;
+ z-index: 1000;
+ }
- .mode {
- input {
- float: left;
- }
+ .autocomplete-dropdown {
+ position: absolute;
+ color: black;
+ background-color: white;
+ border-radius: 0;
+ max-height: 150px;
+ overflow-y: auto;
+ z-index: 100;
+ margin-top: 0;
+ padding: 0;
+ list-style: none;
+ }
- label {
- clear: none;
- width: auto;
- margin: 0;
- padding: 0;
- float: left;
- font-size: @font-size-small;
- line-height: 18px;
- text-align: right;
-
- &.disabled {
- color: @disabled;
- }
- }
- }
+ .autocomplete-dropdown li {
+ padding: 4px 7px;
+ cursor: pointer;
+ overflow: hidden;
+ }
- &.modeOptionsDisabled {
- width: 280px;
- }
+ .autocomplete-dropdown li:hover {
+ background-color: @gray;
+ }
- .autocompleteText {
- width: 30px;
- height: 19px;
- line-height: 19px;
- float: left;
- font-size: @font-size-small;
- padding-inline: 2px;
- padding-block: 0;
- margin-top: 6px;
- color: black;
- background-color: white;
- border: none;
- }
+ .focused-option {
+ background-color: @gray;
+ }
- .autocomplete {
- position: absolute;
- background: #fff;
- width: 60px;
- border: 2px solid @brand-primary-lighter;
- list-style-type: none;
- -webkit-margin-before: 0;
- -webkit-margin-after: 0;
- -webkit-margin-start: 0;
- -webkit-margin-end: 0;
- -webkit-padding-start: 0;
- margin: 0;
- padding: 0;
- max-height: 150px;
- overflow: hidden auto;
- z-index: 1000;
-
- .result {
- padding: 4px;
- width: 270px;
- overflow: hidden;
-
- &.loading {
- background-image: data-uri(@loader-white-bg);
- background-repeat: no-repeat;
- background-position: 4px 4px;
- height: 25px;
- }
-
- &.selected {
- background: @gray-lighter;
- }
- }
- }
+ .total-label {
+ margin-left: 4px;
}
+ }
- .rightOptions {
- .pagingToggleButtons {
- float: left;
- .one-up {
- .opacity(1);
- &.on {
- .opacity(0.75);
- }
- }
- .two-up {
- .opacity(1);
- &.on {
- .opacity(0.75);
- }
+ // button.btn.imageBtn {
+ // padding-left: 2px;
+ // padding-right: 2px;
+
+ // &.first,
+ // &.prev,
+ // &.next,
+ // &.last {
+ // i {
+ // background-color: @gray;
+ // &:hover {
+ // background-color: @gray-dark;
+ // }
+ // }
+ // }
+
+ // &.disabled,
+ // &.disabled:hover,
+ // &.disabled i,
+ // &.disabled i:hover {
+ // background-color: transparent;
+ // }
+ // }
+
+ // .centerOptions {
+
+ // .image-selectionbox-options {
+ // float: left;
+ // margin: 0 0 0 0;
+ // }
+
+ // .image-selectionbox {
+ // height: 30px;
+ // }
+
+ // .prevOptions {
+ // float: left;
+ // margin: 0 15px 0 0;
+ // }
+
+ // .mode {
+ // float: left;
+ // margin: 12px 0 0 0;
+ // }
+
+ // .search {
+ // float: left;
+ // margin: 6px 0 0 5px;
+ // width: auto;
+
+ // .searchText {
+ // border: none;
+ // padding: 0 0 0 2px;
+ // }
+ // }
+
+ // .nextOptions {
+ // float: left;
+ // margin: 0 0 0 15px;
+ // }
+
+ // .mode {
+
+ // input {
+ // float: left;
+ // }
+
+ // label {
+ // clear: none;
+ // width: auto;
+ // margin: 0 0 0 0;
+ // padding: 0;
+ // float: left;
+ // font-size: @font-size-small;
+ // line-height: 18px;
+ // text-align: right;
+
+ // &.disabled {
+ // color: @disabled;
+ // }
+ // }
+ // }
+
+ // &.modeOptionsDisabled {
+ // width: 280px;
+ // }
+
+ // .autocompleteText {
+ // width: 30px;
+ // height: 19px;
+ // line-height: 19px;
+ // float: left;
+ // font-size: @font-size-small;
+ // padding-inline: 2px;
+ // padding-block: 0;
+ // margin-top: 6px;
+ // color: black;
+ // background-color: white;
+ // border: none;
+ // }
+
+ // .autocomplete {
+ // position: absolute;
+ // background: #fff;
+ // width: 60px;
+ // border: 2px solid @brand-primary-lighter;
+ // list-style-type: none;
+ // -webkit-margin-before: 0px;
+ // -webkit-margin-after: 0px;
+ // -webkit-margin-start: 0px;
+ // -webkit-margin-end: 0px;
+ // -webkit-padding-start: 0px;
+ // margin: 0;
+ // padding: 0;
+ // max-height: 150px;
+ // overflow-y: auto;
+ // overflow-x: hidden;
+ // z-index: 1000;
+
+ // .result {
+ // padding: 4px;
+ // width: 270px;
+ // overflow: hidden;
+
+ // &.loading {
+ // background-image: data-uri(@loader-white-bg);
+ // background-repeat: no-repeat;
+ // background-position: 4px 4px;
+ // height: 25px;
+ // }
+
+ // &.selected {
+ // background: @gray-lighter;
+ // }
+ // }
+ // }
+ // }
+
+ .rightOptions {
+ .pagingToggleButtons {
+ float: left;
+ .one-up {
+ .opacity(1);
+ &.on {
+ .opacity(0.75);
}
}
- .gallery {
+ .two-up {
.opacity(1);
&.on {
.opacity(0.75);
}
}
- .localeToggle {
- .link-color-decoration(#fff, none);
- font-size: @font-size-large;
- float: left;
- margin: 4px 8px;
- cursor: pointer;
- }
}
-
- .searchText {
- width: 30px;
- height: 19px;
- line-height: 19px;
- float: left;
- font-size: @font-size-small;
- padding: 0;
- margin-top: 6px;
+ .gallery {
+ .opacity(1);
+ &.on {
+ .opacity(0.75);
+ }
}
-
- .total {
+ .localeToggle {
+ .link-color-decoration(#fff, none);
+ font-size: @font-size-large;
float: left;
- display: block;
- height: 18px;
- line-height: 18px;
- margin: 6px 5px 0;
- width: 41px;
- font-size: @font-size-small;
- overflow: hidden;
+ margin: 4px 8px;
+ cursor: pointer;
}
}
+
+ // .searchText {
+ // width: 30px;
+ // height: 19px;
+ // line-height: 19px;
+ // float: left;
+ // font-size: @font-size-small;
+ // padding: 0;
+ // margin-top: 6px;
+ // }
+
+ // .total {
+ // float: left;
+ // display: block;
+ // height: 18px;
+ // line-height: 18px;
+ // margin: 6px 5px 0 5px;
+ // width: 41px;
+ // font-size: @font-size-small;
+ // overflow: hidden;
+ // }
}
diff --git a/src/content-handlers/iiif/modules/uv-searchfooterpanel-module/FooterPanel.ts b/src/content-handlers/iiif/modules/uv-searchfooterpanel-module/FooterPanel.ts
index b9bfcf032..032f9ba25 100644
--- a/src/content-handlers/iiif/modules/uv-searchfooterpanel-module/FooterPanel.ts
+++ b/src/content-handlers/iiif/modules/uv-searchfooterpanel-module/FooterPanel.ts
@@ -1,5 +1,4 @@
const $ = require("jquery");
-import { AutoComplete } from "../uv-shared-module/AutoComplete";
import { IIIFEvents } from "../../IIIFEvents";
import { OpenSeadragonExtensionEvents } from "../../extensions/uv-openseadragon-extension/Events";
import { FooterPanel as BaseFooterPanel } from "../uv-shared-module/FooterPanel";
@@ -8,7 +7,6 @@ import { Mode } from "../../extensions/uv-openseadragon-extension/Mode";
import { AnnotationResults } from "../uv-shared-module/AnnotationResults";
import { sanitize } from "../../../../Utils";
import { Bools, Strings } from "../../Utils";
-import * as KeyCodes from "../../KeyCodes";
import { AnnotationGroup } from "@iiif/manifold";
import { Canvas, LanguageMap } from "manifesto.js";
import { Config } from "../../extensions/uv-openseadragon-extension/config/Config";
@@ -26,16 +24,10 @@ export class FooterPanel extends BaseFooterPanel<
$placemarkerDetailsTop: JQuery;
$previousResultButton: JQuery;
$printButton: JQuery;
- $searchButton: JQuery;
- $searchContainer: JQuery;
- $searchLabel: JQuery;
- $searchOptions: JQuery;
$searchPagerContainer: JQuery;
$searchPagerControls: JQuery;
$searchResultsContainer: JQuery;
$searchResultsInfo: JQuery;
- $searchText: JQuery;
- $searchTextContainer: JQuery;
currentPlacemarkerIndex: number;
placemarkerTouched: boolean = false;
@@ -91,10 +83,6 @@ export class FooterPanel extends BaseFooterPanel<
}
);
- this.extensionHost.subscribe(IIIFEvents.ANNOTATIONS_EMPTY, () => {
- this.hideSearchSpinner();
- });
-
this.extensionHost.subscribe(IIIFEvents.ANNOTATION_CHANGE, () => {
this.updatePrevButton();
this.updateNextButton();
@@ -107,39 +95,6 @@ export class FooterPanel extends BaseFooterPanel<
`);
this.$options.prepend(this.$printButton);
- // search input.
- this.$searchContainer = $('