aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/SerializationHelper.ts7
-rw-r--r--src/client/views/search/SearchBox.tsx55
-rw-r--r--src/client/views/search/SearchItem.scss303
3 files changed, 187 insertions, 178 deletions
diff --git a/src/client/util/SerializationHelper.ts b/src/client/util/SerializationHelper.ts
index 17ae407c4..429fb22d9 100644
--- a/src/client/util/SerializationHelper.ts
+++ b/src/client/util/SerializationHelper.ts
@@ -1,5 +1,6 @@
import { PropSchema, serialize, deserialize, custom, setDefaultModelSchema, getDefaultModelSchema, primitive, SKIP } from "serializr";
import { Field } from "../../new_fields/Doc";
+import { ClientUtils } from "./ClientUtils";
export namespace SerializationHelper {
let serializing: number = 0;
@@ -38,7 +39,11 @@ export namespace SerializationHelper {
serializing += 1;
if (!obj.__type) {
- throw Error("No property 'type' found in JSON.");
+ if (ClientUtils.RELEASE) {
+ return undefined;
+ } else {
+ throw Error("No property 'type' found in JSON.");
+ }
}
if (!(obj.__type in serializationTypes)) {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index e0c5d163e..dc1d35b1c 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -26,6 +26,8 @@ export class SearchBox extends React.Component {
@observable private _openNoResults: boolean = false;
@observable private _visibleElements: JSX.Element[] = [];
+ private resultsRef = React.createRef<HTMLDivElement>();
+
private _isSearch: ("search" | "placeholder" | undefined)[] = [];
private _numTotalResults = -1;
private _endIndex = -1;
@@ -114,37 +116,34 @@ export class SearchBox extends React.Component {
return SearchUtil.Search(query, true, 0, 10000000);
}
- getResults = async (query: string) => {
-
- while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
- let prom: Promise<any>;
- if (this._curRequest) {
- prom = this._curRequest;
- return;
- } else {
- prom = SearchUtil.Search(query, true, this._maxSearchIndex, 10);
- this._maxSearchIndex += 10;
- }
- prom.then(action((res: SearchUtil.DocSearchResult) => {
+ private lockPromise?: Promise<void>;
+ getResults = async (query: string) => {
+ if (this.lockPromise) {
+ await this.lockPromise;
+ }
+ this.lockPromise = new Promise(async res => {
+ while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) {
+ this._curRequest = SearchUtil.Search(query, true, this._maxSearchIndex, 10).then(action((res: SearchUtil.DocSearchResult) => {
- // happens at the beginning
- if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
- this._numTotalResults = res.numFound;
- }
+ // happens at the beginning
+ if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) {
+ this._numTotalResults = res.numFound;
+ }
- let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs);
- this._results.push(...filteredDocs);
+ let filteredDocs = FilterBox.Instance.filterDocsByType(res.docs);
+ this._results.push(...filteredDocs);
- if (prom === this._curRequest) {
this._curRequest = undefined;
- }
- }));
-
- this._curRequest = prom;
+ }));
+ this._maxSearchIndex += 10;
- await prom;
- }
+ await this._curRequest;
+ }
+ this.resultsScrolled();
+ res();
+ });
+ return this.lockPromise;
}
collectionRef = React.createRef<HTMLSpanElement>();
@@ -215,7 +214,7 @@ export class SearchBox extends React.Component {
@action
resultsScrolled = (e?: React.UIEvent<HTMLDivElement>) => {
- let scrollY = e ? e.currentTarget.scrollTop : 0;
+ let scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0;
let buffer = 4;
let startIndex = Math.floor(Math.max(0, scrollY / 70 - buffer));
let endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (560 / 70) + buffer));
@@ -246,7 +245,7 @@ export class SearchBox extends React.Component {
if (i < startIndex || i > endIndex) {
if (this._isSearch[i] !== "placeholder") {
this._isSearch[i] = "placeholder";
- this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}></div>;
+ this._visibleElements[i] = <div className="searchBox-placeholder" key={`searchBox-placeholder-${i}`}>Loading...</div>;
}
}
else {
@@ -303,7 +302,7 @@ export class SearchBox extends React.Component {
<div className="searchBox-results" onScroll={this.resultsScrolled} style={{
display: this._resultsOpen ? "flex" : "none",
height: this.resFull ? "560px" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
- }}>
+ }} ref={this.resultsRef}>
{this._visibleElements}
</div>
</div>
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 0fb93daad..24dd2eaa3 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -6,195 +6,200 @@
justify-content: flex-end;
height: 70px;
z-index: 0;
+}
- .search-item {
- width: 500px;
- background: $light-color-secondary;
- border-color: $intermediate-color;
- border-bottom-style: solid;
- padding: 10px;
- height: 70px;
- z-index: 0;
- display: inline-block;
-
- .main-search-info {
- display: flex;
- flex-direction: row;
- width: 100%;
+.searchBox-placeholder,
+.search-overview .search-item {
+ width: 500px;
+ background: $light-color-secondary;
+ border-color: $intermediate-color;
+ border-bottom-style: solid;
+ padding: 10px;
+ height: 70px;
+ z-index: 0;
+ display: inline-block;
- .search-title {
- text-transform: uppercase;
- text-align: left;
- width: 100%;
- font-weight: bold;
- }
+ .main-search-info {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
- .search-info {
+ .search-title {
+ text-transform: uppercase;
+ text-align: left;
+ width: 100%;
+ font-weight: bold;
+ }
+
+ .search-info {
+ display: flex;
+ justify-content: flex-end;
+
+ .link-container.item {
+ margin-left: auto;
+ margin-right: auto;
+ height: 26px;
+ width: 26px;
+ border-radius: 13px;
+ background: $dark-color;
+ color: $light-color-secondary;
display: flex;
- justify-content: flex-end;
-
- .link-container.item {
- margin-left: auto;
- margin-right: auto;
- height: 26px;
- width: 26px;
- border-radius: 13px;
- background: $dark-color;
- color: $light-color-secondary;
- display: flex;
- justify-content: center;
- align-items: center;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- transform-origin: top right;
- overflow: hidden;
+ justify-content: center;
+ align-items: center;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
+ transform-origin: top right;
+ overflow: hidden;
+ position: relative;
+
+ .link-count {
+ opacity: 1;
+ position: absolute;
+ z-index: 1000;
+ text-align: center;
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ -o-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
+ }
+
+ .link-extended {
+ // display: none;
+ visibility: hidden;
+ opacity: 0;
position: relative;
+ z-index: 500;
+ overflow: hidden;
+ -webkit-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+ -moz-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+ -o-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+ transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
+ // transition-delay: 1s;
+ }
- .link-count {
- opacity: 1;
- position: absolute;
- z-index: 1000;
- text-align: center;
- -webkit-transition: opacity 0.2s ease-in-out;
- -moz-transition: opacity 0.2s ease-in-out;
- -o-transition: opacity 0.2s ease-in-out;
- transition: opacity 0.2s ease-in-out;
- }
+ }
- .link-extended {
- // display: none;
- visibility: hidden;
- opacity: 0;
- position: relative;
- z-index: 500;
- overflow: hidden;
- -webkit-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
- -moz-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
- -o-transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
- transition: opacity 0.2s ease-in-out .2s, visibility 0s linear 0s;
- // transition-delay: 1s;
- }
+ .link-container.item:hover {
+ width: 70px;
+ }
- }
+ .link-container.item:hover .link-count {
+ opacity: 0;
+ }
- .link-container.item:hover {
- width: 70px;
- }
+ .link-container.item:hover .link-extended {
+ opacity: 1;
+ visibility: visible;
+ // display: inline;
+ }
- .link-container.item:hover .link-count {
- opacity: 0;
- }
+ .icon-icons {
+ width: 50px
+ }
- .link-container.item:hover .link-extended {
- opacity: 1;
- visibility: visible;
- // display: inline;
- }
+ .icon-live {
+ width: 175px;
+ }
- .icon-icons {
- width: 50px
- }
+ .icon-icons,
+ .icon-live {
+ height: 50px;
+ margin: auto;
+ overflow: hidden;
- .icon-live {
- width: 175px;
+ .search-type {
+ display: inline-block;
+ width: 100%;
+ position: absolute;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ margin-right: 5px;
}
- .icon-icons,
- .icon-live {
- height: 50px;
- margin: auto;
+ .pdfBox-cont {
overflow: hidden;
- .search-type {
- display: inline-block;
- width: 100%;
- position: absolute;
- justify-content: center;
- align-items: center;
- position: relative;
- margin-right: 5px;
- }
-
- .pdfBox-cont {
- overflow: hidden;
-
- img {
- width: 100% !important;
- height: auto !important;
- }
+ img {
+ width: 100% !important;
+ height: auto !important;
}
+ }
- .search-type:hover+.search-label {
- opacity: 1;
- }
+ .search-type:hover+.search-label {
+ opacity: 1;
+ }
- .search-label {
- font-size: 10;
- position: relative;
- right: 0px;
- text-transform: capitalize;
- opacity: 0;
- -webkit-transition: opacity 0.2s ease-in-out;
- -moz-transition: opacity 0.2s ease-in-out;
- -o-transition: opacity 0.2s ease-in-out;
- transition: opacity 0.2s ease-in-out;
- }
+ .search-label {
+ font-size: 10;
+ position: relative;
+ right: 0px;
+ text-transform: capitalize;
+ opacity: 0;
+ -webkit-transition: opacity 0.2s ease-in-out;
+ -moz-transition: opacity 0.2s ease-in-out;
+ -o-transition: opacity 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
}
+ }
- .icon-live:hover {
- height: 175px;
+ .icon-live:hover {
+ height: 175px;
- .pdfBox-cont {
- img {
- width: 100% !important;
- }
+ .pdfBox-cont {
+ img {
+ width: 100% !important;
}
}
}
-
- .search-info:hover {
- width: 60%;
- }
}
- }
- .search-item:hover~.searchBox-instances,
- .searchBox-instances:hover,
- .searchBox-instances:active {
- opacity: 1;
- background: $lighter-alt-accent;
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
+ .search-info:hover {
+ width: 60%;
+ }
}
+}
- .search-item:hover {
- transition: all 0.2s;
- background: $lighter-alt-accent;
- }
+.search-item:hover~.searchBox-instances,
+.searchBox-instances:hover,
+.searchBox-instances:active {
+ opacity: 1;
+ background: $lighter-alt-accent;
+ -webkit-transform: scale(1);
+ -ms-transform: scale(1);
+ transform: scale(1);
+}
- .searchBox-instances {
- float: left;
- opacity: 1;
- width: 150px;
- transition: all 0.2s ease;
- color: black;
- transform-origin: top right;
- -webkit-transform: scale(0);
- -ms-transform: scale(0);
- transform: scale(0);
- }
+.search-item:hover {
+ transition: all 0.2s;
+ background: $lighter-alt-accent;
+}
+.searchBox-instances {
+ float: left;
+ opacity: 1;
+ width: 150px;
+ transition: all 0.2s ease;
+ color: black;
+ transform-origin: top right;
+ -webkit-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
}
+
.search-overview:hover {
z-index: 1;
}
.searchBox-placeholder {
min-height: 70px;
+ margin-left: 150px;
+ text-transform: uppercase;
+ text-align: left;
+ font-weight: bold;
}
.collection {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:10:16 +0000