Merge branch 'share-component'

Beta version of Framer.Extras.ShareInfo

extras/Studio.framer/.gitignore

@@ -30,6 +30,7 @@ framer/backups
framer/backups/*
framer/.*.hash
framer/manifest.txt
framer/metadata.json
framer/preview.png
framer/social*.png

extras/Studio.framer/app.coffee

@@ -1,339 +1,16 @@
# Basic setup ------------------------------------------
Framer.Defaults.Animation = curve: "spring()"
bg = new BackgroundLayer backgroundColor: "#F3F3F3"

moviesColor = new Color("#1E88E5")
showsColor = new Color("#388E3C")
upcomingColor = new Color("#3F51B5")
watchColor = new Color("#546E7A")

offSet = 20
touchBarHeight = 320
systemBarHeight = 140
fontSize = 36
spacingUnit = 48

Framer.Device.background.states.add
	moviesColor: backgroundColor: moviesColor
	showsColor: backgroundColor: showsColor
	upcomingColor: backgroundColor: upcomingColor
	watchColor: backgroundColor: watchColor
Framer.Device.background.states.animationOptions =
	curve: "linear"
	time: 0.35
Framer.Device.background.states.switchInstant("moviesColor")

# Page component setup ---------------------------------
page = new PageComponent
	size: Screen.size
	scrollVertical: false
	scrollHorizontal: false

# Content -----------------------------------------------
mediaInfo = require "mediaInfo"

for layer, title of mediaInfo
	moviesTitle = title.movies.name
	moviesDescription = title.movies.description
	showsTitle = title.shows.name
	showsDescription = title.shows.description
	upcomingTitle = title.upcoming.name
	upcomingDescription = title.upcoming.description
	watchTitle = title.watch.name
	watchDescription = title.watch.description

movieScroll = new ScrollComponent
showsScroll = new ScrollComponent
upcomingScroll = new ScrollComponent
watchScroll = new ScrollComponent

for scroll in [movieScroll, showsScroll, upcomingScroll, watchScroll]
	scroll.props =
		size: Screen.size
		scrollHorizontal: false	
		opacity: 1
		contentInset:
			top: 220
			bottom: systemBarHeight + spacingUnit
	scroll.states.add
		hide:
			opacity: 0

mediaContent = (mediaParent, mediaWidth, mediaType, mediaTitle, mediaDescription) ->
	for i in [0...10]
		card = new Layer
			parent: mediaParent
			height: 340
			width: Screen.width - spacingUnit
			midX: Screen.width / 2
			y: 368 * i
			backgroundColor: "#FFF"
			borderRadius: 8
			shadowY: 1, shadowBlur: 2
			clip: true
		posters = new Layer
			parent: card
			width: mediaWidth, height: card.height
			image: "images/#{mediaType}/#{i+1}.jpg?cache=#{Date.now()}"
		title = new Layer
			parent: card
			html: mediaTitle[i]
			backgroundColor: null
			x: mediaWidth + spacingUnit
			y: spacingUnit
			width: card.width - mediaWidth - spacingUnit
			style:
				"color": "#111"
				"text-align": "left"
				"font-size": "80px"
				"font-weight": "300"
				"line-height": "1"
		description = new Layer
			parent: card
			html: mediaDescription[i]
			backgroundColor: null
			x: mediaWidth + spacingUnit
			y: 170
			width: card.width - mediaWidth - spacingUnit * 2
			clip: true
			style:
				"color": "#999"
				"text-align": "left"
				"font-size": "34px"
				"font-weight": "300"
				"line-height": "1.3"

mediaContent(movieScroll.content, 220, "movies", moviesTitle, moviesDescription)
mediaContent(showsScroll.content, 220,"shows", showsTitle, showsDescription)
mediaContent(upcomingScroll.content, 220, "upcoming", upcomingTitle, upcomingDescription)
mediaContent(watchScroll.content, 220, "watch", watchTitle, watchDescription)

movieScroll.parent = page.content
page.addPage(showsScroll)
page.addPage(upcomingScroll)
page.addPage(watchScroll)

# Navigation bar setup ---------------------------------
touchBar = new Layer
	height: touchBarHeight
	clip: true
	backgroundColor: moviesColor
	width: Screen.width
	maxY: Screen.height + offSet
	force2d: true
tabBar = new Layer
	backgroundColor: null
	width: Screen.width
	height: touchBar.height
	maxY: Screen.height + offSet

for layer in [touchBar, tabBar]
	layer.states.add
		hide:
			minY: Screen.height
	layer.states.animationOptions = curve: "spring(750,50,0)"

systemBar = new Layer
	height: systemBarHeight
	backgroundColor: "rgba(0,0,0,0.35)"
	width: Screen.width
	maxY: Screen.height
systemIcons = new Layer
	height: 120
	width: 670
	image: "images/systemIcons.svg"
	parent: systemBar
	midX: Screen.width / 2
	y: Align.center

tabUnit = touchBar.height - systemBar.height - offSet

# Status bar and time ----------------------------------
statusBarHeight = 52

statusBar = new Layer
	height: statusBarHeight
	width: Screen.width
	backgroundColor: "rgba(0,0,0,0.35)"
time = new Layer
	parent: statusBar
	width: 120
	height: statusBarHeight / 2
	x: Align.right(-20)
	y: Align.center
	backgroundColor: null
	style:
		"font-weight":"500"
		"font-size": "32px"
		"line-height": "0.8"
		"text-align": "right"
getTime = ->
	currentTime = new Date()
	hours = "#{if currentTime.getHours() < 10 then 0 else ''}#{currentTime.getHours()}"
	min = "#{if currentTime.getMinutes() < 10 then 0 else ''}#{currentTime.getMinutes()}"
	return "#{hours}:#{min}"
setTime = ->
	time.html = getTime()
	Utils.delay 60, ->
		setTime()
setTime()
statusIcons = new Layer
	height: 28
	width: 100
	parent: statusBar
	image: "images/statusIcons.svg"
	y: 10
	x: 858

# Search bar ------------------------------------------
searchBar = new Layer
	backgroundColor: "#FFF"
	width: Screen.width - spacingUnit
	height: 120
	x: Align.center
	minY: statusBar.height + 20
	borderRadius: 3
	shadowY: 1, shadowBlur: 2
	index: 4
searchBar.states.add
	hide:
		maxY: -100
searchBar.states.animationOptions = curve: "spring(750,50,0)"

searchLabel = new Layer
	parent: searchBar
	width: 160, height: 44
	midY: searchBar.height/2
	x: 120
	html: "Search"
	style:
		"color": "#AAA"
		"font-size": "42px"
		"line-height": "1"
		"font-weight": "300"
	backgroundColor: null
searchIcon = new Layer
	parent: searchBar
	width: 120, height: 120
	midY: searchBar.height/2
	image: "images/mdMenu.svg"
moreIcon = new Layer
	parent: searchBar
	width: 120, height: 120
	x: Align.right
	midY: searchBar.height/2
	image: "images/mdMore.svg"

# Tab items function -----------------------------------
tabSize = Screen.width / 4
tabContent = []

tabItem = (tabName, tabColor) ->
	tab = new Layer
		name: "#{tabName}"
		parent: tabBar
		x: tabContent.length * tabSize
		backgroundColor: null
		width: tabSize
		height: tabUnit

	tab.label = new Layer
		name: "#{tabName}Label"
		backgroundColor: null
		html: "#{tabName}"
		parent: tab
		width: tab.width
		opacity: 0
		y: Align.center(-10)
		height: 25
		style:
			"font-size": "#{fontSize}px"
	tab.label.states.add
		active:
			opacity: 1
			y: Align.center(12)

	tab.icon = new Layer
		name: "#{tabName}Icon"
		image: "images/md#{tabName}.svg"
		parent: tab
		backgroundColor: null
		width: tabSize / 4.5
		height: tabSize / 4.5
		x: Align.center()
		y: Align.center()
		opacity: 0.25
	tab.icon.states.add
		active:
			y: Align.center(-tabSize / 10)
			opacity: 1

	tab.touch = new Layer
		name: "#{tabName}Touch"
		backgroundColor: tabColor
		width: Screen.width * 3
		height: Screen.width * 3
		borderRadius: Screen.width * 1.5
		midX: tab.midX
		midY: tab.midY
		parent: touchBar
		scale: 0
	tab.touch.states.add
		active:
			scale: 1
	tab.touch.states.animationOptions =
		curve: "linear"
		time: 0.35

	tabContent.push(tab)
	return tab

movies = tabItem("Movies", moviesColor)
shows = tabItem("Shows", showsColor)
upcoming = tabItem("Upcoming", upcomingColor)
watch = tabItem("Watch", watchColor)

for layer in [movies.touch, movies.label, movies.icon]
	layer.states.switchInstant("active")

# Scroll logic --------------------------------------------------
page.onSwipeUpEnd ->
	for layer in [tabBar, touchBar, searchBar]
		layer.states.switch("hide")
page.onSwipeDownEnd ->
	for layer in [tabBar, touchBar, searchBar]
		layer.states.switch("default")

# Tab configuration ------------------------------
tabConf = (moviesConf, showsConf, upcomingConf, watchConf) ->

	for layer in [movies.label, movies.icon, movies.touch]
		layer.states.switch(moviesConf)
	for layer in [shows.label, shows.icon, shows.touch]
		layer.states.switch(showsConf)
	for layer in [upcoming.label, upcoming.icon, upcoming.touch]
		layer.states.switch(upcomingConf)
	for layer in [watch.label, watch.icon, watch.touch]
		layer.states.switch(watchConf)

# Events -----------------------------------------
movies.onTap ->
	tabConf("active", "default", "default", "default")
	page.snapToPage(movieScroll, true)
	Framer.Device.background.states.switchInstant("moviesColor")
	movies.touch.bringToFront()
shows.onTap ->
	tabConf("default", "active", "default", "default")
	page.snapToPage(showsScroll, true)
	Framer.Device.background.states.switchInstant("showsColor")
	shows.touch.bringToFront()
upcoming.onTap ->
	tabConf("default", "default", "active", "default")
	page.snapToPage(upcomingScroll, true)
	Framer.Device.background.states.switchInstant("upcomingColor")
	upcoming.touch.bringToFront()
watch.onTap ->
	tabConf("default", "default", "default", "active")
	page.snapToPage(watchScroll, true)
	Framer.Device.background.states.switchInstant("watchColor")
	watch.touch.bringToFront()
Framer.Extras.ShareInfo.enable()

# Activate Module
Framer.Metadata =
	author: "Eelco Lempsink"
	twitter: "eelco"
	title: "MIDI Controller"
	description: """
		Our goal with Framer has always been to build a full service design tool. So while it’s been possible to view working prototypes on a mobile browser, the experience has been less than seamless.

		Then, our community came to the rescue. Both Frameless by Jay Stakelon and Frames by Rafael Conde set a new standard for mobile viewing of prototypes. Inspired by their work and your feedback, we are now launching an iOS app that fully rounds out your design experience.

		Framer for iOS features live preview, offline use and intuitive sharing features that are protected by secure links. Paired with Framer for Mac, you now have access to a full mobile prototyping toolkit.
	"""
	date: "Jun 14 2016"
	local: false

extras/Studio.framer/framer/config.json

@@ -5,8 +5,8 @@
  "deviceOrientation" : 0,
  "sharedPrototype" : 1,
  "contentScale" : 1,
  "deviceType" : "google-nexus-5x",
  "selectedHand" : "",
  "deviceType" : "apple-iphone-6s-silver",
  "selectedHand" : "iphone-hands-2",
  "updateDelay" : 0.3,
  "deviceScale" : "fit",
  "foldedCodeRanges" : [