From 7e3493a95aaf8d4ba585b326c278556e39346f11 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Thu, 6 Jun 2019 17:08:38 -0400
Subject: opening and closing filter and results works

---
 src/client/views/SearchBox.tsx   | 54 ++++++++++++++++++++++++----------------
 src/client/views/SearchItem.scss | 12 ++++-----
 src/client/views/SearchItem.tsx  | 21 ++++++++--------
 3 files changed, 48 insertions(+), 39 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index ed8dbbe51..8fb180273 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -96,34 +96,45 @@ export class SearchBox extends React.Component {
     }
 
     @action
-    handleClickFilter = (e: Event): void => {
-        var className = (e.target as any).className;
-        var id = (e.target as any).id;
-        if (className !== "filter-button" && className !== "filter-form") {
+    handleSearchClick = (e: Event): void => {
+        let element = document.getElementsByClassName((e.target as any).className)[0];
+        //handles case with filter button
+        if((e.target as any).className.includes("filter")){
+            this._resultsOpen = false;
+            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._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._open = false;
         }
-
+        
     }
 
-    @action
-    handleClickResults = (e: Event): void => {
-        var className = (e.target as any).className;
-        var id = (e.target as any).id;
-        if (id !== "result") {
-            this._resultsOpen = false;
-            this._results = [];
-        }
 
+    //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.handleClickFilter, false);
-        document.addEventListener('mousedown', this.handleClickResults, false);
+        document.addEventListener('mousedown', this.handleSearchClick, false);
     }
 
     componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClickFilter, false);
-        document.removeEventListener('mousedown', this.handleClickResults, false);
+        document.removeEventListener('mousedown', this.handleSearchClick, false);
     }
 
     @action
@@ -131,7 +142,7 @@ export class SearchBox extends React.Component {
         this._open = !this._open;
     }
 
-    enter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    enter = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
             this.submitSearch();
         }
@@ -199,8 +210,8 @@ export class SearchBox extends React.Component {
                         </span>
                         <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search..."
                             className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
-                            style={{ width: this._resultsOpen ? "500px" : undefined }} />
-                        <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button>
+                            style={{ width: this._resultsOpen ? "500px" : "100px" }} />
+                        <button className="searchBox-barChild searchBox-filter">Filter</button>
                     </div>
                     {this._resultsOpen ? (
                         <div className="searchBox-results">
@@ -208,11 +219,11 @@ export class SearchBox extends React.Component {
                         </div>
                     ) : null}
                 </div>
+                {/* these all need class names in order to find ancestor - please do not delete */}
                 {this._open ? (
                     <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
                         <div className="filter-form" id="header">Filter Search Results</div>
                         <div className="filter-form" id="option">
-                            filter by collection, key, type of node
                             <div className="required-words">
                                 temp for making words required
                             </div>
@@ -238,7 +249,6 @@ export class SearchBox extends React.Component {
                                 temp for filtering where in doc the keywords are found
                             </div>
                         </div>
-
                     </div>
                 ) : null}
             </div>
diff --git a/src/client/views/SearchItem.scss b/src/client/views/SearchItem.scss
index a6cd852b1..4c1d781e3 100644
--- a/src/client/views/SearchItem.scss
+++ b/src/client/views/SearchItem.scss
@@ -62,12 +62,12 @@
     transition: all 0.2s ease;
     color: black;
     transform-origin: top right;
-    // -webkit-transform: scale(0);
-    // -ms-transform: scale(0);
-    // transform: scale(0);
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    // -webkit-transform: scale(1);
+    // -ms-transform: scale(1);
+    // transform: scale(1);
     height: 100%
 }
 
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 16a2aa790..c80d9baa2 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -55,9 +55,7 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
     }
 
     getOnClick({ col, target }: { col: Doc, target: Doc }) {
-        console.log("hello world")
         return () => {
-            console.log("returning!")
             col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
             if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
                 const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2;
@@ -70,19 +68,20 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
         };
     }
 
+    onClick = () => {
+        console.log("click");
+    }
+
+    //these all need class names in order to find ancestor - please do not delete
     render() {
         return (
-            < div className="parents" onClick = {() => {console.log("hello there")}}>
-                <p>Contexts:</p>
-                {this._docs.map(doc => <div className="collection"><a onPointerDown={(e: React.PointerEvent) => {
-                    console.log("pointerdown");
-                    e.preventDefault();
-                    e.stopPropagation()
+            < div className="parents">
+                <p className = "contexts">Contexts:</p>
+                {this._docs.map(doc => <div onClick={this.onClick} className="collection"><a className= "title" onClick={(e: React.MouseEvent) => {
+                    console.log("clicked");
                     this.getOnClick(doc)
                 }}>{doc.col.title}</a></div>)}
-                {this._otherDocs.map(doc => <div className="collection"><a onClick={(e: React.MouseEvent) => {
-                    e.preventDefault();
-                    e.stopPropagation()
+                {this._otherDocs.map(doc => <div className="collection"><a className= "title" onClick={(e: React.MouseEvent) => {
                     console.log("clicked");
                     this.getOnClick(doc)
                 }}>{doc.col.title}</a></div>)}
-- 
cgit v1.2.3-70-g09d2