From 5de185c317fce42658758ba34988ff729038476d Mon Sep 17 00:00:00 2001 From: Richard Fath Date: Sat, 24 Feb 2018 12:42:49 +0100 Subject: [PATCH 01/19] Change to font awesome v5 - free webfonts v1.1.3 --- package.json | 2 +- src/js/services/addthis.js | 1 + src/js/services/diaspora.js | 1 + src/js/services/facebook.js | 3 ++- src/js/services/flattr.js | 3 ++- src/js/services/googleplus.js | 3 ++- src/js/services/info.js | 1 + src/js/services/linkedin.js | 3 ++- src/js/services/mail.js | 1 + src/js/services/pinterest.js | 1 + src/js/services/print.js | 1 + src/js/services/qzone.js | 1 + src/js/services/reddit.js | 1 + src/js/services/stumbleupon.js | 1 + src/js/services/telegram.js | 1 + src/js/services/tencent-weibo.js | 1 + src/js/services/threema.js | 1 + src/js/services/tumblr.js | 1 + src/js/services/twitter.js | 1 + src/js/services/vk.js | 1 + src/js/services/weibo.js | 1 + src/js/services/whatsapp.js | 1 + src/js/services/xing.js | 1 + src/js/shariff.js | 4 ++-- src/style/services/facebook.less | 4 ++-- src/style/services/flattr.less | 4 ++-- src/style/services/googleplus.less | 4 ++-- src/style/services/linkedin.less | 4 ++-- src/style/shariff-complete.less | 5 ++++- src/style/shariff-layout.less | 8 ++++++-- 30 files changed, 47 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index aae31dd3..2c0bfc08 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ } ], "dependencies": { - "font-awesome": "^4.3.0", + "@fortawesome/fontawesome-free-webfonts": "^1.1.3", "jquery": "^3.2.1" }, "publishConfig": { diff --git a/src/js/services/addthis.js b/src/js/services/addthis.js index ed3a149f..a9d412bf 100644 --- 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 index 46f1dcdc..d3aefa25 100644 --- 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 index 5809bf61..09deb657 100644 --- 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 index fb315ef6..2fc53e2a 100644 --- 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/googleplus.js b/src/js/services/googleplus.js index 1eb876f1..78a05e92 100644 --- a/src/js/services/googleplus.js +++ b/src/js/services/googleplus.js @@ -32,7 +32,8 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'googleplus', - faName: 'fa-google-plus', + faPrefix: 'fab', + faName: 'fa-google-plus-g', title: { 'bg': 'Сподели в Google+', 'cs': 'Sdílet na Google+', diff --git a/src/js/services/info.js b/src/js/services/info.js index e2a71515..58dff0cc 100644 --- a/src/js/services/info.js +++ b/src/js/services/info.js @@ -6,6 +6,7 @@ module.exports = function(shariff) { popup: shariff.getInfoDisplayPopup(), shareText: 'Info', name: 'info', + faPrefix: 'fas', faName: 'fa-info', title: { 'bg': 'Повече информация', diff --git a/src/js/services/linkedin.js b/src/js/services/linkedin.js index 15496eb6..014c37eb 100644 --- a/src/js/services/linkedin.js +++ b/src/js/services/linkedin.js @@ -34,7 +34,8 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'linkedin', - faName: 'fa-linkedin', + faPrefix: 'fab', + faName: 'fa-linkedin-in', title: { 'bg': 'Сподели в LinkedIn', 'cs': 'Sdílet na LinkedIn', diff --git a/src/js/services/mail.js b/src/js/services/mail.js index 7e9a92fa..7d2113ad 100644 --- a/src/js/services/mail.js +++ b/src/js/services/mail.js @@ -17,6 +17,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'mail', + faPrefix: 'fas', faName: 'fa-envelope', title: { 'bg': 'Изпрати по имейл', diff --git a/src/js/services/pinterest.js b/src/js/services/pinterest.js index d9b2edb4..8831a3e6 100644 --- a/src/js/services/pinterest.js +++ b/src/js/services/pinterest.js @@ -23,6 +23,7 @@ module.exports = function(shariff) { popup: true, shareText: 'pin it', name: 'pinterest', + faPrefix: 'fab', faName: 'fa-pinterest-p', title: { 'bg': 'Сподели в Pinterest', diff --git a/src/js/services/print.js b/src/js/services/print.js index eb1b0111..85e362d0 100755 --- a/src/js/services/print.js +++ b/src/js/services/print.js @@ -6,6 +6,7 @@ module.exports = function(shariff) { return { name: 'print', + faPrefix: 'fas', faName: 'fa-print', popup: false, shareText: { diff --git a/src/js/services/qzone.js b/src/js/services/qzone.js index c287c74f..b0459c70 100644 --- a/src/js/services/qzone.js +++ b/src/js/services/qzone.js @@ -35,6 +35,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'qzone', + faPrefix: 'fab', faName: 'fa-qq', title: { 'bg': 'Сподели в Qzone', diff --git a/src/js/services/reddit.js b/src/js/services/reddit.js index 56ce1838..191e8b90 100644 --- a/src/js/services/reddit.js +++ b/src/js/services/reddit.js @@ -38,6 +38,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'reddit', + faPrefix: 'fab', faName: 'fa-reddit', title: { 'bg': 'Сподели в Reddit', diff --git a/src/js/services/stumbleupon.js b/src/js/services/stumbleupon.js index 8c850149..f1416011 100644 --- a/src/js/services/stumbleupon.js +++ b/src/js/services/stumbleupon.js @@ -38,6 +38,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'stumbleupon', + faPrefix: 'fab', faName: 'fa-stumbleupon', title: { 'bg': 'Сподели в Stumbleupon', diff --git a/src/js/services/telegram.js b/src/js/services/telegram.js index c0ea0f99..b1db4493 100644 --- a/src/js/services/telegram.js +++ b/src/js/services/telegram.js @@ -33,6 +33,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'telegram', + faPrefix: 'fab', faName: 'fa-telegram', title: { 'bg': 'Сподели в Telegram', diff --git a/src/js/services/tencent-weibo.js b/src/js/services/tencent-weibo.js index ba697480..96230e79 100644 --- a/src/js/services/tencent-weibo.js +++ b/src/js/services/tencent-weibo.js @@ -35,6 +35,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'tencent-weibo', + faPrefix: 'fab', faName: 'fa-tencent-weibo', title: { 'bg': 'Сподели в tencent weibo', diff --git a/src/js/services/threema.js b/src/js/services/threema.js index 9373a58a..bbd80941 100644 --- a/src/js/services/threema.js +++ b/src/js/services/threema.js @@ -35,6 +35,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'threema', + faPrefix: 'fas', faName: 'fa-lock', title: { 'bg': 'Сподели в Threema', diff --git a/src/js/services/tumblr.js b/src/js/services/tumblr.js index c1307986..97ae645f 100644 --- a/src/js/services/tumblr.js +++ b/src/js/services/tumblr.js @@ -33,6 +33,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'tumblr', + faPrefix: 'fab', faName: 'fa-tumblr', title: { 'bg': 'Сподели в tumblr', diff --git a/src/js/services/twitter.js b/src/js/services/twitter.js index 5ec3f746..27d13686 100644 --- a/src/js/services/twitter.js +++ b/src/js/services/twitter.js @@ -41,6 +41,7 @@ module.exports = function(shariff) { 'zh': '鸣叫' }, name: 'twitter', + faPrefix: 'fab', faName: 'fa-twitter', title: { 'bg': 'Сподели в Twitter', diff --git a/src/js/services/vk.js b/src/js/services/vk.js index b16bb07f..920d37c8 100644 --- a/src/js/services/vk.js +++ b/src/js/services/vk.js @@ -32,6 +32,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'vk', + faPrefix: 'fab', faName: 'fa-vk', title: { 'bg': 'Сподели във VK', diff --git a/src/js/services/weibo.js b/src/js/services/weibo.js index 9ea72526..ce109b69 100644 --- a/src/js/services/weibo.js +++ b/src/js/services/weibo.js @@ -35,6 +35,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'weibo', + faPrefix: 'fab', faName: 'fa-weibo', title: { 'bg': 'Сподели в weibo', diff --git a/src/js/services/whatsapp.js b/src/js/services/whatsapp.js index 30128849..63b7202d 100644 --- a/src/js/services/whatsapp.js +++ b/src/js/services/whatsapp.js @@ -35,6 +35,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'whatsapp', + faPrefix: 'fab', faName: 'fa-whatsapp', title: { 'bg': 'Сподели в Whatsapp', diff --git a/src/js/services/xing.js b/src/js/services/xing.js index a358ec49..56be553e 100644 --- a/src/js/services/xing.js +++ b/src/js/services/xing.js @@ -32,6 +32,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'xing', + faPrefix: 'fab', faName: 'fa-xing', title: { 'bg': 'Сподели в XING', diff --git a/src/js/shariff.js b/src/js/shariff.js index ec8390c2..c8910a66 100644 --- a/src/js/shariff.js +++ b/src/js/shariff.js @@ -202,8 +202,8 @@ class Shariff { .attr('href', service.shareUrl) .append($shareText) - if (typeof service.faName !== 'undefined') { - $shareLink.prepend($('').addClass(`fa ${service.faName}`)) + if (typeof service.faPrefix !== 'undefined' && typeof service.faName !== 'undefined') { + $shareLink.prepend($('').addClass(`${service.faPrefix} ${service.faName}`)) } if (service.popup) { diff --git a/src/style/services/facebook.less b/src/style/services/facebook.less index f3ee53e7..3cc3027b 100644 --- a/src/style/services/facebook.less +++ b/src/style/services/facebook.less @@ -6,7 +6,7 @@ background-color: #4273c8; } } - .fa-facebook { + .fa-facebook-f { font-size: 22px; } .share_count { @@ -23,7 +23,7 @@ @media only screen and (min-width: 600px) { .shariff { - .facebook .fa-facebook { + .facebook .fa-facebook-f { font-size: 19px; } } diff --git a/src/style/services/flattr.less b/src/style/services/flattr.less index d7698dc2..5ae47cc3 100644 --- a/src/style/services/flattr.less +++ b/src/style/services/flattr.less @@ -10,7 +10,7 @@ } } } - .fa-money { + .fa-money-bill-alt { font-size: 22px; } .share_count { @@ -27,7 +27,7 @@ @media only screen and (min-width: 600px) { .shariff { - .flattr .fa-money { + .flattr .fa-money-bill-alt { font-size: 19px; } } diff --git a/src/style/services/googleplus.less b/src/style/services/googleplus.less index af33c022..83110c95 100644 --- a/src/style/services/googleplus.less +++ b/src/style/services/googleplus.less @@ -6,7 +6,7 @@ background-color: #f75b44; } } - .fa-google-plus { + .fa-google-plus-g { font-size: 22px; } .share_count { @@ -23,7 +23,7 @@ @media only screen and (min-width: 600px) { .shariff { - .googleplus .fa-google-plus { + .googleplus .fa-google-plus-g { font-size: 19px; } } diff --git a/src/style/services/linkedin.less b/src/style/services/linkedin.less index dd51bb8c..8d500c12 100644 --- a/src/style/services/linkedin.less +++ b/src/style/services/linkedin.less @@ -6,7 +6,7 @@ background-color: #0369a0; } } - .fa-linkedin { + .fa-linkedin-in { font-size: 22px; } .share_count { @@ -23,7 +23,7 @@ @media only screen and (min-width: 600px) { .shariff { - .linkedin .fa-linkedin { + .linkedin .fa-linkedin-in { font-size: 19px; } } diff --git a/src/style/shariff-complete.less b/src/style/shariff-complete.less index 8a5c1caa..fbbac599 100644 --- a/src/style/shariff-complete.less +++ b/src/style/shariff-complete.less @@ -1,5 +1,8 @@ // Font-Awesome -@import "~font-awesome/less/font-awesome.less"; +@import "~@fortawesome/fontawesome-free-webfonts/less/fontawesome.less"; +@import "~@fortawesome/fontawesome-free-webfonts/less/fa-brands.less"; +@import "~@fortawesome/fontawesome-free-webfonts/less/fa-regular.less"; +@import "~@fortawesome/fontawesome-free-webfonts/less/fa-solid.less"; // Shariff @import "shariff-layout"; diff --git a/src/style/shariff-layout.less b/src/style/shariff-layout.less index 82ae1024..be900eb9 100644 --- a/src/style/shariff-layout.less +++ b/src/style/shariff-layout.less @@ -42,7 +42,9 @@ vertical-align: middle; line-height: 35px; } - .fa { + .fab, + .far, + .fas { width: 35px; line-height: 35px; text-align: center; @@ -189,7 +191,9 @@ a { height: 30px; } - .fa { + .fab, + .far, + .fas{ width: 30px; line-height: 30px; } From d7979a2da522e2a1d27e6c998b938b85ca6e53f1 Mon Sep 17 00:00:00 2001 From: Richard Fath Date: Sat, 24 Feb 2018 13:06:15 +0100 Subject: [PATCH 02/19] Correct version in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2c0bfc08..4fe6f4b3 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ } ], "dependencies": { - "@fortawesome/fontawesome-free-webfonts": "^1.1.3", + "@fortawesome/fontawesome-free-webfonts": "^1.0.3", "jquery": "^3.2.1" }, "publishConfig": { From 51a58b0fdc79c251f6c04613e2f3df8e5573cbca Mon Sep 17 00:00:00 2001 From: Richard Fath Date: Sat, 24 Feb 2018 13:45:27 +0100 Subject: [PATCH 03/19] Update package-lock.json for fontawesome v5 - free webfonts v1.0.3 --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8b9d5f17..b9b535c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3757,10 +3757,10 @@ "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", "dev": true }, - "font-awesome": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + "@fortawesome/fontawesome-free-webfonts": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.3.tgz", + "integrity": "sha512-ZWCFi5hly41jWbVmpmfx97WoGh/8dMDQknrFL6Ax7T7ht4AIZOYL7dmLfrVVI8vsml7VCZvKSImLeHubHbyDQA==" }, "for-in": { "version": "1.0.2", From e06ea2c909756f125a368118a85dbe660544e792 Mon Sep 17 00:00:00 2001 From: Richard Fath Date: Sat, 24 Feb 2018 15:17:33 +0100 Subject: [PATCH 04/19] Add new service Flipboard --- README-de.md | 3 ++- README.md | 3 ++- demo/index.html | 4 +-- src/js/services/flipboard.js | 41 +++++++++++++++++++++++++++++++ src/js/services/index.js | 1 + src/style/services/flipboard.less | 26 ++++++++++++++++++++ src/style/shariff-services.less | 1 + 7 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 src/js/services/flipboard.js create mode 100644 src/style/services/flipboard.less diff --git a/README-de.md b/README-de.md index ed986263..0a14906e 100644 --- a/README-de.md +++ b/README-de.md @@ -96,7 +96,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="["facebook","googleplus"]"`
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="["facebook","googleplus"]"`
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, Google+ | | `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 `` | | `data-twitter-via` | User von dem der Tweet ursprünglich stammt. | `null` | @@ -134,6 +134,7 @@ Shariff unterstützt folgende Social-Sharing-Services: - diaspora* - facebook - Flattr +- Flipboard - Google+ - LinkedIn - Mail diff --git a/README.md b/README.md index 7f9d50bd..e1f432fd 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,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="["facebook","googleplus"]"` 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="["facebook","googleplus"]"` 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 +136,7 @@ Shariff supports the following social sharing services: - diaspora* - facebook - Flattr +- Flipboard - Google+ - LinkedIn - Mail diff --git a/demo/index.html b/demo/index.html index aa513ac1..0fe6b165 100644 --- a/demo/index.html +++ b/demo/index.html @@ -26,12 +26,12 @@ <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>[&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;]</dd> + <dt>data-services:</dt><dd>[&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;]</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="["addthis","whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print","telegram","vk"]" 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="["addthis","whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print","telegram","vk","flipboard"]" 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> diff --git a/src/js/services/flipboard.js b/src/js/services/flipboard.js new file mode 100644 index 00000000..e0ff3a14 --- /dev/null +++ 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() + } +} diff --git a/src/js/services/index.js b/src/js/services/index.js index ca38bd1a..487a0e05 100644 --- a/src/js/services/index.js +++ b/src/js/services/index.js @@ -3,6 +3,7 @@ module.exports = { diaspora: require('./diaspora'), facebook: require('./facebook'), flattr: require('./flattr'), + flipboard: require('./flipboard'), googleplus: require('./googleplus'), info: require('./info'), linkedin: require('./linkedin'), diff --git a/src/style/services/flipboard.less b/src/style/services/flipboard.less new file mode 100644 index 00000000..4c43b8aa --- /dev/null +++ b/src/style/services/flipboard.less @@ -0,0 +1,26 @@ +.shariff { + .flipboard { + a { + background-color: #f52828; + &:hover { + background-color: #f75555; + } + } + .fa-flipboard { + font-size: 22px; + } + } + .theme-white { + .flipboard a { + color: #f52828; + } + } +} + +@media only screen and (min-width: 600px) { + .shariff { + .flipboard .fa-flipboard { + font-size: 19px; + } + } +} diff --git a/src/style/shariff-services.less b/src/style/shariff-services.less index 6651478d..683f0c92 100644 --- a/src/style/shariff-services.less +++ b/src/style/shariff-services.less @@ -2,6 +2,7 @@ @import "services/diaspora"; @import "services/facebook"; @import "services/flattr"; +@import "services/flipboard"; @import "services/googleplus"; @import "services/info"; @import "services/linkedin"; From fe60b343b6113106c1f491cf8598523b9aaa2ee3 Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 25 Feb 2018 12:58:06 +0100 Subject: [PATCH 05/19] Correct colors --- src/style/services/flipboard.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/style/services/flipboard.less b/src/style/services/flipboard.less index 4c43b8aa..a86a9feb 100644 --- a/src/style/services/flipboard.less +++ b/src/style/services/flipboard.less @@ -1,9 +1,9 @@ .shariff { .flipboard { a { - background-color: #f52828; + background-color: #e12828; &:hover { - background-color: #f75555; + background-color: #ff2e2e; } } .fa-flipboard { @@ -12,7 +12,7 @@ } .theme-white { .flipboard a { - color: #f52828; + color: #e12828; } } } From 8c690733bf96397376e3dc06e7a265a986918c6f Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 25 Feb 2018 13:16:10 +0100 Subject: [PATCH 06/19] Change class prefix col- to shariff-col- --- src/js/shariff.js | 2 +- src/style/shariff-layout.less | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/js/shariff.js b/src/js/shariff.js index ec8390c2..3d8d80d8 100644 --- a/src/js/shariff.js +++ b/src/js/shariff.js @@ -188,7 +188,7 @@ class Shariff { var $buttonList = $('<ul/>').addClass([ 'theme-' + this.options.theme, 'orientation-' + this.options.orientation, - 'col-' + this.options.services.length + 'shariff-col-' + this.options.services.length ].join(' ')) // add html for service-links diff --git a/src/style/shariff-layout.less b/src/style/shariff-layout.less index 82ae1024..15bc22f0 100644 --- a/src/style/shariff-layout.less +++ b/src/style/shariff-layout.less @@ -152,10 +152,10 @@ display: block; } } - &.col-1, &.col-2 { + &.shariff-col-1, &.shariff-col-2 { .display-share-text; } - &.col-5, &.col-6 { + &.shariff-col-5, &.shariff-col-6 { li { flex: none; } @@ -164,7 +164,7 @@ } @media only screen and (min-width: 640px) { - .shariff .orientation-horizontal.col-3 { + .shariff .orientation-horizontal.shariff-col-3 { .display-share-text; } } @@ -172,7 +172,7 @@ @media only screen and (min-width: 768px) { .shariff .orientation-horizontal { .display-share-text; - &.col-5, &.col-6 { + &.shariff-col-5, &.shariff-col-6 { li { flex: 1 0 auto; } From 6d165ebcc364db6a48ec7eb88bcbb183b4b2e1a5 Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 25 Feb 2018 15:42:02 +0100 Subject: [PATCH 07/19] Update link demo/fonts --- demo/fonts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/fonts b/demo/fonts index 63ae9555..0ff5cd4d 120000 --- a/demo/fonts +++ b/demo/fonts @@ -1 +1 @@ -../node_modules/font-awesome/fonts/ \ No newline at end of file +../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts/ \ No newline at end of file From 661390757c8657ec7686db6a66638c2d49e9f3bf Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 25 Feb 2018 17:06:48 +0100 Subject: [PATCH 08/19] Redo PR #293 --- src/js/services/reddit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/services/reddit.js b/src/js/services/reddit.js index 56ce1838..20ed14b4 100644 --- a/src/js/services/reddit.js +++ b/src/js/services/reddit.js @@ -38,7 +38,7 @@ module.exports = function(shariff) { 'zh': '分享' }, name: 'reddit', - faName: 'fa-reddit', + faName: 'fa-reddit-alien', title: { 'bg': 'Сподели в Reddit', 'cs': 'Sdílet na Redditu', From 726f82fabc667ceb2a9a94e75f2113f360438df7 Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Mon, 12 Mar 2018 09:16:41 +0100 Subject: [PATCH 09/19] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5662cb81..4b5c559f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## Unreleased + +- Updated Font Awesome to version 5 (free 1.0.3). (richard67) + ## v2.1.3, 2018-02-23 - Added czech translations. (mat-hew1) From 4e68909d04b1095ac7f6d39ee896cffccb671795 Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Mon, 12 Mar 2018 09:19:54 +0100 Subject: [PATCH 10/19] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b5c559f..cbd40952 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased - Updated Font Awesome to version 5 (free 1.0.3). (richard67) +- Fixed compatibility with Bootstrap 4. (richard67) ## v2.1.3, 2018-02-23 From 40852d50717abde3a0e2c606426c49b1f875e9db Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Mon, 12 Mar 2018 09:23:54 +0100 Subject: [PATCH 11/19] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cbd40952..3177e30a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Updated Font Awesome to version 5 (free 1.0.3). (richard67) - Fixed compatibility with Bootstrap 4. (richard67) +- Fixed reddit icon. (richard67) ## v2.1.3, 2018-02-23 From bf665ef1e754a2504924e12c499e9065efd53646 Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Mon, 12 Mar 2018 09:26:13 +0100 Subject: [PATCH 12/19] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3177e30a..b08645af 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Unreleased +- Added Flipboard service. (richard67) - Updated Font Awesome to version 5 (free 1.0.3). (richard67) - Fixed compatibility with Bootstrap 4. (richard67) - Fixed reddit icon. (richard67) From 95903657446f97cc0ce2151446598b9ff2fa9624 Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 11 Mar 2018 18:11:45 +0100 Subject: [PATCH 13/19] Add new option data-button-style Add new option data-button-style - code and docs --- README-de.md | 1 + README.md | 1 + src/js/shariff.js | 19 +++++++++------ src/style/shariff-layout.less | 46 +++++++++++++++++++++++++---------- 4 files changed, 47 insertions(+), 20 deletions(-) diff --git a/README-de.md b/README-de.md index 0a14906e..2781d9e2 100644 --- 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` | diff --git a/README.md b/README.md index e1f432fd..c4251d2d 100644 --- 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` | diff --git a/src/js/shariff.js b/src/js/shariff.js index 2bae3165..b2b96e74 100644 --- a/src/js/shariff.js +++ b/src/js/shariff.js @@ -41,6 +41,9 @@ const Defaults = { // horizontal/vertical orientation: 'horizontal', + // icon/icon-count/standard + buttonStyle: 'standard', + // a string to suffix current URL referrerTrack: null, @@ -92,7 +95,7 @@ class Shariff { this._addButtonList() - if (this.options.backendUrl !== null) { + if (this.options.backendUrl !== null && this.options.buttonStyle !== 'icon') { this.getShares(this._updateCounts.bind(this)) } } @@ -188,19 +191,21 @@ class Shariff { var $buttonList = $('<ul/>').addClass([ 'theme-' + this.options.theme, 'orientation-' + this.options.orientation, + 'button-style-' + this.options.buttonStyle, 'shariff-col-' + this.options.services.length ].join(' ')) // add html for service-links this.services.forEach(service => { var $li = $('<li/>').addClass(`shariff-button ${service.name}`) - var $shareText = $('<span/>') - .addClass('share_text') - .text(this.getLocalized(service, 'shareText')) + var $shareLink = $('<a/>').attr('href', service.shareUrl) - var $shareLink = $('<a/>') - .attr('href', service.shareUrl) - .append($shareText) + if (this.options.buttonStyle === 'standard') { + var $shareText = $('<span/>') + .addClass('share_text') + .text(this.getLocalized(service, 'shareText')) + $shareLink.append($shareText) + } if (typeof service.faPrefix !== 'undefined' && typeof service.faName !== 'undefined') { $shareLink.prepend($('<span/>').addClass(`${service.faPrefix} ${service.faName}`)) diff --git a/src/style/shariff-layout.less b/src/style/shariff-layout.less index d50e7944..342ecfd3 100644 --- a/src/style/shariff-layout.less +++ b/src/style/shariff-layout.less @@ -128,14 +128,26 @@ // ------------------------- vertical alignment .orientation-vertical { - min-width: 110px; + &.button-style-icon { + min-width: 35px; + } + &.button-style-icon-count { + min-width: 80px; + } + &.button-style-standard { + min-width: 110px; + } li { display: block; width: 100%; margin: 5px 0; - .share_count { - width: 24px; - text-align: right; + } + &.button-style-standard, &.button-style-icon-count { + li { + .share_count { + width: 24px; + text-align: right; + } } } } @@ -147,17 +159,25 @@ .shariff .orientation-horizontal { li { margin-right: 1.8%; - min-width: 80px; - width: auto; - flex: 1 0 auto; - .share_count { - display: block; + } + &.button-style-standard, &.button-style-icon-count { + li { + min-width: 80px; + .share_count { + display: block; + } + } + } + &.button-style-standard { + li { + width: auto; + flex: 1 0 auto; } } - &.shariff-col-1, &.shariff-col-2 { + &.button-style-standard.shariff-col-1, &.button-style-standard.shariff-col-2 { .display-share-text; } - &.shariff-col-5, &.shariff-col-6 { + &.button-style-standard.shariff-col-5, &.button-style-standard.shariff-col-6 { li { flex: none; } @@ -166,13 +186,13 @@ } @media only screen and (min-width: 640px) { - .shariff .orientation-horizontal.shariff-col-3 { + .shariff .orientation-horizontal.button-style-standard.shariff-col-3 { .display-share-text; } } @media only screen and (min-width: 768px) { - .shariff .orientation-horizontal { + .shariff .orientation-horizontal.button-style-standard { .display-share-text; &.shariff-col-5, &.shariff-col-6 { li { From ed29b0cec2df2eb2d1ba22542d76788101881e75 Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 11 Mar 2018 18:15:19 +0100 Subject: [PATCH 14/19] Fix demo css for multiple vertical examples Fix demo css for possible extension to multiple examples with vertical orientation. --- demo/app.less | 1 + 1 file changed, 1 insertion(+) diff --git a/demo/app.less b/demo/app.less index 63f6cb71..c1d16f91 100644 --- a/demo/app.less +++ b/demo/app.less @@ -57,6 +57,7 @@ hr { margin: 40px 0 20px; border-top: 3px dashed #ccc; border-bottom: none; + clear: left; } .layout-hint { font-size: .8em; From acd231d9eb7d50adb4ce56d15ca414a365897ad6 Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Sun, 11 Mar 2018 18:21:09 +0100 Subject: [PATCH 15/19] Add new option data-button-style - demo Add examples for the new option to the demo --- demo/app.less | 28 +++++++++++++++++---- demo/index.html | 65 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 86 insertions(+), 7 deletions(-) diff --git a/demo/app.less b/demo/app.less index c1d16f91..312c65c7 100644 --- 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,10 +54,20 @@ 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; } } } diff --git a/demo/index.html b/demo/index.html index 0fe6b165..e843ee11 100644 --- 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>[&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;]</dd> + <dt>data-services:</dt><dd>[&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;]</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="["addthis","whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print","telegram","vk","flipboard"]" 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="["addthis","whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print","telegram","vk","flipboard","info"]" 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>[&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;]</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="["addthis","whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print","telegram","vk","flipboard","info"]" 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>[&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;]</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="["addthis","whatsapp","facebook","xing","pinterest","linkedin","tumblr","flattr","diaspora","reddit","stumbleupon","threema","weibo","tencent-weibo","qzone","print","telegram","vk","flipboard","info"]" 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> From fb10bf40e49abf34f82835097f4511ab57600b6e Mon Sep 17 00:00:00 2001 From: Richard Fath <richard67@users.noreply.github.com> Date: Mon, 12 Mar 2018 21:47:04 +0100 Subject: [PATCH 16/19] Correct default services in parameters description --- README-de.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README-de.md b/README-de.md index 0a14906e..d7e5d8ac 100644 --- a/README-de.md +++ b/README-de.md @@ -96,7 +96,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="["facebook","googleplus"]"` <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, 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="["facebook","googleplus"]"` <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` | From 855f025852a2a2b427294aa6cf6e0b124e61c001 Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Thu, 15 Mar 2018 09:44:52 +0100 Subject: [PATCH 17/19] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b08645af..bb140b95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Unreleased +- Added smaller share button variants. (richard67) - Added Flipboard service. (richard67) - Updated Font Awesome to version 5 (free 1.0.3). (richard67) - Fixed compatibility with Bootstrap 4. (richard67) From c95a26203e0e35916e03c26afba74a96a875149e Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Thu, 15 Mar 2018 09:46:42 +0100 Subject: [PATCH 18/19] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb140b95..8e83eb10 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - 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) From 3b86f03736e1ffbf2c1ac5a13f4fe67ac3666e59 Mon Sep 17 00:00:00 2001 From: apl <apl@heise.de> Date: Thu, 15 Mar 2018 09:48:56 +0100 Subject: [PATCH 19/19] bump version to 3.0.0 --- CHANGELOG.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e83eb10..b88af16b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # Changelog -## Unreleased +## v3.0.0, 2018-03-15 - Added smaller share button variants. (richard67) - Added Flipboard service. (richard67) diff --git a/package.json b/package.json index 4fe6f4b3..dc82eeee 100644 --- 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": {