Merge pull request #379 from koenbok/preloader

Updated preloader.

extras/Studio.framer/.gitignore

@@ -23,15 +23,15 @@ Temporary Items
.apdisk

# Framer specific
.temp.html
.*.html
framer/*.old.*
framer/backup.coffee
framer/backups
framer/backups/*
framer/.*.hash
framer/manifest.txt
framer/preview.png

framer/social*.png

app.js
framer/images/*

extras/Studio.framer/app.coffee

@@ -1,4 +1,339 @@
layer = new Layer
# 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)

layer.onTap (e) -> print e.point
# 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()

extras/Studio.framer/framer/config.json

@@ -5,7 +5,7 @@
  "deviceOrientation" : 0,
  "sharedPrototype" : 1,
  "contentScale" : 1,
  "deviceType" : "apple-iphone-6s-gold",
  "deviceType" : "google-nexus-5x",
  "selectedHand" : "",
  "updateDelay" : 0.3,
  "deviceScale" : "fit",
@@ -14,4 +14,4 @@
  ],
  "orientation" : 0,
  "fullScreen" : false
}
}

extras/Studio.framer/images/mdMenu.svg

@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
    <title>mdMenu</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group-2" fill="#808080">
            <path d="M13,16 L31,16 L31,18 L13,18 L13,16 Z M13,21 L31,21 L31,23 L13,23 L13,21 Z M13,26 L31,26 L31,28 L13,28 L13,26 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>