This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Alex Hazel
Posted Aug 13 - Read on Facebook

Can someone help a super n00b?

So far I was able to dynamically generate 5 rows with this code:

rows = 5
accHeight = 42
accWidth = 320
accMargin = 4

[0...rows].map (a) ->
accordions = new Layer
x:0
y:a * (accHeight + accMargin)
height:accHeight
width:accWidth

But for each row, I want it to display a unique name from an array on each line. For example:
1. Text
2. More Text
3. Another new one
4. So on and so forth.

Am I on the right track so far? And what would be the proper way to cycle through the array and apply the names to each row? Thanks!!

12 Comments

Alex Hazel

Never mind.....I figured it out on my own cuz I am awesome like that....

rows = 5
accHeight = 42
accWidth = 320
accMargin = 4
accNames = {
val: ["hey","yo","sup"]
}

[0...rows].map (a) ->
accordions = new Layer
x: 0
y: a * (accHeight + accMargin)
height: accHeight
width: accWidth
accordions.html = accNames.val[a]

Alex Hazel

the last two say undefined because my list isn't long enough....But that did the trick

Alex Hazel

I guess my last question is....If you are dynamically creating rows - instead of explicitly defining them with "new Layer" - how do you target them once they are created? When I inspect the source I see it gives them an ID of "FramerLayer-460, 61, 62, etc" Do I just have to use those names?

Alex Hazel

I guess the resulting output is an array of all the DIVs that were created so I could just choose rows by choosing a number in the array....That sound right?

Alex Hazel

This works.....
accordions.on Events.Click, ->
accordions.animate
properties:
scale: .90
opacity: .5
curve: "spring(500,30,0)"

But this doesn't work:
accordions[0].on Events.Click, ->
accordions.animate
properties:
scale: .90
opacity: .5
curve: "spring(500,30,0)"

No idea how to target each one individually in order to attach unique events to each row....

Alex Hazel

Right now, it gets created on the fly but they aren't contained in anything. So I lose the ability to reference it dynamically later....Anyone have a good solution that keeps everything dynamic?

Alex Hazel

Ok this only took me 5 hours but I figured it out by myself (and with the help of Google). Just had to give each row a unique name with myLayer.name as it iterated through the loop.

Then I was able to reference that unique name in my click event to apply clicks only to specific rows that I declared.

Here is the code (much improved and cleaned up)

accordions =
height: 42
width: 320
margin: 4
rows: [0...5]
labels: {
names: ["Medications","Laboratories","Imaging","Nursing","Ordering"]
}

accordions.rows.forEach (i) ->
myLayer = new Layer
x: 0
y: i * (accordions.height + accordions.margin)
height: accordions.height
width: accordions.width
myLayer.name = "Row " + i
myLayer.html = accordions.labels.names[i]
myLayer.style = {
"line-height": "2.2"
"font-size": "18px"
"padding-left": "12px"
"backgroundColor": "teal"
}
myLayer.on Events.Click, ->
if myLayer.name == "Row 0"
myLayer.animate
properties:
scale: .90
opacity: .5
curve: "spring(500,30,0)"

Koen Bok

Alex, you can also do:

myLayer.on Events.Click, (event, clickedLayer) ->
...

Alex Hazel

I may want to target a row in a function without interacting with it. So I am glad I now know both ways to do it. Thanks so much!

Marc Krenn

Alex, would you mind sharing the final code (including indents) with us? :)

Alex Hazel

Sure, once I get back to my Mac later I can share!

Marc Krenn

great, thanks :)

Read the entire post on Facebook