Merge pull request #183 from Retrospring/feature/web-share

Add share buttons to answers using Web Share API
This commit is contained in:
Karina Kwiatek 2021-08-10 20:26:47 +02:00 committed by GitHub
commit 11e8555dae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 78 additions and 5 deletions

View File

@ -61,4 +61,25 @@
}
}
}
&__actions {
text-align: right;
justify-content: space-between;
padding-top: 10px;
@include media-breakpoint-up('sm') {
justify-content: flex-end;
padding-top: 0;
}
}
.card-body {
padding-bottom: .6rem;
}
}
body:not(.cap-web-share) {
.answerbox__action[name="ab-share"] {
display: none;
}
}

View File

@ -1,3 +1,5 @@
import start from '../retrospring/common';
import initAnswerbox from '../retrospring/features/answerbox/index';
start();
document.addEventListener('turbolinks:load', initAnswerbox);

View File

@ -0,0 +1,17 @@
import registerEvents from "retrospring/utilities/registerEvents";
import {createShareEvent} from "./share";
export default (): void => {
if ('share' in navigator) {
document.body.classList.add('cap-web-share');
const entries: NodeList = document.querySelectorAll('.answerbox:not(.js-initialized)');
entries.forEach((element: HTMLElement) => {
registerEvents([
{ type: 'click', target: element.querySelector('[name=ab-share]'), handler: createShareEvent(element) }
]);
element.classList.add('js-initialized');
});
}
}

View File

@ -0,0 +1,11 @@
import noop from 'retrospring/utilities/noop';
export function createShareEvent(answerbox: HTMLElement): () => void {
return function (): void {
navigator.share({
url: answerbox.querySelector<HTMLAnchorElement>('.answerbox__answer-date > a, a.answerbox__permalink').href
})
.then(noop)
.catch(noop)
}
}

View File

@ -0,0 +1,3 @@
export default (): void => {
// do nothing
}

View File

@ -0,0 +1,17 @@
interface EventDef {
type: string;
target: Node | NodeList;
handler: EventListenerOrEventListenerObject;
}
export default function registerEvents(events: EventDef[]): void {
events.forEach(event => {
if (event.target instanceof NodeList) {
event.target.forEach(element => {
element.addEventListener(event.type, event.handler);
});
} else if (event.target instanceof Node) {
event.target.addEventListener(event.type, event.handler);
}
});
}

View File

@ -16,6 +16,8 @@
%button.btn.btn-link.answerbox__action{ type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden } }
%i.fa.fa-fw.fa-comments
%span{ id: "ab-comment-count-#{a.id}" }= a.comment_count
%button.btn.btn-link.answerbox__action{ type: :button, name: 'ab-share' }
%i.fa.fa-fw.fa-share-alt{ title: 'Share' }
- if user_signed_in?
.btn-group
%button.btn.btn-default.btn-sm.dropdown-toggle{ data: { toggle: :dropdown }, aria: { expanded: false } }

View File

@ -16,7 +16,7 @@
= markdown a.content
- if @user.nil?
.row
.col.col-sm-4.col-md-6.text-left.text-muted
.col-sm-6.text-left.text-muted
.media
.pull-left
%a{ href: show_user_profile_path(a.user.screen_name) }
@ -26,14 +26,14 @@
= raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), 'd-none d-sm-inline'), user: user_screen_name(a.user))
.answerbox__answer-date
= link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
.col.col-sm-8.col-md-6.text-right
.col-md-6.d-flex.d-md-block.answerbox__actions
= render 'answerbox/actions', a: a, display_all: display_all
- else
.row
.col-4.col-sm-4.col-md-6.text-left.text-muted
.col-md-6.text-left.text-muted
%i.fa.fa-clock-o
= link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
.col-8.col-sm-8.col-md-6.text-right
= link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id), class: 'answerbox__permalink')
.col-md-6.d-md-flex.answerbox__actions
= render 'answerbox/actions', a: a, display_all: display_all
.card-footer{ id: "ab-comments-section-#{a.id}", style: display_all.nil? ? 'display: none' : nil }
%div{ id: "ab-smiles-#{a.id}" }= render 'answerbox/smiles', a: a