Share article URL (#329)

* Share article URL * Adding msg key * Add share option to actions * Update share icon color * Leave other actions untouched * Propagate sharing-enabled flag * Update share icon svg Co-authored-by: Stephane Bisson <[email protected]> Co-authored-by: Eduardo <[email protected]>
wikimedia · Mar 24, 2021 · a89168c · a89168c
1 parent 19ec29d
commit a89168c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 4 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -10,6 +10,7 @@
     "article-action-quickfacts": "Quick Facts",
     "article-action-gallery": "Gallery",
     "article-action-languages": "Language",
+    "article-action-share": "Share",
     "article-language-available": "Available in $1 {{PLURAL:$1|language|languages}}",
     "article-language-loading-message": "Loading languages...",
     "article-loading-message": "Loading page...",

diff --git a/i18n/qqq.json b/i18n/qqq.json
@@ -11,6 +11,7 @@
 	"article-action-quickfacts": "The action button quick facts text on the first page of the article used to open the quick facts page and the label of the Quick facts item shown in the Menu page.",
 	"article-action-gallery": "The action button gallery text on the first page of the article used to open the gallery page.",
 	"article-action-languages": "The action button language text on the first page of the article used to open the language page and the label of the language item shown in the Menu page.",
+	"article-action-share": "The menu item to share an article URL.",
 	"article-language-available": "The header title of the article language search page. The word \"available\" refers to the article.",
 	"article-language-loading-message": "The message when loading the article's language page. Shown in the article language page",
 	"article-loading-message": "The message when loading the article. Shown in the article page",

diff --git a/images/icon-share.svg b/images/icon-share.svg
diff --git a/src/components/Article.js b/src/components/Article.js
@@ -11,7 +11,7 @@ import {
   useArticlePagination, useArticleLinksNavigation,
   usePopup, useTracking
 } from 'hooks'
-import { articleHistory, confirmDialog, goto, viewport } from 'utils'
+import { articleHistory, confirmDialog, goto, viewport, buildWpMobileWebUrl } from 'utils'
 import { FontContext } from 'contexts'
 
 const ArticleBody = memo(({ content }) => {
@@ -152,6 +152,7 @@ const ArticleInner = ({ lang, articleTitle, initialAnchor }) => {
   const [showGalleryPopup] = usePopup(Gallery, { mode: 'fullscreen', stack: true })
   const [currentSection, setCurrentSection, currentPage] = useArticlePagination(containerRef, article, anchor)
   const section = article.sections[currentSection]
+  const sharedEnabled = !!window.MozActivity // disabled on browsers (not supported)
   const goToArticleSubpage = ({ sectionIndex, anchor }) => {
     setCurrentSection(
       sectionIndex !== undefined
@@ -179,15 +180,28 @@ const ArticleInner = ({ lang, articleTitle, initialAnchor }) => {
     showGalleryPopup({ items: article.media, startFileName, lang, dir })
   }
 
+  const shareArticleUrl = () => {
+    // eslint-disable-next-line no-new
+    new window.MozActivity({
+      name: 'share',
+      data: {
+        type: 'url',
+        url: buildWpMobileWebUrl(lang, articleTitle)
+      }
+    })
+  }
+
   const showArticleMenu = () => {
     showMenuPopup({
       onTocSelected: showArticleTocPopup,
       onLanguageSelected: showArticleLanguagePopup,
       onQuickFactsSelected: showQuickFacts,
       onGallerySelected: showGallery,
+      onShareArticleUrl: shareArticleUrl,
       hasInfobox: !!article.infobox,
       hasLanguages: article.languageCount,
-      hasGallery: !!article.media.length
+      hasGallery: !!article.media.length,
+      isShareEnabled: sharedEnabled
     })
   }
 
@@ -222,7 +236,8 @@ const ArticleInner = ({ lang, articleTitle, initialAnchor }) => {
   const actions = currentSection === 0 ? [
     { name: 'sections', enabled: true, handler: showArticleTocPopup },
     { name: 'gallery', enabled: !!article.media.length, handler: showGallery },
-    { name: 'languages', enabled: article.languageCount, handler: showArticleLanguagePopup }
+    { name: 'languages', enabled: article.languageCount, handler: showArticleLanguagePopup },
+    { name: 'share', enabled: sharedEnabled, handler: shareArticleUrl }
   ] : null
 
   return (

diff --git a/src/components/ArticleMenu.js b/src/components/ArticleMenu.js
@@ -7,7 +7,9 @@ import { ListView, TextSize } from 'components'
 export const ArticleMenu = ({
   close, onTocSelected, onLanguageSelected,
   onQuickFactsSelected, onGallerySelected,
-  hasLanguages, hasInfobox, hasGallery
+  onShareArticleUrl,
+  hasLanguages, hasInfobox, hasGallery,
+  isShareEnabled
 }) => {
   const containerRef = useRef()
   const listRef = useRef()
@@ -88,6 +90,11 @@ export const ArticleMenu = ({
       title: i18n('article-action-languages'),
       action: onLanguageSelected,
       enabled: hasLanguages
+    },
+    {
+      title: i18n('article-action-share'),
+      action: onShareArticleUrl,
+      enabled: isShareEnabled
     }
   ]