client: allow arbitrary icons for sharers

so that users can register their own with emoji icons. Also update NEWS.
fossar · Oct 16, 2019 · ea83300 · ea83300
1 parent 933ed88
commit ea83300
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -9,7 +9,7 @@
 - Long articles will no longer be arranged into columns, allowing for smoother reading experience ([#1081](https://github.com/SSilence/selfoss/pull/1081))
 - Diaspora share button was added, you can enable it with `d`. ([#1121](https://github.com/SSilence/selfoss/pull/1121))
 - “Copy to clipboard” share button was added, you can enable it with `c`. ([#1142](https://github.com/SSilence/selfoss/pull/1142))
-- [Native sharer](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) is available in secure contexts in browsers that support it. You can enable it by adding `a` to `share` key in your config.
+- [Native sharer](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) is available in secure contexts in browsers that support it. You can enable it by adding `a` to `share` key in your config. ([#1035](https://github.com/SSilence/selfoss/pull/1035))
 
 ### Bug fixes
 - Reddit spout allows wider range of URLs, including absolute URLs and searches ([#1033](https://github.com/SSilence/selfoss/pull/1033))
@@ -24,7 +24,10 @@
 - API is now versioned separately from selfoss and follows [semantic versioning](https://semver.org/) ([#1137](https://github.com/SSilence/selfoss/pull/1137))
 
 ### Customization changes
-- `selfoss.shares.register` changed its signature: it no longer takes a boolean argument, and the callback is expected to open a window itself, instead of returning a URL. For example, if you previously had
+- `selfoss.shares.register` changed its signature: it no longer takes a boolean argument, and the callback is expected to open a window itself, instead of returning a URL. The `register` method now also expects a label and a HTML code of an icon (you can use a `<img>` tag, inline `<svg>`, emoji, etc.).
+
+  To demonstrate, if you previously had
+
   ```javascript
   selfoss.shares.register('moo', 'm', true, function(url, title) {
       return 'http://moo.foobar/share?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title);
@@ -34,12 +37,20 @@
   in your `user.js` file, you will need to change it to
 
   ```javascript
-  selfoss.shares.register('moo', 'm', function(url, title) {
-      window.open('http://moo.foobar/share?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title));
+  selfoss.shares.register('moo', 'Share using Moo', 'm', '🚛', function(data) {
+      window.open('http://moo.foobar/share?u=' + encodeURIComponent(data.url) + '&t=' + encodeURIComponent(data.title));
+  });
+  ```
+
+  or if your browser supports it, simply
+
+  ```javascript
+  selfoss.shares.register('moo', 'Share using Moo', 'm', '🚛', ({url, title}) => {
+      window.open(`http://moo.foobar/share?u=${encodeURIComponent(url)}&t=${encodeURIComponent(title)}`);
   });
   ```
 
-  ([#1017](https://github.com/SSilence/selfoss/pull/1017))
+  ([#1017](https://github.com/SSilence/selfoss/pull/1017), [#1035](https://github.com/SSilence/selfoss/pull/1035))
 - Some language files have been renamed to use correct [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag) and you might need to change the `language` key in your `config.ini`:
   * Simplified Chinese `zh-CN`
   * Traditional Chinese `zh-TW`

diff --git a/assets/js/selfoss-shares.js b/assets/js/selfoss-shares.js
@@ -16,7 +16,7 @@ selfoss.shares = {
         this.initialized = true;
 
         if ('share' in navigator) {
-            selfoss.shares.register('share', selfoss.ui._('share_native_label'), 'a', 'fas fa-share-alt', ({url, title}) => {
+            selfoss.shares.register('share', selfoss.ui._('share_native_label'), 'a', this.fontawesomeIcon('fas fa-share-alt'), ({url, title}) => {
                 navigator.share({
                     title,
                     url
@@ -30,21 +30,21 @@ selfoss.shares = {
             });
         }
 
-        this.register('diaspora', selfoss.ui._('share_diaspora_label'), 'd', 'fab fa-diaspora', ({url, title}) => {
+        this.register('diaspora', selfoss.ui._('share_diaspora_label'), 'd', this.fontawesomeIcon('fab fa-diaspora'), ({url, title}) => {
             window.open('https://share.diasporafoundation.org/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title));
         });
-        this.register('twitter', selfoss.ui._('share_twitter_label'), 't', 'fab fa-twitter', ({url, title}) => {
+        this.register('twitter', selfoss.ui._('share_twitter_label'), 't', this.fontawesomeIcon('fab fa-twitter'), ({url, title}) => {
             window.open('https://twitter.com/intent/tweet?source=webclient&text=' + encodeURIComponent(title) + ' ' + encodeURIComponent(url));
         });
-        this.register('facebook', selfoss.ui._('share_facebook_label'), 'f', 'fab fa-facebook-square', ({url, title}) => {
+        this.register('facebook', selfoss.ui._('share_facebook_label'), 'f', this.fontawesomeIcon('fab fa-facebook-square'), ({url, title}) => {
             window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title));
         });
-        this.register('pocket', selfoss.ui._('share_pocket_label'), 'p', 'fab fa-get-pocket', ({url, title}) => {
+        this.register('pocket', selfoss.ui._('share_pocket_label'), 'p', this.fontawesomeIcon('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', selfoss.ui._('share_wallabag_label'), 'w', 'fac fa-wallabag', ({url}) => {
+            this.register('wallabag', selfoss.ui._('share_wallabag_label'), 'w', this.fontawesomeIcon('fac fa-wallabag'), ({url}) => {
                 if (selfoss.config.wallabag.version === 2) {
                     window.open(selfoss.config.wallabag.url + '/bookmarklet?url=' + encodeURIComponent(url));
                 } else {
@@ -54,16 +54,16 @@ selfoss.shares = {
         }
 
         if (selfoss.config.wordpress !== null) {
-            this.register('wordpress', selfoss.ui._('share_wordpress_label'), 's', 'fab fa-wordpress-simple', ({url, title}) => {
+            this.register('wordpress', selfoss.ui._('share_wordpress_label'), 's', this.fontawesomeIcon('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', selfoss.ui._('share_mail_label'), 'e', 'fas fa-envelope', ({url, title}) => {
+        this.register('mail', selfoss.ui._('share_mail_label'), 'e', this.fontawesomeIcon('fas fa-envelope'), ({url, title}) => {
             document.location.href = 'mailto:?body=' + encodeURIComponent(url) + '&subject=' + encodeURIComponent(title);
         });
 
-        this.register('copy', selfoss.ui._('share_copy_label'), 'c', 'fas fa-copy', ({url}) => {
+        this.register('copy', selfoss.ui._('share_copy_label'), 'c', this.fontawesomeIcon('fas fa-copy'), ({url}) => {
             clipboard.writeText(url).then(() => {
                 selfoss.ui.showMessage(selfoss.ui._('info_url_copied'));
             });
@@ -78,7 +78,7 @@ selfoss.shares = {
             name,
             label,
             id,
-            icon: this.fontawesomeIcon(icon),
+            icon: icon,
             callback: sharer
         };
         this.names[id] = name;