Skip to content

Commit

Permalink
Fixes for Koen
Browse files Browse the repository at this point in the history
  • Loading branch information
Floris Verloop committed Aug 2, 2016
1 parent 4773f8f commit f75ec6a
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 41 deletions.
1 change: 1 addition & 0 deletions extras/Studio.framer/app.coffee
@@ -1,3 +1,4 @@
Framer.Extras.ShareInfo.enable()

# Activate Module
Framer.Info =
Expand Down
7 changes: 3 additions & 4 deletions extras/Studio.framer/framer/config.json
Expand Up @@ -5,13 +5,12 @@
"deviceOrientation" : 0,
"sharedPrototype" : 1,
"contentScale" : 1,
"deviceType" : "apple-iphone-6s-silver",
"deviceType" : "fullscreen",
"selectedHand" : "iphone-hands-2",
"updateDelay" : 0.3,
"deviceScale" : "fit",
"deviceScale" : 1,
"foldedCodeRanges" : [

],
"orientation" : 0,
"fullScreen" : false
"orientation" : 0
}
68 changes: 31 additions & 37 deletions framer/Components/ShareComponent.coffee
Expand Up @@ -25,7 +25,6 @@ class ShareLayer extends Layer

defaultProps =
backgroundColor: null
width: options.parent.width if options and options.parent # This is not correct
ignoreEvents: false
style:
fontFamily: "Roboto, Helvetica Neue, Helvetica, Arial, sans-serif"
Expand All @@ -35,6 +34,10 @@ class ShareLayer extends Layer
lineHeight: "1"
webkitFontSmoothing: "antialiased"

# If a parent is set, use the parents' width
if options.parent
defaultProps.width = options.parent.width

@props = _.merge(defaultProps, options)

# Button layer with default behaviour
Expand All @@ -47,14 +50,12 @@ class Button extends ShareLayer

defaultProps =
height: 33
ignoreEvents: false
style:
fontWeight: "500"
webkitUserSelect: "text"
borderRadius: 3
textAlign: "center"
paddingTop: "9px"
width: options.parent.width if options and options.parent # This is not correct

@props = _.merge(defaultProps, options)

Expand All @@ -64,11 +65,11 @@ class Button extends ShareLayer

@onMouseOver ->
@style.cursor = "pointer"
@states.switch('hover') # Why mix ' and " (everywhere)
@states.switch("hover")

@onMouseOut ->
@opacity = 1
@states.switch('default')
@states.switch("default")

@onClick -> window.open(options.url, "Share", "width=560,height=714")

Expand All @@ -92,7 +93,7 @@ class ShareComponent

# See if a state is set
@state = localStorage.getItem("framerShareSheetState-#{@options.id}")
@options.fixed = if !@state then false else true
@options.fixed = if not @state then false else true

@_checkData()
@render() unless Utils.isMobile()
Expand Down Expand Up @@ -124,27 +125,23 @@ class ShareComponent
@_startListening()

_checkData: ->
truncate = (str, n) ->
truncatedString = str
truncatedString.substr(0, n-1).trim() + "…"

# Remove leading @ from the Twitter handle
if _.startsWith(@shareInfo.twitter, "@")
@shareInfo.twitter[1..]

# Truncate title if too long
if @shareInfo.title
maxLengthWithAvatar = 26
maxLength = 34

# Flo: put this on top as a utility method
truncate = (str, n) ->
truncatedString = str
truncatedString.substr(0, n-1).trim() + "…"

# Flo: turn this into variables with sensible names
a = 26
b = 34

if @shareInfo.twitter and @shareInfo.title.length > 26
@shareInfo.title = truncate(@shareInfo.title, 26)
else if @shareInfo.title.length > 34
@shareInfo.title = truncate(@shareInfo.title, 34)
if @shareInfo.twitter and @shareInfo.title.length > maxLengthWithAvatar
@shareInfo.title = truncate(@shareInfo.title, maxLengthWithAvatar)
else if @shareInfo.title.length > maxLength
@shareInfo.title = truncate(@shareInfo.title, maxLength)

# Render main sheet
_renderSheet: ->
Expand Down Expand Up @@ -261,7 +258,7 @@ class ShareComponent
height: 16

# If we miss a title from the json metadata, we fallback to the document url
fallbackTitle = _.replace(FramerStudioInfo.documentTitle, /\.framer$/, '')
fallbackTitle = _.replace(FramerStudioInfo.documentTitle, /\.framer$/, "")

@credentialsTitle = new ShareLayer
parent: @credentials
Expand Down Expand Up @@ -319,7 +316,7 @@ class ShareComponent
showAuthor("<a href='http://twitter.com/#{@shareInfo.twitter}' style='text-decoration: none; -webkit-user-select: auto;' target='_blank'>#{name}</a>")

# If there's no twitter handle, show plain author name
if @shareInfo.author and !@shareInfo.twitter
if @shareInfo.author and not @shareInfo.twitter
showAuthor(@shareInfo.author)

_renderDate: ->
Expand All @@ -341,7 +338,7 @@ class ShareComponent
letterSpacing: ".2px"

_enableUserSelect: (layer) ->
layer.html = "" unless layer.html
layer.html = "" unless layer.html
layer._elementHTML.style["-webkit-user-select"] = "auto"
layer._elementHTML.style["cursor"] = "auto"

Expand All @@ -354,8 +351,6 @@ class ShareComponent
lineBreakRegex = /(?:\r\n|\r|\n)/g

urlified = text.replace urlRegex, (url) ->

# Flo: try to use not/unless instead of !
href = url
href = "//#{url}" if not httpRegex.test(url)
return "<a href='#{href}' style='-webkit-user-select: auto' target='_blank'>#{url}</a>"
Expand Down Expand Up @@ -395,8 +390,6 @@ class ShareComponent
@_calculateAvailableSpace()
@_enableUserSelect(@description)



# Truncate if description is too long
if @shareInfo.description.length > @options.maxDescriptionLength

Expand Down Expand Up @@ -424,8 +417,12 @@ class ShareComponent

_renderButtons: ->

# Flo: too complex; simplify
verticalPosition = if @date then @date.maxY else (if @descripion then @description.maxY else @credentials.maxY)
if @date
verticalPosition = @date.maxY
else if @descripion
verticalPosition = @descripion.maxY
else
verticalPosition = @credentials.maxY

@buttons = new ShareLayer
height: 33
Expand Down Expand Up @@ -497,15 +494,12 @@ class ShareComponent

_openIfEnoughSpace: =>
# Open or close sheet based on available space
if @availableSpace < @threshold and !@options.fixed
if @availableSpace < @threshold and not @options.fixed
@_closeSheet()
else
@_openSheet()

_calculateAvailableSpace: =>

# Flo can any of the numbers below (20, 95) be turned into variables with sensible names?

device = Framer.Device
@threshold = @options.minAvailableSpaceFullScreen
@availableSpace = Canvas.width
Expand All @@ -517,7 +511,7 @@ class ShareComponent
@availableSpace = Screen.canvasFrame.x

# If verticalSpace is less then sheet height, make sheet scrollable
canvasHeight = Canvas.height - 20
canvasHeight = Canvas.height - @options.padding

if @description and canvasHeight < @sheet.maxHeight and canvasHeight > @sheet.minHeight
@sheet.height = canvasHeight
Expand All @@ -536,8 +530,8 @@ class ShareComponent
@description.style.overflow = "scroll"

if @shareInfo.openInFramerURL
@date.y = @description.maxY + 20
@buttons.y = @date.maxY + 20
@date.y = @description.maxY + @options.padding
@buttons.y = @date.maxY + @options.padding

if @description and canvasHeight > @sheet.maxHeight
@sheet.height = @sheet.maxHeight
Expand All @@ -554,7 +548,7 @@ class ShareComponent
@close.onClick =>
@_closeSheet()
@options.fixed = true
localStorage.setItem("framerShareSheetState-#{@options.id}", 'closed') # Flo: ' "
localStorage.setItem("framerShareSheetState-#{@options.id}", "closed")

# Disable events propagating up to block unintented interactions
@sheet.onTouchStart (event) -> event.stopPropagation()
Expand All @@ -565,7 +559,7 @@ class ShareComponent
event.stopPropagation()
@_openSheet()
@options.fixed = true
localStorage.setItem("framerShareSheetState-#{@options.id}", 'open') # Ahem
localStorage.setItem("framerShareSheetState-#{@options.id}", "open")

# When the window resizes evaluate if the sheet needs to be hidden
Canvas.onResize =>
Expand Down

0 comments on commit f75ec6a

Please sign in to comment.