Last active
March 21, 2016 23:00
-
-
Save tow8ie/0d61cd8d91c88ee3f231 to your computer and use it in GitHub Desktop.
WhatFont Bookmarklet that can be served via HTTPS, so that it works in Firefox.
This file contains 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
@-webkit-keyframes slideDown { | |
from { | |
max-height: 0 | |
} | |
to { | |
max-height: 250px | |
} | |
} | |
@-webkit-keyframes fadeIn { | |
from { | |
opacity: 0 | |
} | |
to { | |
opacity: 1 | |
} | |
} | |
* { | |
cursor: default!important | |
} | |
.__whatfont_basic { | |
background: transparent; | |
border: 0 solid black; | |
border-bottom: 0 solid black; | |
border-left: 0 solid black; | |
border-right: 0 solid black; | |
border-top: 0 solid black; | |
border-radius: none; | |
-moz-border-radius: none; | |
-webkit-border-radius: none; | |
bottom: auto; | |
box-shadow: none; | |
-moz-border-radius: none; | |
-webkit-box-shadow: none; | |
clear: none; | |
color: inherit; | |
cursor: auto; | |
float: none; | |
font: inherit; | |
height: auto; | |
left: auto; | |
list-style: none; | |
margin: 0; | |
max-height: none; | |
max-width: none; | |
min-height: none; | |
min-width: none; | |
overflow: visible; | |
padding: 0; | |
position: static; | |
right: auto; | |
text-align: inherit; | |
text-decoration: none; | |
text-indent: 0; | |
text-shadow: inherit; | |
text-transform: none; | |
top: auto; | |
visibility: visible; | |
width: auto; | |
z-index: auto; | |
zoom: 1; | |
-webkit-font-smoothing: antialiased | |
} | |
.__whatfont_basic * { | |
color: inherit | |
} | |
.__whatfont_basic a, | |
.__whatfont_basic a:visited .__whatfont_basic a:hover, | |
.__whatfont_basic a:active { | |
color: inherit; | |
cursor: pointer!important; | |
text-decoration: none | |
} | |
.__whatfont_elem { | |
background: rgba(0, 0, 0, 0.9); | |
background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.95), rgba(0, 0, 0, 0.9)); | |
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(30, 30, 30, 0.95)), to(rgba(0, 0, 0, 0.9))); | |
border: 1px solid black; | |
border-radius: 5px; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
box-shadow: inset 0 0 1px #555, 0 0 5px #000; | |
-moz-box-shadow: inset 0 1px 0 #555, 0 0 5px #000; | |
-webkit-box-shadow: inset 0 1px 0 #555, 0 0 5px #000; | |
color: #fff; | |
font-family: "Helvetica Neue", sans-serif; | |
font-size: 14px; | |
line-height: 1.286; | |
padding: 0; | |
text-shadow: 0 -1px 0 #111; | |
z-index: 2147483647 | |
} | |
.__whatfont_button { | |
background: #333; | |
background: -webkit-gradient(linear, 0 0, 0 100%, from(#555), color-stop(0.5, #333), color-stop(0.51, #333), to(#222)); | |
background: -moz-linear-graident(top, #555 50%, #333 1%, #222); | |
border: 1px solid #000; | |
border-radius: 5px; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
box-shadow: inset 0 0 1px #aaa, 0 1px 0 #111; | |
-moz-box-shadow: inset 0 0 1px #aaa, 0 1px 0 #111; | |
-webkit-box-shadow: inset 0 0 1px #aaa, 0 1px 0 #111; | |
font-weight: 500; | |
padding: 3px 6px; | |
text-shadow: 0 1px 0 #000; | |
text-align: center | |
} | |
.__whatfont_tip { | |
display: none; | |
font-weight: 500; | |
line-height: 1; | |
opacity: .9; | |
padding: 4px 5px 6px 5px; | |
position: absolute; | |
z-index: 2147483647 | |
} | |
.__whatfont_control { | |
box-shadow: inset 0 0 1px #555, 0 0 2px #000; | |
-moz-box-shadow: inset 0 1px 0 #555, 0 0 2px #000; | |
-webkit-box-shadow: inset 0 1px 0 #555, 0 0 2px #000; | |
padding: 4px 8px; | |
position: fixed; | |
right: 10px; | |
top: 10px | |
} | |
.__whatfont_exit { | |
cursor: pointer; | |
font-weight: 500 | |
} | |
.__whatfont_help { | |
color: #eee; | |
font-size: 12px | |
} | |
.__whatfont_help strong { | |
font-weight: 500 | |
} | |
.__whatfont_panel { | |
padding: 0; | |
position: absolute; | |
width: 260px; | |
z-index: 214748364 | |
} | |
.__whatfont_panel_title { | |
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), color-stop(0.6, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); | |
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); | |
color: #fff; | |
font-size: 1.1em; | |
font-weight: bold; | |
padding: 4px 16px 4px 10px; | |
position: relative; | |
text-align: center; | |
text-transform: capitalize | |
} | |
.__whatfont_panel_title:before, | |
.__whatfont_panel_title:after { | |
border-style: solid; | |
content: '.'; | |
display: block; | |
height: 0; | |
position: absolute; | |
text-indent: -30000px; | |
width: 0 | |
} | |
.__whatfont_panel_title:before { | |
border-color: black transparent; | |
border-width: 0 7px 7px 7px; | |
left: 7px; | |
top: -8px | |
} | |
.__whatfont_panel_title:after { | |
border-color: #666 transparent; | |
border-width: 0 6px 7px 6px; | |
left: 8px; | |
top: -6px | |
} | |
.__whatfont_close_button { | |
font-size: 18px; | |
bottom: 0; | |
cursor: pointer; | |
display: inline-block; | |
line-height: 22px; | |
margin: 0; | |
height: 22px; | |
padding: 1px; | |
position: absolute; | |
right: 7px; | |
top: 0; | |
vertical-align: middle | |
} | |
.__whatfont_close_button:hover { | |
color: #aaa | |
} | |
.__whatfont_panel_content { | |
overflow: hidden; | |
padding-bottom: 10px; | |
-webkit-animation: slideDown .4s 0 1 ease-in-out | |
} | |
.__whatfont_clearfix:after { | |
content: "."; | |
display: block; | |
height: 0; | |
clear: both; | |
visibility: hidden | |
} | |
.__whatfont_panel_content .__whatfont_panel_label, | |
.__whatfont_panel_content div.__whatfont_panel_label, | |
.__whatfont_panel_content dt.__whatfont_panel_label { | |
color: #aaa; | |
font-size: 12px; | |
font-weight: bold; | |
line-height: 1.5; | |
text-shadow: 0 -1px 0 black | |
} | |
.__whatfont_panel_content ul.__whatfont_panel_properties>li { | |
border-bottom: 1px solid #000; | |
border-top: 1px solid #4a4a4a; | |
margin: 0 6px; | |
padding: 5px 4px | |
} | |
.__whatfont_panel_content ul.__whatfont_panel_properties>li:first-child { | |
border-top: 0; | |
margin-top: 0; | |
padding-top: 0 | |
} | |
.__whatfont_panel_content ul.__whatfont_panel_properties>li:last-child { | |
border-bottom: 0; | |
margin-bottom: 0; | |
padding-bottom: 0 | |
} | |
.__whatfont_panel_content .__whatfont_panel_value, | |
.__whatfont_panel_content div.__whatfont_panel_value, | |
.__whatfont_panel_content dt.__whatfont_panel_value { | |
font-weight: 500; | |
text-shadow: 0 1px 0 black | |
} | |
.__whatfont_panel_content .__whatfont_fniu { | |
text-decoration: line-through | |
} | |
.__whatfont_panel_content .__whatfont_fiu { | |
font-style: italic | |
} | |
.__whatfont_panel_content .__whatfont_size { | |
float: left; | |
width: 48.6%; | |
zoom: 1 | |
} | |
.__whatfont_panel_content .__whatfont_line_height { | |
margin-left: 50%; | |
width: 48.6%; | |
zoom: 1 | |
} | |
.__whatfont_highlighted { | |
cursor: default!important | |
} | |
.__whatfont_panel dt.__whatfont_typeface { | |
color: white; | |
font-size: 16px | |
} | |
.__whatfont_type_preview { | |
background: #444; | |
box-shadow: 0 0 2px #555, inset 0 0 2px #111; | |
-moz-box-shadow: 0 0 2px #555, inset 0 0 2px #111; | |
-webkit-box-shadow: 0 0 2px #555, inset 0 0 2px #111; | |
border: 1px solid #111; | |
color: #eee; | |
font-size: 1.25em; | |
margin: .25em 0; | |
overflow: hidden; | |
padding: 5px 10px; | |
text-shadow: none; | |
-webkit-font-smoothing: subpixel-antialiased | |
} | |
.__whatfont_panel_content .__whatfont_font_services { | |
line-height: 1; | |
text-align: right | |
} | |
ul.__whatfont_font_service { | |
display: inline-block; | |
list-style-type: none; | |
margin: 0; | |
padding: 0 | |
} | |
ul.__whatfont_font_service li { | |
display: inline-block; | |
margin: 0; | |
padding: 0 | |
} | |
.__whatfont_service_icon { | |
color: white; | |
display: inline-block; | |
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0.6))) | |
} | |
.__whatfont_service_icon:hover { | |
cursor: pointer | |
} | |
.__whatfont_panel_content .__whatfont_panel_tools { | |
color: #eee; | |
font: bold 11px "Lucida Grande", "Lucida Sans Unicode", verdana, sans-serif; | |
line-height: 12px; | |
margin: 12px 6px 0; | |
padding: 0 4px | |
} | |
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_panel_tools_left { | |
float: left; | |
width: 49.5% | |
} | |
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_panel_tools_right { | |
margin-left: 50%; | |
text-align: right | |
} | |
.__whatfont_panel_content .__whatfont_color_info_sample { | |
border: 1px solid #666; | |
display: inline-block; | |
height: 12px; | |
margin-right: 6px; | |
width: 12px; | |
-webkit-transition: border-color .2s; | |
-moz-user-select: none; | |
-webkit-user-select: none | |
} | |
.__whatfont_panel_content .__whatfont_color_info_sample:hover { | |
border-color: #bbb | |
} | |
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_tweet_icon { | |
background: url("img/tweet.png") no-repeat left top; | |
display: inline-block; | |
margin: 0; | |
opacity: .7; | |
padding-left: 22px; | |
-webkit-transition: opacity .3s | |
} | |
.__whatfont_panel_content .__whatfont_panel_tools .__whatfont_tweet_icon:hover { | |
opacity: 1 | |
} |
This file contains 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 _whatFont() { | |
var b, j, d, h, f, m, l, g; | |
j = { | |
STYLE_PRE: "__whatfont_", | |
CSS_URL: "https://cdn.rawgit.com/tow8ie/0d61cd8d91c88ee3f231/raw/e7d13a0cd51de2ee07541de1a32f3ed47706e7c1/whatfont.css", | |
LINK: null, | |
init: function() { | |
if (j.CSS_URL) j.LINK = b("<link>").attr({ | |
rel: "stylesheet", | |
href: j.CSS_URL | |
}).appendTo("head") | |
}, | |
restore: function() { | |
b(j.LINK).remove() | |
}, | |
getClassName: function(a) { | |
a = typeof a === "string" ? [a] : a; | |
return j.STYLE_PRE + a.join(" " + j.STYLE_PRE) | |
} | |
}; | |
d = { | |
ALPHABET: "abcdefghijklmnopqrstuvwxyz", | |
FILLSTYLE: "rgb(0,0,0)", | |
HEIGHT: 50, | |
SIZE: 40, | |
TEXTBASELINE: "top", | |
WIDTH: 600, | |
HISTORY: {}, | |
init: function() { | |
d.CANVAS_SUPPORT = !!b("<canvas>")[0].getContext | |
}, | |
restore: function() {}, | |
mkTextPixelArray: function(a) { | |
var c = b("<canvas>")[0], | |
e = c.getContext("2d"); | |
c.width = d.WIDTH; | |
c.height = d.HEIGHT; | |
e.fillStyle = d.FILLSTYLE; | |
e.textBaseline = d.TEXTBASELINE; | |
e.font = a.style + " " + a.variant + " " + a.weight + " " + d.SIZE + "px " + a.family; | |
e.fillText(d.ALPHABET, 0, 0); | |
return e.getImageData(0, 0, d.WIDTH, d.HEIGHT).data | |
}, | |
sameArray: function(a, b) { | |
var e = d.WIDTH * d.HEIGHT * 4, | |
k; | |
for (k = 0; k < e; k += 1) | |
if (a[k] !== b[k]) return !1; | |
return !0 | |
}, | |
fontInUse: function(a) { | |
var c = a.family.split(","), | |
e = d.mkTextPixelArray(a.family), | |
k = 0, | |
n; | |
for (n = c.length; k < n; k += 1) { | |
var i = d.mkTextPixelArray(c[k]); | |
if (d.sameArray(e, i) && d.sameArray(d.mkTextPixelArray({ | |
style: a.style, | |
variant: a.variant, | |
weight: a.weight, | |
size: a.size, | |
family: c[k] + ",serif" | |
}), d.mkTextPixelArray({ | |
style: a.style, | |
variant: a.variant, | |
weight: a.weight, | |
size: a.size, | |
family: c[k] + ",sans-serif" | |
}))) return b.trim(c[k]) | |
} | |
return "(default font)" | |
}, | |
firstFont: function(a) { | |
return b.trim(a.split(",")[0]) | |
}, | |
detect: function(a) { | |
a = { | |
family: b(a).css("font-family"), | |
style: b(a).css("font-style"), | |
variant: b(a).css("font-variant"), | |
weight: b(a).css("font-weight"), | |
size: b(a).css("font-size") | |
}; | |
return d.HISTORY[a.family] = d.HISTORY[a.family] || d.CANVAS_SUPPORT ? d.fontInUse(a) : d.firstFont(a.family) | |
}, | |
weight: function(a) { | |
return b(a).css("font-weight") | |
}, | |
style: function(a) { | |
return b(a).css("font-style") | |
}, | |
variant: function(a) { | |
var b = { | |
bold: "Bold" | |
}[d.weight(a)] || d.weight(a), | |
a = { | |
italic: "Italic", | |
oblique: "Oblique" | |
}[d.style(a)] || d.style(a); | |
return b === "normal" && a === "normal" ? "Regular" : b === "normal" ? a : a === "normal" ? b : b + " " + | |
a | |
}, | |
getFontStyle: function(a) { | |
return { | |
"font-family": b(a).css("font-family"), | |
"font-style": b(a).css("font-style"), | |
"font-weight": b(a).css("font-weight") | |
} | |
} | |
}; | |
g = { | |
CSS_NAME_TO_SLUG: {}, | |
FONT_DATA: {}, | |
SERVICES: {}, | |
init: function() { | |
g.typekit(); | |
g.google() | |
}, | |
typekit: function() { | |
var a = function() { | |
var a = null; | |
b("script").each(function() { | |
var b = this.src.match(/use\.typekit\.com\/(.+)\.js/); | |
if (b) return a = b[1], !1 | |
}); | |
return a | |
}(); | |
a && b.getJSON("https://typekit.com/api/v1/json/kits/" + a + "/published?callback=?", function(a) { | |
if (!a.errors) g.SERVICES.typekit = | |
a.kit, b.each(a.kit.families, function(a, c) { | |
b.each(c.css_names, function(a, b) { | |
g.CSS_NAME_TO_SLUG[b.toLowerCase()] = c.slug | |
}); | |
g.FONT_DATA[c.slug] = g.FONT_DATA[c.slug] || { | |
name: c.name, | |
services: {} | |
}; | |
g.FONT_DATA[c.slug].services.Typekit = { | |
id: c.id, | |
url: "http://typekit.com/fonts/" + c.slug | |
} | |
}) | |
}) | |
}, | |
google: function() { | |
b("link").each(function(a, c) { | |
var e = b(c).attr("href"); | |
e.indexOf("fonts.googleapis.com/css?") >= 0 && (e = e.match(/\?family=([^&]*)/)[1].split("|"), b.each(e, function(a, b) { | |
var c = b.split(":")[0], | |
e = c.replace(/\+/g, " "), | |
d = e.replace(/ /g, "-").toLowerCase(); | |
g.CSS_NAME_TO_SLUG[e] = d; | |
g.FONT_DATA[d] = g.FONT_DATA[d] || { | |
name: e, | |
services: {} | |
}; | |
g.FONT_DATA[d].services.Google = { | |
url: "http://www.google.com/webfonts/family?family=" + c | |
} | |
})) | |
}) | |
}, | |
getFontDataByCSSName: function(a) { | |
a = a.replace(/^"|'/, "").replace(/"|'$/, ""); | |
return (a = g.CSS_NAME_TO_SLUG[a]) && g.FONT_DATA[a] ? g.FONT_DATA[a] : null | |
}, | |
getFontNameByCSSName: function(a) { | |
a = a.replace(/^"|'/, "").replace(/"|'$/, ""); | |
return (a = g.CSS_NAME_TO_SLUG[a]) && g.FONT_DATA[a] ? g.FONT_DATA[a].name : null | |
} | |
}; | |
h = { | |
TIP: null, | |
init: function() { | |
h.TIP = b.createElem("div", ["tip", "elem"], ""); | |
b(h.TIP).appendTo("body"); | |
b("body *:visible").mousemove(h.update); | |
b("body").mouseout(h.hide) | |
}, | |
restore: function() { | |
b(h.TIP).remove(); | |
b("body :visible").unbind("mousemove", h.update); | |
b("body").unbind("mousemove", h.update); | |
b("body").unbind("mouseout", h.hide) | |
}, | |
hide: function() { | |
b(h.TIP).hide() | |
}, | |
updateText: function(a) { | |
b(h.TIP).text(a).css("display", "inline-block") | |
}, | |
updatePos: function(a) { | |
b(h.TIP).css({ | |
top: a.pageY + 12, | |
left: a.pageX + 12 | |
}) | |
}, | |
updateTextPos: function(a, | |
b) { | |
h.updateText(a); | |
h.updatePos(b) | |
}, | |
update: function(a) { | |
this.tagName === "IMG" ? h.updateTextPos(d.detect(this) + " (May be incorrect on images)", a) : this.tagName === "EMBED" ? h.updateTextPos(d.detect(this) + " (May be incorrect on Flash)", a) : h.updateTextPos(d.detect(this), a); | |
a.stopPropagation() | |
} | |
}; | |
f = { | |
PANELS: [], | |
FONT_SERVICE_ICON: {}, | |
init_tmpl: function() { | |
f.tmpl = function() { | |
var a = b('<div class="elem panel"><div class="panel_title"><span class="title_text"></span><a class="close_button" title="Close">×</a></div><div class="panel_content"><ul class="panel_properties"><li><dl class="font_family"><dt class="panel_label">Font Family</dt><dd class="panel_value"></dd></dl></li><li><div class="size_line_height clearfix"><dl class="size section"><dt class="panel_label">Font Size</dt><dd class="panel_value"></dd></dl><dl class="line_height"><dt class="panel_label">Line Height</dt><dd class="panel_value"></dd></dl></div></li><li class="panel_no_border_bottom"><dl class="type_info clearfix"><dt class="panel_label"></dt><dd class="type_preview">AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz</dd></dl><div class="font_services panel_label" style="display:none;">Font Served by </div></li></ul><div class="panel_tools clearfix"><div class="panel_tools_left"><div class="color_info"><a title="Click to change color format" class="color_info_sample"> </a><span class="color_info_value"></span></div></div><div class="panel_tools_right"><a href="https://twitter.com/share" class="tweet_icon" target="_blank">Tweet</a></div></div></div></div>'); | |
return function() { | |
return a.clone() | |
} | |
}() | |
}, | |
init: function() { | |
b("body :visible").click(f.pin); | |
f.init_tmpl(); | |
f.FONT_SERVICE_ICON.Typekit = b("<span>").addClass("service_icon service_icon_typekit").text("Typekit"); | |
f.FONT_SERVICE_ICON.Google = b("<span>").addClass("service_icon service_icon_google").text("Google Web Fonts") | |
}, | |
restore: function() { | |
b("body :visible").unbind("click", f.pin); | |
b.each(f.PANELS, function(a, c) { | |
b(c).remove() | |
}) | |
}, | |
convertClassName: function(a) { | |
a.find("*").add(a).each(function(a, e) { | |
var d = b(e).attr("class"); | |
if (d = d === "" ? "basic" : d + " basic") d = d.split(" "), b(e).attr("class", j.getClassName(d)) | |
}); | |
return a | |
}, | |
typePreview: function(a, c) { | |
b(c).find(".type_preview").css(d.getFontStyle(a)); | |
return c | |
}, | |
fontService: function(a, c) { | |
var e = d.detect(a), | |
e = g.getFontDataByCSSName(e), | |
k; | |
k = b("<ul>").addClass("font_service"); | |
e ? (b.each(e.services, function(a, c) { | |
b("<li>").append(b("<a>").append(b(f.FONT_SERVICE_ICON[a]).clone()).attr("href", c.url).attr("target", "_blank")).appendTo(k) | |
}), b(c).find(".font_services").append(k).show()) : b(c).find(".font_services").hide(); | |
return c | |
}, | |
fontFam: function(a, c) { | |
var e = b(a).css("font-family").replace(/;/, "").split(/,\s*/), | |
k = d.detect(a), | |
h = !1, | |
i; | |
ff = b(a).css("font-family"); | |
fiu = d.detect(a); | |
ff = ff.replace(/;/, "").split(/,\s*/); | |
fiuFound = !1; | |
for (i = 0; i < e.length; i += 1) | |
if (e[i] !== k) e[i] = "<span class='fniu'>" + e[i] + "</span>"; | |
else { | |
e[i] = "<span class='fiu'>" + e[i] + "</span>"; | |
h = !0; | |
break | |
} | |
e = e.join(", ") + ";"; | |
h || (e += " <span class='.fiu'>" + k + "</span>"); | |
e = "<div class=" + j.getClassName("fontfamily_list") + ">" + e + "</div>"; | |
b(c).find(".font_family>dd").html(e); | |
return c | |
}, | |
sizeLineHeight: function(a, c) { | |
var e = b(a).css("font-size"), | |
d = b(a).css("line-height"); | |
b(c).find(".size>dd").text(e); | |
b(c).find(".line_height>dd").text(d); | |
return c | |
}, | |
color: function(a, c) { | |
var e = b(a).css("color"), | |
d = b(c).find(".color_info_sample"), | |
h = b(c).find(".color_info_value"), | |
i, f, g; | |
e.indexOf("rgba") !== -1 ? b(c).find(".color_info").hide() : (i = e.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/), f = parseInt(i[1], 10).toString(16), g = parseInt(i[2], 10).toString(16), i = parseInt(i[3], 10).toString(16), | |
f = f.length === 1 ? "0" + f : f, g = g.length === 1 ? "0" + g : g, i = i.length === 1 ? "0" + i : i, hex_color = "#" + f + g + i, colors = [e, hex_color], color_type = 0, d.css("background-color", e).click(function(a, b, c) { | |
return function(e) { | |
b = (b + 1) % a.length; | |
c.text(a[b]); | |
e.preventDefault(); | |
return !1 | |
} | |
}(colors, color_type, h)).click()) | |
}, | |
tweet: function(a, c) { | |
var e = b(c).find(".tweet_icon"), | |
h = e.attr("href"), | |
f = d.detect(a), | |
f = g.getFontNameByCSSName(f) || f; | |
h += "?text=" + encodeURIComponent("I like this typography design with " + f + ".") + "&via=What_Font"; | |
e.attr("href", | |
h) | |
}, | |
panelContent: function(a, c) { | |
b(["typePreview", "fontService", "fontFam", "sizeLineHeight", "color", "tweet"]).each(function(b, d) { | |
f[d](a, c) | |
}) | |
}, | |
panelTitle: function(a, c) { | |
var e = d.detect(a), | |
e = (g.getFontNameByCSSName(e) || e) + " - " + d.variant(a); | |
b(c).find(".title_text").html(e).css(d.getFontStyle(a)); | |
(function(a) { | |
b(a).find(".close_button").click(function(c) { | |
b(a).remove(); | |
c.stopPropagation(); | |
return !1 | |
}) | |
})(c); | |
return c | |
}, | |
get: function(a) { | |
var c = f.tmpl(); | |
f.panelTitle(a, c); | |
f.panelContent(a, c); | |
f.convertClassName(c); | |
b(c).click(function() { | |
b(this).find("*").css("-webkit-animation", | |
"none"); | |
b(this).detach(); | |
b(this).appendTo("body") | |
}); | |
return c | |
}, | |
pin: function(a) { | |
var c; | |
h.hide(); | |
c = f.get(this); | |
b(c).css({ | |
top: a.pageY + 12, | |
left: a.pageX - 13 | |
}).appendTo("body"); | |
f.PANELS.push(c); | |
a.stopPropagation(); | |
a.preventDefault() | |
} | |
}; | |
m = { | |
TOOLBAR: null, | |
init: function() { | |
var a = b.createElem("div", "exit", "Exit WhatFont"); | |
b.createElem("div", "help", "<strong>Hover</strong> to identify<br /><strong>Click</strong> to pin a detail panel"); | |
m.TOOLBAR = b("<div>").addClass(j.getClassName(["elem", "control"])).append(a).appendTo("body"); | |
b(a).click(function() { | |
l.restore() | |
}) | |
}, | |
restore: function() { | |
b(m.TOOLBAR).remove() | |
} | |
}; | |
l = { | |
shortcut: function(a) { | |
if ((a.keyCode || a.which) === 27) l.restore(), a.stopPropagation() | |
}, | |
restore: function() { | |
b("body :visible").unbind("mousemove", l.updateTip); | |
b("body :visible").unbind("click", l.pinPanel); | |
d.restore(); | |
m.restore(); | |
h.restore(); | |
f.restore(); | |
j.restore(); | |
b("body").unbind("keydown", l.shortcut); | |
_WHATFONT = !1 | |
}, | |
init: function() { | |
!b && jQuery && (b = jQuery); | |
if (typeof _WHATFONT !== "undefined" && _WHATFONT || !b) return !1; | |
_WHATFONT = !0; | |
b.createElem = function(a, c, e, d) { | |
var f = b("<" + a + ">"), | |
c = c || [], | |
e = e || "", | |
c = typeof c === "string" ? [c] : c; | |
c.push("basic"); | |
f.addClass(j.getClassName(c)); | |
typeof e === "string" ? f.html(e) : e.constructor === Array ? b.map(e, function(a) { | |
return f.append(a) | |
}) : f.append(e); | |
f.attr(d); | |
return f[0] | |
}; | |
j.init(); | |
d.init(); | |
h.init(); | |
f.init(); | |
m.init(); | |
g.init(); | |
b("body").keydown(l.shortcut) | |
} | |
}; | |
return { | |
setJQuery: function(a) { | |
b = a | |
}, | |
setCSSURL: function(a) { | |
j.CSS_URL = a | |
}, | |
getVer: function() { | |
return "1.6.1" | |
}, | |
init: function() { | |
l.init() | |
}, | |
restore: function() { | |
l.restore() | |
} | |
} | |
} | |
(function() { | |
var j, d; | |
j = _whatFont(); | |
d = window.document.createElement("script"); | |
d.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"; | |
d.onload = function() { | |
j.setJQuery(jQuery.noConflict(!0)); | |
j.init(); | |
}; | |
window.document.getElementsByTagName("head")[0].appendChild(d) | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment