Pills demo

app.coffee

{ color } = require 'fk-color'

Framer.Device.customize
	screenWidth: 1439
	screenHeight: 1023
	
Framer.Defaults.Animation =
	curve: 'spring(600, 40, 0)'

Canvas.backgroundColor = color 'light30'

s = Framer.Importer.load("imported/17_0315@1x")

c = 
	text:
		'font-family': '-apple-system'
		'font-size': '14px'
	column:
		width: 210
	pill:
		total: 20
		height: 28
		width: 178
		offset: 32
	sidebar:
		wide: 400
	
columnsList = ['dummy']

renderColumns = (columnsList) ->
	for column in columns.content.children
		column.destroy()
		
	for columnType in columnsList
		@column = new Column
			type: columnType
			x: columns.content.children.length * c.column.width
			
		if columnType is 'dummy' then @column.height = 851
		
		# Update columns width
		columns.content.width = columns.content.children.length * c.column.width
		
		if columns.content.width > columns.width
			columns.scrollToLayer @column
			columns.props =
				scrollHorizontal: true
				mouseWheelEnabled: true

class Pill extends Layer
	constructor: (options) ->
		@_options = options
		super _.defaults options,
			width: c.pill.width
			height: c.pill.height
			borderRadius: c.pill.height / 2
			backgroundColor: null
			
		@draggable.enabled = true
		
		@states.dragging =
			shadowY: 10
			shadowBlur: 20
			shadowColor: new Color('black').alpha(0.1)
	
		@onDragStart ->
			@animate 'dragging'
			dropTarget.animate 'show'

		@onDragEnd ->
			@animate 'default'
			
			dropTarget.animate 'default'
			
			@props =
				x: @draggable.layerStartPoint.x
				y: @draggable.layerStartPoint.y
			
			# Re render the columns
			_.pull columnsList, 'dummy'
			columnsList.push @_options.type
			renderColumns columnsList
			
			# Add the footer if applicable
			s.cardFooter.animate 'show'
			s.cardFooter.bringToFront()

			# Update Selected section
			# Add the pill and animate it in
			@selectedPill = new Pill
				parent: selectedPillsSection
				name: 'selectedPill'
				type: @_options.type
				opacity: 0
				scale: 0.7
				
			@selectedPill.animate
				opacity: 1
				scale: 1
				
			# Can't drag selected pills
			@selectedPill.draggable.enabled = false
			
			# Update the count and set new pill y
			pillCount = columnsList.length
			
			selectedPillsSection.count = pillCount
			@selectedPill.y =  pillCount * c.pill.offset - 6
			
			# Update height of section
			selectedPillsSection.props = 
				visible: true
				height: selectedPillsSection.height + c.pill.offset
			
			# Animate all pills section down
			allPillsSection.animate
				y: selectedPillsSection.height
						
	@define 'type',
		get: -> @_options.type
		set: (type) ->
			@image = "images/pill#{_.upperFirst type}-.png"

class Column extends Layer
	constructor: (options) ->
		@_options = options
		super _.defaults options,
			parent: columns.content
			name: 'column'
			width: c.column.width
			height: 794
			backgroundColor: null
			y: Align.top 1
			style: 'background-size': '100%'
	
	@define 'type',
		get: -> @_options.type
		set: (type) ->
			@image = "images/column#{_.upperFirst type}-.png"

class PillsSection extends Layer
	constructor: (options) ->
		@_options = options
		
		super _.defaults options,
			parent: pillsSections
			x: Align.left
			width: c.pill.width
			backgroundColor: null
			height: 84
			disabled: false
							
		@header = new H3
			parent: @
			text: @_options.title
			width: c.pill.width
			height: 18
			color: color 'light30'

	@define 'count',
		get: -> @_options.count
		set: (count) ->
			@_badgeStyle = _.defaults {
				'box-shadow': "0 0 0 1px #{color 'light05'}"
				'font-size': '10px'
				'font-weight': 'bold'
				'padding': '0 3px'
				'line-height': '16px'
			}, c.text
			
			unless @badge
				@badge = new Layer
					name: 'pillSectionBadge'
					parent: @
					x: Align.right
					backgroundColor: null
					height: 16
					color: color 'light20'
					borderRadius: 2
					style: @_badgeStyle
					html: "#{count}"
					width: Utils.textSize(count, @_badgeStyle).width
			else
				@badge.props =
					html: "#{count}"
					width: Utils.textSize(count, @_badgeStyle).width

					
	@define 'disabled',
		get: -> @_options.disabled
		set: (disabled) ->
			if disabled
				@ignoreEvents = true
				@animate 
					opacity: 0.5
				for pill in @children
					pill.draggable.enabled = false
			else 
				@ignoreEvents = false
				@animate
					opacity: 1
				for pill in @children
					pill.draggable.enabled = true

class H3 extends Layer
	constructor: (options) ->
		@_options = options
		
		super _.defaults options,
			name: 'h3Text'
			backgroundColor: null
			height: @_options.height || 12
			color: color 'light30'
			style: _.defaults {
				'font-size': '10px'
				'text-transform': 'uppercase'
				'letter-spacing': '0.23px'
				'line-height': "#{@_options.height || 12}px"
				'font-weight': '600'
			}, c.text
			
	@define 'text',
		get: -> @_options.text
		set: (text) ->
			@html = text

class DropTarget extends Layer
	constructor: (options) ->
		super _.defaults options,
			borderColor: color 'blueAccent'
			borderRadius: 6
			borderWidth: 3
			color: color 'blueAccent'
			backgroundColor: null
			style: _.defaults {
				'text-align': 'center'
				'font-weight': 'bold'
				'text-size': '36px'
				'line-height': '1.2'
			}, c.text



# Droptarget
dropTarget = new Layer
	x: s.mainCard.x + 1
	y: s.mainCard.y + 1
	width: s.mainCard.width - 2
	height: s.mainCard.height - 2
	backgroundColor: color('white').alpha(0)
	opacity: 0
	scale: 0.8
	style: 'border-radius': '0 4px 4px 4px'

dropTarget.states.show = 
	opacity: 1
	scale: 1
	backgroundColor: color('white').alpha(0.5)
	
dropTargetBorder = new Layer
	parent: dropTarget
	x: 24
	y: 24
	height: dropTarget.height - 48
	width: dropTarget.width - 48
	borderRadius: 6
	borderColor: color 'blueAccent'
	borderWidth: 3
	backgroundColor: null
	html: 'Drop here to add to table'
	color: color 'blueAccent'
	style: _.defaults {
		'line-height': "#{dropTarget.height - 48}px"
		'font-weight': 'bold'
		'text-align': 'center'
		'text-size': '36px'
	}, c.text

# Sidebar
sidebar = new Layer
	backgroundColor: color 'white'
	y: Align.top 96
	x: Align.left 48
	height: Screen.height - 96
	width: c.pill.width + 24
	style:
		'margin-top': '1px'
		'border-right': "1px solid #{color 'light20'}"

sidebar.states.open =
	width: 400
	shadowBlur: 8
	shadowColor: new Color('black').alpha(0.1)

sidebarTitle = new H3
	text: 'datasource'
	parent: sidebar
	x: Align.left 12
	y: Align.top 12
	
sidebarToggle = new Layer
	parent: sidebar
	size: 16
	image: 'images/glyph-gear-.png'
	x: Align.right -12
	y: Align.top 10
	
sidebarToggle.states.hide =
	opacity: 0
	
sidebarClose = new Layer
	html: 'Done'
	parent: sidebar
	y: Align.top 6
	height: 24
	width: 50
	backgroundColor: null
	color: color 'blueAccent'
	opacity: 0
	style: _.defaults {
		'line-height': '24px'
		'text-align': 'right'
		'font-weight': 'bold'
	}, c.text
	
sidebarClose.states.show =
	opacity: 1

datasource = new Layer
	parent: sidebar
	backgroundColor: null
	borderRadius: 4
	width: c.pill.width
	height: s.dataSourceHeader.height + 16
	x: Align.left 12
	y: Align.top 36
	clip: true
	borderWidth: 1
	borderColor: color 'light05'

datasource.states.expanded =
	width: c.sidebar.wide - 24
	height: 840
	borderColor: color 'light10'
	
s.dataSourceHeader.props =
	parent: datasource
	x: Align.left 8
	y: Align.top 8
	
fetchButton = new Layer
	parent: sidebar
	x: Align.left 12
	y: Align.bottom -12
	width: c.sidebar.wide - 24
	height: 28
	backgroundColor: color 'blueAccent'
	borderRadius: 2
	color: color 'white'
	html: 'Fetch again'
	opacity: 0
	scale: 0.8
	style: _.defaults {
		'text-align': 'center'
		'font-weight': 'bold'
		'font-size': '12px'
	}, c.text
	
fetchButton.states.show =
	opacity: 1
	scale: 1
	
s.datasourceActions.props =
	parent: datasource
	y: Align.top 15
	opacity: 0
	
s.datasourceActions.states.show =
	opacity: 1

pillsSections = new Layer
	parent: sidebar
	backgroundColor: null
	y: Align.top 96
	x: Align.right 12
	
pillsSections.states.hide =
	opacity: 0
	x: 0

s.fieldsSearch.props =
	parent: pillsSections
	x: 0
	y: 0
	
sidebarMask = new Layer
	x: sidebar.x + c.sidebar.wide
	y: sidebar.y
	width: Screen.width
	height: Screen.height
	backgroundColor: color('white').alpha(0.6)
	opacity: 0
	
sidebarMask.states.show =
	opacity: 1
	
sidebarToggle.onClick ->
	pillsSections.animate 'hide'
	
	sidebar.animate 'open'
	
	datasource.animate 'expanded'
	sidebarToggle.animate 'hide'
	
	s.datasourceMeta.props =
		parent: datasource
		y: Align.top 48
		x: Align.left
	
	Utils.delay 0.2, ->
		sidebarClose.x = Align.right -12
		s.datasourceActions.x = Align.right -8

		sidebarClose.animate 'show'
		s.datasourceActions.animate 'show'
		fetchButton.animate 'show'
		
		sidebarMask.animate 'show'
		

sidebarClose.onClick ->
	@animate 'default'
	s.datasourceActions.animate 'default'
	fetchButton.animate 'default'
	sidebar.animate 'default'
	sidebarMask.animate 'default'

		
	datasource.animate 'default'
	
	Utils.delay 0.2, ->
		pillsSections.animate 'default'
		sidebarToggle.animate 'default'


allPillsSection = new PillsSection
	y: s.fieldsSearch.height + 12
	title: 'All fields'
	count: c.pill.total
	
selectedPillsSection = new PillsSection
	y: s.fieldsSearch.height + 12
	title: 'Selected'
	visible: false
	count: 0

# Render all pills
for i in [0..c.pill.total]
	@pill = new Pill
		type: Utils.randomChoice ['boolean', 'string', 'number', 'unknown', 'date']
		parent: allPillsSection
		name: 'pill'
		y: Align.top c.pill.offset * i + 24
		x: Align.left

# Columns
columns = new ScrollComponent
	backgroundColor: null
	height: s.mainCard.height - 2
	width: s.mainCard.width - 2
	x: s.mainCard.x + 1
	y: s.mainCard.y 
	scroll: false


s.cardFooter.y = s.mainCard.height
s.cardFooter.states.show = 
	y: s.mainCard.height - s.cardFooter.height + 3

# Renders
# Initial Column render
renderColumns columnsList

columns.bringToFront()
dropTarget.bringToFront()

sidebarMask.bringToFront()
sidebar.bringToFront()

s.headers.bringToFront()

s.vizCard.props =
	x: s.mainCard.x
	y: s.mainCard.y - 35
	visible: false

s.vizCard.placeBehind sidebar

vizComponents = [
	s.yAxis
	s.barChart
	s.xAxisLabels
]
for comp in vizComponents
	comp.visible = false

s.vizTab.onClick ->
	s.vizCard.visible = true
	s.mainCard.visible = false
	allPillsSection.disabled = true
	for pill in selectedPillsSection.children
		pill.draggable.enabled = true
	
	Utils.delay 0.2, ->
		xAxisDropTarget.animate 'show'
		yAxisDropTarget.animate 'show'
	
s.tableTab.onClick ->
	s.vizCard.visible = false
	s.mainCard.visible = true
	allPillsSection.disabled = false
	for pill in selectedPillsSection.children
		pill.draggable.enabled = false
	
	xAxisDropTarget.stateSwitch 'default'
	yAxisDropTarget.stateSwitch 'default'
	
xAxisDropTarget = new DropTarget
	parent: s.vizCard
	y: Align.bottom -24
	x: Align.right -24
	width: 858
	height: 97
	html: 'Drop here to graph on the X-axis'
	opacity: 0
	scale: 0.8
xAxisDropTarget.style.lineHeight = '90px'
xAxisDropTarget.states.show =
	opacity: 1
	scale: 1

yAxisDropTarget = new DropTarget
	parent: s.vizCard
	x: Align.left 24
	y: Align.bottom -24
	height: 754
	width: 188
	html: 'Drop here to<br/>graph on the Y-axis'
	opacity: 0
	scale: 0.8
yAxisDropTarget.style.paddingTop = '327px'
yAxisDropTarget.states.show =
	opacity: 1
	scale: 1