diff --git a/bower.json b/bower.json index c0996c9..ba38366 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jssocials", - "version": "0.1.0", + "version": "0.2.0", "main": "dist/jssocials.js", "ignore": [ "demo", diff --git a/dist/jssocials-theme-classic.css b/dist/jssocials-theme-classic.css new file mode 100644 index 0000000..4af9d71 --- /dev/null +++ b/dist/jssocials-theme-classic.css @@ -0,0 +1,84 @@ +.jssocials-share-twitter .jssocials-share-link { + background: #00aced; + border: 1px solid #0099d3; } + .jssocials-share-twitter .jssocials-share-link:hover { + background: #0087ba; } + +.jssocials-share-facebook .jssocials-share-link { + background: #3b5998; + border: 1px solid #344e86; } + .jssocials-share-facebook .jssocials-share-link:hover { + background: #2d4373; } + +.jssocials-share-googleplus .jssocials-share-link { + background: #dd4b39; + border: 1px solid #d73925; } + .jssocials-share-googleplus .jssocials-share-link:hover { + background: #c23321; } + +.jssocials-share-linkedin .jssocials-share-link { + background: #007bb6; + border: 1px solid #006a9d; } + .jssocials-share-linkedin .jssocials-share-link:hover { + background: #005983; } + +.jssocials-share-pinterest .jssocials-share-link { + background: #cb2027; + border: 1px solid #b51d23; } + .jssocials-share-pinterest .jssocials-share-link:hover { + background: #9f191f; } + +.jssocials-share-email .jssocials-share-link { + background: #3490F3; + border: 1px solid #1c83f2; } + .jssocials-share-email .jssocials-share-link:hover { + background: #0e76e6; } + +.jssocials-share-link { + padding: .5em .6em; + border-radius: 0.3em; + box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15); + color: #fff; + -webkit-transition: background 200ms ease-in-out; + transition: background 200ms ease-in-out; } + .jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active { + color: #fff; } + +.jssocials-share-count-box { + position: relative; + height: 2.5em; + padding: 0 .3em; + margin-left: 6px; + border-radius: 0.3em; + border: 1px solid #dcdcdc; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } + .jssocials-share-count-box:before { + content: ""; + position: absolute; + top: 1em; + left: -9px; + display: block; + width: 0; + border-style: solid; + border-width: 6px 6px 0; + border-color: #dcdcdc transparent; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .jssocials-share-count-box:after { + content: ""; + position: absolute; + top: 1em; + left: -7px; + display: block; + width: 0; + border-style: solid; + border-width: 5px 5px 0; + border-color: #fff transparent; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + .jssocials-share-count-box .jssocials-share-count { + line-height: 2.5em; + color: #444; + font-size: .9em; } diff --git a/dist/jssocials-theme-flat.css b/dist/jssocials-theme-flat.css new file mode 100644 index 0000000..bab6824 --- /dev/null +++ b/dist/jssocials-theme-flat.css @@ -0,0 +1,69 @@ +.jssocials-share-twitter .jssocials-share-link { + background: #00aced; } + .jssocials-share-twitter .jssocials-share-link:hover { + background: #0087ba; } + +.jssocials-share-facebook .jssocials-share-link { + background: #3b5998; } + .jssocials-share-facebook .jssocials-share-link:hover { + background: #2d4373; } + +.jssocials-share-googleplus .jssocials-share-link { + background: #dd4b39; } + .jssocials-share-googleplus .jssocials-share-link:hover { + background: #c23321; } + +.jssocials-share-linkedin .jssocials-share-link { + background: #007bb6; } + .jssocials-share-linkedin .jssocials-share-link:hover { + background: #005983; } + +.jssocials-share-pinterest .jssocials-share-link { + background: #cb2027; } + .jssocials-share-pinterest .jssocials-share-link:hover { + background: #9f191f; } + +.jssocials-share-email .jssocials-share-link { + background: #3490F3; } + .jssocials-share-email .jssocials-share-link:hover { + background: #0e76e6; } + +.jssocials-share-link { + padding: .5em .6em; + color: #fff; + -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; + transition: background 200ms ease-in-out, border-color 200ms ease-in-out; } + .jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active { + color: #fff; } + +.jssocials-share-count-box { + position: relative; + height: 2.5em; + padding: 0 .3em; + margin-left: 0.3em; + background: #f5f5f5; + -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; + transition: background 200ms ease-in-out, border-color 200ms ease-in-out; } + .jssocials-share-count-box:hover { + background: gainsboro; } + .jssocials-share-count-box:hover:after { + border-color: transparent gainsboro transparent transparent; } + .jssocials-share-count-box:after { + content: ""; + display: block; + position: absolute; + top: 0.85em; + left: -0.3em; + width: 0; + height: 0; + border-width: 0.4em 0.4em 0.4em 0; + border-style: solid; + border-color: transparent #f5f5f5 transparent transparent; + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + -webkit-transition: background 200ms ease-in-out, border-color 200ms ease-in-out; + transition: background 200ms ease-in-out, border-color 200ms ease-in-out; } + .jssocials-share-count-box .jssocials-share-count { + line-height: 2.5em; + color: #444; } diff --git a/dist/jssocials-theme-minima.css b/dist/jssocials-theme-minima.css new file mode 100644 index 0000000..1376601 --- /dev/null +++ b/dist/jssocials-theme-minima.css @@ -0,0 +1,73 @@ +.jssocials-share-twitter .jssocials-share-link { + color: #00aced; } + .jssocials-share-twitter .jssocials-share-link .jssocials-share-label { + color: #00aced; } + .jssocials-share-twitter .jssocials-share-link:hover, .jssocials-share-twitter .jssocials-share-link:focus, .jssocials-share-twitter .jssocials-share-link:active { + color: #0087ba; } + .jssocials-share-twitter .jssocials-share-link:hover .jssocials-share-label, .jssocials-share-twitter .jssocials-share-link:focus .jssocials-share-label, .jssocials-share-twitter .jssocials-share-link:active .jssocials-share-label { + color: #0087ba; } + +.jssocials-share-facebook .jssocials-share-link { + color: #3b5998; } + .jssocials-share-facebook .jssocials-share-link .jssocials-share-label { + color: #3b5998; } + .jssocials-share-facebook .jssocials-share-link:hover, .jssocials-share-facebook .jssocials-share-link:focus, .jssocials-share-facebook .jssocials-share-link:active { + color: #2d4373; } + .jssocials-share-facebook .jssocials-share-link:hover .jssocials-share-label, .jssocials-share-facebook .jssocials-share-link:focus .jssocials-share-label, .jssocials-share-facebook .jssocials-share-link:active .jssocials-share-label { + color: #2d4373; } + +.jssocials-share-googleplus .jssocials-share-link { + color: #dd4b39; } + .jssocials-share-googleplus .jssocials-share-link .jssocials-share-label { + color: #dd4b39; } + .jssocials-share-googleplus .jssocials-share-link:hover, .jssocials-share-googleplus .jssocials-share-link:focus, .jssocials-share-googleplus .jssocials-share-link:active { + color: #c23321; } + .jssocials-share-googleplus .jssocials-share-link:hover .jssocials-share-label, .jssocials-share-googleplus .jssocials-share-link:focus .jssocials-share-label, .jssocials-share-googleplus .jssocials-share-link:active .jssocials-share-label { + color: #c23321; } + +.jssocials-share-linkedin .jssocials-share-link { + color: #007bb6; } + .jssocials-share-linkedin .jssocials-share-link .jssocials-share-label { + color: #007bb6; } + .jssocials-share-linkedin .jssocials-share-link:hover, .jssocials-share-linkedin .jssocials-share-link:focus, .jssocials-share-linkedin .jssocials-share-link:active { + color: #005983; } + .jssocials-share-linkedin .jssocials-share-link:hover .jssocials-share-label, .jssocials-share-linkedin .jssocials-share-link:focus .jssocials-share-label, .jssocials-share-linkedin .jssocials-share-link:active .jssocials-share-label { + color: #005983; } + +.jssocials-share-pinterest .jssocials-share-link { + color: #cb2027; } + .jssocials-share-pinterest .jssocials-share-link .jssocials-share-label { + color: #cb2027; } + .jssocials-share-pinterest .jssocials-share-link:hover, .jssocials-share-pinterest .jssocials-share-link:focus, .jssocials-share-pinterest .jssocials-share-link:active { + color: #9f191f; } + .jssocials-share-pinterest .jssocials-share-link:hover .jssocials-share-label, .jssocials-share-pinterest .jssocials-share-link:focus .jssocials-share-label, .jssocials-share-pinterest .jssocials-share-link:active .jssocials-share-label { + color: #9f191f; } + +.jssocials-share-email .jssocials-share-link { + color: #3490F3; } + .jssocials-share-email .jssocials-share-link .jssocials-share-label { + color: #3490F3; } + .jssocials-share-email .jssocials-share-link:hover, .jssocials-share-email .jssocials-share-link:focus, .jssocials-share-email .jssocials-share-link:active { + color: #0e76e6; } + .jssocials-share-email .jssocials-share-link:hover .jssocials-share-label, .jssocials-share-email .jssocials-share-link:focus .jssocials-share-label, .jssocials-share-email .jssocials-share-link:active .jssocials-share-label { + color: #0e76e6; } + +.jssocials-share-link { + -webkit-transition: color 200ms ease-in-out; + transition: color 200ms ease-in-out; } + .jssocials-share-link.jssocials-share-link-count .jssocials-share-count { + font-size: .5em; } + +.jssocials-share-label { + font-size: 0.8em; + color: #444; + -webkit-transition: color 200ms ease-in-out; + transition: color 200ms ease-in-out; } + +.jssocials-share-count-box { + margin-left: 0.3em; + border: 1px solid #efefef; + border-radius: 0.3em; } + .jssocials-share-count-box .jssocials-share-count { + font-size: 0.8em; + color: #444; } diff --git a/dist/jssocials-theme-plain.css b/dist/jssocials-theme-plain.css new file mode 100644 index 0000000..927053b --- /dev/null +++ b/dist/jssocials-theme-plain.css @@ -0,0 +1,44 @@ +.jssocials-share-link { + padding: .5em .6em; + border-radius: 0.3em; + border: 2px solid #acacac; + color: #acacac; + -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; + transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; } + .jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active { + border: 2px solid #939393; + color: #939393; } + +.jssocials-share-count-box { + position: relative; + height: 1.5em; + padding: 0 .3em; + margin-left: 0.3em; + background: #f5f5f5; + border-radius: 0.3em; + -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; + transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; } + .jssocials-share-count-box:hover { + background: #e8e8e8; } + .jssocials-share-count-box:hover:after { + border-color: transparent #e8e8e8 transparent transparent; } + .jssocials-share-count-box:after { + content: ""; + display: block; + position: absolute; + top: 0.35em; + left: -0.3em; + width: 0; + height: 0; + border-width: 0.4em 0.4em 0.4em 0; + border-style: solid; + border-color: transparent #f5f5f5 transparent transparent; + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; + transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; } + .jssocials-share-count-box .jssocials-share-count { + line-height: 1.7em; + color: #acacac; + font-size: .9em; } diff --git a/dist/jssocials.css b/dist/jssocials.css new file mode 100644 index 0000000..595172e --- /dev/null +++ b/dist/jssocials.css @@ -0,0 +1,58 @@ +.jssocials-shares { + margin: 0.2em 0; } + +.jssocials-shares * { + box-sizing: border-box; } + +.jssocials-share { + display: inline-block; + vertical-align: top; + margin: 0.3em; } + +.jssocials-share:first-child { + margin-left: 0; } + +.jssocials-share:last-child { + margin-right: 0; } + +.jssocials-share-logo { + width: 1em; + vertical-align: middle; + font-size: 1.5em; } + +img.jssocials-share-logo { + width: auto; + height: 1em; } + +.jssocials-share-link { + display: inline-block; + text-align: center; + text-decoration: none; + line-height: 1; } + .jssocials-share-link.jssocials-share-link-count { + padding-top: .2em; } + .jssocials-share-link.jssocials-share-link-count .jssocials-share-count { + display: block; + font-size: .6em; + margin: 0 -.5em -.8em -.5em; } + .jssocials-share-link.jssocials-share-no-count { + padding-top: .5em; } + .jssocials-share-link.jssocials-share-no-count .jssocials-share-count { + height: 1em; } + +.jssocials-share-label { + padding-left: 0.3em; + vertical-align: middle; } + +.jssocials-share-count-box { + display: inline-block; + height: 1.5em; + padding: 0 0.3em; + vertical-align: middle; + cursor: default; } + .jssocials-share-count-box.jssocials-share-no-count { + display: none; } + +.jssocials-share-count { + line-height: 1.5em; + vertical-align: middle; } diff --git a/dist/jssocials.js b/dist/jssocials.js new file mode 100644 index 0000000..1dd1524 --- /dev/null +++ b/dist/jssocials.js @@ -0,0 +1,415 @@ +/*! jssocials - v0.2.0 - 2015-05-17 +* http://js-socials.com +* Copyright (c) 2015 Artem Tabalin; Licensed MIT */ +(function(window, $, undefined) { + + var JSSOCIALS = "JSSocials", + JSSOCIALS_DATA_KEY = JSSOCIALS; + + var getOrApply = function(value, context) { + if($.isFunction(value)) { + return value.apply(context, $.makeArray(arguments).slice(2)); + } + return value; + }; + + var IMG_SRC_REGEX = /(\.(jpeg|png|gif|bmp)$|^data:image\/(jpeg|png|gif|bmp);base64)/i; + var URL_PARAMS_REGEX = /(&?[a-zA-Z0-9]+=)\{([a-zA-Z0-9]+)\}/g; + + var MEASURES = { + "G": 1000000000, + "M": 1000000, + "K": 1000 + }; + + var shares = []; + + function Socials(element, config) { + var $element = $(element); + + $element.data(JSSOCIALS_DATA_KEY, this); + + this._$element = $element; + + this.shares = []; + + this._init(config); + this._render(); + } + + Socials.prototype = { + url: "", + text: "", + + showLabel: function(screenWidth) { + return (this.showCount === false) ? + (screenWidth > this.smallScreenWidth) : + (screenWidth >= this.largeScreenWidth); + }, + + showCount: function(screenWidth) { + return (screenWidth <= this.smallScreenWidth) ? "inside" : true; + }, + + smallScreenWidth: 640, + largeScreenWidth: 1024, + + resizeTimeout: 200, + + elementClass: "jssocials", + sharesClass: "jssocials-shares", + shareClass: "jssocials-share", + shareButtonClass: "jssocials-share-button", + shareLinkClass: "jssocials-share-link", + shareLogoClass: "jssocials-share-logo", + shareLabelClass: "jssocials-share-label", + shareLinkCountClass: "jssocials-share-link-count", + shareCountBoxClass: "jssocials-share-count-box", + shareCountClass: "jssocials-share-count", + shareZeroCountClass: "jssocials-share-no-count", + + _init: function(config) { + this._initDefaults(); + $.extend(this, config); + this._initShares(); + this._attachWindowResizeCallback(); + }, + + _initDefaults: function() { + this.url = window.location.href; + this.text = $("meta[name=description]").attr("content") || $("title").text(); + }, + + _initShares: function() { + this.shares = $.map(this.shares, $.proxy(function(shareConfig) { + if(typeof shareConfig === "string") { + shareConfig = { share: shareConfig }; + } + + var share = (shareConfig.share && shares[shareConfig.share]); + + if(!share && !shareConfig.renderer) { + throw Error("Share '" + shareConfig.share + "' is not found"); + } + + return $.extend({ url: this.url, text: this.text }, share, shareConfig); + }, this)); + }, + + _attachWindowResizeCallback: function() { + $(window).on("resize", $.proxy(this._windowResizeHandler, this)); + }, + + _detachWindowResizeCallback: function() { + $(window).off("resize", this._windowResizeHandler); + }, + + _windowResizeHandler: function() { + if($.isFunction(this.showLabel) || $.isFunction(this.showCount)) { + window.clearTimeout(this._resizeTimer); + this._resizeTimer = setTimeout($.proxy(this.refresh, this), this.resizeTimeout); + } + }, + + _render: function() { + this._clear(); + + this._defineOptionsByScreen(); + + this._$element.addClass(this.elementClass); + + this._$shares = $("
").addClass(this.sharesClass) + .appendTo(this._$element); + + this._renderShares(); + }, + + _defineOptionsByScreen: function() { + this._screenWidth = $(window).width(); + this._showLabel = getOrApply(this.showLabel, this, this._screenWidth); + this._showCount = getOrApply(this.showCount, this, this._screenWidth); + }, + + _renderShares: function() { + $.each(this.shares, $.proxy(function(_, share) { + this._renderShare(share); + }, this)); + }, + + _renderShare: function(share) { + var $share; + + if($.isFunction(share.renderer)) { + $share = $(share.renderer()); + } else { + $share = this._createShare(share); + } + + $share.addClass(this.shareClass) + .addClass(share.share ? "jssocials-share-" + share.share : "") + .addClass(share.css) + .appendTo(this._$shares); + }, + + _createShare: function(share) { + var $result = $("
"); + var $shareLink = this._createShareLink(share).appendTo($result); + + if(this._showCount) { + var isInsideCount = (this._showCount === "inside"); + var $countContainer = isInsideCount ? $shareLink : $("
").addClass(this.shareCountBoxClass).appendTo($result); + $countContainer.addClass(isInsideCount ? this.shareLinkCountClass : this.shareCountBoxClass); + this._renderShareCount(share, $countContainer); + } + + return $result; + }, + + _createShareLink: function(share) { + var $result = $("").addClass(this.shareLinkClass) + .attr({ href: this._getShareUrl(share), target: "_blank" }) + .append(this._createShareLogo(share)); + + if(this._showLabel) { + $result.append(this._createShareLabel(share)); + } + + return $result; + }, + + _getShareUrl: function(share) { + var shareUrl = getOrApply(share.shareUrl, share); + return this._formatShareUrl(shareUrl, share); + }, + + _createShareLogo: function(share) { + var logo = share.logo; + + var $result = IMG_SRC_REGEX.test(logo) ? + $("").attr("src", share.logo) : + $("").addClass(logo); + + $result.addClass(this.shareLogoClass); + + return $result; + }, + + _createShareLabel: function(share) { + return $("").addClass(this.shareLabelClass) + .text(share.label); + }, + + _renderShareCount: function(share, $container) { + var $count = $("").addClass(this.shareCountClass); + + $container.addClass(this.shareZeroCountClass) + .append($count); + + this._loadCount(share).done($.proxy(function(count) { + if(count) { + $container.removeClass(this.shareZeroCountClass); + $count.text(count); + } + }, this)); + }, + + _loadCount: function(share) { + var deferred = $.Deferred(); + var countUrl = this._getCountUrl(share); + + if(!countUrl) { + return deferred.resolve(0).promise(); + } + + var handleSuccess = $.proxy(function(response) { + deferred.resolve(this._getCountValue(response, share)); + }, this); + + $.getJSON(countUrl).done(handleSuccess) + .fail(function() { + $.get(countUrl).done(handleSuccess) + .fail(function() { + deferred.resolve(0); + }); + }); + + return deferred.promise(); + }, + + _getCountUrl: function(share) { + var countUrl = getOrApply(share.countUrl, share); + return this._formatShareUrl(countUrl, share); + }, + + _getCountValue: function(response, share) { + var count = ($.isFunction(share.getCount) ? share.getCount(response) : response) || 0; + return (typeof count === "string") ? count : this._formatNumber(count); + }, + + _formatNumber: function(number) { + $.each(MEASURES, function(letter, value) { + if(number >= value) { + number = parseFloat((number / value).toFixed(2)) + letter; + return false; + } + }); + + return number; + }, + + _formatShareUrl: function(url, share) { + return url.replace(URL_PARAMS_REGEX, function(match, key, field) { + var value = share[field] || ""; + return value ? (key + window.encodeURIComponent(value)) : ""; + }); + }, + + _clear: function() { + window.clearTimeout(this._resizeTimer); + this._$element.empty(); + }, + + refresh: function() { + this._render(); + }, + + destroy: function() { + this._clear(); + this._detachWindowResizeCallback(); + + this._$element + .removeClass(this.elementClass) + .removeData(JSSOCIALS_DATA_KEY); + }, + + option: function(key, value) { + if(arguments.length === 1) { + return this[key]; + } + + this[key] = value; + this.refresh(); + } + + }; + + + $.fn.jsSocials = function(config) { + var args = $.makeArray(arguments), + methodArgs = args.slice(1), + result = this; + + this.each(function() { + var $element = $(this), + instance = $element.data(JSSOCIALS_DATA_KEY), + methodResult; + + if(instance) { + if(typeof config === "string") { + methodResult = instance[config].apply(instance, methodArgs); + if(methodResult !== undefined && methodResult !== instance) { + result = methodResult; + return false; + } + } else { + instance._detachWindowResizeCallback(); + instance._init(config); + instance._render(); + } + } else { + new Socials($element, config); + } + }); + + return result; + }; + + var setDefaults = function(config) { + var component; + + if($.isPlainObject(config)) { + component = Socials.prototype; + } else { + component = shares[config]; + config = arguments[1] || {}; + } + + $.extend(component, config); + }; + + window.jsSocials = { + Socials: Socials, + shares: shares, + setDefaults: setDefaults + }; + +}(window, jQuery)); + +(function(window, $, jsSocials, undefined) { + + $.extend(jsSocials.shares, { + + email: { + label: "E-mail", + logo: "fa fa-at", + shareUrl: "mailto:?subject={text}&body={url}", + countUrl: "" + }, + + twitter: { + label: "Tweet", + logo: "fa fa-twitter", + shareUrl: "https://twitter.com/share?url={url}&text={text}&via={via}&hashtags={hashtags}", + countUrl: "https://cdn.api.twitter.com/1/urls/count.json?url={url}&callback=?", + getCount: function(data) { + return data.count; + } + }, + + facebook: { + label: "Like", + logo: "fa fa-facebook", + shareUrl: "https://facebook.com/sharer/sharer.php?u={url}", + countUrl: function() { + return "https://graph.facebook.com/fql?q=SELECT total_count FROM link_stat WHERE url='" + window.encodeURIComponent(this.url) + "'"; + }, + getCount: function(data) { + return (data.data.length && data.data[0].total_count) || 0; + } + }, + + googleplus: { + label: "+1", + logo: "fa fa-google-plus", + shareUrl: "https://plus.google.com/share?url={url}", + countUrl: function() { + return "https://cors-anywhere.herokuapp.com/https://plusone.google.com/_/+1/fastbutton?url="+ window.encodeURIComponent(this.url); + }, + getCount: function(data) { + return parseFloat((data.match(/\{c: ([.0-9E]+)/) || [])[1]); + } + }, + + linkedin: { + label: "Share", + logo: "fa fa-linkedin", + shareUrl: "https://www.linkedin.com/shareArticle?url={url}", + countUrl: "https://www.linkedin.com/countserv/count/share?format=jsonp&url={url}&callback=?", + getCount: function(data) { + return data.count; + } + }, + + pinterest: { + label: "Pin it", + logo: "fa fa-pinterest", + shareUrl: "https://pinterest.com/pin/create/bookmarklet/?media={media}&url={url}&description={text}", + countUrl: "https://api.pinterest.com/v1/urls/count.json?&url={url}&callback=?", + getCount: function(data) { + return data.count; + } + } + + }); + +}(window, jQuery, window.jsSocials)); diff --git a/dist/jssocials.min.js b/dist/jssocials.min.js new file mode 100644 index 0000000..7dea93f --- /dev/null +++ b/dist/jssocials.min.js @@ -0,0 +1,4 @@ +/*! jssocials - v0.2.0 - 2015-05-17 +* http://js-socials.com +* Copyright (c) 2015 Artem Tabalin; Licensed MIT */ +!function(a,b,c){function d(a,c){var d=b(a);d.data(f,this),this._$element=d,this.shares=[],this._init(c),this._render()}var e="JSSocials",f=e,g=function(a,c){return b.isFunction(a)?a.apply(c,b.makeArray(arguments).slice(2)):a},h=/(\.(jpeg|png|gif|bmp)$|^data:image\/(jpeg|png|gif|bmp);base64)/i,i=/(&?[a-zA-Z0-9]+=)\{([a-zA-Z0-9]+)\}/g,j={G:1e9,M:1e6,K:1e3},k=[];d.prototype={url:"",text:"",showLabel:function(a){return this.showCount===!1?a>this.smallScreenWidth:a>=this.largeScreenWidth},showCount:function(a){return a<=this.smallScreenWidth?"inside":!0},smallScreenWidth:640,largeScreenWidth:1024,resizeTimeout:200,elementClass:"jssocials",sharesClass:"jssocials-shares",shareClass:"jssocials-share",shareButtonClass:"jssocials-share-button",shareLinkClass:"jssocials-share-link",shareLogoClass:"jssocials-share-logo",shareLabelClass:"jssocials-share-label",shareLinkCountClass:"jssocials-share-link-count",shareCountBoxClass:"jssocials-share-count-box",shareCountClass:"jssocials-share-count",shareZeroCountClass:"jssocials-share-no-count",_init:function(a){this._initDefaults(),b.extend(this,a),this._initShares(),this._attachWindowResizeCallback()},_initDefaults:function(){this.url=a.location.href,this.text=b("meta[name=description]").attr("content")||b("title").text()},_initShares:function(){this.shares=b.map(this.shares,b.proxy(function(a){"string"==typeof a&&(a={share:a});var c=a.share&&k[a.share];if(!c&&!a.renderer)throw Error("Share '"+a.share+"' is not found");return b.extend({url:this.url,text:this.text},c,a)},this))},_attachWindowResizeCallback:function(){b(a).on("resize",b.proxy(this._windowResizeHandler,this))},_detachWindowResizeCallback:function(){b(a).off("resize",this._windowResizeHandler)},_windowResizeHandler:function(){(b.isFunction(this.showLabel)||b.isFunction(this.showCount))&&(a.clearTimeout(this._resizeTimer),this._resizeTimer=setTimeout(b.proxy(this.refresh,this),this.resizeTimeout))},_render:function(){this._clear(),this._defineOptionsByScreen(),this._$element.addClass(this.elementClass),this._$shares=b("
").addClass(this.sharesClass).appendTo(this._$element),this._renderShares()},_defineOptionsByScreen:function(){this._screenWidth=b(a).width(),this._showLabel=g(this.showLabel,this,this._screenWidth),this._showCount=g(this.showCount,this,this._screenWidth)},_renderShares:function(){b.each(this.shares,b.proxy(function(a,b){this._renderShare(b)},this))},_renderShare:function(a){var c;c=b.isFunction(a.renderer)?b(a.renderer()):this._createShare(a),c.addClass(this.shareClass).addClass(a.share?"jssocials-share-"+a.share:"").addClass(a.css).appendTo(this._$shares)},_createShare:function(a){var c=b("
"),d=this._createShareLink(a).appendTo(c);if(this._showCount){var e="inside"===this._showCount,f=e?d:b("
").addClass(this.shareCountBoxClass).appendTo(c);f.addClass(e?this.shareLinkCountClass:this.shareCountBoxClass),this._renderShareCount(a,f)}return c},_createShareLink:function(a){var c=b("").addClass(this.shareLinkClass).attr({href:this._getShareUrl(a),target:"_blank"}).append(this._createShareLogo(a));return this._showLabel&&c.append(this._createShareLabel(a)),c},_getShareUrl:function(a){var b=g(a.shareUrl,a);return this._formatShareUrl(b,a)},_createShareLogo:function(a){var c=a.logo,d=h.test(c)?b("").attr("src",a.logo):b("").addClass(c);return d.addClass(this.shareLogoClass),d},_createShareLabel:function(a){return b("").addClass(this.shareLabelClass).text(a.label)},_renderShareCount:function(a,c){var d=b("").addClass(this.shareCountClass);c.addClass(this.shareZeroCountClass).append(d),this._loadCount(a).done(b.proxy(function(a){a&&(c.removeClass(this.shareZeroCountClass),d.text(a))},this))},_loadCount:function(a){var c=b.Deferred(),d=this._getCountUrl(a);if(!d)return c.resolve(0).promise();var e=b.proxy(function(b){c.resolve(this._getCountValue(b,a))},this);return b.getJSON(d).done(e).fail(function(){b.get(d).done(e).fail(function(){c.resolve(0)})}),c.promise()},_getCountUrl:function(a){var b=g(a.countUrl,a);return this._formatShareUrl(b,a)},_getCountValue:function(a,c){var d=(b.isFunction(c.getCount)?c.getCount(a):a)||0;return"string"==typeof d?d:this._formatNumber(d)},_formatNumber:function(a){return b.each(j,function(b,c){return a>=c?(a=parseFloat((a/c).toFixed(2))+b,!1):void 0}),a},_formatShareUrl:function(b,c){return b.replace(i,function(b,d,e){var f=c[e]||"";return f?d+a.encodeURIComponent(f):""})},_clear:function(){a.clearTimeout(this._resizeTimer),this._$element.empty()},refresh:function(){this._render()},destroy:function(){this._clear(),this._detachWindowResizeCallback(),this._$element.removeClass(this.elementClass).removeData(f)},option:function(a,b){return 1===arguments.length?this[a]:(this[a]=b,void this.refresh())}},b.fn.jsSocials=function(a){var e=b.makeArray(arguments),g=e.slice(1),h=this;return this.each(function(){var e,i=b(this),j=i.data(f);if(j)if("string"==typeof a){if(e=j[a].apply(j,g),e!==c&&e!==j)return h=e,!1}else j._detachWindowResizeCallback(),j._init(a),j._render();else new d(i,a)}),h};var l=function(a){var c;b.isPlainObject(a)?c=d.prototype:(c=k[a],a=arguments[1]||{}),b.extend(c,a)};a.jsSocials={Socials:d,shares:k,setDefaults:l}}(window,jQuery),function(a,b,c){b.extend(c.shares,{email:{label:"E-mail",logo:"fa fa-at",shareUrl:"mailto:?subject={text}&body={url}",countUrl:""},twitter:{label:"Tweet",logo:"fa fa-twitter",shareUrl:"https://twitter.com/share?url={url}&text={text}&via={via}&hashtags={hashtags}",countUrl:"https://cdn.api.twitter.com/1/urls/count.json?url={url}&callback=?",getCount:function(a){return a.count}},facebook:{label:"Like",logo:"fa fa-facebook",shareUrl:"https://facebook.com/sharer/sharer.php?u={url}",countUrl:function(){return"https://graph.facebook.com/fql?q=SELECT total_count FROM link_stat WHERE url='"+a.encodeURIComponent(this.url)+"'"},getCount:function(a){return a.data.length&&a.data[0].total_count||0}},googleplus:{label:"+1",logo:"fa fa-google-plus",shareUrl:"https://plus.google.com/share?url={url}",countUrl:function(){return"https://cors-anywhere.herokuapp.com/https://plusone.google.com/_/+1/fastbutton?url="+a.encodeURIComponent(this.url)},getCount:function(a){return parseFloat((a.match(/\{c: ([.0-9E]+)/)||[])[1])}},linkedin:{label:"Share",logo:"fa fa-linkedin",shareUrl:"https://www.linkedin.com/shareArticle?url={url}",countUrl:"https://www.linkedin.com/countserv/count/share?format=jsonp&url={url}&callback=?",getCount:function(a){return a.count}},pinterest:{label:"Pin it",logo:"fa fa-pinterest",shareUrl:"https://pinterest.com/pin/create/bookmarklet/?media={media}&url={url}&description={text}",countUrl:"https://api.pinterest.com/v1/urls/count.json?&url={url}&callback=?",getCount:function(a){return a.count}}})}(window,jQuery,window.jsSocials); \ No newline at end of file diff --git a/package.json b/package.json index 07e362e..6fbeb05 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jssocials", - "version": "0.1.0", + "version": "0.2.0", "main": "dist/jssocials.js", "description": "jsSocials - jQuery Social Network Sharing Plugin", "homepage": "http://js-socials.com",