duckduckgo
/
zeroclickinfo-goodies
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ColorCodes: move from inline css

master
Matt Miller 2014-09-09 17:37:19 -04:00
parent b7517fd6d9
commit 4a24d5165b
3 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/DDG/Goodie/ColorCodes.pm
View File

@ -121,15 +121,15 @@ handle matches => sub {
my $html_text = sprintf("Hex: %s &middot; rgb(%d, %d, %d) &middot; rgb(%s, %s, %s) <br> hsl(%d, %s, %s) &middot; cmyb(%s, %s, %s, %s) &middot;",
@color_template_data);
return $text,
html => '<div style="background:#'
html => '<div class="zci--color-codes"><div class="colorbox" style="background:#'
. $rgb->hex
. ';border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>'
. '"></div>'
. $html_text
. " [<a href='http://labs.tineye.com/multicolr#colors="
. $rgb->hex
. ";weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/"
. $rgb->hex
. "' title='Tints, information and similar colors on color-hex.com'>Info</a>]";
. "' title='Tints, information and similar colors on color-hex.com'>Info</a>]</div>";
};
1;

9
share/goodie/color_codes/color_codes.css Normal file
View File

@ -0,0 +1,9 @@
.zci--answer .zci--color-codes .colorbox {
border: 2px solid #999;
height: 30px;
width: 30px;
margin: 5px;
margin-right: 10px;
margin-top: 3px;
float: left;
}

57
t/ColorCodes.t
View File

@ -8,50 +8,53 @@ use DDG::Test::Goodie;
zci answer_type => 'color_code';
zci is_cached => 1;
ddg_goodie_test(
[qw(
DDG::Goodie::ColorCodes
)],
'hex color code for cyan' => test_zci(
'Hex: #00ffff ~ rgb(0, 255, 255) ~ rgb(0%, 100%, 100%) ~ hsl(180, 100%, 50%) ~ cmyb(100%, 0%, 0%, 0%)',
html => qq(<div style="background:#00ffff;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #00ffff &middot; rgb(0, 255, 255) &middot; rgb(0%, 100%, 100%) <br> hsl(180, 100%, 50%) &middot; cmyb(100%, 0%, 0%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=00ffff;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/00ffff' title='Tints, information and similar colors on color-hex.com'>Info</a>])
),
'rgb(173,216,230)' => test_zci(
'Hex: #add8e6 ~ rgb(173, 216, 230) ~ rgb(68%, 85%, 90%) ~ hsl(195, 53%, 79%) ~ cmyb(25%, 6%, 0%, 10%)',
html => qq(<div style="background:#add8e6;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #add8e6 &middot; rgb(173, 216, 230) &middot; rgb(68%, 85%, 90%) <br> hsl(195, 53%, 79%) &middot; cmyb(25%, 6%, 0%, 10%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=add8e6;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/add8e6' title='Tints, information and similar colors on color-hex.com'>Info</a>])
),
'hsl 194 0.53 0.79' => test_zci(
'Hex: #add8e5 ~ rgb(173, 216, 229) ~ rgb(68%, 85%, 90%) ~ hsl(194, 53%, 79%) ~ cmyb(25%, 6%, 0%, 10%)',
html => qq(<div style="background:#add8e5;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #add8e5 &middot; rgb(173, 216, 229) &middot; rgb(68%, 85%, 90%) <br> hsl(194, 53%, 79%) &middot; cmyb(25%, 6%, 0%, 10%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=add8e5;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/add8e5' title='Tints, information and similar colors on color-hex.com'>Info</a>])
),
ddg_goodie_test([qw(
DDG::Goodie::ColorCodes
)
],
'hex color code for cyan' => test_zci(
'Hex: #00ffff ~ rgb(0, 255, 255) ~ rgb(0%, 100%, 100%) ~ hsl(180, 100%, 50%) ~ cmyb(100%, 0%, 0%, 0%)',
html => qr/./,
),
'rgb(173,216,230)' => test_zci(
'Hex: #add8e6 ~ rgb(173, 216, 230) ~ rgb(68%, 85%, 90%) ~ hsl(195, 53%, 79%) ~ cmyb(25%, 6%, 0%, 10%)',
html => qr/./,
),
'hsl 194 0.53 0.79' => test_zci(
'Hex: #add8e5 ~ rgb(173, 216, 229) ~ rgb(68%, 85%, 90%) ~ hsl(194, 53%, 79%) ~ cmyb(25%, 6%, 0%, 10%)',
html => qr/./,
),
'cmyk(0.12, 0, 0, 0)' => test_zci(
'Hex: #e0ffff ~ rgb(224, 255, 255) ~ rgb(88%, 100%, 100%) ~ hsl(180, 100%, 94%) ~ cmyb(12%, 0%, 0%, 0%)',
html => qq(<div style="background:#e0ffff;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #e0ffff &middot; rgb(224, 255, 255) &middot; rgb(88%, 100%, 100%) <br> hsl(180, 100%, 94%) &middot; cmyb(12%, 0%, 0%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=e0ffff;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/e0ffff' title='Tints, information and similar colors on color-hex.com'>Info</a>])
'Hex: #e0ffff ~ rgb(224, 255, 255) ~ rgb(88%, 100%, 100%) ~ hsl(180, 100%, 94%) ~ cmyb(12%, 0%, 0%, 0%)',
html => qr/./,
),
'#00ff00' => test_zci(
'Hex: #00ff00 ~ rgb(0, 255, 0) ~ rgb(0%, 100%, 0%) ~ hsl(120, 100%, 50%) ~ cmyb(100%, 0%, 100%, 0%)',
html => qq(<div style="background:#00ff00;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #00ff00 &middot; rgb(0, 255, 0) &middot; rgb(0%, 100%, 0%) <br> hsl(120, 100%, 50%) &middot; cmyb(100%, 0%, 100%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=00ff00;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/00ff00' title='Tints, information and similar colors on color-hex.com'>Info</a>])
'Hex: #00ff00 ~ rgb(0, 255, 0) ~ rgb(0%, 100%, 0%) ~ hsl(120, 100%, 50%) ~ cmyb(100%, 0%, 100%, 0%)',
html => qr/./,
),
'#0f0' => test_zci(
'Hex: #00ff00 ~ rgb(0, 255, 0) ~ rgb(0%, 100%, 0%) ~ hsl(120, 100%, 50%) ~ cmyb(100%, 0%, 100%, 0%)',
html => qq(<div style="background:#00ff00;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #00ff00 &middot; rgb(0, 255, 0) &middot; rgb(0%, 100%, 0%) <br> hsl(120, 100%, 50%) &middot; cmyb(100%, 0%, 100%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=00ff00;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/00ff00' title='Tints, information and similar colors on color-hex.com'>Info</a>])
'Hex: #00ff00 ~ rgb(0, 255, 0) ~ rgb(0%, 100%, 0%) ~ hsl(120, 100%, 50%) ~ cmyb(100%, 0%, 100%, 0%)',
html => qr/./,
),
'inverse of the color red' => test_zci(
'Hex: #00ffff ~ rgb(0, 255, 255) ~ rgb(0%, 100%, 100%) ~ hsl(180, 100%, 50%) ~ cmyb(100%, 0%, 0%, 0%)',
html => qq(<div style="background:#00ffff;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #00ffff &middot; rgb(0, 255, 255) &middot; rgb(0%, 100%, 100%) <br> hsl(180, 100%, 50%) &middot; cmyb(100%, 0%, 0%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=00ffff;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/00ffff' title='Tints, information and similar colors on color-hex.com'>Info</a>]),
html => qr/./,
),
'rgb(0 255 0)\'s inverse' => test_zci(
'Hex: #ff00ff ~ rgb(255, 0, 255) ~ rgb(100%, 0%, 100%) ~ hsl(300, 100%, 50%) ~ cmyb(0%, 100%, 0%, 0%)',
html => qq(<div style="background:#ff00ff;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #ff00ff &middot; rgb(255, 0, 255) &middot; rgb(100%, 0%, 100%) <br> hsl(300, 100%, 50%) &middot; cmyb(0%, 100%, 0%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=ff00ff;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/ff00ff' title='Tints, information and similar colors on color-hex.com'>Info</a>]),
html => qr/./,
),
'html bluishblack' => test_zci(
'Hex: #202428 ~ rgb(32, 36, 40) ~ rgb(13%, 14%, 16%) ~ hsl(210, 11%, 14%) ~ cmyb(20%, 10%, 0%, 84%)',
html => qq(<div style="background:#202428;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #202428 &middot; rgb(32, 36, 40) &middot; rgb(13%, 14%, 16%) <br> hsl(210, 11%, 14%) &middot; cmyb(20%, 10%, 0%, 84%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=202428;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/202428' title='Tints, information and similar colors on color-hex.com'>Info</a>]),
html => qr/./,
),
# Single full HTML check.
'red html code' => test_zci(
'Hex: #ff0000 ~ rgb(255, 0, 0) ~ rgb(100%, 0%, 0%) ~ hsl(0, 100%, 50%) ~ cmyb(0%, 100%, 100%, 0%)',
html => qq(<div style="background:#ff0000;border:2px solid #999;height:30px;width:30px;margin:5px;margin-right:10px;margin-top:3px;float:left;"></div>Hex: #ff0000 &middot; rgb(255, 0, 0) &middot; rgb(100%, 0%, 0%) <br> hsl(0, 100%, 50%) &middot; cmyb(0%, 100%, 100%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=ff0000;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/ff0000' title='Tints, information and similar colors on color-hex.com'>Info</a>]),
),
html =>
qq(<div class="zci--color-codes"><div class="colorbox" style="background:#ff0000"></div>Hex: #ff0000 &middot; rgb(255, 0, 0) &middot; rgb(100%, 0%, 0%) <br> hsl(0, 100%, 50%) &middot; cmyb(0%, 100%, 100%, 0%) &middot; [<a href='http://labs.tineye.com/multicolr#colors=ff0000;weights=100;'>Images</a>] [<a href='http://www.color-hex.com/color/ff0000' title='Tints, information and similar colors on color-hex.com'>Info</a>]</div>),
),
# Queries to ignore.
'bluishblack html' => undef,
'HTML email' => undef,
'wield color' => undef,