Merge branch 'release/2.3.0'

richard67 · Oct 19, 2023 · e93f429 · e93f429
2 parents cdb8225 + 34d86ad
commit e93f429
Show file tree

Hide file tree

Showing 48 changed files with 10,383 additions and 1,285 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,23 @@
 # Changelog
 
+## v2.3.0, 2023-10-19
+
+Fetched from [heiseonline/shariff](https://github.com/heiseonline/shariff):
+
+- Remove AddThis service ([heiseonline#424](https://github.com/heiseonline/shariff/pull/424)).
+- Add button for Mastodon/Fediverse ([heiseonline#405](https://github.com/heiseonline/shariff/pull/405)).
+- Twitter: Updated max text length ([heiseonline#401](https://github.com/heiseonline/shariff/pull/401)).
+- Feature: copy to clipboard ([heiseonline#389](https://github.com/heiseonline/shariff/pull/389)).
+- Add support for shariff-share custom event ([heiseonline#266](https://github.com/heiseonline/shariff/pull/266)).
+- Compatibility to WordPress Theme Twentyseventeen ([heiseonline#265](https://github.com/heiseonline/shariff/pull/265)).
+- Update README.md to https ([heiseonline#432](https://github.com/heiseonline/shariff/pull/432)).
+- Code style changes.
+- Dependency updates.
+
+Fetched open pull requests from [heiseonline/shariff](https://github.com/heiseonline/shariff):
+
+- Fix missing services in demo, fix README files and add missing CSS for fediverse ([heiseonline#434](https://github.com/heiseonline/shariff/pull/434)).
+
 ## v2.2.3, 2021-06-13
 
 Fixed npm package.

diff --git a/README-de.md b/README-de.md
@@ -33,7 +33,7 @@ Code-Beispiel:
 <!DOCTYPE html>
 <html>
 <head>
-    <link href="/path/to/shariff.complete.css" rel="stylesheet">
+    <link href="/path/to/shariff.min.css" rel="stylesheet">
 </head>
 <body>
     <h1>My article</h1>
@@ -43,10 +43,10 @@ Code-Beispiel:
     <div class="shariff"></div>
 
     <h2>Fortgeschrittene Optionen:</h2>
-    <div class="shariff" data-backend-url="/path/to/backend" data-url="http://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>
+    <div class="shariff" data-backend-url="/path/to/backend" data-url="https://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>
 
     <!-- vor dem schließenden </body>-Tag -->
-    <script src="/path/to/shariff.complete.js"></script>
+    <script src="/path/to/shariff.min.js"></script>
 </body>
 </html>
 ```
@@ -106,15 +106,15 @@ Unterschiede zu Shariff sind mit (1), (2) usw. markiert und werden unterhalb der
 | `data-media-url` | Zu teilendes Bild (pinterest) | `null` |
 | `data-orientation` | Anordnung der Buttons. Verfügbar: `horizontal`, `vertical` | `horizontal`  |
 | `data-referrer-track` | Wenn angegeben, wird dieser String an die geteilte URL angehängt. Mit `null` deaktivieren. | `null` |
-| `data-services` (3)   | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="[&quot;facebook&quot;,&quot;twitter&quot;]"` <br> Verfügbare Dienste: `twitter`, `facebook`, `facebooklike`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard`, `pocket`, `buffer`  | `twitter`, `facebooklike`, `facebook`, `info` |
+| `data-services` (3)   | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="[&quot;facebook&quot;,&quot;twitter&quot;]"` <br> Verfügbare Dienste: `buffer`, `clipboard`, `diaspora`, `facebook`, `facebooklike`, `fediverse`, `flattr`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent`, `threema`, `tumblr`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `twitter`, `facebooklike`, `facebook`, `info` |
 | `data-theme`       | Farbschema auswählen. Verfügbar: `standard`, `grey` und `white`. | `standard` |
 | `data-title`       | Titel der zu teilenden Seite. | Entweder `DC.title`/`DC.creator` oder `<title>` |
 | `data-twitter-via` | User von dem der Tweet ursprünglich stammt. | `null` |
 | `data-url`         | URL, die geteilt werden soll. | Wenn `data-url` nicht gesetzt ist, wird `link[rel="canonical"]`, `meta[property="og:url"]` oder `location.href` verwendet. |
 
 (1) Diese Option gibt es nur bei Shariff-Plus.
 
-(2) Der Standardwert bei Shariff ist `http://ct.de/-2467514`.
+(2) Der Standardwert bei Shariff ist `https://ct.de/-2467514`.
 
 (3) Den Service `facebooklike` gibt es nur bei Shariff-Plus.
 
@@ -131,6 +131,36 @@ new Shariff(buttonsContainer, {
 });
 ```
 
+## Events
+
+Beim Klick auf einen Share-Button wird der `shariff-share` Event ausgelöst.
+
+```js
+$('body').on('shariff-share', function(event) {
+    var service = event.details;
+    ...
+});
+```
+
+Der Event kann verwendet werden um die Interaktionen mittels Analyse-Software aufzuzeichnen. Eine saubere Integration mit dem Tracker setzt voraus, dass der Event-Handler erst registriert wird nachdem das Analytics-Script geladen wurde.
+
+**Beispiel für Piwik:**
+
+```js
+(function() {
+  var _my_piwik_onload = function() {
+    var piwik = this;
+
+    $('body').on('shariff-share', function(event) {
+      var service = event.detail;
+      piwik.trackEvent('Sharing', service.name);
+    });
+  }
+
+  _paq.push([ _my_piwik_onload ]);
+})();
+```
+
 ## Unterstützte Browser
 
 Shariff-Plus unterstützt folgende Browser:
@@ -146,10 +176,11 @@ Die jeweils aktuell letzten und vorletzten Versionen von Firefox, Google Chrome,
 
 Shariff-Plus unterstützt folgende Social-Sharing-Services:
 
-- AddThis
 - buffer
+- Clipboard
 - diaspora*
 - facebook
+- Fediverse
 - Flattr
 - Flipboard
 - LinkedIn
@@ -180,13 +211,13 @@ Die Projekt-Homepage ist auch auf [Englisch](https://www.richard-fath.de/en/soft
 
 Wenn in den Shariff-Buttons die Share-Counts angezeigt werden sollen, wird das folgende Backend benötigt:
 
-* [shariff-backend-php](http://github.com/heiseonline/shariff-backend-php)
+* [shariff-backend-php](https://github.com/heiseonline/shariff-backend-php)
 
 Drittanbieter-Backends:
 
 * [shariff-backend-java](https://github.com/shred/shariff-backend-java)
 
-Die URL, unter der das Backend erreichbar ist, muss im `data`-Attribut `data-backend-url` angegeben werden. Ein Backend unter der URL `http://example.com/my-shariff-backend/` wird in `data-backend-url` so angegeben: `/my-shariff-backend/`. Den Rest erledigt das Skript.
+Die URL, unter der das Backend erreichbar ist, muss im `data`-Attribut `data-backend-url` angegeben werden. Ein Backend unter der URL `https://example.com/my-shariff-backend/` wird in `data-backend-url` so angegeben: `/my-shariff-backend/`. Den Rest erledigt das Skript.
 
 ## Drittanbieter-Integrationen
 

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ Usage example:
     <div class="shariff"></div>
 
     <h2>More advanced buttons:</h2>
-    <div class="shariff" data-backend-url="/path/to/backend" data-url="http://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>
+    <div class="shariff" data-backend-url="/path/to/backend" data-url="https://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>
 
     <!-- immediately before </body> -->
     <script src="/path/to/shariff.min.js"></script>
@@ -106,15 +106,15 @@ Differences to Shariff are marked with (1), (2) and so on and explained below th
 | `data-media-url` | Media url to be shared (pinterest) | `null` |
 | `data-orientation` | `vertical` will stack the buttons vertically. | `horizontal`  |
 | `data-referrer-track` | A string that will be appended to the share url. Can be disabled using `null`. | `null` |
-| `data-services` (3)   | An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="[&quot;facebook&quot;,&quot;twitter&quot;]"` Available service names: `twitter`, `facebook`, `facebooklike`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard`, `pocket`, `buffer` | `twitter`, `facebooklike`, `facebook`, `info` |
+| `data-services` (3)   | An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="[&quot;facebook&quot;,&quot;twitter&quot;]"` Available service names: `buffer`, `clipboard`, `diaspora`, `facebook`, `facebooklike`, `fediverse`, `flattr`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent`, `threema`, `tumblr`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `twitter`, `facebooklike`, `facebook`, `info` |
 | `data-theme`       | We include 3 color schemes, `standard`, `grey` and `white`. | `standard` |
 | `data-title`       | Title to be used as share text in Twitter/Whatsapp | page's `DC.title`/`DC.creator` or `<title>` |
 | `data-twitter-via` | Screen name of the user to attribute the Tweet to | `null` |
 | `data-url`         | The canonical URL of the page to check. | page's canonical URL or `og:url` or current URL |
 
 (1) This option exists only in Shariff-Plus.
 
-(2) The default value of Shariff is `http://ct.de/-2467514`.
+(2) The default value of Shariff is `https://ct.de/-2467514`.
 
 (3) The service `facebooklike` exists only in Shariff-Plus.
 
@@ -132,6 +132,36 @@ new Shariff(buttonsContainer, {
 });
 ```
 
+## Events
+
+Shariff buttons emit the `shariff-share` event if they are clicked.
+
+```js
+$('body').on('shariff-share', function(event) {
+    var service = event.details;
+    ...
+});
+```
+
+This can be used to track shares using analytics software. It is recommended to register the event handler only after the analytics script becomes available.
+
+**Piwik example:**
+
+```js
+(function() {
+  var _my_piwik_onload = function() {
+    var piwik = this;
+
+    $('body').on('shariff-share', function(event) {
+      var service = event.detail;
+      piwik.trackEvent('Sharing', service.name);
+    });
+  }
+
+  _paq.push([ _my_piwik_onload ]);
+})();
+```
+
 ## Supported browsers
 
 Shariff-Plus supports the following Browsers:
@@ -147,10 +177,11 @@ The current and previous major releases of Firefox, Google Chrome, Internet Expl
 
 Shariff-Plus supports the following social sharing services:
 
-- AddThis
 - buffer
+- Clipboard
 - diaspora*
 - facebook
+- Fediverse
 - Flattr
 - Flipboard
 - LinkedIn
@@ -181,13 +212,13 @@ The project homepage is also available in [English](https://www.richard-fath.de/
 
 In order to display share counts with Shariff, you need the following backend:
 
-* [shariff-backend-php](http://github.com/heiseonline/shariff-backend-php)
+* [shariff-backend-php](https://github.com/heiseonline/shariff-backend-php)
 
 Third-party backends:
 
 * [shariff-backend-java](https://github.com/shred/shariff-backend-java)
 
-Once you have one of these backends up and running, insert its URL into the `data-backend-url` attribute. For example, if the backend runs under `http://example.com/my-shariff-backend/`, the `data-backend-url` should be `/my-shariff-backend/`. The script will handle the rest.
+Once you have one of these backends up and running, insert its URL into the `data-backend-url` attribute. For example, if the backend runs under `https://example.com/my-shariff-backend/`, the `data-backend-url` should be `/my-shariff-backend/`. The script will handle the rest.
 
 ## Third-party integrations
 

diff --git a/demo/data-title.html b/demo/data-title.html
@@ -14,29 +14,29 @@
 <body>
     <dl class="layout-hint">
       <dt>data-title:</dt><dd>foo</dd>
-      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,&amp;quot;addthis&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebooklike&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
+      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebooklike&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
     </dl>
     <article class="slim">
-        <div class="shariff" data-title="foo" data-services="[&amp;quot;twitter&amp;quot;,&quot;addthis&quot;,&quot;whatsapp&quot;,&quot;facebooklike&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
+        <div class="shariff" data-title="foo" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebooklike&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
     </article>
 
     <hr>
 
     <dl class="layout-hint">
       <dt>data-title:</dt><dd>bar</dd>
-      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,&amp;quot;addthis&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebooklike&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
+      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebooklike&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
     </dl>
     <article class="slim">
-        <div class="shariff" data-title="bar" data-services="[&amp;quot;twitter&amp;quot;,&quot;addthis&quot;,&quot;whatsapp&quot;,&quot;facebooklike&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
+        <div class="shariff" data-title="bar" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebooklike&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
     </article>
 
     <hr>
 
     <dl class="layout-hint">
-      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,&amp;quot;addthis&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
+      <dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
     </dl>
     <article class="slim">
-        <div class="shariff" data-services="[&amp;quot;twitter&amp;quot;,&quot;addthis&quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
+        <div class="shariff" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
     </article>
 </body>
 </html>