Skip to content

Instantly share code, notes, and snippets.

@labnol

labnol/index.html

Created January 19, 2013 04:12
Show Gist options
  • Save labnol/4570704 to your computer and use it in GitHub Desktop.
Save labnol/4570704 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Amit Agarwal. Bookmarklets - A useful resource for all the people looking for bookmarklets for their favourite services. Additions are welcome. Just comment with the name of the service and a link to the bookmarklets.
Raw
index.html
<header>
<div class="wrap">
<h1 class="site-heading">Bookmarklets</h1>
<p class="description">Collecting useful bookmarklets accross the web. Curated by <a href="http://twitter.com/RadLikeWhoa_" target="_blank">Sacha Schmid</a>.</p>
<p class="links"><a href="#howto">Read the instructions</a><span class="separator">|</span><a href="http://twitter.com?status=@RadLikeWhoa_ I'd like to suggest a new bookmarklet: " target="_blank">Suggest a bookmarklet</a></p>
</div>
</header>
<section id="toolbar" class="toolbar" style="display: block;">
<div class="column">
<input id="search" class="search" type="search" placeholder="Search by name or by category">
</div>
</section>
<section id="list">
<ul class="networks">
<li class="network blogger" data-category="social">
<h2 class="network__name">Blogger</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:popw%3D%27%27%3BQ%3D%27%27%3Bx%3Ddocument%3By%3Dwindow%3Bif(x.selection)%20%7BQ%3Dx.selection.createRange().text%3B%7D%20else%20if%20(y.getSelection)%20%7BQ%3Dy.getSelection()%3B%7D%20else%20if%20(x.getSelection)%20%7BQ%3Dx.getSelection()%3B%7Dpopw%20%3D%20y.open(%27http://www.blogger.com/blog_this.pyra%3Ft%3D%27%20%2B%20escape(Q)%20%2B%20%27%26u%3D%27%20%2B%20escape(location.href)%20%2B%20%27%26n%3D%27%20%2B%20escape(document.title),%27bloggerForm%27,%27scrollbars%3Dno,width%3D475,height%3D300,top%3D175,left%3D75,status%3Dyes,resizable%3Dyes%27)%3Bif%20(!document.all)%20T%20%3D%20setTimeout(%27popw.focus()%27,50)%3Bvoid(0)%3B">Blog this</a></li>
</ul>
</li>
<li class="network buffer" data-category="productivity">
<h2 class="network__name">Buffer</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){var a=document.getElementsByTagName('head')[0],b=document.createElement('script');b.type='text/javascript';b.src='http://bufferapp.com/js/bookmarklet.v1.js?'+Math.floor(Math.random()*99999);a.appendChild(b);})();void 0">Send to Buffer</a></li>
</ul>
</li>
<li class="network delicious" data-category="social">
<h2 class="network__name">Delicious</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){function%20f(i){if(i.origin!==e+%22%22+n&&i.origin!==t+%22%22+n){return}if(i.data===%22destroy_bookmarklet%22){var%20s=document.getElementById(r);if(s){document.body.removeChild(s);s=null}}}var%20e=%22http://%22,t=%22https://%22,n=%22delicious.com%22,r=%22DELI_bookmarklet_iframe%22,i=document.getElementById(r);if(i){return}var%20s=e+%22%22+n+%22/save?%22,o=document.createElement(%22iframe%22);o.id=r;o.src=s+%22url=%22+encodeURIComponent(window.location.href)+%22&title=%22+encodeURIComponent(document.title)+%22&note=%22+encodeURIComponent(%22%22+(window.getSelection?window.getSelection():document.getSelection?document.getSelection():document.selection.createRange().text))+%22&v=1.1%22;o.style.position=%22fixed%22;o.style.top=%220%22;o.style.left=%220%22;o.style.height=%22100%25%22;o.style.width=%22100%25%22;o.style.backgroundColor=%22tranparent%22;o.style.zIndex=%229999999%22;o.style.border=%22none%22;o.style.visibility=%22hidden%22;o.onload=function(){this.style.visibility=%22visible%22};document.body.appendChild(o);var%20u=window.addEventListener?%22addEventListener%22:%22attachEvent%22;var%20a=u==%22attachEvent%22?%22onmessage%22:%22message%22;window[u](a,f,false)})()">Add to Delicious</a></li>
</ul>
</li>
<li class="network digg" data-category="news">
<h2 class="network__name">Digg</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){window.ndb=window.ndb||{};var%20a=%22http://new.digg.com/submit/?url=%22+document.location.href;W=800,d=600;Z=screen.height;Y=screen.width;X=Math.round((Y/2)-(W/2));c=0;if(Z>Y){c=Math.round((C/2)-(A/2))}window.ndb.shareWin=window.open(a,%22the_new_digg_button%22,%22left=%22+X+%22,top=%22+c+%22,width=%22+W+%22,height=%22+d+%22,personalbar=0,toolbar=0,scrollbars=1,resizable=1%22)}());">Share on Digg</a></li>
</ul>
</li>
<li class="network evernote" data-category="productivity">
<h2 class="network__name">Evernote</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){EN_CLIP_HOST='http://www.evernote.com';try{var%20x=document.createElement('SCRIPT');x.type='text/javascript';x.src=EN_CLIP_HOST+'/public/bookmarkClipper.js?'+(new%20Date().getTime()/100000);document.getElementsByTagName('head')[0].appendChild(x);}catch(e){location.href=EN_CLIP_HOST+'/clip.action?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title);}})();">Clip to Evernote</a></li>
</ul>
</li>
<li class="network facebook" data-category="social">
<h2 class="network__name">Facebook</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var%20d%3Ddocument,f%3D%27https://www.facebook.com/share%27,l%3Dd.location,e%3DencodeURIComponent,p%3D%27.php%3Fsrc%3Dbm%26v%3D4%26i%3D1349189003%26u%3D%27%2Be(l.href)%2B%27%26t%3D%27%2Be(d.title)%3B1%3Btry%7Bif%20(!/%5E(.*%5C.)%3Ffacebook%5C.%5B%5E.%5D*%24/.test(l.host))throw(0)%3Bshare_internal_bookmarklet(p)%7Dcatch(z)%20%7Ba%3Dfunction()%20%7Bif%20(!window.open(f%2B%27r%27%2Bp,%27sharer%27,%27toolbar%3D0,status%3D0,resizable%3D1,width%3D626,height%3D436%27))l.href%3Df%2Bp%7D%3Bif%20(/Firefox/.test(navigator.userAgent))setTimeout(a,0)%3Belse%7Ba()%7D%7Dvoid(0)">Share on Facebook</a></li>
</ul>
</li>
<li class="network forrst" data-category="social">
<h2 class="network__name">Forrst</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='https://forrst.composts/new',l=d.location,e=encodeURIComponent,p='?b=1&v=5&u='+e(l.href) +'&t='+e(d.title) +'&s='+e(s),u=f+p;try{if(!/^(.*\.)?forrst[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a =function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=765,height=650,scrollbars=1'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)">Share on Forrst</a></li>
</ul>
</li>
<li class="network foursquare" data-category="social">
<h2 class="network__name">foursquare</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){(window.___fourSq=window.___fourSq||{}).version='1358235720059';var a=document.createElement('script');a.type='text/javascript';a.src='https://platform-s.foursquare.com/js/modules/widgets.bookmarklet.js';(document.head||document.body).appendChild(a)})();void(0);">Save to foursquare</a></li>
</ul>
</li>
<li class="network gimmebar" data-category="social">
<h2 class="network__name">Gimme Bar</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:%28function%28%29%20%7Bvar%20a%3D%27setAttribute%27%3Bvar%20d%3Ddocument%3Bfunction%20o%28%29%20%7Bvar%20s2%3Bif%20%28this.readyState%20%3D%3D%3D%204%29%20%7Bs2%3Dd.createElement%28%27script%27%29%3Bs2%5Ba%5D%28%27type%27%2C%27text%2Fjavascript%27%29%3Bs2.appendChild%28d.createTextNode%28this.responseText%29%29%3Bd.body.appendChild%28s2%29%3B%7D%7Dvar%20s%3Dd.createElement%28%27script%27%29%3Bs%5Ba%5D%28%27type%27%2C%27text%2Fjavascript%27%29%3Bs%5Ba%5D%28%27src%27%2C%27https%3A%2F%2Fgimmebar.com%2Fbookmarklet%2F2%27%29%3Bd.body.appendChild%28s%29%3Bvar%20x%3Dnew%20XMLHttpRequest%28%29%3Bx.onreadystatechange%3Do%3Bx.open%28%27GET%27%2C%20%27https%3A%2F%2Fgimmebar.com%2Fbookmarklet%2Fstub%27%2C%20true%29%3Bx.send%28%27%27%29%3B%7D%29%28%29%3B">Add to Gimme Bar</a></li>
</ul>
</li>
<li class="network github" data-category="productivity">
<h2 class="network__name">GitHub</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var%20query%20=%20prompt(%22Search%20GitHub.com%22);user_search_ary%20=%20/%5Eu:(.*)/g.exec(query);if%20(user_search_ary)%20%7Bwindow.location%20=%20%22http://github.com/%22%20+%20user_search_ary%5B1%5D;%7Delse%20if%20(query)%20%7Bwindow.location%20=%20%22http://github.com/search?q=%22%20+%20query;%7D">Search</a></li>
</ul>
</li>
<li class="network googleplus" data-category="social">
<h2 class="network__name">Google+</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){var%20c;c=document.createElement(%22script%22);c.type=%22text/javascript%22;c.src=%22http://www.ctrlq.org/plusone/index.js?r=%22+Math.random();document.body.appendChild(c);})();">+1</a></li>
<li class="bookmarklet"><a href="javascript:void(window.open(%22https://plus.google.com/share?ur\l=%22+encodeURIComponent(location),%20%22Share%20to%20Google+%22,%22width=600,height=460,menubar=no,location=no,status=no%22));">Share on Google+</a></li>
</ul>
</li>
<li class="network googlereader" data-category="news">
<h2 class="network__name">Google Reader</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var b=document.body;var GR________bookmarklet_domain='http://www.google.com';if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://www.google.com/reader/ui/subscribe-bookmarklet.js');void(b.appendChild(z));}else{location='http://www.google.com/reader/view/feed/'+encodeURIComponent(location.href)}">Subscribe</a></li>
</ul>
</li>
<li class="network hackernews" data-category="news">
<h2 class="network__name">Hacker News</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:window.location=%22http://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)">Post to News.YC</a></li>
</ul>
</li>
<li class="network instapaper" data-category="news">
<h2 class="network__name">Instapaper</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/LlqY8NxXEekD?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)">Send to Instapaper</a></li>
</ul>
</li>
<li class="network linkedin" data-category="social">
<h2 class="network__name">LinkedIn</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){var%20d=document,l=d.location,f='http://www.linkedin.com/shareArticle?mini=true&ro=false&trk=bookmarklet&title='+encodeURIComponent(d.title)+'&url='+encodeURIComponent(l.href),a=function(){if(!window.open(f,'News','width=520,height=570,toolbar=0,location=0,status=0,scrollbars=yes')){l.href=f;}};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0);}else{a();}})()">Share on LinkedIn</a></li>
</ul>
</li>
<li class="network pinboard" data-category="news">
<h2 class="network__name">Pinboard</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('https://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'Pinboard','toolbar=no,width=700,height=350'));">Add bookmark</a></li>
<li class="bookmarklet"><a href="javascript:q=location.href;p=document.title;void(t=open('https://pinboard.in/add?later=yes&noui=yes&jump=close&url='+encodeURIComponent(q)+'&title='+encodeURIComponent(p),'Pinboard','toolbar=no,width=100,height=100'));t.blur();">Read later</a></li>
</ul>
</li>
<li class="network pinterest" data-category="social">
<h2 class="network__name">Pinterest</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:void((function(d)%7Bvar e%3Dd.createElement(%27script%27)%3Be.setAttribute(%27type%27,%27text/javascript%27)%3Be.setAttribute(%27charset%27,%27UTF-8%27)%3Be.setAttribute(%27src%27,%27//assets.pinterest.com/js/pinmarklet.js%3Fr%3D%27%2BMath.random()*99999999)%3Bd.body.appendChild(e)%7D)(document))%3B">Pin image</a></li>
</ul>
</li>
<li class="network pocket" data-category="news">
<h2 class="network__name">Pocket</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){ISRIL_H='8fc9';PKT_D='getpocket.com';ISRIL_SCRIPT=document.createElement('SCRIPT');ISRIL_SCRIPT.type='text/javascript';ISRIL_SCRIPT.src='http://'+PKT_D+'/b/r.js';document.getElementsByTagName('head')[0].appendChild(ISRIL_SCRIPT)})();">Send to Pocket</a></li>
</ul>
</li>
<li class="network posterous" data-category="social">
<h2 class="network__name">Posterous</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var%20b=document.body;var%20POSTEROUS___bookmarklet_domain='http://posterous.com';var%20d=new%20Date();var%20e=(new%20Date(d.getFullYear(),d.getMonth(),d.getDate())).getTime();if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.type='text/javascript');void(z.src='http://posterous.com/javascripts/bookmarklet2.js?'+e);void(b.appendChild(z));}else{}">Share on Posterous</a></li>
</ul>
</li>
<li class="network quotefm" data-category="social">
<h2 class="network__name">Quote.fm</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){var d=document;var s=d.createElement('scr'+'ipt');s.setAttribute('type','text/javascript');s.setAttribute('src','https://quote.fm/site/bookmarklet');d.body.appendChild(s);})();">Send to Quote.fm</a></li>
</ul>
</li>
<li class="network readability" data-category="news">
<h2 class="network__name">Readability</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/read.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Read now</a></li>
<li class="bookmarklet"><a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%276vWVgFu2FJDRFuFvHHsKMP3RQw7fP3WsXrpDFdAX%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/save.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Read later</a></li>
<li class="bookmarklet"><a href="javascript:(%28function%28%29%7Bwindow.baseUrl%3D%27http%3A//www.readability.com%27%3Bwindow.readabilityToken%3D%27%27%3Bvar%20s%3Ddocument.createElement%28%27script%27%29%3Bs.setAttribute%28%27type%27%2C%27text/javascript%27%29%3Bs.setAttribute%28%27charset%27%2C%27UTF-8%27%29%3Bs.setAttribute%28%27src%27%2CbaseUrl%2B%27/bookmarklet/send-to-kindle.js%27%29%3Bdocument.documentElement.appendChild%28s%29%3B%7D%29%28%29)">Send to Kindle</a></li>
</ul>
</li>
<li class="network setlistfm" data-category="music">
<h2 class="network__name">Setlist.fm</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var%20e=/\/event\/([0-9]+)/;e.exec(document.location);var%20id=RegExp.$1;if(id)window.open('http://www.setlist.fm/redirect?lastfm='+id,'_blank');else%20alert('not%20an%20event');void(0);">Last.fm to Setlist.fm</a></li>
</ul>
</li>
<li class="network storify" data-category="news">
<h2 class="network__name">Storify</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function()%7Bvar%20p=window.location.protocol;p=(p[0]=='f')?'http:':p;var%20_my_script=document.createElement('SCRIPT');%20_my_script.type='text/javascript';%20_my_script.src=p+'//storify.com/public/js/bookmarklet.js?1.9.0';%20document.getElementsByTagName('head')%5B0%5D.appendChild(_my_script);%7D());">Storify this</a></li>
</ul>
</li>
<li class="network stumbleupon" data-category="social">
<h2 class="network__name">StumbleUpon</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:document.location.href='http://www.stumbleupon.com/submit?url='+document.URL+'&title='+document.title.replace(/%20/g,'+');">Stumble</a></li>
</ul>
</li>
<li class="network tumblr" data-category="social">
<h2 class="network__name">Tumblr</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:var d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f='http://www.tumblr.com/share',l=d.location,e=encodeURIComponent,p='?v=3&u='+e(l.href) +'&t='+e(d.title) +'&s='+e(s),u=f+p;try{if(!/^(.*\.)?tumblr[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a =function(){if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=450,height=430'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)">Share on Tumblr</a></li>
</ul>
</li>
<li class="network twitter" data-category="social">
<h2 class="network__name">Twitter</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());">Share on Twitter</a></li>
</ul>
</li>
<li class="network zootool" data-category="productivity">
<h2 class="network__name">Zootool</h2>
<ul class="bookmarklets">
<li class="bookmarklet"><a href="javascript:(function(){var u='http://zootool.com';var d=document;function l(){if(!d.body)return p();if(!d.getElementById('zt-script')){var s=d.createElement('script');s.src=u+'/js/lasso.js?v=1.3';s.id='zt-script';d.body.appendChild(s);}s=setInterval(function(){u=0;try{u=!!(typeof ztinit=='function');}catch(i){}if(u){clearInterval(s);ztinit('1.3');}},200);}function p(){var w=500;var h=465;var l=(screen.width?(screen.width-w)/2:0);var t=(screen.height?(screen.height-h)/4:0);var win=window.open(u+'/post/?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(d.title),'lasso','width='+w+',height='+h+',left='+l+',top='+t+',resizable=yes,scrollbars=yes');(!win)?alert('Please deactivate your Popup-Blocker!'):win.focus();}try{l();}catch(e){p();}})();">Lasso</a></li>
<li class="bookmarklet"><a href="javascript:function ztrl(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location; try { if(!b) throw(0); z.setAttribute('src','http://zootool.com/read-later/js/'); b.appendChild(z); } catch(e) { alert('Please wait until the page has loaded.'); }}ztrl();void(0)">♥</a></li>
<li class="bookmarklet"><a href="javascript:void(function(){var w = 430; var h = 400; var t = (screen.height ? (screen.height - h) / 4 : 0); var l = (screen.width ? (screen.width - w) / 2 : 0); var win = window.open('http://zootool.com/aquarium/','zt-aquarium','width='+w+',height='+h+',top='+t+',left='+l+',location=no,personalbar=no,menubar=no,status=no,resizable=yes,scrollbars=yes'); if(w)setTimeout(function(){w.focus()},250);else{alert('Ups! You\'ve got an active popup blocker. Hold the CTRL-key and try again.')}})();">Aquarium</a></li>
</ul>
</li>
</ul>
</section>
<section id="howto" class="howto">
<div class="wrap">
<p class="description">Bookmarklets can be extremely useful, but often you don't take enough time to look for them properly. That's why I decided to list some of the most useful ones on one handy page for you to collect and use. Go ahead, browse through the list and <span class="show-touch">tap and hold on whatever bookmarklet you want</span><span class="hide-touch">drag whatever you want to the bookmark bar</span>.</p>
<p class="show-touch">After adding a bookmark, go to its edit screen and remove everything from the URL before 'javascript:'.</p>
<p>A list of all the changes is available as a <a href="https://gist.github.com/4536800" target="_blank">GitHub Gist</a>.</p>
</div>
</section>
Raw
script.js
var Bookmarklets = (function () {
var self,
setup = {
touch: 'ontouchstart' in document,
links: document.querySelectorAll('.bookmarklet a'),
networks: document.querySelectorAll('.network'),
searchBox: document.getElementById('search')
};
var bindUIActions = function () {
var linksLength = setup.links.length;
while (linksLength--) {
if (setup.touch) {
setup.links[linksLength].href = window.location + '/////' + setup.links[linksLength].href;
}
setup.links[linksLength].addEventListener('click', function (e) {
if (setup.touch) {
alert('Please tap and hold the bookmarklet to add it to your bookmarks.');
} else {
alert('Please drag the bookmarklet to the bookmarks bar.');
}
e.preventDefault();
}, false);
}
setup.searchBox.addEventListener('input', self.search, false);
window.addEventListener('scroll', self.stickySearch, false);
},
optimiseForTouch = function () {
if (setup.touch) {
document.body.classList.add('touch');
}
};
return {
search: function () {
var query = new RegExp(setup.searchBox.value, 'i'),
networksLength = setup.networks.length;
while (networksLength--) {
var current = setup.networks[networksLength];
current.style.display = (query.test(current.firstElementChild.textContent) || query.test(current.getAttribute('data-category'))) ? 'block' : 'none';
}
},
stickySearch: function () {
var top = window.pageYOffset ? pageYOffset : document.documentElement.scrollTop || document.body.scrollTop,
elementTop = setup.searchBox.parentNode.parentNode.offsetTop,
hasClass = setup.searchBox.classList.contains('fixed');
if (top > elementTop && !hasClass) {
setup.searchBox.classList.add('fixed');
} else if (top < elementTop && hasClass) {
setup.searchBox.classList.remove('fixed');
}
},
init: function () {
self = this;
bindUIActions();
optimiseForTouch();
}
}
}());
Bookmarklets.init();
Raw
style.scss
@import "compass";
/* ---------------------------------------- *\
VARIABLES
\* ---------------------------------------- */
$red: #a32c28;
$white: #fff;
$lightest-grey: #eee;
$light-grey: #ddd;
$grey: #ccc;
$dark-grey: #222;
$darkest-grey: #141414;
$black: #000;
/* ---------------------------------------- *\
WEB FONTS
\* ---------------------------------------- */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
/* ---------------------------------------- *\
GENERIC ELEMENTS
\* ---------------------------------------- */
* {
@include box-sizing(border-box);
}
body {
margin: 0;
font: #{100%}/#{1.5} "Source Sans Pro", sans-serif;
color: $dark-grey;
background-color: $lightest-grey;
}
p {
margin-top: 0;
margin-bottom: 1.5em;
}
a {
color: $red;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid;
@include transition(color 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out);
&:hover {
color: lighten($red, 10%);
}
&:active {
color: darken($red, 10%);
}
}
small,
.small {
font-size: 0.75em;
line-height: 2;
}
.wrap {
max-width: 35em;
margin: 0 auto;
}
.separator {
padding: 0 0.5em;
}
/* ---------------------------------------- *\
TOUCH SPECIFIC STYLES
\* ---------------------------------------- */
.show-touch {
font: 0/0 a;
}
.touch {
.hide-touch {
font: 0/0 a;
}
.show-touch {
font: inherit;
}
}
/* ---------------------------------------- *\
HEADER
\* ---------------------------------------- */
header {
padding: 3em 1.5em 1.5em;
text-align: center;
}
.site-heading {
margin-top: 0;
}
.site-heading {
margin-bottom: 0.6em;
font-size: 2.5em;
line-height: 1.2;
text-align: center;
}
/* ---------------------------------------- *\
TOOLBAR
\* ---------------------------------------- */
.toolbar {
position: relative;
min-height: 2.5em;
border-top: 1px solid $grey;
border-bottom: 1px solid $grey;
overflow: hidden;
z-index: 100;
}
.search {
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
padding: 0.5em;
margin: 0;
font: inherit;
border: 0;
@include appearance(none);
@include transition(box-shadow 0.25s ease-in-out);
outline: none;
&:focus {
box-shadow: 0 1px 2px rgba($darkest-grey, 0.15) inset;
}
}
.search.fixed {
position: fixed;
box-shadow: 0 2px 4px rgba($darkest-grey, 0.35);
}
/* ---------------------------------------- *\
NETWORKS
\* ---------------------------------------- */
.networks {
padding: 0;
margin: 0;
list-style-type: none;
}
.network {
padding: 3em;
@include background-image(radial-gradient(50% 50%, circle, rgba($white, 0.25), rgba($white, 0)));
}
.network__name {
margin-top: 0;
margin-bottom: 0.75em;
font-size: 2em;
text-align: center;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba($darkest-grey, 0.25);
color: $white;
}
/* ---------------------------------------- *\
BOOKMARKLETS
\* ---------------------------------------- */
.bookmarklets {
padding-left: 0;
text-align: center;
list-style-type: none;
}
.bookmarklet {
margin: 1em 0;
-webkit-transition: opacity 0.25s ease-in-out;
&:last-child {
margin-bottom: 0;
}
@media (min-width: 37.5em) {
max-width: 18em;
margin-left: auto;
margin-right: auto;
}
a {
position: relative;
display: block;
padding: 0.5em 1.5em;
background-color: $light-grey;
@include background-image(linear-gradient(top, rgba($lightest-grey, 0.5), rgba($grey, 0.5)));
color: inherit;
text-decoration: none;
border: 0;
border-radius: 3px;
box-shadow: 0 1px 3px rgba($darkest-grey, 0.25);
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
@include transition(background-color 0.25s ease-in-out);
&:hover {
background-color: $lightest-grey;
}
&:active {
@include transition(none);
background-color: $grey;
}
}
}
/* ---------------------------------------- *\
INSTRUCTIONS
\* ---------------------------------------- */
.howto {
padding: 3em 1.5em 1.5em;
}
/* ---------------------------------------- *\
BRAND COLOURS
\* ---------------------------------------- */
.pinboard { background-color: #0000e6; }
.pinterest { background-color: #c8232c; }
.googlereader { background-color: #396bc6; }
.instapaper { background-color: #000; }
.tumblr { background-color: #34526f; }
.twitter { background-color: #00a0d1; }
.pocket { background-color: #ee4056; }
.facebook { background-color: #3b5998; }
.readability { background-color: #9c0000; }
.storify { background-color: #009cce; }
.quotefm { background-color: #66ceff; }
.evernote { background-color: #5ba525; }
.forrst { background-color: #5b9a68; }
.delicious { background-color: #205cc0; }
.setlistfm { background-color: #212121; }
.linkedin { background-color: #0e76a8; }
.stumbleupon { background-color: #f74425; }
.digg { background-color: #000008; }
.hackernews { background-color: #ff6600; }
.github { background-color: #4183c4; }
.posterous { background-color: #ffde6b; }
.blogger { background-color: #fc4f08; }
.foursquare { background-color: #25a0ca; }
.gimmebar { background-color: #f70078; }
.googleplus { background-color: #db4a39; }
.zootool { background-color: #5e8b1d; }
.buffer { background-color: #529C31; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment