From 475663393d8fb65d3682826db883bb143aae4017 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 12 Jun 2019 12:26:53 -0400 Subject: filter open close working --- src/client/views/search/IconBar.tsx | 46 ++++---- src/client/views/search/SearchBox.tsx | 203 +++++++++++++++++++++++++-------- src/client/views/search/SearchItem.tsx | 11 +- 3 files changed, 185 insertions(+), 75 deletions(-) (limited to 'src') diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index 3f77d64eb..f3741a5de 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -160,95 +160,95 @@ export class IconBar extends React.Component { render() { return (
-
Filter by type of node
-
-
-
Filter by type of node
+
+
+
{ this.onClick(DocTypes.NONE); }}> - +
Clear
-
{ this.onClick(DocTypes.PDF); }}> - +
PDF
-
{ this.onClick(DocTypes.HIST); }}> - +
Histogram
-
{ this.onClick(DocTypes.COL); }}> - +
Collection
-
{ this.onClick(DocTypes.IMG); }}> - +
Image
-
{ this.onClick(DocTypes.VID); }}> - +
Video
-
{ this.onClick(DocTypes.WEB); }}> - +
Web
-
{ this.onClick(DocTypes.LINK); }}> - +
Link
-
{ this.onClick(DocTypes.AUDIO); }}> - +
Audio
-
{ this.onClick(DocTypes.TEXT); }}> - +
Text
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 0303707c7..0b9b84030 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -27,6 +27,9 @@ import { type } from 'os'; @observer export class SearchBox extends React.Component { + + static Instance: SearchBox; + @observable _searchString: string = ""; //if true, any keywords can be used. if false, all keywords are required. @observable _wordStatus: boolean = true; @@ -35,6 +38,21 @@ export class SearchBox extends React.Component { @observable private _resultsOpen: boolean = false; @observable private _results: Doc[] = []; @observable filterBoxStatus: boolean = false; + @observable filterMenuRef: React.RefObject = React.createRef(); + @observable filterButtonRef: React.RefObject = React.createRef(); + + constructor(props: Readonly<{}>) { + super(props); + SearchBox.Instance = this; + } + + componentDidMount = () => { + document.addEventListener("pointerdown", (e) => { + if (e.timeStamp !== this._pointerTime) { + this.closeSearch(); + } + }); + } @action.bound onChange(e: React.ChangeEvent) { @@ -45,7 +63,7 @@ export class SearchBox extends React.Component { submitSearch = async () => { let query = this._searchString; - if(!this._wordStatus){ + if (!this._wordStatus) { let oldWords = query.split(" "); let newWords: string[] = []; console.log(oldWords); @@ -87,16 +105,16 @@ export class SearchBox extends React.Component { return this.filterDocs(docs); } - @action filterDocs(docs: Doc[]){ + @action filterDocs(docs: Doc[]) { console.log(this._icons) - if(this._icons.length === 0){ + if (this._icons.length === 0) { console.log("length is 0") return docs; } let finalDocs: Doc[] = []; docs.forEach(doc => { let layoutresult = Cast(doc.type, "string", ""); - if(this._icons.includes(layoutresult)){ + if (this._icons.includes(layoutresult)) { finalDocs.push(doc) } }); @@ -120,51 +138,107 @@ export class SearchBox extends React.Component { } } - @action - handleSearchClick = (e: Event): void => { - let element = document.getElementsByClassName((e.target as any).className)[0]; - let name: string = (e.target as any).className; - //handles case with filter button - if (String(name).indexOf("filter") !== -1 || String(name).indexOf("SVG") !== -1) { - this._resultsOpen = false; - this._results = []; - this._open = true; - } - else if (element && element.parentElement) { - //if the filter element is found, show the form and hide the results - if (this.findAncestor(element, "filter-form")) { - this._resultsOpen = false; - this._results = []; - this._open = true; - } - //if in main search div, keep results open and close filter - else if (this.findAncestor(element, "main-searchDiv")) { - this._resultsOpen = true; - this._open = false; - } - } - //not in either, close both - else { - this._resultsOpen = false; - this._results = []; - this._open = false; - } + // isClickInFilter(curElement: Element) { + // console.log(curElement) + // let name: string = curElement.className; + // if (name.indexOf("filter") !== -1) { + // return true; + // } + // else { + // return this.findAncestor2(name); - } + // // if(curElement.parentElement){ + // // let parentName = curElement.parentElement.className; + // // if(parentName.indexOf("filter") !== -1){ + // // return true; + // // } + // // } + // } + // return false; + // } - //finds ancestor div that matches class name passed in, if not found false returned - findAncestor(curElement: any, cls: string) { - while ((curElement = curElement.parentElement) && !curElement.classList.contains(cls)); - return curElement; - } + // findAncestor2(elementName: string){ - componentWillMount() { - document.addEventListener('mousedown', this.handleSearchClick, false); - } + // if(elementName === ""){ + // return false; + // } - componentWillUnmount() { - document.removeEventListener('mousedown', this.handleSearchClick, false); - } + // if(String(elementName).indexOf("filter") !== -1){ + // return true; + // } + + // if(String(elementName).indexOf("SVG")!==-1){ + // console.log("is svg") + // return true; + // } + + // let curElement: Element = document.getElementsByClassName(elementName)[0]; + // let name: string; + // while(curElement.parentElement){ + // name = curElement.className; + // if(name.indexOf("filter") !== -1){ + // return true; + // } + // curElement = curElement.parentElement; + // } + // return false; + // } + + // @action + // handleSearchClick = (e: MouseEvent): void => { + + // // console.log(e) + + // let name: string = (e.target as any).className; + + + + // // console.log((e.target as any).className) + // let element = document.getElementsByClassName((e.target as any).className)[0]; + // // console.log(this.findAncestor2(name)); + // //handles case with filter button + // if (String(name).indexOf("filter") !== -1 || String(name).indexOf("SVG") !== -1) { + // this._resultsOpen = false; + // this._results = []; + // this._open = true; + // // console.log("name is svg") + // } + // else if (element && element.parentElement) { + // //if the filter element is found, show the form and hide the results + // if (this.findAncestor(element, "filter-form")) { + // this._resultsOpen = false; + // this._results = []; + // this._open = true; + // // console.log("parent is filter form") + // } + // //if in main search div, keep results open and close filter + // else if (this.findAncestor(element, "main-searchDiv")) { + // this._resultsOpen = true; + // this._open = false; + // } + // } + // //not in either, close both + // else { + // this._resultsOpen = false; + // this._results = []; + // this._open = false; + // } + + // } + + // //finds ancestor div that matches class name passed in, if not found false returned + // findAncestor(curElement: any, cls: string) { + // while ((curElement = curElement.parentElement) && !curElement.classList.contains(cls)); + // return curElement; + // } + + // componentWillMount() { + // document.addEventListener('mousedown', this.handleSearchClick, false); + // } + + // componentWillUnmount() { + // document.removeEventListener('mousedown', this.handleSearchClick, false); + // } enter = (e: React.KeyboardEvent) => { if (e.key === "Enter") { @@ -172,6 +246,19 @@ export class SearchBox extends React.Component { } } + @action.bound + closeSearch = () => { + this._open = false; + this._resultsOpen = false; + } + + @action + openFilter = () => { + this._open = true; + this._resultsOpen = false; + this._results = []; + } + collectionRef = React.createRef(); startDragCollection = async () => { const results = await this.getResults(this._searchString); @@ -235,6 +322,22 @@ export class SearchBox extends React.Component { return this._icons; } + private _pointerTime: number = -1; + + stopProp = (e: React.PointerEvent) => { + e.stopPropagation(); + console.log('stopping prop') + this._pointerTime = e.timeStamp; + } + + @action.bound + openSearch(e: React.PointerEvent) { + e.stopPropagation(); + this._open = false; + this._resultsOpen = true; + this._pointerTime = e.timeStamp; + } + // Useful queries: // Delegates of a document: {!join from=id to=proto_i}id:{protoId} // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} @@ -247,9 +350,9 @@ export class SearchBox extends React.Component { - +
{this._resultsOpen ? (
@@ -259,14 +362,14 @@ export class SearchBox extends React.Component {
{/* these all need class names in order to find ancestor - please do not delete */} {this._open ? ( -
+
- +
temp for filtering by collection @@ -275,7 +378,7 @@ export class SearchBox extends React.Component { temp for filtering where in doc the keywords are found
- +
) : undefined}
diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index d470090f8..65f4dfd31 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -15,6 +15,7 @@ import { observer } from "mobx-react"; import "./SearchItem.scss"; import { CollectionViewType } from "../collections/CollectionBaseView"; import { DocTypes } from "../../documents/Documents"; +import { SearchBox } from "./SearchBox"; export interface SearchItemProps { doc: Doc; @@ -133,10 +134,16 @@ export class SearchItem extends React.Component { return num.toString() + " links"; } + pointerDown = (e: React.PointerEvent) => { + SearchBox.Instance.openSearch(e); + } + render() { return ( -
-
+
+
{ + this.pointerDown; + SetupDrag(this.collectionRef, this.startDocDrag);}} >
{this.props.doc.title}
-- cgit v1.2.3-70-g09d2