Skip to content

Instantly share code, notes, and snippets.

@benknight

benknight/SassMeister-input.scss

Last active December 27, 2015 01:09
Show Gist options
  • Save benknight/7243346 to your computer and use it in GitHub Desktop.
Save benknight/7243346 to your computer and use it in GitHub Desktop.
Download ZIP
An index bookmarklet for all my gists that are Yelp UI tweaks.
Raw
gistfile1.js
(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();
}
Raw
gistfile2.html
<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>
Raw
SassMeister-input.scss
// ----
// 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;
}
}
Raw
SassMeister-output.css
#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;
}
Raw
SassMeister-rendered.html
<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