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

What is Framer? Join the Community
Return to index
Joe Day
Posted Feb 14 - Read on Facebook

OK...another module question!

Say you wanted to do make a button module so that you could instantiate it like the attached image. The button should be made up of three layers: the background, the text, and the hit target. There would also be some event-based animations for the interactive states.

I've been trying to extend the Layer class so I can use the constructor to handle the text. But I am getting hung up on creating the layers, parenting them properly, and handling the events. Am I going down the wrong track by attempting to extend Layer?

16 Comments

Jordan Robert Dobson

Nope. That looks and sounds right.

I think just show us your constructor and we can help with ordering things right.

Joe Day

Ok...here it is. I stripped it down to just adding the text layer to keep things simple. I think if we can figure that out, the rest will come

Jordan Robert Dobson

Okay. Yeah I see. Do this... where you have txt = new layer...

addText: (text) ->

@txt = new Layer
parent: @
color: "white"
html: text
style:
fontSize: "15px"

Jordan Robert Dobson

Then in your constructor after super @options

Add this

@addText @options.text

Jordan Robert Dobson

With what you were doing... you were basically containing the the txt layer in the scope of the module class but that doesn't have a lot to do with the instances created.

Basically you would end up with only one txt Layer

Joe Day

Did that, but getting "undefined is not an object". Does this look right?

Joe Day

oh weird...fb didn't show me the rest of your original text even after I expanded it.

Jordan Robert Dobson

AddText needs a Param and function arrow

(text) ->

Then you want to update the instance object to have a text property which stores the created layer inside that function / method.

Jordan Robert Dobson

AddText is an instance method / function

Jordan Robert Dobson

You should come out to the next Framer meetup. I could dig into this with you much more deeply.

Joe Day

totally worked. off to the races. thanks Jordan Robert Dobson!!

Joe Day

One more quicky...so, if I want to call a function from an event created on one of those layers, how would I do that? Here, if I print from the event itself, it works. But if I try to call the @animateIn() function, it says "this.animateIn is not a function"

Jordan Robert Dobson

@ is different in that context.

@ refers to "this" which in that context is the target layer...

So you'd say @.parent.animateIn()

Joe Day

Sigh of relief. Thanks again Jordan Robert Dobson!

Jordan Robert Dobson

Also why not just set the color property? Instead of doing it via CSS?

Jordan Robert Dobson

Also you can set the style property on instantiation

Read the entire post on Facebook