Skip to content

Instantly share code, notes, and snippets.

@ana-balica

ana-balica/popup.html

Created May 26, 2013 19:33
Show Gist options
  • Save ana-balica/5653778 to your computer and use it in GitHub Desktop.
Save ana-balica/5653778 to your computer and use it in GitHub Desktop.
Download ZIP
Chrome extension that connects to http://www.colorfyit.com/ API and displays all the available colors to the user.
Raw
popup.html
<!doctype html>
<html>
<head>
<title>Colorfytnis</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
min-width: 300px;
min-height: 100px;
overflow-x: hidden;
background: #e6e4d8 url('img/background.png');
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.button{
margin: 0 auto;
margin-top: 10px;
height: 38px;
padding: 0 20px;
border: 1px solid #5d81ab;
box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
border-radius: 20px;
background: #80a9da;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background: -webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
cursor: pointer;
width: 114px;
color: #446388;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}
.button:hover {
box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
color: #e3e3e3;
text-shadow: 0px 1px 1px #5d81ab;
}
.button:active {
position: relative;
top: 1px;
background: #5d81ab;
box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
border-color: #80a9da;
}
.button span {
font-size: 18px;
display: block;
padding-top: 5px;
font-weight: 700;
text-align: center;
}
#color_boxes {
padding: 20px 27px;
}
#color_boxes div {
display: inline-block;
vertical-align: top;
border: 2px solid #fff;
-webkit-border-radius: 0 0 9px 0;
cursor: pointer;
width: 35px;
height: 35px;
background-color: black;
margin: 2px 2px 2px 0px;
}
#color_boxes div:hover {
-webkit-transform: scale(1.1);
}
img {
margin: 0 auto;
padding: 25px 40px;
display: none;
}
.error {
color: #5d81ab;
font-weight: 700;
font-size: 18px;
text-align: center;
margin-bottom: 0;
display: none;
}
.copyright {
font-size: 10px;
vertical-align: bottom;
text-align: right;
margin: 10px;
}
.copyright a {
color: #e29100;
text-decoration: none;
font-weight: 600;
}
/* TIPTIP styling */
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
#tiptip_holder.tip_right {
padding-left: 5px;
}
#tiptip_holder.tip_left {
padding-right: 5px;
}
#tiptip_content {
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}
/* Webkit Hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#tiptip_content {
padding: 4px 8px 5px 8px;
background-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
border-bottom-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
border-top-color: rgba(20,20,20,0.92);
}
}
</style>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.tipTip.minified.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="button">
<span>ColorfyThis</span>
</div>
<img src="img/ajax-loader.gif">
<p class="error">Sorry, there must have<br>been an error :(</p>
<div id="color_boxes">
</div>
<p class="copyright">&copy; 2013 <a href="http://www.colorfyit.com/" target="_blank">ColorfyIt</a></p>
</body>
</html>
Raw
script.js
$(document).ready(function() {
$(".button").click(function(e) {
// remove all the color boxes
$('#color_boxes div').each(function(e) {
$(this).remove();
});
// remove the error message
$('.error').hide();
// get the currently selected tab URL
var url;
chrome.tabs.query({
active: true,
windowId: chrome.windows.WINDOW_ID_CURRENT
}, function(tabs){
// get the first tab from the array
url = tabs[0].url;
var swatch_url = "http://www.colorfyit.com/api/swatches/list.json?url="
+ url + "&discover=true";
request_swatch(swatch_url);
});
});
});
/**
* @param swatch_url - the URL to which to make the request
*
* This function makes an AJAX GET request to the colorfyit
* (http://www.colorfyit.com/) API and retrieves all the data about colors
*
**/
function request_swatch(swatch_url) {
$.ajax({
type: "GET",
url: swatch_url,
beforeSend: function() {
$('img').show();
},
success: display_data,
error: display_error,
timeout: display_error
});
}
/**
*
* @param data - a JSON that contains the data returned from the server
*
* This function extracts the colors one by one and feeds them to the function
* that will insert the the color boxes. It also sets up a tooltip to each color
* box after inserting all of them.
*
**/
function display_data(data) {
$('img').hide();
var colors = data.colors;
for (color_id in colors) {
var color = colors[color_id];
insert_color_box(color.Hex, color.Count);
}
$('#color_boxes div').tipTip({defaultPosition: "top", delay: 0,
keepAlive: false, fadeIn: 0, fadeOut: 50});
}
/**
*
* @param hex - a string that contains the color code in HEX (ex. '#3d3d3d')
*
* This function creates a DOM element witn specific background color and title,
* and append that element to the DOM.
*
**/
function insert_color_box(hex, count) {
var color_box = $('<div></div>').css('background-color', hex);
var title = 'Found - ' + hex + ' - ' + count + ' time';
if (count != 1) {
title += 's';
}
$(color_box).attr('title', title);
$('#color_boxes').append($(color_box));
}
/**
*
* @param xhr
* @param status
*
* This function will display a sorry message in case the request failed or
* there was a timeout
*
**/
function display_error(xhr, status) {
$('img').fadeOut();
$('.error').show();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment