Skip to content

Commit

Permalink
client: Improve sharer labels
Browse files Browse the repository at this point in the history 
Instead of just “facebook” or “pocket”, use “Share on Facebook” and “Save to Pocket” as the labels and tooltips of the sharing buttons. This will make it slightly clearer.

This again changes the signature of selfoss.shares.register:

    (name: String
    , id: String
    , label: String
    , fontawesomeIconClass: String
    , ({url: String, title: String} -> Void
    ) -> bool
  • Loading branch information
@jtojnar
jtojnar committed Oct 16, 2019
1 parent 5fb0d0c commit 933ed88
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 36 deletions.
16 changes: 8 additions & 8 deletions assets/js/selfoss-events-entriestoolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,23 +53,23 @@ selfoss.events.entriesToolbar = function(parent) {
// configure shares
let shares = selfoss.shares.getAll();
if (shares.length > 0) {
if (parent.find('.entry-toolbar').has('button.entry-share' + shares[0]).length == 0) {
if (parent.find('.entry-toolbar').has('button.entry-share' + shares[0].name).length == 0) {
// add the share toolbar entries
parent.find('.entry-smartphone-share button.entry-newwindow').parent().after(selfoss.shares.buildLinks(shares, (name) => {
parent.find('.entry-smartphone-share button.entry-newwindow').parent().after(selfoss.shares.buildLinks(shares, ({name, label, icon}) => {
return `<li>
<button type="button" class="entry-share entry-share${name}" title="${name}" aria-label="${name}">${selfoss.shares.icons[name]} ${name}</button>
<button type="button" class="entry-share entry-share${name}" title="${label}" aria-label="${label}">${icon} ${label}</button>
</li>`;
}));
parent.find('.entry-toolbar button.entry-next').parent().after(selfoss.shares.buildLinks(shares, (name) => {
parent.find('.entry-toolbar button.entry-next').parent().after(selfoss.shares.buildLinks(shares, ({name, label, icon}) => {
return `<li>
<button type="button" class="entry-share entry-share${name}" title="${name}" aria-label="${name}">${selfoss.shares.icons[name]}</button>
<button type="button" class="entry-share entry-share${name}" title="${label}" aria-label="${label}">${icon}</button>
</li>`;
}));
// hookup the share icon click events
for (let share of shares) {
parent.find(`.entry-share${share}`).unbind('click').click(function(e) {
for (let {name} of shares) {
parent.find(`.entry-share${name}`).unbind('click').click(function(e) {
let entry = $(this).parents('.entry');
selfoss.shares.share(share, {
selfoss.shares.share(name, {
url: entry.children('.entry-link').eq(0).attr('href'),
title: entry.find('.entry-title-link').text()
});
Expand Down
55 changes: 27 additions & 28 deletions assets/js/selfoss-shares.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,18 @@ selfoss.shares = {
initialized: false,
sharers: {},
names: {},
icons: {},
enabledShares: '',
enabledShares: [],

/**
* Initialize enabled sharers.
* @param !string sharers enabled on the server
*/
init(enabledShares) {
this.enabledShares = enabledShares;
this.enabledShares = Array.from(enabledShares);
this.initialized = true;

if ('share' in navigator) {
selfoss.shares.register('share', 'a', 'fas fa-share-alt', ({url, title}) => {
selfoss.shares.register('share', selfoss.ui._('share_native_label'), 'a', 'fas fa-share-alt', ({url, title}) => {
navigator.share({
title,
url
Expand All @@ -27,21 +30,21 @@ selfoss.shares = {
});
}

this.register('diaspora', 'd', 'fab fa-diaspora', ({url, title}) => {
this.register('diaspora', selfoss.ui._('share_diaspora_label'), 'd', 'fab fa-diaspora', ({url, title}) => {
window.open('https://share.diasporafoundation.org/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title));
});
this.register('twitter', 't', 'fab fa-twitter', ({url, title}) => {
this.register('twitter', selfoss.ui._('share_twitter_label'), 't', 'fab fa-twitter', ({url, title}) => {
window.open('https://twitter.com/intent/tweet?source=webclient&text=' + encodeURIComponent(title) + ' ' + encodeURIComponent(url));
});
this.register('facebook', 'f', 'fab fa-facebook-square', ({url, title}) => {
this.register('facebook', selfoss.ui._('share_facebook_label'), 'f', 'fab fa-facebook-square', ({url, title}) => {
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title));
});
this.register('pocket', 'p', 'fab fa-get-pocket', ({url, title}) => {
this.register('pocket', selfoss.ui._('share_pocket_label'), 'p', 'fab fa-get-pocket', ({url, title}) => {
window.open('https://getpocket.com/save?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title));
});

if (selfoss.config.wallabag !== null) {
this.register('wallabag', 'w', 'fac fa-wallabag', ({url}) => {
this.register('wallabag', selfoss.ui._('share_wallabag_label'), 'w', 'fac fa-wallabag', ({url}) => {
if (selfoss.config.wallabag.version === 2) {
window.open(selfoss.config.wallabag.url + '/bookmarklet?url=' + encodeURIComponent(url));
} else {
Expand All @@ -51,54 +54,50 @@ selfoss.shares = {
}

if (selfoss.config.wordpress !== null) {
this.register('wordpress', 's', 'fab fa-wordpress-simple', ({url, title}) => {
this.register('wordpress', selfoss.ui._('share_wordpress_label'), 's', 'fab fa-wordpress-simple', ({url, title}) => {
window.open(selfoss.config.wordpress + '/wp-admin/press-this.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title));
});
}

this.register('mail', 'e', 'fas fa-envelope', ({url, title}) => {
this.register('mail', selfoss.ui._('share_mail_label'), 'e', 'fas fa-envelope', ({url, title}) => {
document.location.href = 'mailto:?body=' + encodeURIComponent(url) + '&subject=' + encodeURIComponent(title);
});

this.register('copy', 'c', 'fas fa-copy', ({url}) => {
this.register('copy', selfoss.ui._('share_copy_label'), 'c', 'fas fa-copy', ({url}) => {
clipboard.writeText(url).then(() => {
selfoss.ui.showMessage(selfoss.ui._('info_url_copied'));
});
});
},

register(name, id, icon, sharer) {
register(name, label, id, icon, sharer) {
if (!this.initialized) {
return false;
}
this.sharers[name] = sharer;
this.sharers[name] = {
name,
label,
id,
icon: this.fontawesomeIcon(icon),
callback: sharer
};
this.names[id] = name;
this.icons[name] = this.fontawesomeIcon(icon);
return true;
},

getAll() {
let allNames = [];
if (this.enabledShares != null) {
for (let enabledShare of this.enabledShares) {
if (enabledShare in this.names) {
allNames.push(this.names[enabledShare]);
}
}
}

return allNames;
return this.enabledShares.filter(id => id in this.names).map(id => this.sharers[this.names[id]]);
},

share(name, {url, title}) {
this.sharers[name]({url, title});
this.sharers[name].callback({url, title});
},

buildLinks(shares, linkBuilder) {
let links = '';
if (shares != null) {
for (let name of shares) {
links += linkBuilder(name);
for (let sharer of shares) {
links += linkBuilder(sharer);
}
}
return links;
Expand Down
9 changes: 9 additions & 0 deletions assets/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@
"lang_load_img": "Show images",
"lang_open_window": "Open",
"lang_next": "Next",
"lang_share_native_label": "Share",
"lang_share_diaspora_label": "Share on Diaspora",
"lang_share_twitter_label": "Share on Twitter",
"lang_share_facebook_label": "Share on Facebook",
"lang_share_pocket_label": "Save to Pocket",
"lang_share_wallabag_label": "Save to Wallabag",
"lang_share_wordpress_label": "Share on Wordpress",
"lang_share_mail_label": "Share using e-mail",
"lang_share_copy_label": "Copy link to clipboard",
"lang_search_label": "Search term",
"lang_searchbutton": "Search",
"lang_searchremove": "Hide search",
Expand Down

0 comments on commit 933ed88

Please sign in to comment.