gistfile1.txt

# This imports all the layers for "icons" into iconsLayers
Background = new BackgroundLayer backgroundColor: "#f6f6f6"
 
#assign number of list items within each level of the list
 
cellCount  = 10
cellTwoCount = 10
CellThreeCount = 10
CellFourCount = 10
 
# Placing all fields within a container
Container = new Layer backgroundColor: "transparent", width:1080, height:2000
Container.center()
#Container.style.padding = "10px 0 0 0 "

title = new Layer
	x:0
	y:0
	height:150
	#
	width:750
	backgroundColor:"red"
Utils.labelLayer(title, "Application Title")
title.style =
	"font-size":"40px"

	
# I would create an array / collection with the labels
buttonNames = ["Hello","World","I come in peace","Project is active","Talks on youtube","Everyday","One post a day"]
secondLevelButtonNames = ["2nd Hello","2nd World","2nd I come in peace","2nd Project is active","2nd Talks on youtube","2nd Everyday","2nd One post a day"]
thirdLevelButtonNames = ["3rd This is the end 1 ","3rd This is the end 2","3rd  I come in peace","3rd  Project is active","3rd  Talks on youtube","3rd  Everyday","3rd  One post a day"]

# then I would also create an array to hold the Field elements, as well the other things, always with the same index ( colNumber )
fields = []
bugs = []
badges = []

# 10 Fields
for colNumber in [0...cellCount]
  # Create a new layer and store in the fields[<ID>] array position
  # you can later access it using fields[1] or fields[2] 
  fields[colNumber] = new Layer 
    width:1080
    height:240
    backgroundColor: "#fff"
    shadowY: 2
    shadowBlur: 5
    borderRadius: 6
    y: (colNumber) * 242
    
  bugs[colNumber]  = new Layer
    x:972
    width:92
    height:72
    backgroundColor: "red" 
    borderRadius:80
    y: (colNumber) * 250
    
  badges[colNumber]  = new Layer
    x:16 
    width:160
    height:160 
    backgroundColor: "red"
    y: (colNumber) * 250
    
  # How do I cycle through 10 buttons to add text.
  #now I use the same index to find the text in my array that I need to apply to the button / Field element
  Utils.labelLayer(fields[colNumber], buttonNames[colNumber])
  
  #simple css to make sure we see the text
  fields[colNumber].style =
  	"color":"red"
  	"font-size":"30px"
  	
  fields[colNumber].shadowColor = "rgba(0, 0, 0, 0.25)"
  fields[colNumber].superLayer = Container
  bugs[colNumber].superLayer = Container
  badges[colNumber].superLayer = Container
  fields[colNumber].centerX()
  
  # Each field gets its own Highlight and Shadow animation
  fields[colNumber].on Events.Click, (events, Field)->
  	 #console.log "fire1"
  	#here's the funny thing: I will keep the name Field, because you used it there on the events ( events, Field )
  	# but they are actually a ref to the fields[index] that was clicked. that's why it works
    title.html = Field.html
    Field.bringToFront()
    # Create a subset of list items so that when the user clicks on a lsit item it will reveal the child list
    for newColNumber in [0...cellTwoCount]
     
      SecondaryField = new Layer
       width:1080
       height:240
       backgroundColor: "#fff"
       shadowY: 2
       shadowBlur: 5
       borderRadius:6
       y: (newColNumber) * 246
      SecondaryField.shadowColor = "rgba(0, 0, 0, 0.25)"
      SecondaryField.superLayer = Field
      SecondaryField._prefer2d = true
      
      # Added this to add text to second level
      Utils.labelLayer(SecondaryField, secondLevelButtonNames[newColNumber])
      SecondaryField.style=
           "color":"red"
           "font-size":"30px"
      # secondary field gets its own Highlight and Shadow animation
      SecondaryField.on Events.Click, (event, SecondaryField) ->
        #let's update the title!
        title.html = SecondaryField.html
        #console.log "fire2"
        event.stopPropagation()
        SecondaryField.bringToFront()
 
         # Create a subset of list items so that when the user clicks on a lsit item it will reveal the child list     
        for tertiaryColNumber in [0...CellThreeCount]
          TertiaryField = new Layer
            width:1080
            height:240
            backgroundColor: "#ffffff"
            shadowY: 2
            shadowBlur: 5
            borderRadius:6
            y: (tertiaryColNumber) * 244
          TertiaryField.superLayer = SecondaryField
          TertiaryField._prefer2d = true    	
          TertiaryField.shadowColor = "rgba(0, 0, 0, 0.25)"
          
          #writing the labels on the 3rd level
          Utils.labelLayer(TertiaryField, thirdLevelButtonNames[tertiaryColNumber])
          TertiaryField.style=
           "color":"red"
           "font-size":"30px"
          secondaryFieldAnimation = SecondaryField.animate 
            properties:
             opacity: 1, shadowY: 10, shadowBlur: 16
            curve: "ease", time: .1
      
          # Reset scale and reveal secondary content
          secondaryFieldAnimation.on "end" , ->
            SecondaryField.animate
              properties:
               y: 0, height: 2000, 
              curve: "ease", time: 0.1
 
    # This is supposed to be a round highlight but at the moment it's failing, strange enough it works if I remove Secondary Field
    Highlight = new Layer
    width:10, height:10, backgroundColor: "#eeeeee", borderRadius: "50%", opacity:0
    Highlight.superLayer = Field 
    Highlight._prefer2d = true
        	
    # Matching the Highlight position with the click position
    Highlight.x = event.clientX - Container.x - Field.x - (Highlight.width / 2)
    Highlight.y = event.clientY - Container.y - Field.y - (Highlight.height / 2)
        
    highlightAnimation = Highlight.animate 
      properties:
        width: Field.width + 40, height: 1080, opacity: 1, x: -10 , y: Field.height/2 # Half of new height & half of Cursor height 
      curve: "ease", time: 0.25
 
    # Fade & Reset Highlight
    highlightAnimation.on "end" , ->
      Highlight.animate
        properties:
          opacity: 0
        curve: "ease", time: 0.1
      utils.delay 0.1, ->
          # Resetting the Highlight properties
          Highlight.width = 160
          Highlight.height = 160
 
    # Animate Shadow
    fieldAnimation = Field.animate 
      properties:
       opacity: 1, shadowY: 10, shadowBlur: 16
      curve: "ease", time: .1
 
    # Reset scale and reveal secondary content
    fieldAnimation.on "end" , ->
      Field.animate
        properties:
         y: 0, height: 2000, 
        curve: "ease", time: 0.1
        
# Create Layers
actionBar 	= new Layer({x:0, y:0, width:1080, height:162, backgroundColor: "#222222" }) 
taskBar		= new Layer({x:0, y:0, width:1080, height:50, backgroundColor: "#222222" })
 
 
 
# Create html layer with styling
actionbarTimer = new Layer({x:950, y:-20, width:1080, height:60, backgroundColor: "null" })
actionbarTimer.html = "12:00"
actionbarTimer.style = fontSize: '32px', fontWeight: 400, lineHeight: '88px', color: 'white'
        
# This imports all the layers for "icons" into iconsLayers, 
# This is hardcoded it would be nice to make it dynamic
###
iconsLayers = Framer.Importer.load "imported/icons"
 
iconsLayers. y = 10
iconsLayers.signal.x = 800
iconsLayers.signal.y = 10
iconsLayers.strength.x = 850
iconsLayers.strength.y = 10
iconsLayers.charge.x = 900
iconsLayers.charge.y = 10`
iconsLayers.test.height = 4000
iconsLayers.test.y = 400
###

title.bringToFront()