Permalink
Browse files

Merge branch 'share-component'

# Conflicts:
#	framer/Components/ShareComponent.coffee
  • Loading branch information...
koenbok committed Aug 2, 2016
2 parents 37893f6 + e19f8d2 commit 128016871941872c84a58f2d8117b1fa9a717a40
Showing with 57 additions and 18 deletions.
  1. +4 −3 extras/Studio.framer/framer/config.json
  2. +53 −15 framer/Components/ShareComponent.coffee
@@ -5,12 +5,13 @@
"deviceOrientation" : 0,
"sharedPrototype" : 1,
"contentScale" : 1,
"deviceType" : "fullscreen",
"deviceType" : "apple-iphone-6s-silver",
"selectedHand" : "iphone-hands-2",
"updateDelay" : 0.3,
"deviceScale" : 1,
"deviceScale" : "fit",
"foldedCodeRanges" : [
],
"orientation" : 0
"orientation" : 0,
"fullScreen" : false
}
@@ -70,11 +70,7 @@ class Button extends ShareLayer
@opacity = 1
@states.switch('default')
@onClick ->
if options.newWindow
window.open(options.url)
else
window.location = options.url
@onClick -> window.open(options.url, "Share", "width=560,height=714")
# Share component
class ShareComponent
@@ -88,14 +84,19 @@ class ShareComponent
minAvailableSpace: 300
minAvailableSpaceFullScreen: 500
maxDescriptionLength: 145
id: window.location.pathname.replace(/\//g, "")
# See if a state is set
@state = localStorage.getItem("framerShareSheetState-#{@options.id}")
@options.fixed = if !@state then false else true
@_checkData()
@render() if !Utils.isMobile()
render: ->
@_renderSheet()
@_renderToggleButtons()
@_renderCTA()
@_renderToggleButtons()
@_renderInfo()
@_renderDescription() if @shareInfo.description
@_renderDate() if @shareInfo.openInFramerURL and @shareInfo.date
@@ -108,7 +109,13 @@ class ShareComponent
# Wait until the device screen x position is available
Utils.delay .1, =>
@_calculateAvailableSpace()
@_openIfEnoughSpace()
if @state is "open"
@_openSheet()
else if @state is "closed"
@_closeSheet()
else
@_openIfEnoughSpace()
@_startListening()
@@ -121,7 +128,8 @@ class ShareComponent
# Truncate title if too long
if @shareInfo.title
truncate = (str, n) ->
str.substr(0, n-1).trim() + "…"
truncatedString = str
truncatedString.substr(0, n-1).trim() + "…"
if @shareInfo.twitter and @shareInfo.title.length > 26
@shareInfo.title = truncate(@shareInfo.title, 26)
@@ -130,9 +138,10 @@ class ShareComponent
# Render main sheet
_renderSheet: ->
@sheet = new Layer
@sheet = new ShareLayer
width: @options.width
clip: true
ignoreEvents: false
point: 10
borderRadius: 4
backgroundColor: "#FFF"
@@ -173,6 +182,17 @@ class ShareComponent
fontWeight: "500"
fontSize: "13px"
@close = new Layer
parent: @cta
ignoreEvents: false
size: 12
point: 12
backgroundColor: null
style:
backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAZdJREFUSA2tlt9OgzAUh6UkRrLMCfgnwWwPoXcmBk32Crvfo+1+76A3Jt4SX8Bk8VYBkagJAc+P7CyMUWiHvYCepv2+0p42GNPpdFQUxdV4PH5eLBY/B/9QZrPZYRiGN6ZpvgjAiXm+Wq3u5/P5UV8+4FEU3RH3Isuya4GZU/BpGMZxXwnD8zy3ifflOM6TGQRB5vv+WxzHHiR4I0a7ztfU4bZtPyyXy28TkL4SGRzsUtBH0gbfEuwj6YLvCHQkKvBGgYpEFQ6WgYes4FwgdZFdSOXJZPKYpmmOPOdU5GyRMVoFGFSVEDQRQuTUPEKed8ExfpNFCJoKpzDN+pLgQ+qD057SISrzvGlMtU1UA1kdy7KeedkF9cFgUMj6V9s7v4A3lPbghAamBP+lpRqqnvhWAcN5Q7Esruu+6lwrUkEdzhvKe6IqaRTI4Ly2OpIdQRdcV7IlUIXrSDYCXbiqpBTsC1eRGH3hLMG7eq3w3WV6nndLwanq3VIF1uv17EqS5Ezg14I6fnCe1wfpxvj1wa1LE363LCv4A+knGKYRZVX+AAAAAElFTkSuQmCC')"
@_enableUserSelect(@close)
@_showPointer(@close)
@_showPointer(@open)
# Render CTA section
@@ -428,10 +448,22 @@ class ShareComponent
style:
backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAcCAYAAABRVo5BAAAABGdBTUEAALGPC/xhBQAAAO1JREFUOBFjZMABWltbJX///l0GlDYAYg1GRkZxIP3n////P4E0EyOQwABNTU05QAVtQMyLIQkVwNDY3Nzs9vfv3524NMDEmWAMED1z5kyuf//+zUEWw8VG0fjq1SsnoPNkcSlGFmdB5gA16SHzQWxgoPxnZma2UVNTOxkWFvYXJo+uUQwmAaOBhn2tqak5BuPDaBSnAhXJwySQaB4kNpyJohEoqgCXIcAgWyNjQ0PDfwKGY0gDA+w5uo0YirAJAMPiLFkagTaeIUsjExMTeTaCNGIkcmyBBRTDUEeWU0EBNqoRW7KBio0GDi0CBwAHJ0YrwGtXbwAAAABJRU5ErkJggg==')"
# Generate tweet
tweet = ""
if @shareInfo.twitter or @shareInfo.author
if @shareInfo.twitter
tweet += "A prototype by @#{@shareInfo.twitter}. Design without limitations in @framerjs — "
else if @shareInfo.author
tweet += "A prototype by @#{@shareInfo.author}. Design without limitations in @framerjs — "
else
tweet += "A @framerjs prototype by @#{@shareInfo.author}. Design without limitations — "
tweet += window.location.href
tweet = encodeURIComponent(tweet)
@buttonTwitter = new Button
url: """
https://twitter.com/home?status=Check%20out%20this%20prototype%20made%20in%20%40framerjs%20%E2%80%94%20#{window.location.href}
"""
url: "https://twitter.com/home?status=#{tweet}"
parent: @buttons
borderWidth: 1
borderColor: "#D5D5D5"
@@ -452,8 +484,7 @@ class ShareComponent
_openIfEnoughSpace: =>
# Open or close sheet based on available space
if @availableSpace < @threshold
'close'
if @availableSpace < @threshold and !@options.fixed
@_closeSheet()
else
@_openSheet()
@@ -504,6 +535,11 @@ class ShareComponent
@style =
cursor: "default"
@close.onClick =>
@_closeSheet()
@options.fixed = true
localStorage.setItem("framerShareSheetState-#{@options.id}", 'closed')
# Disable events propagating up to block unintented interactions
@sheet.onTouchStart (event) -> event.stopPropagation()
@sheet.onTouchEnd (event) -> event.stopPropagation()
@@ -512,11 +548,13 @@ class ShareComponent
@open.onClick (event) =>
event.stopPropagation()
@_openSheet()
@options.fixed = true
localStorage.setItem("framerShareSheetState-#{@options.id}", 'open')
# When the window resizes evaluate if the sheet needs to be hidden
Canvas.onResize =>
@_calculateAvailableSpace()
@_openIfEnoughSpace()
@_openIfEnoughSpace() if !@options.fixed
# Show hand cursor
_showPointer: (layer) ->

0 comments on commit 1280168

Please sign in to comment.