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.