Last active
December 27, 2015 01:09
-
-
Save benknight/7243346 to your computer and use it in GitHub Desktop.
An index bookmarklet for all my gists that are Yelp UI tweaks.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
var GISTS = [ | |
// { id: '8739800', description: 'Fixed header v1' }, | |
{ id: '8741749', description: 'Fixed header' }, | |
{ id: 'd9e94c9f2154409b0b8c', description: 'Fixed footer' }, | |
{ id: '8497929', description: 'Full-width search (needs AdBlock sry)' }, | |
{ id: 'c0c49bd8288bbdf678b7', description: 'Inset shadows on photo boxes' } | |
]; | |
// Check if it's already on the page. | |
if ($('#yelp-ui-demos').length) { | |
$('#yelp-ui-demos').show(); | |
return; | |
} | |
var $UI = $([ | |
'<div id="yelp-ui-demos">', | |
' <a href="javascript:void(0)" class="close">×</a>', | |
' <h3>Yelp UI Demos</h3>', | |
' <ul></ul>', | |
'</div>', | |
].join('')); | |
$.each(GISTS, function(i, gist) { | |
$UI.find('ul').append( | |
'<li><label><input type="checkbox" value="' + gist.id + '"> ' + gist.description + '</label></li>' | |
); | |
}); | |
$(document.body).append($UI); | |
$('input[type=checkbox]', $UI).on('click', function() { | |
var $input = $(this); | |
var gist_id = $input.attr('value'); | |
applyGist(gist_id); | |
$input.attr('disabled', true); | |
}); | |
$('.close', $UI).on('click', function() { | |
$UI.hide(); | |
}); | |
})(window.jQuery); | |
/** XHR Logic */ | |
// Copied over from an old Chrome extension I wrote, | |
// during a time when I was interested in writing "pure" | |
// JavaScript with no libs, hence the raw XHR code below. | |
function applyGist(gist_id) { | |
var css = []; | |
var js = []; | |
var applyCSS = function() { | |
for ( var x in css ) { | |
var style = document.createElement('style'); | |
style.innerHTML = css[x]; | |
document.head.appendChild(style); | |
} | |
}; | |
var applyJS = function() { | |
for ( var x in js ) { | |
var script = document.createElement('script'); | |
script.innerHTML = js[x]; | |
document.body.appendChild(script); | |
} | |
}; | |
var xhr = new XMLHttpRequest(); | |
xhr.open('GET', 'https://api.github.com/gists/' + gist_id, true); | |
xhr.onload = function() { | |
var data = JSON.parse(this.responseText); | |
for ( var file in data.files ) { | |
if ( data.files[file].language == 'CSS') { | |
css.push( data.files[file].content ); | |
} | |
if ( data.files[file].language == 'JavaScript' ) { | |
js.push( data.files[file].content ); | |
} | |
} | |
// Apply CSS, then JS. | |
applyCSS(); | |
applyJS(); | |
}; | |
xhr.onerror = function() { | |
console.log('Failed to load Gist: ' + request.gist); | |
}; | |
xhr.send(); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<body> | |
<head> | |
<meta charset="utf-8"> | |
<title>Ben’s Bookmarklet Thing</title> | |
</head> | |
Drag me into the bookmarks bar:<br> | |
<a href="javascript:(function(){var gist_id='7243346';var css=[];var js=[];var applyCSS=function(){for(var x in css){var style=document.createElement('style');style.innerHTML=css[x];document.head.appendChild(style);}};var applyJS=function(){for(var x in js){var script=document.createElement('script');script.innerHTML=js[x];document.body.appendChild(script);}};var xhr=new XMLHttpRequest();xhr.open('GET','https://api.github.com/gists/'+gist_id,true);xhr.onload=function(){var data=JSON.parse(this.responseText);for(var file in data.files){if(data.files[file].language=='CSS'){css.push(data.files[file].content);}if(data.files[file].language=='JavaScript'){js.push(data.files[file].content);}}applyCSS();applyJS();};xhr.onerror=function(){console.log('Failed to load Gist: '+request.gist);};xhr.send();}());">Yelp UI Demos</a> | |
</body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.4) | |
// Compass (v1.0.0.alpha.18) | |
// ---- | |
#yelp-ui-demos { | |
z-index: 9999; // "I'M THE TOP-MOST THING I PROMISE!" | |
-webkit-font-smoothing: antialiased; | |
position: fixed; | |
bottom: 10px; | |
left: 10px; | |
max-width: 300px; | |
min-width: 200px; | |
padding: 10px; | |
background: black; | |
color: white; | |
border-radius: 5px; | |
box-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.5); | |
label { | |
cursor: pointer; | |
color: white; | |
} | |
input[type=checkbox] { | |
-webkit-filter: invert(100%); | |
} | |
h3 { | |
color: yellow; | |
} | |
.close { | |
color: white; | |
position: absolute; | |
top: 10px; | |
right: 15px; | |
font-size: 19px; | |
text-decoration: none; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#yelp-ui-demos { | |
z-index: 9999; | |
-webkit-font-smoothing: antialiased; | |
position: fixed; | |
bottom: 10px; | |
left: 10px; | |
max-width: 300px; | |
min-width: 200px; | |
padding: 10px; | |
background: black; | |
color: white; | |
border-radius: 5px; | |
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); | |
} | |
#yelp-ui-demos label { | |
cursor: pointer; | |
color: white; | |
} | |
#yelp-ui-demos input[type=checkbox] { | |
-webkit-filter: invert(100%); | |
} | |
#yelp-ui-demos h3 { | |
color: yellow; | |
} | |
#yelp-ui-demos .close { | |
color: white; | |
position: absolute; | |
top: 10px; | |
right: 15px; | |
font-size: 19px; | |
text-decoration: none; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<body> | |
<head> | |
<meta charset="utf-8"> | |
<title>Ben’s Bookmarklet Thing</title> | |
</head> | |
Drag me into the bookmarks bar:<br> | |
<a href="javascript:(function(){var gist_id='7243346';var css=[];var js=[];var applyCSS=function(){for(var x in css){var style=document.createElement('style');style.innerHTML=css[x];document.head.appendChild(style);}};var applyJS=function(){for(var x in js){var script=document.createElement('script');script.innerHTML=js[x];document.body.appendChild(script);}};var xhr=new XMLHttpRequest();xhr.open('GET','https://api.github.com/gists/'+gist_id,true);xhr.onload=function(){var data=JSON.parse(this.responseText);for(var file in data.files){if(data.files[file].language=='CSS'){css.push(data.files[file].content);}if(data.files[file].language=='JavaScript'){js.push(data.files[file].content);}}applyCSS();applyJS();};xhr.onerror=function(){console.log('Failed to load Gist: '+request.gist);};xhr.send();}());">Yelp UI Demos</a> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment