new twitter and email sharing buttons

Author: Konstiman

examples/project_website/data-config_base.js

@@ -28,7 +28,7 @@ var data_config = {
   context_most_relevant_tooltip: true,
 
   embed_modal: true,
-  share_modal: true,
+  share_modal: false,
 
   doi_outlink: true,
   filter_menu_dropdown: true,
@@ -46,4 +46,7 @@ var data_config = {
 
   highlight_query_terms: true,
   show_context_oa_number: false,
+
+  show_twitter_button: true,
+  show_email_button: true,
 };

vis/js/components/ModalButtons.js

@@ -11,6 +11,8 @@ import EmbedButton from "../templates/buttons/EmbedButton";
 import FAQsButton from "../templates/buttons/FAQsButton";
 import ReloadButton from "../templates/buttons/ReloadButton";
 import ShareButton from "../templates/buttons/ShareButton";
+import TwitterButton from "../templates/buttons/TwitterButton";
+import EmailButton from "../templates/buttons/EmailButton";
 
 const ModalButtons = ({
   showShareButton,
@@ -28,6 +30,8 @@ const ModalButtons = ({
   visTag,
   service,
   showCitationButton,
+  showTwitterButton,
+  showEmailButton,
 }) => {
   useEffect(() => {
     if (["base", "pubmed"].includes(service) && !isEmbedded) {
@@ -38,6 +42,8 @@ const ModalButtons = ({
   return (
     <div id="modals">
       {showShareButton && <ShareButton twitterHashtags={twitterHashtags} />}
+      {showTwitterButton && <TwitterButton />}
+      {showEmailButton && <EmailButton />}
       {showEmbedButton && <EmbedButton onClick={onEmbedButtonClick} />}
       {showFAQsButton && <FAQsButton url={FAQsUrl} />}
       {showViperEditButton && (
@@ -68,6 +74,8 @@ const mapStateToProps = (state) => ({
   visTag: state.misc.visTag,
   service: state.service,
   showCitationButton: state.modals.showCitationButton,
+  showTwitterButton: state.modals.showTwitterButton,
+  showEmailButton: state.modals.showEmailButton,
 });
 
 const mapDispatchToProps = (dispatch) => ({

vis/js/default-config.js

@@ -179,6 +179,10 @@ var config = {
     show_cite_button: false,
     // show citation button for each paper
     cite_papers: false,
+    // show twitter sharing button
+    show_twitter_button: false,
+    // show email sharing button
+    show_email_button: false,
 
 /*** streamgraph settings ***/
     //streamgraph color definition

vis/js/reducers/modals.js

@@ -44,6 +44,8 @@ const modals = (
         openCitationModal: false,
         citedPaper: null,
         exportedPaper: null,
+        showTwitterButton: !!action.configObject.show_twitter_button,
+        showEmailButton: !!action.configObject.show_email_button,
       };
     case "OPEN_EMBED_MODAL":
       return {

vis/js/templates/buttons/EmailButton.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { Button } from "react-bootstrap";
+import useMatomo from "../../utils/useMatomo";
+
+const EmailButton = () => {
+  const title = encodeURIComponent(document.title);
+  const pageUrl = encodeURIComponent(window.location.href);
+  const description = encodeURIComponent(
+    $("meta[name='description']").attr("content")
+  );
+
+  const url = `mailto:?subject=${title}&body=${description} ${pageUrl}`;
+
+  const { trackEvent } = useMatomo();
+
+  const handleClick = () =>
+    trackEvent("Added components", "Share", "E-mail button");
+
+  // TODO localize
+  return (
+    <div>
+      <a
+        className="sharebutton_mail"
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Button
+          bsStyle="primary"
+          title="Share this knowledge map via email"
+          onClick={handleClick}
+        >
+          <i className="fa fa-envelope"></i>
+        </Button>
+      </a>
+    </div>
+  );
+};
+
+export default EmailButton;

vis/js/templates/buttons/TwitterButton.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { Button } from "react-bootstrap";
+import useMatomo from "../../utils/useMatomo";
+
+const TwitterButton = ({ twitterHashtags }) => {
+  const title = encodeURIComponent(document.title);
+  const pageUrl = encodeURIComponent(window.location.href);
+  twitterHashtags = encodeURIComponent(twitterHashtags);
+
+  const url = `https://twitter.com/intent/tweet?url=${pageUrl}&hashtags=${twitterHashtags}&text=${title}`;
+
+  const { trackEvent } = useMatomo();
+
+  const handleClick = () =>
+    trackEvent("Added components", "Share", "Twitter button");
+
+  // TODO localize
+  return (
+    <div>
+      <a
+        className="sharebutton_twitter"
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Button
+          bsStyle="primary"
+          title="Share this knowledge map via Twitter"
+          onClick={handleClick}
+        >
+          <i className="fab fa-twitter"></i>
+        </Button>
+      </a>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  twitterHashtags: state.modals.twitterHashtags,
+});
+
+export default connect(mapStateToProps)(TwitterButton);