Permalink
Browse files

Improved loading of webFonts

  • Loading branch information...
nvh committed Mar 23, 2017
1 parent ee976ab commit e5a244c4a17d0f49667b807ed2a39774b78c2ed5
Showing with 49 additions and 14 deletions.
  1. +13 −2 framer/TextLayer.coffee
  2. +8 −12 framer/Utils.coffee
  3. +13 −0 test/tests/TextLayerTest.coffee
  4. +15 −0 test/tests/UtilsTest.coffee
View
@@ -4,6 +4,12 @@
{Events} = require "./Events"
Utils = require "./Utils"
validateFont = (arg) ->
return _.isString(arg) or _.isObject(arg)
fontFamilyFromObject = (font) ->
return if _.isObject(font) then font.fontFamily else font
class exports.TextLayer extends Layer
@_textProperties = [
@@ -126,7 +132,7 @@ class exports.TextLayer extends Layer
@style.padding =
"#{@_padding.top}px #{@_padding.right}px #{@_padding.bottom}px #{@_padding.left}px"
@define "fontFamily", layerProperty(@, "fontFamily", "fontFamily", null, _.isString, null, (layer, value) -> layer.font = value)
@define "fontFamily", layerProperty(@, "fontFamily", "fontFamily", null, _.isString, fontFamilyFromObject, (layer, value) -> layer.font = value)
@define "fontSize", layerProperty(@, "fontSize", "fontSize", null, _.isNumber)
@define "fontWeight", layerProperty(@, "fontWeight", "fontWeight")
@define "fontStyle", layerProperty(@, "fontStyle", "fontStyle", "normal", _.isString)
@@ -139,7 +145,12 @@ class exports.TextLayer extends Layer
@define "textDecoration", layerProperty(@, "textDecoration", "textDecoration", null, _.isString)
@define "direction", layerProperty(@, "direction", "direction", null, _.isString)
@define "font", layerProperty @, "font", null, null, _.isString, null, {}, (layer, value) ->
@define "font", layerProperty @, "font", null, null, validateFont, null, {}, (layer, value) ->
if _.isObject(value)
layer.fontFamily = value.fontFamily
layer.fontWeight = value.fontWeight
return
# Check if value contains number. We then assume proper use of font.
# Otherwise, we default to setting the fontFamily.
if /\d/.test(value)
View
@@ -452,23 +452,19 @@ Utils.deviceFont = (os) ->
_loadedFonts = []
Utils.loadWebFont = (font, weight) ->
if font in _loadedFonts
return font
fontToLoad = font
fontToLoad += ":#{weight}" if weight?
fontObject = {fontFamily: font, fontWeight: weight}
if fontToLoad in _loadedFonts
return fontObject
link = document.createElement("link")
if weight
link.href = "https://fonts.googleapis.com/css?family=#{font}:#{weight}"
else
link.href = "https://fonts.googleapis.com/css?family=#{font}"
link.href = "https://fonts.googleapis.com/css?family=#{fontToLoad}"
link.rel = "stylesheet"
document.getElementsByTagName("head")[0].appendChild(link)
_loadedFonts.push(font)
return font
_loadedFonts.push(fontToLoad)
return fontObject
######################################################
# MATH FUNCTIONS
@@ -224,3 +224,16 @@ describe "TextLayer", ->
text.padding.bottom.should.equal 0
text.padding.left.should.equal 3
text.padding.right.should.equal 2
describe "webfonts", ->
it "sets the weight if the font property is set", ->
l = new TextLayer
font: Utils.loadWebFont("Raleway", 800)
l.fontFamily.should.equal "Raleway"
l.fontWeight.should.equal 800
it "doesn't set the weight if the fontFamily property is set", ->
l = new TextLayer
fontFamily: Utils.loadWebFont("Raleway", 800)
l.fontFamily.should.equal "Raleway"
expect(l.fontWeight).to.equal 400
@@ -233,6 +233,21 @@ describe "Utils", ->
# it "should return the right size with height constraint", ->
# Utils.textSize(text, style, {height: 100}).should.eql(width: 168, height: 100)
describe "loadWebFont", ->
it "loads fonts at different weights" , ->
raleway = Utils.loadWebFont("Raleway")
raleway200 = Utils.loadWebFont("Raleway", 200)
raleway800 = Utils.loadWebFont("Raleway", 800)
raleway.should.eql {fontFamily: "Raleway", fontWeight: undefined}
raleway200.should.eql {fontFamily: "Raleway", fontWeight: 200}
raleway800.should.eql {fontFamily: "Raleway", fontWeight: 800}
it "returns the same when reloading the same fonts", ->
raleway200 = Utils.loadWebFont("Raleway", 800)
raleway200.should.eql {fontFamily: "Raleway", fontWeight: 800}
raleway200 = Utils.loadWebFont("Raleway", 800)
raleway200.should.eql {fontFamily: "Raleway", fontWeight: 800}
describe "frameSortByAbsoluteDistance", ->

0 comments on commit e5a244c

Please sign in to comment.