Fix mascot silhouette filter

Now generates actual silhouettes.
This commit is contained in:
Zixaphir 2013-06-21 00:47:56 -07:00
parent 27c6f07913
commit cf6032084c
5 changed files with 82 additions and 56 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1694,10 +1694,10 @@ a:only-of-type > .remove {
bottom: auto !important; bottom: auto !important;
top: 17px; top: 17px;
} }
.grayscale-mascot #mascot { .grayscale-mascots #mascot {
<%= filter %>: url('#grayscale'); <%= filter %>: url('#grayscale');
} }
.silhouette-filter #mascot img { .silhouettize-mascots #mascot img {
<%= filter %>: url('#mascot-filter'); <%= filter %>: url('#mascot-filter');
} }
/* Options */ /* Options */

View File

@ -34,10 +34,10 @@ MascotTools =
else else
$.addClass doc, 'mascot-position-above-post-form' $.addClass doc, 'mascot-position-above-post-form'
if mascot.silhouette and not Conf['Silhouette Filter'] if mascot.silhouette and not Conf['Silhouettize Mascots']
$.addClass doc, 'silhouette-filter' $.addClass doc, 'silhouettize-mascots'
else unless Conf['Silhouette Filter'] else unless Conf['Silhouettize Mascots']
$.rmClass doc, 'silhouette-filter' $.rmClass doc, 'silhouettize-mascots'
unless mascot unless mascot
if name and not mascot = Mascots[name] if name and not mascot = Mascots[name]

View File

@ -129,22 +129,26 @@ Style =
$.rm node $.rm node
return return
filter: (foreground, background) -> matrix: (foreground, background) ->
matrix = (fg, bg) -> "#{bg.r} #{-fg.r} 0 0 #{fg.r} #{bg.g} #{-fg.g} 0 0 #{fg.g} #{bg.b} #{-fg.b} 0 0 #{fg.b}"
fgHex = Style.colorToHex foreground fgHex = Style.colorToHex foreground
bgHex = Style.colorToHex background bgHex = Style.colorToHex background
matrix { [{
r: parseInt(fgHex.substr(0, 2), 16) / 255 r: parseInt(fgHex.substr(0, 2), 16) / 255
g: parseInt(fgHex.substr(2, 2), 16) / 255 g: parseInt(fgHex.substr(2, 2), 16) / 255
b: parseInt(fgHex.substr(4, 2), 16) / 255 b: parseInt(fgHex.substr(4, 2), 16) / 255
}, { },
{
r: parseInt(bgHex.substr(0, 2), 16) / 255 r: parseInt(bgHex.substr(0, 2), 16) / 255
g: parseInt(bgHex.substr(2, 2), 16) / 255 g: parseInt(bgHex.substr(2, 2), 16) / 255
b: parseInt(bgHex.substr(4, 2), 16) / 255 b: parseInt(bgHex.substr(4, 2), 16) / 255
} }]
filter: ([fg, bg]) ->
"#{bg.r} #{-fg.r} 0 0 #{fg.r} #{bg.g} #{-fg.g} 0 0 #{fg.g} #{bg.b} #{-fg.b} 0 0 #{fg.b}"
silhouette: ([fg, bg]) ->
"0 0 0 0 #{fg.r} 0 0 0 0 #{fg.g} 0 0 0 0 #{fg.b}"
layout: """<%= grunt.file.read('src/General/css/layout.css') %>""" layout: """<%= grunt.file.read('src/General/css/layout.css') %>"""
@ -174,8 +178,8 @@ Style =
Style.lightTheme = bgColor.isLight() Style.lightTheme = bgColor.isLight()
Style.svg.innerHTML = """ Style.svg.innerHTML = """
<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='captcha-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.filter theme["Text"], theme["Input Background"]} 0 0 0 1 0' /></filter></svg> <svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='captcha-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0' /></filter></svg>
<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='mascot-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.filter theme["Reply Background"], theme["Reply Background"]} 0 0 0 1 0' /></filter></svg> <svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='mascot-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.silhouette Style.matrix theme["Reply Background"], theme["Reply Background"]} 0 0 0 1 0' /></filter></svg>
<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="grayscale"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg> <svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="grayscale"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>
<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="icons-filter" color-interpolation-filters='sRGB'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0' /></filter></svg> <svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="icons-filter" color-interpolation-filters='sRGB'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0' /></filter></svg>
""" """