From 54d41e1eae499459e14d6d3a729127f231520f98 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 10 Jun 2019 14:51:52 -0400 Subject: thigns working --- src/client/views/SearchBox.tsx | 193 +++++++++++++++++++++++++++++++---------- 1 file changed, 146 insertions(+), 47 deletions(-) (limited to 'src/client/views/SearchBox.tsx') diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index d959826a1..c2ac0c06c 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -11,11 +11,16 @@ import { DocServer } from '../DocServer'; import { Doc } from '../../new_fields/Doc'; import { Id } from '../../new_fields/FieldSymbols'; import { SetupDrag } from '../util/DragManager'; -import { Docs } from '../documents/Documents'; +import { Docs, DocTypes } from '../documents/Documents'; import { RouteStore } from '../../server/RouteStore'; import { NumCast } from '../../new_fields/Types'; import { SearchUtil } from '../util/SearchUtil'; import * as anime from 'animejs'; +import { updateFunction } from '../../new_fields/util'; +import * as _ from "lodash"; +// import "./globalCssVariables.scss"; +import { findDOMNode } from 'react-dom'; + // import * as anime from '../../../node_modules/@types'; // const anime = require('lib/anime.js'); // import anime from 'animejs/lib/anime.es'; @@ -34,17 +39,117 @@ library.add(faChartBar); library.add(faGlobeAsia); library.add(faBan); +export interface IconBarProps { + updateIcon(newIcons: string[]): void; + getIcons(): string[]; +} + +@observer +export class IconBar extends React.Component { + + @observable newIcons: string[] = []; + + //changes colors of buttons on click - not sure if this is the best method (it probably isn't) + //but i spent a ton of time on it and this is the only thing i could get to work + componentDidMount = () => { + + let buttons = document.querySelectorAll(".type-icon").forEach(node => + node.addEventListener('click', function () { + if (this.style.backgroundColor === "rgb(194, 194, 197)") { + this.style.backgroundColor = "#121721"; + } + else { + this.style.backgroundColor = "#c2c2c5" + } + }) + ); + + } + + onClick = (value: string) => { + let oldIcons = this.props.getIcons() + if (value === "none") { + this.newIcons = [value]; + } + else { + if (oldIcons.includes(value)) { + this.newIcons = _.remove(oldIcons, value); + if (this.newIcons.length === 0) { + this.newIcons = ["none"]; + } + } + else { + this.newIcons = oldIcons; + if (this.newIcons.length === 1 && this.newIcons[0] === "none") { + this.newIcons = [value] + } + else { this.newIcons.push(value); } + } + } + this.props.updateIcon(this.newIcons) + + } + + render() { + + return ( +
+
+
{ this.onClick(DocTypes.NONE) }}> + +
+
{ this.onClick(DocTypes.PDF) }}> + +
+
{ this.onClick(DocTypes.HIST) }}> + +
+
{ this.onClick(DocTypes.COL) }}> + +
+
{ this.onClick(DocTypes.IMG) }}> + +
+
{ this.onClick(DocTypes.VID) }}> + +
+
{ this.onClick(DocTypes.WEB) }}> + +
+
{ this.onClick(DocTypes.LINK) }}> + +
+
{ this.onClick(DocTypes.AUDIO) }}> + +
+
{ this.onClick(DocTypes.TEXT) }}> + +
+
+
+ ) + } +} + export interface ToggleBarProps { //false = right, true = left // status: boolean; changeStatus(value: boolean): void; optionOne: string; optionTwo: string; - //addDocTab(doc: Doc, location: string): void; } //TODO: justify content will align to specific side. Maybe do status passed in and out? - @observer export class ToggleBar extends React.Component{ @@ -55,12 +160,14 @@ export class ToggleBar extends React.Component{ constructor(props: ToggleBarProps) { super(props); this._toggleButton = React.createRef(); - this.timeline = anime.timeline({autoplay: false, - direction: "reverse"}); + this.timeline = anime.timeline({ + autoplay: false, + direction: "reverse" + }); } componentDidMount = () => { - + let bar = document.getElementById("toggle-bar"); let tog = document.getElementById("toggle-button"); let barwidth = 0; @@ -68,7 +175,6 @@ export class ToggleBar extends React.Component{ if (bar && tog) { barwidth = bar.clientWidth; togwidth = tog.clientWidth; - console.log(togwidth) } let totalWidth = (barwidth - togwidth - 10); @@ -80,11 +186,10 @@ export class ToggleBar extends React.Component{ duration: 500 }); } - + @action.bound onclick() { this._status = !this._status; - console.log("sttaus should be:", this._status) this.props.changeStatus(this._status); this.timeline.play(); this.timeline.reverse(); @@ -93,13 +198,13 @@ export class ToggleBar extends React.Component{ render() { return (
-
-
{this.props.optionOne}
-
{this.props.optionTwo}
-
-
-
-
+
+
{this.props.optionOne}
+
{this.props.optionTwo}
+
+
+
+
); }; @@ -108,25 +213,21 @@ export class ToggleBar extends React.Component{ @observer export class SearchBox extends React.Component { - @observable - searchString: string = ""; + @observable _searchString: string = ""; @observable _wordStatus: boolean = true; - + @observable _icons: string[] = ["none"]; @observable private _open: boolean = false; @observable private _resultsOpen: boolean = false; - - @observable - private _results: Doc[] = []; - + @observable private _results: Doc[] = []; @action.bound onChange(e: React.ChangeEvent) { - this.searchString = e.target.value; + this._searchString = e.target.value; } @action submitSearch = async () => { - let query = this.searchString; + let query = this._searchString; //gets json result into a list of documents that can be used const results = await this.getResults(query); @@ -176,8 +277,9 @@ 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 ((e.target as any).className.includes("filter")) { + if (String(name).indexOf("filter") !== -1 || String(name).indexOf("SVG") !== -1) { this._resultsOpen = false; this._open = true; } @@ -195,13 +297,13 @@ export class SearchBox extends React.Component { } //not in either, close both else { + console.log("not either") this._resultsOpen = false; 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)); @@ -224,7 +326,7 @@ export class SearchBox extends React.Component { collectionRef = React.createRef(); startDragCollection = async () => { - const results = await this.getResults(this.searchString); + const results = await this.getResults(this._searchString); const docs = results.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { @@ -257,7 +359,7 @@ export class SearchBox extends React.Component { y += 300; } } - return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` }); + return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); } @action @@ -272,7 +374,16 @@ export class SearchBox extends React.Component { handleWordQueryChange = (value: boolean) => { this._wordStatus = value; - console.log("changed toL:", this._wordStatus) + } + + @action.bound + updateIcon(newArray: string[]) { + this._icons = newArray; + } + + @action.bound + getIcons(): string[] { + return this._icons; } // Useful queries: @@ -286,7 +397,7 @@ export class SearchBox extends React.Component { - @@ -295,7 +406,7 @@ export class SearchBox extends React.Component {
{this._results.map(result => )}
- ) : null} + ) : undefined}
{/* these all need class names in order to find ancestor - please do not delete */} {this._open ? ( @@ -303,23 +414,11 @@ export class SearchBox extends React.Component {
- +
temp for filtering by a type of node -
- {/* hoping to ultimately animate a reorder when an icon is chosen */} - - - - - - - - - - -
+
temp for filtering by collection @@ -329,7 +428,7 @@ export class SearchBox extends React.Component {
- ) : null} + ) : undefined} ); } -- cgit v1.2.3-70-g09d2