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 = $("