Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better calc detection & fallback, code optimisations & cleanup #89

Merged
merged 9 commits into from
Apr 14, 2015
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ RRSSB is built with [**SASS**](http://sass-lang.com/), so you can easily customi

Currently tested between [**140px**](https://www.dropbox.com/s/2k6lcebg2887ge3/Screenshot%202014-02-18%2009.45.45.png) and [**15,465px**](https://www.dropbox.com/s/1juq03011lixk3r/Screenshot%202014-02-18%2009.43.57.png) on current versions of Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+.

Requires [**calc**](http://caniuse.com/calc) and [**SVG**](http://caniuse.com/svg)
Requires [**SVG**](http://caniuse.com/svg)


### Version Notes
Expand Down
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,10 @@ <h1>Ridiculously Responsive Social Sharing Buttons</h1>

<p>RRSSB is built with <a href="http://sass-lang.com/">SASS</a>, so you can easily customize it by tweaking a few variables. SVGs allow for tiny file size and retina support. Add or remove icons as you see fit &mdash; the rest will fill in automagically in the container.</p>

<p>Resize this page for demo. Currently tested between <a href="https://dl.dropboxusercontent.com/u/18590/rrssb-130px.png">130px</a> and 15,465px on current versions of Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+. Requires calc and SVG support.</p>
<p>Resize this page for demo. Currently tested between <a href="https://dl.dropboxusercontent.com/u/18590/rrssb-130px.png">130px</a> and 15,465px on current versions of Chrome 33, Safari 7.0.2, Firefox 27, Opera 20, and IE9+. Requires SVG support.</p>

<p><a href="https://github.com/kni-labs/rrssb">Grab the code on Github here →</a></p>

<small>RRSSB is a <a href="http://kurtnoble.com">KNI Labs</a> freebie crafted by <a href="http://www.twitter.com/dbox">@dbox</a> and <a href="http://www.twitter.com/joshuatuscan">@joshuatuscan</a>. &nbsp;<em>v 1.7</em></small>

</div> <!-- #main-container -->
Expand Down
242 changes: 139 additions & 103 deletions js/rrssb.js
Original file line number Diff line number Diff line change
@@ -1,71 +1,95 @@
/*
/*!
Ridiculously Responsive Social Sharing Buttons
Team: @dbox, @joshuatuscan
Site: http://www.kurtnoble.com/labs/rrssb
Twitter: @therealkni

___ ___
/__/| /__/\ ___
| |:| \ \:\ / /\
| |:| \ \:\ / /:/
__| |:| _____\__\:\ /__/::\
___ ___
/__/| /__/\ ___
| |:| \ \:\ / /\
| |:| \ \:\ / /:/
__| |:| _____\__\:\ /__/::\
/__/\_|:|____ /__/::::::::\ \__\/\:\__
\ \:\/:::::/ \ \:\~~\~~\/ \ \:\/\
\ \::/~~~~ \ \:\ ~~~ \__\::/
\ \:\ \ \:\ /__/:/
\ \:\ \ \:\ \__\/
\__\/ \__\/
\ \::/~~~~ \ \:\ ~~~ \__\::/
\ \:\ \ \:\ /__/:/
\ \:\ \ \:\ \__\/
\__\/ \__\/
*/


;(function(window, jQuery, undefined) {
+(function(window, jQuery, undefined) {
'use strict';

var support = {
calc : false
};

/*
* Public Function
*/

jQuery.fn.rrssb = function( options ) {
// Settings that $.rrssb() will accept.
var settings = jQuery.extend({
description: undefined,
emailAddress: undefined,
emailBody: undefined,
emailSubject: undefined,
image: undefined,
title: undefined,
url: undefined
}, options );
// Return the encoded strings if the settings have been changed.
for (var key in settings) {
if (settings.hasOwnProperty(key) && settings[key] !== undefined) {
settings[key] = encodeString(settings[key]);
}
};

if (settings.url !== undefined) {
jQuery(this).find('.rrssb-facebook a').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + settings.url);
jQuery(this).find('.rrssb-tumblr a').attr('href', 'http://tumblr.com/share/link?url=' + settings.url + (settings.title !== undefined ? '&name=' + settings.title : '') + (settings.description !== undefined ? '&description=' + settings.description : ''));
jQuery(this).find('.rrssb-linkedin a').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + settings.url + (settings.title !== undefined ? '&title=' + settings.title : '') + (settings.description !== undefined ? '&summary=' + settings.description : ''));
jQuery(this).find('.rrssb-twitter a').attr('href', 'http://twitter.com/home?status=' + (settings.description !== undefined ? settings.description : '') + '%20' + settings.url);
jQuery(this).find('.rrssb-reddit a').attr('href', 'http://www.reddit.com/submit?url=' + settings.url + (settings.description !== undefined ? '&text=' + settings.description : '') + (settings.title !== undefined ? '&title=' + settings.title : ''));
jQuery(this).find('.rrssb-googleplus a').attr('href', 'https://plus.google.com/share?url=' + (settings.description !== undefined ? settings.description : '') + '%20' + settings.url);
jQuery(this).find('.rrssb-pinterest a').attr('href', 'http://pinterest.com/pin/create/button/?url=' + settings.url + ((settings.image !== undefined) ? '&amp;media=' + settings.image : '') + (settings.description !== undefined ? '&amp;description=' + settings.description : ''));
jQuery(this).find('.rrssb-pocket a').attr('href', 'https://getpocket.com/save?url=' + settings.url);
jQuery(this).find('.rrssb-github a').attr('href', settings.url);
}

if (settings.emailAddress !== undefined) {
jQuery(this).find('.rrssb-email a').attr('href', 'mailto:' + settings.emailAddress + '?' + (settings.emailSubject !== undefined ? 'subject=' + settings.emailSubject : '') + (settings.emailBody !== undefined ? '&amp;body=' + settings.emailBody : ''));
}

};

// Settings that $.rrssb() will accept.
var settings = jQuery.extend({
description: undefined,
emailAddress: undefined,
emailBody: undefined,
emailSubject: undefined,
image: undefined,
title: undefined,
url: undefined
}, options );

// Return the encoded strings if the settings have been changed.
for (var key in settings) {
if (settings.hasOwnProperty(key) && settings[key] !== undefined) {
settings[key] = encodeString(settings[key]);
}
};

if (settings.url !== undefined) {
jQuery(this).find('.rrssb-facebook a').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + settings.url);
jQuery(this).find('.rrssb-tumblr a').attr('href', 'http://tumblr.com/share/link?url=' + settings.url + (settings.title !== undefined ? '&name=' + settings.title : '') + (settings.description !== undefined ? '&description=' + settings.description : ''));
jQuery(this).find('.rrssb-linkedin a').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + settings.url + (settings.title !== undefined ? '&title=' + settings.title : '') + (settings.description !== undefined ? '&summary=' + settings.description : ''));
jQuery(this).find('.rrssb-twitter a').attr('href', 'http://twitter.com/home?status=' + (settings.description !== undefined ? settings.description : '') + '%20' + settings.url);
jQuery(this).find('.rrssb-reddit a').attr('href', 'http://www.reddit.com/submit?url=' + settings.url + (settings.description !== undefined ? '&text=' + settings.description : '') + (settings.title !== undefined ? '&title=' + settings.title : ''));
jQuery(this).find('.rrssb-googleplus a').attr('href', 'https://plus.google.com/share?url=' + (settings.description !== undefined ? settings.description : '') + '%20' + settings.url);
jQuery(this).find('.rrssb-pinterest a').attr('href', 'http://pinterest.com/pin/create/button/?url=' + settings.url + ((settings.image !== undefined) ? '&amp;media=' + settings.image : '') + (settings.description !== undefined ? '&amp;description=' + settings.description : ''));
jQuery(this).find('.rrssb-pocket a').attr('href', 'https://getpocket.com/save?url=' + settings.url);
jQuery(this).find('.rrssb-github a').attr('href', settings.url);
}

if (settings.emailAddress !== undefined) {
jQuery(this).find('.rrssb-email a').attr('href', 'mailto:' + settings.emailAddress + '?' + (settings.emailSubject !== undefined ? 'subject=' + settings.emailSubject : '') + (settings.emailBody !== undefined ? '&amp;body=' + settings.emailBody : ''));
}

};

/*
* Utility functions
*/
var detectCalcSupport = function(){
//detect if calc is natively supported.
var el = $('<div>');
var calcProps = [
'calc',
'-webkit-calc',
'-moz-calc'
];

$('body').append(el);

for (var i=0; i < calcProps.length; i++) {
el.css('width', calcProps[i] + '(1px)');
if(el.width() === 1){
support.calc = calcProps[i];
break;
}
}

el.remove();
};

var encodeString = function(string) {
// Recursively decode string first to ensure we aren't double encoding.
Expand All @@ -83,11 +107,12 @@
// loop through each instance of buttons
jQuery('.rrssb-buttons').each(function(index) {
var self = jQuery(this);
var numOfButtons = jQuery('li:visible', self).length;
var buttons = jQuery('li:visible', self);
var numOfButtons = buttons.length;
var initBtnWidth = 100 / numOfButtons;

// set initial width of buttons
jQuery('li', self).css('width', initBtnWidth + '%').attr('data-initwidth',initBtnWidth);
buttons.css('width', initBtnWidth + '%').attr('data-initwidth',initBtnWidth);
});
};

Expand All @@ -96,21 +121,20 @@
jQuery('.rrssb-buttons').each(function(index) {
var self = jQuery(this);
//get button width
var containerWidth = parseFloat(jQuery(self).width());
var containerWidth = self.width();
var buttonWidth = jQuery('li', self).not('.small').first().width();
var smallBtnCount = jQuery('li.small', self).length;

// enlarge buttons if they get wide enough
if (buttonWidth > 170 && smallBtnCount < 1) {
jQuery(self).addClass('large-format');
if (buttonWidth > 170 && jQuery('li.small', self).length < 1) {
self.addClass('large-format');
} else {
jQuery(self).removeClass('large-format');
self.removeClass('large-format');
}

if (containerWidth < 200) {
jQuery(self).removeClass('small-format').addClass('tiny-format');
self.removeClass('small-format').addClass('tiny-format');
} else {
jQuery(self).removeClass('tiny-format');
self.removeClass('tiny-format');
}
});
};
Expand All @@ -119,37 +143,40 @@
// loop through each instance of buttons
jQuery('.rrssb-buttons').each(function(index) {
var self = jQuery(this);
var totalBtnSze = 0, totalTxtSze = 0, upCandidate, nextBackUp;
var smallBtnCount = jQuery('li.small', self).length;

if (smallBtnCount === jQuery('li', self).length) {
var buttons = jQuery('li', self);
var smallButtons = buttons.filter('.small');
var totalBtnSze = 0;
var totalTxtSze = 0;
var upCandidate = smallButtons.first();
var nextBackUp = parseFloat(upCandidate.attr('data-size')) + 55;
var smallBtnCount = smallButtons.length;

if (smallBtnCount === buttons.length) {
var btnCalc = smallBtnCount * 42;
var containerWidth = parseFloat(jQuery(self).width());
upCandidate = jQuery('li.small', self).first();
nextBackUp = parseFloat(jQuery(upCandidate).attr('data-size')) + 55;
var containerWidth = self.width();

if ((btnCalc + nextBackUp) < containerWidth) {
jQuery(self).removeClass('small-format');
jQuery('li.small', self).first().removeClass('small');
self.removeClass('small-format');
smallButtons.first().removeClass('small');

sizeSmallBtns();
}

} else {
jQuery('li', self).not('.small').each(function(index) {
var txtWidth = parseFloat(jQuery(this).attr('data-size')) + 55;
var btnWidth = parseFloat(jQuery(this).width());
buttons.not('.small').each(function(index) {
var button = jQuery(this);
var txtWidth = parseFloat(button.attr('data-size')) + 55;
var btnWidth = parseFloat(button.width());

totalBtnSze = totalBtnSze + btnWidth;
totalTxtSze = totalTxtSze + txtWidth;
});

var spaceLeft = totalBtnSze - totalTxtSze;
upCandidate = jQuery('li.small', self).first();
nextBackUp = parseFloat(jQuery(upCandidate).attr('data-size')) + 55;

if (nextBackUp < spaceLeft) {
jQuery(upCandidate).removeClass('small');
upCandidate.removeClass('small');
sizeSmallBtns();
}
}
Expand All @@ -159,22 +186,24 @@
var checkSize = function(init) {
// loop through each instance of buttons
jQuery('.rrssb-buttons').each(function(index) {
//console.log('starting check for: '+(index+1));

var self = jQuery(this);
var elems = jQuery('li', self).nextAll(), count = elems.length;
var buttons = jQuery('li', self);
var elems = buttons.nextAll();
var count = elems.length;

// get buttons in reverse order and loop through each
jQuery(jQuery('li', self).get().reverse()).each(function(index, count) {
jQuery(buttons.get().reverse()).each(function(index, count) {

var button = jQuery(this);

if (jQuery(this).hasClass('small') === false) {
var txtWidth = parseFloat(jQuery(this).attr('data-size')) + 55;
var btnWidth = parseFloat(jQuery(this).width());
if (button.hasClass('small') === false) {
var txtWidth = parseFloat(button.attr('data-size')) + 55;
var btnWidth = parseFloat(button.width());

if (txtWidth > btnWidth) {
//console.log($(self).attr('class')+' '+$(this).attr('class')+' txtWidth: '+txtWidth+ ' & btnWidth: '+btnWidth);
var btn2small = jQuery('li', self).not('.small').last();
var btn2small = buttons.not('.small').last();
jQuery(btn2small).addClass('small');
//console.log($(btn2small).attr('class'));
sizeSmallBtns();
}
}
Expand All @@ -193,41 +222,45 @@
// loop through each instance of buttons
jQuery('.rrssb-buttons').each(function(index) {
var self = jQuery(this);
var regButtonCount,
regPercent,
pixelsOff,
magicWidth,
smallBtnFraction;
var regButtonCount;
var regPercent;
var pixelsOff;
var magicWidth;
var smallBtnFraction;
var buttons = jQuery('li', self);
var smallButtons = buttons.filter('.small');

// readjust buttons for small display
var smallBtnCount = jQuery('li.small', self).length;
var smallBtnCount = smallButtons.length;

// make sure there are small buttons
if (smallBtnCount > 0 && smallBtnCount !== jQuery('li', self).length) {
jQuery(self).removeClass('small-format');
if (smallBtnCount > 0 && smallBtnCount !== buttons.length) {
self.removeClass('small-format');

//make sure small buttons are square when not all small
jQuery('li.small', self).css('width','42px');
smallButtons.css('width','42px');
pixelsOff = smallBtnCount * 42;
regButtonCount = jQuery('li', self).not('.small').length;
regButtonCount = buttons.not('.small').length;
regPercent = 100 / regButtonCount;
smallBtnFraction = pixelsOff / regButtonCount;

if (navigator.userAgent.indexOf('Chrome') >= 0 || navigator.userAgent.indexOf('Safari') >= 0) {
magicWidth = '-webkit-calc('+regPercent+'% - '+smallBtnFraction+'px)';
} else if (navigator.userAgent.indexOf('Firefox') >= 0) {
magicWidth = '-moz-calc('+regPercent+'% - '+smallBtnFraction+'px)';
// if calc is not supported. calculate the width on the fly.
if (support.calc === false) {
magicWidth = ((self.innerWidth()-1) / regButtonCount) - smallBtnFraction;
magicWidth = Math.floor(magicWidth*1000) / 1000;
magicWidth += 'px';
} else {
magicWidth = 'calc('+regPercent+'% - '+smallBtnFraction+'px)';
magicWidth = support.calc+'('+regPercent+'% - '+smallBtnFraction+'px)';
}
jQuery('li', self).not('.small').css('width', magicWidth);

} else if (smallBtnCount === jQuery('li', self).length) {
buttons.not('.small').css('width', magicWidth);

} else if (smallBtnCount === buttons.length) {
// if all buttons are small, change back to percentage
jQuery(self).addClass('small-format');
self.addClass('small-format');
setPercentBtns();
} else {
jQuery(self).removeClass('small-format');
self.removeClass('small-format');
setPercentBtns();
}
}); //end loop
Expand All @@ -240,12 +273,15 @@
jQuery(this).addClass('rrssb-'+(index + 1));
});

detectCalcSupport();

setPercentBtns();

// grab initial text width of each button and add as data attr
jQuery('.rrssb-buttons li .rrssb-text').each(function(index) {
var txtWdth = parseFloat(jQuery(this).width());
jQuery(this).closest('li').attr('data-size', txtWdth);
var buttonTxt = jQuery(this);
var txtWdth = buttonTxt.width();
buttonTxt.closest('li').attr('data-size', txtWdth);
});

checkSize(true);
Expand Down Expand Up @@ -299,8 +335,8 @@
*/

jQuery('.rrssb-buttons a.popup').on('click', function(e){
var _this = jQuery(this);
popupCenter(_this.attr('href'), _this.find('.rrssb-text').html(), 580, 470);
var self = jQuery(this);
popupCenter(self.attr('href'), self.find('.rrssb-text').html(), 580, 470);
e.preventDefault();
});

Expand Down
Loading