From 1c9196d9c6c8051d2f7c59538265693f8ad3d98c Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Fri, 7 Jun 2019 12:03:52 -0400
Subject: animation starting to work

---
 src/client/views/SearchBox.tsx | 127 +++++++++++++++++++++++------------------
 1 file changed, 71 insertions(+), 56 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index d05c06549..3e8d6c58c 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -20,7 +20,7 @@ import * as anime from 'animejs';
 // const anime = require('lib/anime.js');
 // import anime from 'animejs/lib/anime.es';
 // import anime = require ('lib/anime.min.js');
-import Anime from 'react-anime';
+// import Anime from 'react-anime';
 
 library.add(faSearch);
 library.add(faObjectGroup);
@@ -45,72 +45,87 @@ export interface ToggleBarProps {
 export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @observable _status: boolean = false;
+    @observable timeline: any;
 
-    // @observable clicked: boolean = true;
+    _toggleButton: React.RefObject<HTMLDivElement>;
 
-    @action.bound
-    toggle() {
-        this._status = !this._status;
-    }
+    constructor(props: ToggleBarProps) {
+        super(props);
+        this._toggleButton = React.createRef();
 
-    render() {
-        var timeline = anime.timeline({
-            autoplay:false
-        })
-
-        timeline.add({
-            targets: '.toggle-button',
-            translateX: '100%',
-            direction: 'alternate',
-            easing: 'easeInOutQuad'
-        });
+        // this.timeline = anime.timeline({
+        //     autoplay: true,
+        //     direction: 'alternate',
+        //     loop: true
+        // })
 
-        // var wordQueryToggle = anime({
+        // this.timeline.add({
         //     targets: '.toggle-button',
         //     translateX: '100%',
         //     direction: 'alternate',
         //     easing: 'easeInOutQuad'
         // });
-        // document.querySelector('.toggle-button').onClick = wordQueryToggle;
 
+        // if (this.)
+        // this._toggleButton.current.animate({
+        //     translate: {x: 100, y: 0},
+        //     duration: 1000
+        // })
+    }
+
+    componentDidMount = () => {
+
+        let bar = document.getElementById("toggle-bar");
+        let tog = document.getElementById("toggle-button");
+        let padding = 0;
+        let barwidth = 0;
+        let togwidth = 0;
+        if (bar && tog) {
+            barwidth = bar.clientWidth;
+            togwidth = tog.clientWidth;
+        }
+        let totalWidth = (barwidth - togwidth - 10);
+
+        let timeline = anime.timeline({
+            autoplay: true,
+            loop: true,
+            direction: 'alternate',
+        });
+
+        timeline.add({
+            targets: this._toggleButton.current,
+            translateX: totalWidth,
+            easing: "easeInOutQuad", 
+        });
+
+        timeline.play();
+
+        // const animeObject = anime({
+        //     targets: this._toggleButton.current,
+        //     translateX: totalWidth,
+        //     direction: 'alternate',
+        //     easing: 'easeInOutQuad',
+        //     autoplay: false,
+        //     duration: .5,
+        // })
+    }
+
+    @action.bound
+    toggle() {
+        this._status = !this._status;
+    }
+
+    @action.bound
+    onclick() {
+        console.log("clicked")
+        // this.timeline.play();
+
+    }
+
+    render() {
         return (
-            <div className="toggle-bar">
-                {/* <div className = "toggle-button" onClick = {() => timeline.play()}> */}
-                {/* <div className = "toggle-button"> */}
-                {/* {this._status ? (
-                    <Anime 
-                    loop={false}
-                    autoplay={false}
-                    translateX="100%"
-                    direction="alternate"
-                    easing="easeInOutQuad"
-                >
-                    <div className="toggle-button" onClick = {this.toggle} />
-                </Anime>
-                ) : (
-                    <Anime 
-                    loop={false}
-                    autoplay={true}
-                    translateX="100%"
-                    direction="alternate"
-                    easing="easeInOutQuad"
-                >
-                    <div className="toggle-button" onClick = {this.toggle} />
-                </Anime>
-                )} */}
-
-{/* 
-
-                <Anime 
-                    loop={false}
-                    autoplay={false}
-                    translateX="100%"
-                    direction="alternate"
-                    easing="easeInOutQuad"
-                >
-                    <div className="toggle-button" onClick = {this.toggle} />
-                </Anime> */}
-                {/* </div> */}
+            <div className="toggle-bar" id="toggle-bar">
+                <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
             </div>
         );
     };
-- 
cgit v1.2.3-70-g09d2