docbrown/app/views/articles/_actions.html.erb
Fernando Valverde c347efd11b
Use navigator.share on mobile devices (#13809)
* First commit

* Standardize Runtime Filters to use -only suffix

* Always present native share option if available

* Reorder native share option

* Remove unused Desktop-only CSS rule

* Adding ahoy (first commit)

* Add Ahoy stats

* Trigger Travis

* Add optional chaining

* Move ahoy stat collection to different component

* Coverage threshold update

* Add missing Desktop-only CSS rule that was missing

* Add assert in Cypress test

* Apply review feedback

* Isolate navigator.share related assertions

* Fix tests

* Test

* Update app/javascript/packs/articlePage.jsx

Co-authored-by: Nick Taylor <nick@forem.com>

* Isolate tests in separate spec

* Fix tests (fingers crossed)

* Remove changes to unchanged spec

Co-authored-by: Nick Taylor <nick@forem.com>
2021-06-15 06:39:33 -06:00

103 lines
5.1 KiB
Text

<div class="crayons-article-actions print-hidden">
<div class="crayons-article-actions__inner">
<% if @article.published? %>
<%= render partial: "articles/reaction_button",
locals: {
category: :like,
description: "Heart",
image_path: "heart.svg",
image_active_path: "heart-filled.svg",
aria_label: "Like"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :unicorn,
description: "Unicorn",
image_path: "unicorn.svg",
image_active_path: "unicorn-filled.svg",
aria_label: "React with unicorn"
} %>
<%= render partial: "articles/reaction_button",
locals: {
category: :readinglist,
description: "Saved",
image_path: "save.svg",
image_active_path: "save-filled.svg",
aria_label: "Add to reading list"
} %>
<% end %>
<div class="align-center m:relative">
<button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options">
<%= inline_svg_tag("overflow-horizontal.svg", aria_hidden: true, class: "dropdown-icon crayons-icon", title: "More...") %>
</button>
<div id="article-show-more-dropdown" class="crayons-dropdown p-1 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
<clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
<div class="flex items-center">
<input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" aria-label="Post URL" class="crayons-textfield" readonly />
<%= inline_svg_tag("copy.svg", aria: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: "Copy article link to the clipboard") %>
</div>
<div id="article-copy-link-announcer" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div>
</clipboard-copy>
<div class="Desktop-only">
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@#{@article.user.twitter_username}" : @article.user.name %> <%= u Settings::General.twitter_hashtag %> <%= article_url(@article) %>'>
Share to Twitter
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
Share to LinkedIn
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
Share to Reddit
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
Share to Hacker News
</a>
<a
target="_blank"
class="dropdown-link-row crayons-link crayons-link--block"
rel="noopener"
href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
Share to Facebook
</a>
</div>
<web-share-wrapper shareurl="<%= article_url(@article) %>" sharetitle="<%= @article.title %>" sharetext="<%= @article.description %>" template="web-share-button">
</web-share-wrapper>
<template id="web-share-button">
<a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a>
</template>
<a href="/report-abuse" class="dropdown-link-row crayons-link crayons-link--block">Report Abuse</a>
</div>
</div>
</div>
</div>
<% if !user_signed_in? && @article.body_markdown.size > 900 %>
<% cache("below-article-html-variant-#{rand(20)}", expires_in: 8.hours) do %>
<% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array, "article_show_below_article_cta") %>
<% if @html_variant %>
<div class="html-variant-wrapper" id="html-variant-article-show-below-article" data-variant-id="<%= @html_variant.id %>">
<%= @html_variant.html.html_safe %>
</div>
<% end %>
<% end %>
<% end %>