Skip to content

Instantly share code, notes, and snippets.

@andrewliebchen

andrewliebchen/app.coffee

Last active June 29, 2017 20:52
Show Gist options
  • Save andrewliebchen/eb758a6250a04b6581b354f8353e4ad6 to your computer and use it in GitHub Desktop.
Save andrewliebchen/eb758a6250a04b6581b354f8353e4ad6 to your computer and use it in GitHub Desktop.
Download ZIP
Pills demo
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment