convert align sidebar into a section TOC navigator

6 files changed, 110 insertions, 50 deletions

diff --git a/animism-align/frontend/app/views/align/align.container.js b/animism-align/frontend/app/views/align/align.container.js
index 6f58fc2..e45de6c 100644
--- a/animism-align/frontend/app/views/align/align.container.js
+++ b/animism-align/frontend/app/views/align/align.container.js
@@ -5,7 +5,7 @@ import './components/annotations/annotation.form.css'
 import './components/annotations/annotation.index.css'
 
 import Timeline from 'app/views/align/containers/timeline.container.js'
-import Script from 'app/views/align/containers/script.container.js'
+import Sidebar from 'app/views/align/containers/sidebar.container.js'
 
 class Container extends Component {
   componentDidMount() {
@@ -18,7 +18,7 @@ class Container extends Component {
         <div className='row'>
           <Timeline />
         </div>
-        <Script />
+        <Sidebar />
       </div>
     )
   }
diff --git a/animism-align/frontend/app/views/align/align.css b/animism-align/frontend/app/views/align/align.css
index acb65d2..cbeda67 100644
--- a/animism-align/frontend/app/views/align/align.css
+++ b/animism-align/frontend/app/views/align/align.css
@@ -113,17 +113,17 @@ canvas {
 
 /* Script */
 
-.script {
+.sidebar {
   position: absolute;
   top: 0;
   right: 0;
   min-width: 4rem;
   z-index: 8;
 }
-.script textarea {
+.sidebar textarea {
   height: calc(100vh - 3.15rem);
 }
-.script button {
+.sidebar button {
   position: absolute;
   top: 0.25rem;
   right: 0.25rem;
@@ -138,3 +138,19 @@ canvas {
   position: relative;
   width: 450px;
 }
+
+/* table of contents */
+
+.toc {
+  background: #222;
+  width: 15rem;
+  padding: 0.5rem 0;
+}
+.toc div {
+  width: 15rem;
+  padding: 0.25rem 0.75rem;
+  cursor: pointer;
+}
+.toc div:hover {
+  background: #213;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/align/components/sidebar/script.component.js b/animism-align/frontend/app/views/align/components/sidebar/script.component.js
new file mode 100644
index 0000000..6c20dfa
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/sidebar/script.component.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+const Script = ({ text }) => {
+  if (text.loading) return null
+  return (
+    <textarea 
+      className='script'
+      onChange={e => actions.site.updateText(e.target.value)}
+      value={text}
+    />
+  )
+}
+
+const mapStateToProps = state => ({
+  text: state.site.text,
+})
+
+export default connect(mapStateToProps)(Script)
diff --git a/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js b/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js
new file mode 100644
index 0000000..24cb59c
--- /dev/null
+++ b/animism-align/frontend/app/views/align/components/sidebar/tableOfContents.component.js
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { ROMAN_NUMERALS } from 'app/constants'
+import actions from 'app/actions'
+
+class TableOfContents extends Component {
+  render() {
+    const { loading, order, lookup } = this.props.annotation
+    if (loading || !order) return null
+    const sectionIds = order.filter(id => lookup[id].type === "section_heading")
+    console.log(this.props.annotation)
+    return (
+      <div className="toc">
+        {sectionIds.map((id, i) => (
+          <div key={id} onClick={() => actions.align.setScrollPosition(lookup[id].start_ts)}>
+            {ROMAN_NUMERALS[i]}{'. '}{lookup[id].text}
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  annotation: state.annotation.index,
+})
+
+export default connect(mapStateToProps)(TableOfContents)
diff --git a/animism-align/frontend/app/views/align/containers/script.container.js b/animism-align/frontend/app/views/align/containers/script.container.js
deleted file mode 100644
index 7433edc..0000000
--- a/animism-align/frontend/app/views/align/containers/script.container.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import actions from 'app/actions'
-
-class Timeline extends Component {
-  state = {
-    visible: false,
-  }
-  constructor(props){
-    super(props)
-  }
-  render() {
-    if (this.props.text.loading) return <div />
-    if (!this.state.visible) {
-      return (
-        <div className='script'>
-          <button onClick={() => this.setState({ visible: true })}>
-            +
-          </button>
-        </div>
-      )
-    }
-    return (
-      <div className='script'>
-        <textarea 
-          className='script'
-          onChange={e => actions.site.updateText(e.target.value)}
-          value={this.props.text}
-        />
-        <button onClick={() => this.setState({ visible: false })}>
-          x
-        </button>
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  text: state.site.text,
-})
-
-export default connect(mapStateToProps)(Timeline)
diff --git a/animism-align/frontend/app/views/align/containers/sidebar.container.js b/animism-align/frontend/app/views/align/containers/sidebar.container.js
new file mode 100644
index 0000000..11f5314
--- /dev/null
+++ b/animism-align/frontend/app/views/align/containers/sidebar.container.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import actions from 'app/actions'
+
+import Script from '../components/sidebar/script.component.js'
+import TableOfContents from '../components/sidebar/tableOfContents.component.js'
+
+export default class Sidebar extends Component {
+  state = {
+    mode: "toc",
+  }
+  render() {
+    if (this.state.mode === "toc") {
+      return (
+        <div className='sidebar'>
+          <button onClick={() => this.setState({ mode: "script" })}>
+            +
+          </button>
+          <TableOfContents />
+        </div>
+      )
+    }
+    return (
+      <div className='sidebar'>
+        <Script />
+        <button onClick={() => this.setState({ mode: "toc" })}>
+          x
+        </button>
+      </div>
+    )
+  }
+}