share dialog

2 files changed, 117 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index a5c19d0..f84470f 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -128,6 +128,57 @@
   opacity: 1;
 }
 
+/* Share box */
+
+.nav-share {
+  position: absolute;
+  bottom: 3rem;
+  left: 0;
+  width: 20rem;
+  transform: translateY(30rem);
+  transition: opacity 0.01s, transform 0.2s;
+  padding: 0.5rem 1.5rem;
+  background: black;
+  border: 1px solid white;
+  color: white;
+  font-size: 18px;
+  /*opacity: 0;*/
+}
+.checklist-open .nav-share {
+  top: 3rem;
+  z-index: 21;
+  transform: translateY(-30rem);
+  bottom: auto;
+}
+.share-open .nav-share {
+  transform: translateY(0);
+  opacity: 1;
+}
+.nav-share a {
+  color: white;
+  text-decoration: none;
+}
+.nav-share .share-success {
+  display: none;
+}
+.nav-share.copying .share-success {
+  margin-left: 1rem;
+  display: inline;
+  opacity: 1;
+  color: white;
+  font-size: 0.75rem;
+}
+.nav-share.copying.copied .share-success {
+  opacity: 0;
+  transition: opacity 1.0s 1.0s;
+}
+.nav-share .share-option {
+  padding: 0.5rem 0;
+}
+.nav-share .share-copy {
+  cursor: pointer;
+}
+
 /* Arrows */
 
 .arrow svg {
@@ -254,4 +305,4 @@
 }
 .zoomPlus path {
   stroke: white;
-}
\ No newline at end of file
+}
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.share.js b/animism-align/frontend/app/views/viewer/nav/nav.share.js
new file mode 100644
index 0000000..1e32860
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/nav/nav.share.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+
+import { writeToClipboard } from 'app/utils'
+
+export default class NavShare extends Component {
+  state = {
+    copied: false,
+  }
+  constructor(props){
+    super(props)
+    this.copyToClipboard = this.copyToClipboard.bind(this)
+  }
+  copyToClipboard() {
+    const url = "https://e-flux.com/"
+    writeToClipboard(url).then(() =>{
+      clearTimeout(this.timeout)
+      this.setState({ copying: true, copied: false, })
+      this.timeout = setTimeout(() => {
+        this.setState({ copying: true, copied: true })
+        this.timeout = setTimeout(() => this.setState({ copied: false, copying: false, }), 2200)
+      }, 50)
+    })
+  }
+  render() {
+    const { viewer } = this.props
+    let className = "nav-share"
+    if (this.state.copying) className += " copying"
+    if (this.state.copied) className += " copied"
+    const title = "Animism Episode 1"
+    const url = "https://e-flux.com/"
+    const mailtoURL = (
+      "mailto:?subject=" + encodeURIComponent(title) +
+      "&body=" + encodeURIComponent("I want to share this post on e-flux: " + url + "\n\n\n")
+    )
+    const facebookURL = (
+      "https://www.facebook.com/sharer.php" +
+      "?u=" + encodeURIComponent(url) +
+      "&t=" + encodeURIComponent(title)
+    )
+    const twitterURL = (
+      "https://twitter.com/intent/tweet" +
+      "?url=" + encodeURIComponent(url) +
+      "&text=" + encodeURIComponent(title)
+    )
+    return (
+      <div className={className}>
+        <div className="share-option">
+          <a href={mailtoURL}>Email</a>
+        </div>
+        <div className="share-option">
+          <a href={facebookURL}>Facebook</a>
+        </div>
+        <div className="share-option">
+          <a href={twitterURL}>Twitter</a>
+        </div>
+        <div className="share-option">
+          <div className="share-copy" onClick={this.copyToClipboard}>
+            Copy Link
+            <span className="share-success">success</span>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}