Permalink
Browse files

Update line clamp when auto-sizing

  • Loading branch information...
nvh committed Mar 24, 2017
1 parent 7ab0a55 commit 095e0ba5c213075a7c39eeb64f0ce936116aa418
Showing with 25 additions and 5 deletions.
  1. +9 −5 framer/TextLayer.coffee
  2. +16 −0 test/tests/TextLayerTest.coffee
View
@@ -103,7 +103,8 @@ class exports.TextLayer extends Layer
newHeight += borderOffset
@height = newHeight if @height isnt newHeight
@disableExplicitUpdating = false
if @multiLineOverflow
@style["-webkit-line-clamp"] = @maxVisibleLines()
updateExplicitWidth: (value) =>
return if @enableExplicitUpdating
@@ -113,6 +114,9 @@ class exports.TextLayer extends Layer
return if @disableExplicitUpdating
@explicitHeight = true
maxVisibleLines: ->
Math.ceil(@height / (@fontSize*@lineHeight))
@define "text",
get: -> @_element.textContent
set: (value) ->
@@ -164,11 +168,11 @@ class exports.TextLayer extends Layer
@define "multiLineOverflow",
get: ->
@_multiLineOverFlow ? false
return @_multiLineOverFlow ? false
set: (value) ->
@_multiLineOverFlow = true
if value
@style["-webkit-line-clamp"] = Math.ceil(@height / (@fontSize*@lineHeight))
@_multiLineOverFlow = value
if @_multiLineOverFlow
@style["-webkit-line-clamp"] = @maxVisibleLines()
@style["-webkit-box-orient"] = "vertical"
@style["display"] = "-webkit-box"
else
@@ -270,3 +270,19 @@ describe "TextLayer", ->
expect(l.whitespace).to.equal undefined
l.multiLineOverflow.should.equal false
it "should update the line-clamp when the height is updated", ->
l = new TextLayer
text: longText
textOverflow: "ellipsis"
height: 150
l.style["-webkit-line-clamp"].should.equal '3'
l.height = 400
l.style["-webkit-line-clamp"].should.equal '8'
it "should not set the line-clamp when not using textOverflow", ->
l = new TextLayer
text: longText
height: 150
l.style["-webkit-line-clamp"].should.equal ''
l.height = 400
l.style["-webkit-line-clamp"].should.equal ''

0 comments on commit 095e0ba

Please sign in to comment.