Merge branch 'release/3.0.0'

heiseonline · Mar 15, 2018 · 4c2a0f8 · 4c2a0f8
2 parents 25c90e8 + 3b86f03
commit 4c2a0f8
Show file tree

Hide file tree

Showing 41 changed files with 272 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## v3.0.0, 2018-03-15
+
+- Added smaller share button variants. (richard67)
+- Added Flipboard service. (richard67)
+- Updated Font Awesome to version 5 (free 1.0.3). (richard67)
+- Improved default service list documentation. (richard67)
+- Fixed compatibility with Bootstrap 4. (richard67)
+- Fixed reddit icon. (richard67)
+
 ## v2.1.3, 2018-02-23
 
 - Added czech translations. (mat-hew1)

diff --git a/README-de.md b/README-de.md
@@ -85,6 +85,7 @@ $ npm run dev
 | Attribut         | Beschreibung | Default |
 |------------------|--------------|---------|
 | `data-backend-url` | Pfad zum Shariff-[Backend](#backends). Der Wert `null` deaktiviert die Anzeige von Share-Counts.  | `null` |
+| `data-button-style` | Wie die Buttons angezeigt werden. Werte: `standard`, `icon`, `icon-count`. Bei `icon` wird nur das Icon angezeigt, bei `icon-count` werden Icon und Zähler und bei `standard` Icon, Text und Zähler abhängig von der Display-Größe angezeigt. | `standard` |
 | `data-flattr-category` | Kategorie für Flattr-Spende. | `null` |
 | `data-flattr-user` | Benutzer, der die Flattr-Spende erhält. | `null` |
 | `data-info-url` | URL der Infoseite. | `http://ct.de/-2467514` |
@@ -96,7 +97,7 @@ $ npm run dev
 | `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`   | 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;googleplus&quot;]"` <br> Verfügbare Dienste: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`  | Twitter, Facebook, Google+ |
+| `data-services`   | 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;googleplus&quot;]"` <br> Verfügbare Dienste: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard`  | `twitter`, `facebook`, `googleplus`, `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` |
@@ -134,6 +135,7 @@ Shariff unterstützt folgende Social-Sharing-Services:
 - diaspora*
 - facebook
 - Flattr
+- Flipboard
 - Google+
 - LinkedIn
 - Mail

diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ $ npm run dev
 | Attribute        | Description | Default |
 |------------------|-------------|---------|
 | `data-backend-url` | The path to your Shariff backend, see below. Setting the value to `null` disables the backend feature. No counts will occur.  | `null` |
+| `data-button-style` | How to display the buttons. Values: `standard`, `icon`, `icon-count`. With `icon` only the icon is shown, with `icon-count` icon and counter and with `standard` icon, text and counter are shown, depending on the display size.  | `standard` |
 | `data-flattr-category` | Category to be used for Flattr. | `null` |
 | `data-flattr-user` | User that receives Flattr donation. | `null` |
 | `data-info-url` | URL of the info page. | `http://ct.de/-2467514` |
@@ -97,7 +98,7 @@ $ npm run dev
 | `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`   | An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="[&quot;facebook&quot;,&quot;googleplus&quot;]"` Available service names: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk` | `twitter`, `facebook`, `googleplus`, `info` |
+| `data-services`   | An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="[&quot;facebook&quot;,&quot;googleplus&quot;]"` Available service names: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard` | `twitter`, `facebook`, `googleplus`, `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` |
@@ -136,6 +137,7 @@ Shariff supports the following social sharing services:
 - diaspora*
 - facebook
 - Flattr
+- Flipboard
 - Google+
 - LinkedIn
 - Mail

diff --git a/demo/app.less b/demo/app.less
@@ -24,13 +24,21 @@ article {
             font-weight: bold;
         }
     }
-    &.wide {
+    &.wide, &.wide-icon, &.wide-icon-count {
         h1 {
             font-size: 2em;
             @media only screen and (min-width: 600px) {
                 font-size: 2.9em;
             }
         }
+        #article_content {
+            p {
+                margin: 0;
+                line-height: 1.4;
+            }
+        }
+    }
+    &.wide {
         #article_extras {
             @media only screen and (min-width: 600px) {
                 width: 30%;
@@ -46,17 +54,28 @@ article {
                 width: 70%;
                 float: left;
             }
-            p {
-                margin: 0;
-                line-height: 1.4;
-            }
+        }
+    }
+    &.wide-icon {
+        #article_extras {
+            width: 35px;
+            float: left;
+            padding-right: 30px;
+        }
+    }
+    &.wide-icon-count {
+        #article_extras {
+            width: 80px;
+            float: left;
+            padding-right: 30px;
         }
     }
 }
 hr {
     margin: 40px 0 20px;
     border-top: 3px dashed #ccc;
     border-bottom: none;
+    clear: left;
 }
 .layout-hint {
     font-size: .8em;

diff --git a/demo/fonts b/demo/fonts
@@ -1 +1 @@
-../node_modules/font-awesome/fonts/
+../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/
diff --git a/demo/index.html b/demo/index.html
@@ -26,12 +26,43 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
         <dt>data-backend-url:</dt><dd>/shariff/</dd>
         <dt>data-media-url:</dt><dd>http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png</dd>
         <dt>data-flattr-user:</dt><dd>example</dd>
-        <dt>data-services:</dt><dd>[&amp;quot;addthis&amp;quot;,&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;,&amp;quot;telegram&amp;quot;,&amp;quot;vk&amp;quot;]</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;addthis&amp;quot;,&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;,&amp;quot;telegram&amp;quot;,&amp;quot;vk&amp;quot;,&amp;quot;flipboard&amp;quot;,&amp;quot;info&amp;quot;]</dd>
     </dl>
     <article class="slim">
         <header>
             <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
-            <div data-backend-url="/backend.json" data-flattr-user="example" class="shariff" data-services="[&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;,&quot;telegram&quot;,&quot;vk&quot;]" data-media-url="http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png"></div>
+            <div data-backend-url="/backend.json" data-flattr-user="example" class="shariff" data-services="[&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;,&quot;telegram&quot;,&quot;vk&quot;,&quot;flipboard&quot;,&quot;info&quot;]" data-media-url="http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png"></div>
+            <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time>
+        </header>
+        <p class="deck">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
+    </article>
+    <hr>
+    <dl class="layout-hint">
+        <dt>data-backend-url:</dt><dd>/shariff/</dd>
+        <dt>data-media-url:</dt><dd>http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png</dd>
+        <dt>data-flattr-user:</dt><dd>example</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;addthis&amp;quot;,&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;,&amp;quot;telegram&amp;quot;,&amp;quot;vk&amp;quot;,&amp;quot;flipboard&amp;quot;,&amp;quot;info&amp;quot;]</dd>
+        <dt>data-button-style:</dt><dd>icon-count</dd>
+    </dl>
+    <article class="slim">
+        <header>
+            <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
+            <div data-backend-url="/backend.json" data-flattr-user="example" class="shariff" data-services="[&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;,&quot;telegram&quot;,&quot;vk&quot;,&quot;flipboard&quot;,&quot;info&quot;]" data-media-url="http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png" data-button-style="icon-count"></div>
+            <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time>
+        </header>
+        <p class="deck">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
+    </article>
+    <hr>
+    <dl class="layout-hint">
+        <dt>data-media-url:</dt><dd>http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png</dd>
+        <dt>data-flattr-user:</dt><dd>example</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;addthis&amp;quot;,&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;,&amp;quot;telegram&amp;quot;,&amp;quot;vk&amp;quot;,&amp;quot;flipboard&amp;quot;,&amp;quot;info&amp;quot;]</dd>
+        <dt>data-button-style:</dt><dd>icon</dd>
+    </dl>
+    <article class="slim">
+        <header>
+            <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
+            <div data-flattr-user="example" class="shariff" data-services="[&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;,&quot;telegram&quot;,&quot;vk&quot;,&quot;flipboard&quot;,&quot;info&quot;]" data-media-url="http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png" data-button-style="icon"></div>
             <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time>
         </header>
         <p class="deck">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
@@ -99,5 +130,35 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
             <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. </p>
         </section>
     </article>
+    <hr>
+    <dl class="layout-hint">
+        <dt>data-backend-url:</dt><dd>/shariff/?foo=bar</dd>
+        <dt>data-orientation:</dt><dd>vertical</dd>
+        <dt>data-button-style:</dt><dd>icon-count</dd>
+    </dl>
+    <article class="wide-icon-count">
+        <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
+        <aside id="article_extras">
+            <div data-backend-url="/backend.json?foo=bar" class="shariff" data-orientation="vertical" data-button-style="icon-count"></div>
+        </aside>
+        <section id="article_content">
+            <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. </p>
+        </section>
+    </article>
+    <hr>
+    <dl class="layout-hint">
+        <dt>data-backend-url:</dt><dd>/shariff/?foo=bar</dd>
+        <dt>data-orientation:</dt><dd>vertical</dd>
+        <dt>data-button-style:</dt><dd>icon</dd>
+    </dl>
+    <article class="wide-icon">
+        <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
+        <aside id="article_extras">
+            <div data-backend-url="/backend.json?foo=bar" class="shariff" data-orientation="vertical" data-button-style="icon"></div>
+        </aside>
+        <section id="article_content">
+            <p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. </p>
+        </section>
+    </article>
 </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shariff",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "Shariff enables website users to share their favorite content without compromising their privacy.",
   "main": "src/js/shariff.js",
   "scripts": {
@@ -36,7 +36,7 @@
     }
   ],
   "dependencies": {
-    "font-awesome": "^4.3.0",
+    "@fortawesome/fontawesome-free-webfonts": "^1.0.3",
     "jquery": "^3.2.1"
   },
   "publishConfig": {

diff --git a/src/js/services/addthis.js b/src/js/services/addthis.js
@@ -32,6 +32,7 @@ module.exports = function(shariff) {
       'zh': '分享'
     },
     name: 'addthis',
+    faPrefix: 'fas',
     faName: 'fa-plus',
     title: {
       'bg': 'Сподели в AddThis',

diff --git a/src/js/services/diaspora.js b/src/js/services/diaspora.js
@@ -39,6 +39,7 @@ module.exports = function(shariff) {
       'zh': '分享'
     },
     name: 'diaspora',
+    faPrefix: 'fas',
     faName: 'fa-asterisk',
     title: {
       'bg': 'Сподели в Diaspora',

diff --git a/src/js/services/facebook.js b/src/js/services/facebook.js
@@ -32,7 +32,8 @@ module.exports = function(shariff) {
       'zh': '分享'
     },
     name: 'facebook',
-    faName: 'fa-facebook',
+    faPrefix: 'fab',
+    faName: 'fa-facebook-f',
     title: {
       'bg': 'Сподели във Facebook',
       'cs': 'Sdílet na Facebooku',

diff --git a/src/js/services/flattr.js b/src/js/services/flattr.js
@@ -9,7 +9,8 @@ module.exports = function(shariff) {
     popup: true,
     shareText: 'Flattr',
     name: 'flattr',
-    faName: 'fa-money',
+    faPrefix: 'far',
+    faName: 'fa-money-bill-alt',
     title: {
       'de': 'Artikel flattrn',
       'en': 'Flattr this'

diff --git a/src/js/services/flipboard.js b/src/js/services/flipboard.js
@@ -0,0 +1,41 @@
+'use strict'
+
+module.exports = function(shariff) {
+  var url = encodeURIComponent(shariff.getURL())
+  var title = encodeURIComponent(shariff.getTitle())
+  return {
+    popup: true,
+    shareText: 'flip it',
+    name: 'flipboard',
+    faPrefix: 'fab',
+    faName: 'fa-flipboard',
+    title: {
+      'bg': 'Сподели в Flipboard',
+      'cs': 'Sdílet na Flipboardu',
+      'da': 'Del på Flipboard',
+      'de': 'Bei Flipboard teilen',
+      'en': 'Share on Flipboard',
+      'es': 'Compartir en Flipboard',
+      'fi': 'Jaa Flipboardissä',
+      'fr': 'Partager sur Flipboard',
+      'hr': 'Podijelite na Flipboardu',
+      'hu': 'Megosztás Flipboardon',
+      'it': 'Condividi su Flipboard',
+      'ja': 'Flipboard上で共有',
+      'ko': 'Flipboard에서 공유하기',
+      'nl': 'Delen op Flipboard',
+      'no': 'Del på Flipboard',
+      'pl': 'Udostępnij na Flipboardu',
+      'pt': 'Compartilhar no Flipboard',
+      'ro': 'Partajează pe Flipboard',
+      'ru': 'Поделиться на Flipboard',
+      'sk': 'Zdieľať na Flipboardu',
+      'sl': 'Deli na Flipboardu',
+      'sr': 'Podeli na Flipboard-u',
+      'sv': 'Dela på Flipboard',
+      'tr': 'Flipboard\'ta paylaş',
+      'zh': '在Flipboard上分享'
+    },
+    shareUrl: 'https://share.flipboard.com/bookmarklet/popout?v=2&title=' + title + '&url=' + url + shariff.getReferrerTrack()
+  }
+}