Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ajmalafif/34fed6a48040ed46249c19f579aeef6c to your computer and use it in GitHub Desktop.
Save ajmalafif/34fed6a48040ed46249c19f579aeef6c to your computer and use it in GitHub Desktop.
# Getting data from the CoinMarketCap API
coins = JSON.parse Utils.domLoadDataSync 'https://api.coinmarketcap.com/v1/ticker/'
# Create a Scroll componnent, that will wrap all coinRows
list = new ScrollComponent
width: Screen.width
height: Screen.height
# Set the backgrond color for the scroll content
list.content.backgroundColor = '#FFFFFF'
# Remove scroll horizontal option in the scroll component
list.scrollHorizontal = false
# coinRows
# Put all coinRows in an Array
coinRows = []
# Loop through all coins
for coin, index in coins
# Extracting values stored in the coin object
{name, id, symbol, price_usd : price} = coin
# Create a Layer for each coin
coinRow = new Layer
parent: list.content
width: Screen.width
height: 100
y: 101 * index
name: id
backgroundColor: '#DDDDDD'
# Set the coinRow states
coinRow.states =
hidden:
opacity: 0
# Create a TextLayer for each coin that shows the Coin Name
coinName = new TextLayer
parent: coinRow
text: "#{name} (#{symbol})"
fontSize: 18
x: 30
y: Align.center()
# Set the coinName states
coinName.states =
hidden:
opacity: 0
# Create a TextLayer for each coin that shows the Coin Price
coinPrice = new TextLayer
parent: coinRow
text: "$ #{price}"
fontSize: 18
x: Align.right(-30)
y: Align.center()
# Set the coinPrice states
coinPrice.states =
hidden:
opacity: 0
# Add each coinRow in the coinRows array
coinRows.push(coinRow)
#tap event
coinRow.onTap ->
selectedRow = this
# Create an Animation
heroSize = new Animation selectedRow,
# change the scroll position to the top of the screen
y: list.scrollY
# Increase the size of the selectedRow to 250
height: 250
# Loop through all itens in coinRow array
for row in coinRows
# If the element in the coinRows is the element that the user clicked
if selectedRow is row
# Loop through all row children elements (coinName and coinValue)
for child in selectedRow.children
child.onStateSwitchEnd ->
heroSize.onAnimationEnd ->
flow.transition(modal, goToModal)
heroSize.start()
child.animate('hidden')
else
# Apply the hidden state
row.animate('hidden')
# goToModal animation
goToModal = (nav, layerA, layerB, overlay) ->
transition =
# states of the current layer
layerA:
show:
x: 0
opacity: 1
hide:
x: 0
opacity: 1
# states of layer that the next layer
layerB:
show:
x: 0
opacity: 1
hide:
x: 0
opacity: 0
# modal
modal = new Layer
size: Screen.size
label: 'Modal'
backgroundColor: '#CCCCCC'
#Flow Component
flow = new FlowComponent
flow.showNext(list)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment