Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
27 |Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
27 |Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
30 |world
17 | 18 | click!' 19 | ` 20 | }) 21 | 22 | it('creates nodes from html fragment', function () { 23 | var nodes = $('Paragraph
') 24 | assert.equal(nodes.length, 2) 25 | assert.equal(nodes[0].parentNode.parentNode, null) 26 | assert.equal(nodes[1].parentNode.parentNode, null) 27 | assert.equal(nodes[0].tagName, 'H2') 28 | assert.equal(nodes[1].tagName, 'P') 29 | }) 30 | 31 | it('finds elements with context', function () { 32 | var matches = $('span', $('p')[0]) 33 | assert.equal(matches[0].textContent, 'world') 34 | }) 35 | 36 | describe('empty()', function() { 37 | it('clears a node of its children', function() { 38 | var h1 = $('h1').empty() 39 | assert.equal(h1[0].children.length, 0) 40 | }) 41 | }) 42 | 43 | describe('text()', function() { 44 | it('returns text content of node', function() { 45 | assert.equal($('h1').text(), 'hello') 46 | }) 47 | 48 | it('sets text content of node', function() { 49 | $('h1').text('goodbye') 50 | assert.equal($('h1').text(), 'goodbye') 51 | }) 52 | }) 53 | 54 | describe('attr()', function () { 55 | it('returns attribute value', function () { 56 | assert.equal($('h1').attr('class'), 'header') 57 | }) 58 | 59 | it('sets attribute value', function () { 60 | $('h1').attr('class', 'new-value') 61 | assert.equal($('h1').attr('class'), 'new-value') 62 | }) 63 | }) 64 | 65 | describe('data()', function () { 66 | it('returns data attribute value', function () { 67 | assert.equal($('#data-attribute').data('key'), 'data-value') 68 | }) 69 | 70 | it('sets data attribute value', function () { 71 | $('#data-attribute').data('key', 'new-value') 72 | assert.equal($('#data-attribute').data('key'), 'new-value') 73 | }) 74 | 75 | it('deserializes data attribute json value', function() { 76 | var data = $('a[data-item]').data() 77 | assert.deepEqual(data.item, ['object-1', 'object-2']) 78 | }) 79 | }) 80 | 81 | describe('find()', function () { 82 | it('returns found elements', function () { 83 | var matches = $('body').find('h1') 84 | var expectedNode = $('h1')[0] 85 | assert.equal(matches[0], expectedNode) 86 | }) 87 | }) 88 | 89 | describe('append()', function () { 90 | it('appends to html fragment', function () { 91 | $('body').append('appended
') 92 | var bodyChildren = $('body')[0].children 93 | assert.equal(bodyChildren[bodyChildren.length - 1].textContent, 'appended') 94 | }) 95 | 96 | it('appends elements', function () { 97 | var elements = [ document.createElement('div') ] 98 | $('body').append(elements) 99 | var div = document.body.children[document.body.children.length - 1] 100 | assert.equal(elements[0], div) 101 | }) 102 | }) 103 | 104 | describe('prepend()', function () { 105 | it('prepends to html fragment', function () { 106 | $('body').prepend('prepended
') 107 | assert.equal($('body')[0].firstChild.textContent, 'prepended') 108 | }) 109 | 110 | it('prepends elements', function () { 111 | var elements = [ document.createElement('div') ] 112 | $('body').prepend(elements) 113 | assert.equal(elements[0], document.body.firstChild) 114 | }) 115 | }) 116 | 117 | describe('addClass()', function () { 118 | it('adds class to element', function () { 119 | $('body').addClass('new-class') 120 | assert.equal(document.body.className, 'new-class') 121 | }) 122 | }) 123 | 124 | describe('removeClass()', function () { 125 | it('removes class from element', function () { 126 | $('h1').removeClass('header') 127 | assert.equal($('h1')[0].className, '') 128 | }) 129 | }) 130 | 131 | describe('on()', function () { 132 | let clicked = false 133 | 134 | it('delegates an event listener', function () { 135 | var selector = 'a:last-child' 136 | $('body').on('click', selector, () => { clicked = true }) 137 | $(selector)[0].click() 138 | assert.ok(clicked) 139 | }) 140 | }) 141 | 142 | describe('trigger()', function () { 143 | let custom_detail = false 144 | 145 | it('triggers an event', function () { 146 | var selector = 'a:last-child' 147 | $('body').on('custom', selector, (event) => { custom_detail = event.detail }) 148 | $(selector).trigger('custom', {'hello': 'world'}) 149 | assert.deepEqual(custom_detail, {'hello': 'world'}) 150 | }) 151 | }) 152 | }) 153 | -------------------------------------------------------------------------------- /src/style/shariff-layout.less: -------------------------------------------------------------------------------- 1 | .display-share-text() { 2 | li { 3 | min-width: 110px; 4 | max-width: 160px; 5 | .share_text { 6 | text-indent: 0; 7 | display: inline; 8 | } 9 | } 10 | } 11 | 12 | .shariff { 13 | &::after, 14 | &::before { 15 | content: " "; 16 | display: table; 17 | } 18 | &::after { 19 | clear: both; 20 | } 21 | ul { 22 | padding: 0; 23 | margin: 0; 24 | list-style: none; 25 | } 26 | li { 27 | height: 35px; 28 | box-sizing: border-box; 29 | overflow: hidden; 30 | padding: 0; 31 | border: none; 32 | a { 33 | color: #fff; 34 | position: relative; 35 | display: block; 36 | height: 35px; 37 | text-decoration: none; 38 | box-sizing: border-box; 39 | } 40 | .share_text, 41 | .share_count { 42 | font-family: Arial, Helvetica, sans-serif; 43 | font-size: 12px; 44 | vertical-align: middle; 45 | line-height: 35px; 46 | } 47 | .fab, 48 | .far, 49 | .fas { 50 | width: 35px; 51 | line-height: 35px; 52 | text-align: center; 53 | vertical-align: middle; 54 | } 55 | .share_count { 56 | padding: 0 8px; 57 | height: 33px; 58 | position: absolute; 59 | top: 1px; 60 | right: 1px; 61 | } 62 | } 63 | 64 | // ------------- horizontal alignment (standard) 65 | .orientation-horizontal { 66 | /* autoprefixer: off */ 67 | display: -webkit-box; 68 | li { 69 | -webkit-box-flex: 1; 70 | } 71 | .info { 72 | -webkit-box-flex: 0; 73 | } 74 | } 75 | .orientation-horizontal { 76 | display: flex; 77 | flex-wrap: wrap; 78 | li { 79 | float: left; 80 | flex: none; 81 | width: 35px; 82 | margin-right: 3%; 83 | margin-bottom: 10px; 84 | &:last-child { 85 | margin-right: 0; 86 | } 87 | .share_text { 88 | display: block; 89 | text-indent: -9999px; 90 | padding-left: 3px; 91 | } 92 | .share_count { 93 | display: none; 94 | } 95 | } 96 | } 97 | 98 | // ------------------------- colourless design 99 | 100 | .theme-grey { 101 | .shariff-button { 102 | a { 103 | background-color: #b0b0b0; 104 | } 105 | .share_count { 106 | background-color: #ccc; 107 | color: #333; 108 | } 109 | } 110 | } 111 | 112 | // ------------------------- even less colorful design 113 | 114 | .theme-white { 115 | .shariff-button { 116 | border: 1px solid #ddd; 117 | a { 118 | background-color: #fff; 119 | &:hover { 120 | background-color: #eee; 121 | } 122 | } 123 | .share_count { 124 | background-color: #fff; 125 | color: #999; 126 | } 127 | } 128 | } 129 | 130 | // ------------------------- vertical alignment 131 | 132 | .orientation-vertical { 133 | &.button-style-icon { 134 | min-width: 35px; 135 | } 136 | &.button-style-icon-count { 137 | min-width: 80px; 138 | } 139 | &.button-style-standard { 140 | min-width: 110px; 141 | } 142 | li { 143 | display: block; 144 | width: 100%; 145 | margin: 5px 0; 146 | } 147 | &.button-style-standard, &.button-style-icon-count { 148 | li { 149 | .share_count { 150 | width: 24px; 151 | text-align: right; 152 | } 153 | } 154 | } 155 | } 156 | } 157 | 158 | // --------------- adjustments for small devices 159 | 160 | @media only screen and (min-width: 360px) { 161 | .shariff .orientation-horizontal { 162 | li { 163 | margin-right: 1.8%; 164 | } 165 | &.button-style-standard, &.button-style-icon-count { 166 | li { 167 | min-width: 80px; 168 | .share_count { 169 | display: block; 170 | } 171 | } 172 | } 173 | &.button-style-standard { 174 | li { 175 | width: auto; 176 | flex: 1 0 auto; 177 | } 178 | } 179 | &.button-style-standard.shariff-col-1, &.button-style-standard.shariff-col-2 { 180 | .display-share-text; 181 | } 182 | &.button-style-standard.shariff-col-5, &.button-style-standard.shariff-col-6 { 183 | li { 184 | flex: none; 185 | } 186 | } 187 | } 188 | } 189 | 190 | @media only screen and (min-width: 640px) { 191 | .shariff .orientation-horizontal.button-style-standard.shariff-col-3 { 192 | .display-share-text; 193 | } 194 | } 195 | 196 | @media only screen and (min-width: 768px) { 197 | .shariff .orientation-horizontal.button-style-standard { 198 | .display-share-text; 199 | &.shariff-col-5, &.shariff-col-6 { 200 | li { 201 | flex: 1 0 auto; 202 | } 203 | } 204 | } 205 | } 206 | 207 | // --------------- desktop layout 208 | 209 | @media only screen and (min-width: 1024px) { 210 | .shariff { 211 | li { 212 | height: 30px; 213 | a { 214 | height: 30px; 215 | } 216 | .fab, 217 | .far, 218 | .fas{ 219 | width: 30px; 220 | line-height: 30px; 221 | } 222 | .share_text, 223 | .share_count { 224 | line-height: 30px; 225 | } 226 | .share_count { 227 | height: 28px; 228 | } 229 | } 230 | } 231 | } 232 | -------------------------------------------------------------------------------- /src/js/shariff.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | // require('babel-polyfill') 4 | 5 | const $ = require('./dom') 6 | const services = require('./services') 7 | const url = require('url') 8 | 9 | // Defaults may be overridden either by passing "options" to Shariff constructor 10 | // or by setting data attributes. 11 | const Defaults = { 12 | theme: 'color', 13 | 14 | // URL to backend that requests social counts. null means "disabled" 15 | backendUrl: null, 16 | 17 | // Link to the "about" page 18 | infoUrl: 'https://ct.de/-2467514', 19 | 20 | // Type of display for the "about" page: "blank", "popup" or "self", default = "blank" 21 | infoDisplay: 'blank', 22 | 23 | // localisation: "de" or "en" 24 | lang: 'de', 25 | 26 | // fallback language for not fully localized services 27 | langFallback: 'en', 28 | 29 | mailUrl: function () { 30 | var shareUrl = url.parse(this.getURL(), true) 31 | shareUrl.query.view = 'mail' 32 | delete shareUrl.search 33 | return url.format(shareUrl) 34 | }, 35 | 36 | mailBody: function () { 37 | return this.getURL() 38 | }, 39 | 40 | // Media (e.g. image) URL to be shared 41 | mediaUrl: null, 42 | 43 | // horizontal/vertical 44 | orientation: 'horizontal', 45 | 46 | // icon/icon-count/standard 47 | buttonStyle: 'standard', 48 | 49 | // a string to suffix current URL 50 | referrerTrack: null, 51 | 52 | // services to be enabled in the following order 53 | services: ['twitter', 'facebook', 'info'], 54 | 55 | title: global.document.title, 56 | 57 | twitterVia: null, 58 | 59 | flattrUser: null, 60 | 61 | flattrCategory: null, 62 | 63 | // build URI from rel="canonical" or document.location 64 | url: function () { 65 | var url = global.document.location.href 66 | var canonical = 67 | $('link[rel=canonical]').attr('href') || this.getMeta('og:url') || '' 68 | 69 | if (canonical.length > 0) { 70 | if (canonical.indexOf('http') < 0) { 71 | if (canonical.indexOf('//') !== 0) { 72 | canonical = 73 | global.document.location.protocol + 74 | '//' + 75 | global.document.location.host + 76 | canonical 77 | } else { 78 | canonical = global.document.location.protocol + canonical 79 | } 80 | } 81 | url = canonical 82 | } 83 | 84 | return url 85 | }, 86 | } 87 | 88 | class Shariff { 89 | constructor(element, options) { 90 | // the DOM element that will contain the buttons 91 | this.element = element 92 | 93 | // Ensure elemnt is empty 94 | $(element).empty() 95 | 96 | this.options = $.extend({}, Defaults, options, $(element).data()) 97 | 98 | // filter available services to those that are enabled and initialize them 99 | this.services = Object.keys(services) 100 | .filter((service) => this.isEnabledService(service)) 101 | .sort((a, b) => { 102 | let services = this.options.services 103 | return services.indexOf(a) - services.indexOf(b) 104 | }) 105 | .map((serviceName) => services[serviceName](this)) 106 | 107 | this._addButtonList() 108 | 109 | if ( 110 | this.options.backendUrl !== null && 111 | this.options.buttonStyle !== 'icon' 112 | ) { 113 | this.getShares(this._updateCounts.bind(this)) 114 | } 115 | } 116 | 117 | isEnabledService(serviceName) { 118 | return this.options.services.indexOf(serviceName) > -1 119 | } 120 | 121 | $socialshareElement() { 122 | return $(this.element) 123 | } 124 | 125 | getLocalized(data, key) { 126 | if (typeof data[key] === 'object') { 127 | if (typeof data[key][this.options.lang] === 'undefined') { 128 | return data[key][this.options.langFallback] 129 | } else { 130 | return data[key][this.options.lang] 131 | } 132 | } else if (typeof data[key] === 'string') { 133 | return data[key] 134 | } 135 | return undefined 136 | } 137 | 138 | // returns content of tags or '' if empty/non existant 139 | getMeta(name) { 140 | var metaContent = $(`meta[name="${name}"],[property="${name}"]`).attr( 141 | 'content', 142 | ) 143 | return metaContent || '' 144 | } 145 | 146 | getInfoUrl() { 147 | return this.options.infoUrl 148 | } 149 | 150 | getInfoDisplayPopup() { 151 | return this.options.infoDisplay === 'popup' 152 | } 153 | 154 | getInfoDisplayBlank() { 155 | return ( 156 | this.options.infoDisplay !== 'popup' && 157 | this.options.infoDisplay !== 'self' 158 | ) 159 | } 160 | 161 | getURL() { 162 | return this.getOption('url') 163 | } 164 | 165 | getOption(name) { 166 | var option = this.options[name] 167 | return typeof option === 'function' ? option.call(this) : option 168 | } 169 | 170 | getTitle() { 171 | let title = this.getOption('title') 172 | if ($(this.element).data()['title']) return title 173 | title = title || this.getMeta('DC.title') 174 | let creator = this.getMeta('DC.creator') 175 | return title && creator ? `${title} - ${creator}` : title 176 | } 177 | 178 | getReferrerTrack() { 179 | return this.options.referrerTrack || '' 180 | } 181 | 182 | // returns shareCounts of document 183 | getShares(callback) { 184 | var baseUrl = url.parse(this.options.backendUrl, true) 185 | baseUrl.query.url = this.getURL() 186 | delete baseUrl.search 187 | return $.getJSON(url.format(baseUrl), callback) 188 | } 189 | 190 | // add value of shares for each service 191 | _updateCounts(data, status, xhr) { 192 | if (!data) return 193 | $.each(data, (serviceName, value) => { 194 | if (!this.isEnabledService(serviceName)) { 195 | return 196 | } 197 | if (value >= 1000) { 198 | value = Math.round(value / 1000) + 'k' 199 | } 200 | $(this.element) 201 | .find(`.${serviceName} a`) 202 | .append($('').addClass('share_count').text(value)) 203 | }) 204 | } 205 | 206 | // add html for button-container 207 | _addButtonList() { 208 | var $buttonList = $('Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
23 |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.
38 |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.
54 |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.
69 |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.
86 |Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
104 |Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
118 |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.
131 |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.
146 |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.
161 |