Skip to content

Instantly share code, notes, and snippets.

@lmmx

lmmx/badgestylesheet.css

Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lmmx/a6f8daf9d0fd0a0d3c70 to your computer and use it in GitHub Desktop.
Save lmmx/a6f8daf9d0fd0a0d3c70 to your computer and use it in GitHub Desktop.
Download ZIP
Customised Altmetrics badges, using Javascript to scrape DOI's from within blog post links and produce Altmetrics links out to other content on the same papers.
Raw
badgestylesheet.css
.noshow, *:hover .noshow {
fill: transparent !important;
}
#altmetBox {
text-align: center;
}
#altmetBox > div.altmetric-embed {
width: 276px;
display: inline-block;
}
div#_altmetric_popover_el.altmetric-embed div#_altmetric_container.altmetric_container div#_altmetric_popover_inner.altmetric-popover-inner.floating {
background: #D5FFD3 !important;
background: rgba(38, 189, 56, 0.05) !important;
width: 132px !important;
}
div#_altmetric_popover_el.altmetric-embed div#_altmetric_container.altmetric_container div#_altmetric_popover_inner .altmetric-popover-content {
background-color: transparent !important;
}
.altmetric-embed.readers {
display: none;
}
.altlegend {
border-left-width: 20px !important;
padding-left: 2px !important;
}
.altBlogs {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(255,250,139,.9)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(255,250,139,.9), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(255,250,139,.9), rgba(0,0,0,0)) 1 100% !important;
}
.altNews {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(216,14,14,.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(216,14,14,.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(216,14,14,.79), rgba(0,0,0,0)) 1 100% !important;
}
.altTweets {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(91, 194, 228, 0.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(91, 194, 228, 0.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(91, 194, 228, 0.79), rgba(0,0,0,0)) 1 100% !important;
}
.altFb {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(36, 69, 189,.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(36, 69, 189,.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(36, 69, 189,.79), rgba(0,0,0,0)) 1 100% !important;
}
.altF1000 {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(244, 0, 110, 0.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(244, 0, 110, 0.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(244, 0, 110, 0.79), rgba(0,0,0,0)) 1 100% !important;
}
.altGplus {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(172, 17, 172, 0.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(172, 17, 172, 0.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(172, 17, 172, 0.79), rgba(0,0,0,0)) 1 100% !important;
}
.altRedd {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(214, 234, 243, 0.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(214, 234, 243, 0.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(214, 234, 243, 0.79), rgba(0,0,0,0)) 1 100% !important;
}
.tip_mendeley {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(166, 0, 0, 0.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(166, 0, 0, 0.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(166, 0, 0, 0.79), rgba(0,0,0,0)) 1 100% !important;
}
.tip_citeulike {
-webkit-border-image: -webkit-gradient(linear, left top, right top, from(rgba(161, 208, 229, 0.79)), to(rgba(0,0,0,0))) 1 100% !important;
-webkit-border-image: -webkit-linear-gradient(left, rgba(161, 208, 229, 0.79), rgba(0,0,0,0)) 1 100% !important;
-moz-border-image: -moz-linear-gradient(left, rgba(161, 208, 229, 0.79), rgba(0,0,0,0)) 1 100% !important;
}
.spinner {
background: -webkit-radial-gradient(center, ellipse cover, #fff 23%,transparent 27%,transparent 100%);
}
.wheee {
-ms-transform: rotate(720deg); /* IE 9 */
-webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
transform: rotate(720deg);
-webkit-transition: -webkit-transform 1s ease-out;
-moz-transition: -moz-transform 1s ease-out;
-o-transition: -o-transform 1s ease-out;
-ms-transition: -ms-transform 1s ease-out;
transition: transform 1s ease-out;
}
.altmetric-embed.altmetric-popover-content {
font-family: 'SEGOEUIL' !important;
}
.altmetric_embed.close-popover {
color: rgb(177,177,177);
}
Raw
embed.html
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
<div id="altmetBox"></div>
Raw
metadata.js
redditSVG = '<svg width="17" height="14" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><metadata id="metadata21839">image/svg+xml</metadata><g><g transform="matrix(0.582694 0 0 0.578459 -18.9625 7.66585)" id="Layer_2"><circle fill="#ffffff" stroke="#000000" stroke-width="1.1" id="circle21800" r="2.7" cy="-1.50493" cx="36.01267"/><circle fill="#ffffff" stroke="#000000" stroke-width="1.1" id="circle21802" r="2.7" cy="-1.50493" cx="58.11267"/><path fill="none" stroke="#000000" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" id="path21804" d="m54.61267,-11.00493c0,0 0,0 -5.4,-1.3l-2,6.3"/><circle fill="#ffffff" stroke="#000000" stroke-width="1.1" id="circle21808" r="2.1" cy="-10.50493" cx="56.81267"/><ellipse fill="#ffffff" stroke="#000000" stroke-width="1.1" id="ellipse21820" ry="8" rx="12.2" cy="2.19507" cx="47.01267"/><g id="g21824"><path fill="#ff4500" id="circle21826" d="m42.81267,-1.30493c-1.1,0 -2,0.9 -2,2c0,1.1 0.9,2 2,2c1.1,0 2,-0.9 2,-2c0,-1.1 -0.9,-2 -2,-2z"/><path fill="#ff4500" id="circle21828" d="m51.41267,-1.30493c-1.1,0 -2,0.9 -2,2c0,1.1 0.9,2 2,2c1.1,0 2,-0.9 2,-2c0,-1.1 -0.9,-2 -2,-2z"/><path fill="none" stroke="#000000" stroke-width="1.1" stroke-linecap="round" id="path21830" d="m42.91267,5.89507c1.1,1.1 2.8,1.3 4.2,1.3"/><path fill="none" stroke="#000000" stroke-width="1.1" stroke-linecap="round" id="path21832" d="m51.31267,5.89507c-1.1,1.1 -2.8,1.3 -4.2,1.3"/></g></g><g id="Layer_3"/></g></svg>';
function styleBadges() {
if (typeof(altSources)==="undefined" || !altSources[0]) {
altSources = document.querySelectorAll('.altmetric-embed > div > div[style*="16px"]');
for (s=0;s<altSources.length;s++) {
n = altSources[s];
if (n.textContent.indexOf("Tweet")>-1) {
n.className = "altlegend altTweets";
n.innerHTML = n.innerHTML.replace("d by","’d by").replace("Tweete",document.querySelector('.tweet svg').outerHTML);
}
else if (n.textContent.indexOf("Facebook")>-1) {
n.className = "altlegend altFb";
if (n.querySelector('b').innerHTML == 1) {sp="";}
else {sp="s";}
n.innerHTML = n.innerHTML.replace("On ","").replace("pages","share"+sp);
}
else if (n.textContent.indexOf("Picked")>-1) {
n.className = "altlegend altNews";
if (n.querySelector('b').innerHTML == 1) {sp="";}
else {sp="s";}
n.innerHTML = n.innerHTML.replace("Picked up by ","").replace("news outlets","headline"+sp);
}
else if (n.textContent.indexOf("Blog")>-1) {
n.className = "altlegend altBlogs";
if (n.querySelector('b').innerHTML == 1) {sp="";}
else {sp="s";}
n.innerHTML = n.innerHTML.replace("Blogged by ","On ")+ " blog"+sp;
}
else if (n.textContent.indexOf("Google+")>-1) {
n.className = "altlegend altGplus";
n.innerHTML = n.innerHTML.replace("Mentioned in","+").replace("Google+ posts","on Google+");
}
else if (n.textContent.indexOf("F1000")>-1) {
n.className = "altlegend altF1000";
n.innerHTML = n.innerHTML.replace("Has a ","").replace("F1000 review","F1000 reviewed");
}
else if (n.textContent.indexOf("Reddit")>-1) {
n.className = "altlegend altRedd";
n.innerHTML = n.innerHTML.replace("d by","’d by").replace("Reddite",redditSVG);
}
}
showlink = document.querySelectorAll('.altmetric_details');
for (f=0;f<showlink.length;f++) {
showlink[f].innerHTML = showlink[f].innerHTML.replace("See more details","View");
showlink[f].removeAttribute('target');
showlink[f].setAttribute('onclick',"window.open(this.href, 'Altmetrics', 'height=660,width=1030');return false;");
showlink[f].parentNode.innerHTML = showlink[f].outerHTML;
}
failedDOIs = document.querySelectorAll('div#altmetBox > div > a:not([data-content])');
for (m=0;m<failedDOIs.length;m++) {
failedDOIs[m].parentNode.setAttribute('style','display: none;');
}
badges = document.querySelectorAll('.altmetric-embed > a[data-badge-popover]');
for (b=0;b<badges.length;b++) {
if (!badges[b].hasAttribute('citeid')) {
badges[b].setAttribute('citeid',String(badges[b].href.match(/\d{7}/g).join('')));
badges[b].removeAttribute('target');
badges[b].setAttribute('onclick',"window.open(this.href, 'Altmetrics', 'height=660,width=1030');return false;");
badges[b].setAttribute('title',doilist[b][1]);
badges[b].setAttribute('onmouseover',"spinBadge(this.querySelector('img'));");
}
}
pops = document.querySelectorAll('.altmetric-embed.popover');
for (p=0;p<pops.length;p++) {
pops[p].setAttribute('data-uuid',badges[p].getAttribute('data-uuid'));
}
}
else if (document.querySelector('body[onscroll]')) {document.querySelector('body').removeAttribute('onscroll');}
}
function spinBadge(badge) {
if (!badge.nextSibling.nextSibling) {
spinner = document.createElement('img');
spinner.src = badge.src;
spinner.className = 'spinner';
spinner.setAttribute('width','120px');
spinner.setAttribute('height','120px');
spinner.setAttribute('style','border:0; margin:0; max-width: none; position: absolute; pointer-events: none; left: '+badge.offsetLeft+'px; top: '+badge.offsetTop+'px;');
badge.parentNode.appendChild(spinner);
setTimeout(function(){badge.nextSibling.nextSibling.className = 'spinner wheee'},0);
setTimeout(function(){
document.querySelector('.wheee').remove();
bubbles = document.querySelectorAll('#_altmetric_popover_el[style*="display: block"] div.altmetric_container #_altmetric_popover_inner');
if (bubbles.length>1) {
for (d=0;d<bubbles.length;d++) {
if (bubbles[d].getAttribute('data-uuid')!=badge.parentNode.getAttribute('data-uuid')) {
bubble = bubbles[d].parentNode.parentNode;
bubble.className = bubble.className + ' fadeout';
setTimeout(function(){bubble.style.display = 'none'},1000);
}
}
}
},3000);
}
}
function smoothPages() {
myPosts = document.querySelectorAll("a[href*='biochemistri.es']");
myPages = document.querySelectorAll("a[href*='/page/'], a[href='/']");
if (history.pushState) {
for (i=0;i<myPages.length;i++) {
clickJS = "ajaxLoad('"+myPages[i].href+"');return false;";
myPages[i].setAttribute("onclick", clickJS);
}
for (i=0;i<myPosts.length;i++) {
if (!myPosts[i].querySelector('.img-responsive') && myPosts[i].className.indexOf('navlink') == -1) {
clickJS = "ajaxLoad('"+myPosts[i].href+"');return false;";
myPosts[i].setAttribute("onclick", clickJS);
}
}
window.onpopstate = function(e){
if(e.state){
location.reload();
}
};
}
outPages = document.querySelectorAll("div#page.permalinkpage div.post a:not([href*='biochemistri.es']):not(.dsq-brlink):not(.permalink)");
if (outPages && !document.querySelector('div.altmetric-embed')) {
doilist = [];
for (d=0;d<outPages.length;d++) {
doiRE = /\b(10[.][0-9]{4,}(?:[.][0-9]+)*\/(?:(?!["&\'<>])\S)+)\b/g;
if (outPages[d].title.indexOf("doi:")!=-1) {
DOImatch = outPages[d].title.match(doiRE)
if (DOImatch) {
if (doilist[0] && doilist.join().indexOf(DOImatch[0])==-1) {
outPages[d].setAttribute("data-doi",DOImatch[0]);
doilist.push([DOImatch[0],outPages[d].title.replace(/doi:\s?/gi,'').replace(doiRE,'')]);
}
else if (doilist.length<1) {
outPages[d].setAttribute("data-doi",DOImatch[0]);
doilist.push([DOImatch[0],outPages[d].title.replace(/doi:\s?/gi,'').replace(doiRE,'')]);
}
}
}
else {
DOImatch = outPages[d].href.match(doiRE)
if (DOImatch) {
if (doilist[0] && doilist.join().indexOf(DOImatch[0]==-1)) {
outPages[d].setAttribute("data-doi",DOImatch[0]);
doilist.push([DOImatch[0],outPages[d].title.replace(/doi:\s?/gi,'').replace(doiRE,'')]);
}
else if (doilist.length<1) {
outPages[d].setAttribute("data-doi",DOImatch[0]);
doilist.push([DOImatch[0],outPages[d].title.replace(/doi:\s?/gi,'').replace(doiRE,'')]);
}
}
else if(typeof possibleCites == 'undefined') {
possCitelist = []; possCiteprep = []; console.log("Clear!");
possibleCites = document.querySelectorAll('sub a');
for (p=0;p<possibleCites.length;p++) {
poss = possibleCites[p];
possCite = possibleCites[p].parentNode.parentNode;
if (possCite.textContent.match(/\([12]\d\d\d\)/g) !== null) {
possYear = possCite.textContent.match(/\([12]\d\d\d\)/g)[0];
if (typeof possYear != 'undefined') {
possTitle = possCite.querySelector('a').textContent;
possLink = possCite.querySelector('a').href;
possCitelist.push([possTitle,possLink,possCite]);
console.log("Push!");
}
}
}
}
}
}
CRqueries = [];
for (j=0;j<possCitelist.length;j++) {
n = possCitelist[j];
ttl = n[0]; pTtl = ttl.replace(/\s/g,'+');
lnk = n[1];
yr = n[2].innerText.match(/\([12]\d\d\d\)/)[0].substr(1,4);
query = 'http://search.crossref.org/dois?q='+pTtl+'&year='+yr+'&title='+pTtl;
CRqueries.push(query);
}
for (l=0;l<doilist.length;l++){
newBadge = document.createElement('div');
newBadge.setAttribute('data-badge-popover','right');
newBadge.setAttribute('data-badge-type','medium-donut');
newBadge.setAttribute('data-doi',doilist[l][0]);
newBadge.setAttribute('data-hide-no-mentions','true');
newBadge.className = "altmetric-embed";
document.getElementById('altmetBox').appendChild(newBadge);
}
}
styleBadges();
document.querySelector('body').setAttribute('onscroll','styleBadges();');
}
window.onload = smoothPages();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment