From f6a741f38a33bdb30b3a1d88215656dcd3d0712d Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 29 Apr 2024 23:00:22 -0400 Subject: eslint fixes. --- src/client/views/newlightbox/NewLightboxView.tsx | 335 ++++++++++++----------- 1 file changed, 169 insertions(+), 166 deletions(-) (limited to 'src/client/views/newlightbox/NewLightboxView.tsx') diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx index 6de4efc0d..6616abad1 100644 --- a/src/client/views/newlightbox/NewLightboxView.tsx +++ b/src/client/views/newlightbox/NewLightboxView.tsx @@ -1,3 +1,5 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -26,11 +28,11 @@ import './NewLightboxView.scss'; import { RecommendationList } from './RecommendationList'; import { IRecommendation } from './components'; -enum LightboxStatus { - RECOMMENDATIONS = 'recommendations', - ANNOTATIONS = 'annotations', - NONE = 'none', -} +// enum LightboxStatus { +// RECOMMENDATIONS = 'recommendations', +// ANNOTATIONS = 'annotations', +// NONE = 'none', +// } interface LightboxViewProps { PanelWidth: number; @@ -47,10 +49,6 @@ type LightboxSavedState = { }; @observer export class NewLightboxView extends React.Component { - @computed public static get LightboxDoc() { - return this._doc; - } - private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; @observable private static _layoutTemplate: Opt = undefined; @observable private static _layoutTemplateString: Opt = undefined; @observable private static _doc: Opt = undefined; @@ -63,59 +61,39 @@ export class NewLightboxView extends React.Component { // keywords @observable private static _keywords: string[] = []; - @action public static SetKeywords(kw: string[]) { - this._keywords = kw; - } - @computed public static get Keywords() { - return this._keywords; - } - - // query @observable private static _query: string = ''; - @action public static SetQuery(query: string) { - this._query = query; - } - @computed public static get Query() { - return this._query; - } - - // keywords @observable private static _recs: IRecommendation[] = []; - @action public static SetRecs(recs: IRecommendation[]) { - this._recs = recs; - } - @computed public static get Recs() { - return this._recs; - } - - // bounds @observable private static _bounds: IBounds = emptyBounds; - @action public static SetBounds(bounds: IBounds) { - this._bounds = bounds; - } - @computed public static get Bounds() { - return this._bounds; - } - - // explore @observable private static _explore: Opt = false; - @action public static SetExploreMode(status: Opt) { - this._explore = status; - } - @computed public static get ExploreMode() { - return this._explore; - } - - // newLightbox sidebar status @observable private static _sidebarStatus: Opt = ''; - @action public static SetSidebarStatus(sidebarStatus: Opt) { - this._sidebarStatus = sidebarStatus; + static path: { doc: Opt; target: Opt; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt; saved: Opt }[] = []; + private static LightboxDocTemplate = () => NewLightboxView._layoutTemplate; + public static GetSavedState(doc: Doc) { + return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; } - @computed public static get SidebarStatus() { - return this._sidebarStatus; + // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie + @action + public static SetCookie(cookie: string) { + if (this.LightboxDoc && cookie) { + this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`); + } } + public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => { + SelectionManager.DeselectAll(); + const doc = toList(docsIn).lastElement(); + return ( + doc && + NewLightboxView.SetNewLightboxDoc( + doc, + undefined, + [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort( + (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) + ), + layoutTemplate + ) + ); + }; - static path: { doc: Opt; target: Opt; history: Opt<{ doc: Doc; target?: Doc }[]>; future: Opt; saved: Opt }[] = []; @action public static SetNewLightboxDoc(doc: Opt, target?: Doc, future?: Doc[], layoutTemplate?: Doc | string) { if (this.LightboxDoc && this.LightboxDoc !== doc && this._savedState) { if (this._savedState.panX !== undefined) this.LightboxDoc._freeform_panX = this._savedState.panX; @@ -133,7 +111,7 @@ export class NewLightboxView extends React.Component { const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement(); l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); CollectionStackedTimeline.CurrentlyPlaying?.forEach(dv => dv.ComponentView?.Pause?.()); - //TabDocView.PinDoc(doc, { hidePresBox: true }); + // TabDocView.PinDoc(doc, { hidePresBox: true }); this._history ? this._history.push({ doc, target }) : (this._history = [{ doc, target }]); if (doc !== LightboxView.LightboxDoc) { this._savedState = { @@ -167,60 +145,6 @@ export class NewLightboxView extends React.Component { public static IsNewLightboxDocView(path: DocumentView[]) { return (path ?? []).includes(this._docView!); } - @computed get leftBorder() { - return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); - } - @computed get topBorder() { - return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); - } - newLightboxWidth = () => this.props.PanelWidth - 420; - newLightboxHeight = () => this.props.PanelHeight - 140; - newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); - navBtn = (left: Opt, bottom: Opt, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => { - return ( -
-
-
{color}
- -
-
- ); - }; - public static GetSavedState(doc: Doc) { - return this.LightboxDoc === doc && this._savedState ? this._savedState : undefined; - } - - // adds a cookie to the newLightbox view - the cookie becomes part of a filter which will display any documents whose cookie metadata field matches this cookie - @action - public static SetCookie(cookie: string) { - if (this.LightboxDoc && cookie) { - this._docFilters = (f => (this._docFilters ? [this._docFilters.push(f) as any, this._docFilters][1] : [f]))(`cookies:${cookie}:provide`); - } - } - public static AddDocTab = (docsIn: Doc | Doc[], location: OpenWhere, layoutTemplate?: Doc | string) => { - SelectionManager.DeselectAll(); - const doc = toList(docsIn).lastElement(); - return ( - doc && - NewLightboxView.SetNewLightboxDoc( - doc, - undefined, - [...DocListCast(doc[Doc.LayoutFieldKey(doc)]), ...DocListCast(doc[Doc.LayoutFieldKey(doc) + '_annotations']).filter(anno => anno.annotationOn !== doc), ...(NewLightboxView._future ?? [])].sort( - (a: Doc, b: Doc) => NumCast(b._timecodeToShow) - NumCast(a._timecodeToShow) - ), - layoutTemplate - ) - ); - }; - docFilters = () => NewLightboxView._docFilters || []; - addDocTab = NewLightboxView.AddDocTab; @action public static Next() { const doc = NewLightboxView._doc!; const target = (NewLightboxView._docTarget = this._future?.pop()); @@ -230,26 +154,24 @@ export class NewLightboxView extends React.Component { l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen'); DocumentManager.Instance.showDocument(target, { willZoomCentered: true, zoomScale: 0.9 }); if (NewLightboxView._history?.lastElement().target !== target) NewLightboxView._history?.push({ doc, target }); - } else { - if (!target && NewLightboxView.path.length) { - const saved = NewLightboxView._savedState; - if (LightboxView.LightboxDoc && saved) { - LightboxView.LightboxDoc._freeform_panX = saved.panX; - LightboxView.LightboxDoc._freeform_panY = saved.panY; - LightboxView.LightboxDoc._freeform_scale = saved.scale; - LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; - } - const pop = NewLightboxView.path.pop(); - if (pop) { - NewLightboxView._doc = pop.doc; - NewLightboxView._docTarget = pop.target; - NewLightboxView._future = pop.future; - NewLightboxView._history = pop.history; - NewLightboxView._savedState = pop.saved; - } - } else { - NewLightboxView.SetNewLightboxDoc(target); + } else if (!target && NewLightboxView.path.length) { + const saved = NewLightboxView._savedState; + if (LightboxView.LightboxDoc && saved) { + LightboxView.LightboxDoc._freeform_panX = saved.panX; + LightboxView.LightboxDoc._freeform_panY = saved.panY; + LightboxView.LightboxDoc._freeform_scale = saved.scale; + LightboxView.LightboxDoc._layout_scrollTop = saved.scrollTop; + } + const pop = NewLightboxView.path.pop(); + if (pop) { + NewLightboxView._doc = pop.doc; + NewLightboxView._docTarget = pop.target; + NewLightboxView._future = pop.future; + NewLightboxView._history = pop.history; + NewLightboxView._savedState = pop.saved; } + } else { + NewLightboxView.SetNewLightboxDoc(target); } } @@ -269,6 +191,118 @@ export class NewLightboxView extends React.Component { } if (NewLightboxView._future?.lastElement() !== previous.target || previous.doc) NewLightboxView._future?.push(previous.target || previous.doc); } + + @action public static SetKeywords(kw: string[]) { + this._keywords = kw; + } + @computed public static get Keywords() { + return this._keywords; + } + @computed public static get LightboxDoc() { + return this._doc; + } + + // query + @action public static SetQuery(query: string) { + this._query = query; + } + @computed public static get Query() { + return this._query; + } + + // keywords + @action public static SetRecs(recs: IRecommendation[]) { + this._recs = recs; + } + @computed public static get Recs() { + return this._recs; + } + + // bounds + @action public static SetBounds(bounds: IBounds) { + this._bounds = bounds; + } + @computed public static get Bounds() { + return this._bounds; + } + // newLightbox sidebar status + @action public static SetSidebarStatus(sidebarStatus: Opt) { + this._sidebarStatus = sidebarStatus; + } + + // explore + @action public static SetExploreMode(status: Opt) { + this._explore = status; + } + + addDocTab = NewLightboxView.AddDocTab; + + @computed public static get ExploreMode() { + return this._explore; + } + + @computed public static get SidebarStatus() { + return this._sidebarStatus; + } + @computed get leftBorder() { + return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); + } + @computed get topBorder() { + return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); + } + + @computed + get documentView() { + if (!LightboxView.LightboxDoc) return null; + return ( + + { + NewLightboxView._docView = r !== null ? r : undefined; + })} + Document={LightboxView.LightboxDoc} + PanelWidth={this.newLightboxWidth} + PanelHeight={this.newLightboxHeight} + LayoutTemplate={NewLightboxView.LightboxDocTemplate} + isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. + isContentActive={returnTrue} + styleProvider={DefaultStyleProvider} + ScreenToLocalTransform={this.newLightboxScreenToLocal} + renderDepth={0} + containerViewPath={returnEmptyDoclist} + childFilters={this.docFilters} + childFiltersByRanges={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + addDocument={undefined} + removeDocument={undefined} + whenChildContentsActiveChanged={emptyFunction} + addDocTab={this.addDocTab} + pinToPres={TabDocView.PinDoc} + focus={emptyFunction} + /> + + ); + } + newLightboxWidth = () => this.props.PanelWidth - 420; + newLightboxHeight = () => this.props.PanelHeight - 140; + newLightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1); + navBtn = (left: Opt, bottom: Opt, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => ( +
+
+
{color}
+ +
+
+ ); + + docFilters = () => NewLightboxView._docFilters || []; @action stepInto = () => { NewLightboxView.path.push({ @@ -290,43 +324,11 @@ export class NewLightboxView extends React.Component { } }; - @computed - get documentView() { - if (!LightboxView.LightboxDoc) return null; - else - return ( - - (NewLightboxView._docView = r !== null ? r : undefined))} - Document={LightboxView.LightboxDoc} - PanelWidth={this.newLightboxWidth} - PanelHeight={this.newLightboxHeight} - LayoutTemplate={NewLightboxView.LightboxDocTemplate} - isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected. - isContentActive={returnTrue} - styleProvider={DefaultStyleProvider} - ScreenToLocalTransform={this.newLightboxScreenToLocal} - renderDepth={0} - containerViewPath={returnEmptyDoclist} - childFilters={this.docFilters} - childFiltersByRanges={returnEmptyFilter} - searchFilterDocs={returnEmptyDoclist} - addDocument={undefined} - removeDocument={undefined} - whenChildContentsActiveChanged={emptyFunction} - addDocTab={this.addDocTab} - pinToPres={TabDocView.PinDoc} - focus={emptyFunction} - /> - - ); - } - future = () => NewLightboxView._future; render() { - let newLightboxHeaderHeight = 100; - let downx = 0, - downy = 0; + const newLightboxHeaderHeight = 100; + let downx = 0; + let downy = 0; return !LightboxView.LightboxDoc ? null : (
{ NewLightboxView.SetNewLightboxDoc(undefined); } }}> -
+
{ {this.documentView}
) : ( -
+
)} @@ -367,6 +369,7 @@ export class NewLightboxView extends React.Component { } interface NewLightboxTourBtnProps { navBtn: (left: Opt, bottom: Opt, top: number, icon: string, display: () => string, click: (e: React.MouseEvent) => void, color?: string) => JSX.Element; + // eslint-disable-next-line react/no-unused-prop-types future: () => Opt; stepInto: () => void; } @@ -378,7 +381,7 @@ export class NewLightboxTourBtn extends React.Component 0, 0, 'chevron-down', - () => (LightboxView.LightboxDoc /*&& this.props.future()?.length*/ ? '' : 'none'), + () => (LightboxView.LightboxDoc /* && this.props.future()?.length */ ? '' : 'none'), e => { e.stopPropagation(); this.props.stepInto(); -- cgit v1.2.3-70-g09d2