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

What is Framer? Join the Community
Return to index
Chase Curry
Posted Apr 09 - Read on Facebook

Hi all,

Is there a simple way to create multiple instances of a single object? e.g. I've created a panel that reduces its opacity to 0.5 when hovered on, and would like to populate the screen with 9 of these panels. Is there something akin to Panel1 = new Panel (where Panel is an object I've defined)? I noticed a few examples where ppl used for loops and defined the object inside of the loop.... seems to come close, but could be a bit messy.

Thanks!

30 Comments

Jordan Robert Dobson

There is a copy() method I believe.

Josef Richter

would be interested too, especially how to extend classes - e.g. class RedLayer extends Layer and set backgroundColor: "red", so that I don't need to do this manually, just instantiate new RedLayer. What is the proper syntax for this?

Ondrej Rohoň

Have a look here guys: http://arcturo.github.io/library/coffeescript/03_classes.html

Coffee script, which framer uses by default is super nice for this.

Josef Richter

I tried and failed :-) That's why I'm asking what's the correct syntax.

Mike Feldstein

class RedLayer extends Layer
constructor:(options = {}) ->
super(options)
@backgroundColor = "red"

Ondrej Rohoň

I made you an example project, which should make it clearer. Feel free to ask any questions :) http://share.framerjs.com/tftsaty7efz2/

Jordan Robert Dobson

Oh. I misunderstood the question. Sorry. Mike Feldstein has you on track.

Josef Richter

Thanks Mike and Ondrej. Was able to get this far, but where I failed was when I tried the extended class to have some default values, while still be able to redefine them. I.e. class BigFatRedLayer extends Layer would have some default width&height = 1000 and default red background, but I still want to be able to specify any of these properies on init. That means e.g. new BigFatRedLayer with width = 1200 while keeping the other default values. Makes sense?

Ondrej Rohoň

Yes, it makes sense, I don't know right away how to do that. Will have look at it.

Mike Feldstein

Josef Richter try this little guy on http://share.framerjs.com/uq821f0bczt1/

Mike Feldstein

||= means set it if it doesn't exist

Josef Richter

Mike this is EXACTLY that kind of "one liner" solution I was hoping for, thanks! I was fiddling around with the ? operator, but I fucked up the syntax probably. Thanks!

Mike Feldstein

Only gotcha is that if someone sets the value to 0 ||= will overwrite it

Mike Feldstein

you could also check if it's undefined, but the basic idea is to overwrite unset properties before calling super

Jordan Robert Dobson

Mike Feldstein I think the proper coffeescript way is ?=

Jordan Robert Dobson

That checks for null and says if null make it set to your Val.

Jordan Robert Dobson

@options.width ?= 200

Mike Feldstein

with our powers combined....

Jordan Robert Dobson

The null check is awesome because it doesn't overwrite a falsely value. :D

Jordan Robert Dobson

We are Captain Planet!!!!

Mike Feldstein

does it overwrite null? Because that's a valid value... I kinda hate the way javascript treats null/undefined/false/0 and i really don't understand coffeescripts treatement of javascripts treatment.

Mike Feldstein

wait i think that comment means i need to go outside.

Jordan Robert Dobson

Sorry. I guess it checks for undefined and null. Basically if it's set to anything of value true or false the ? Doesn't pass. So it's checking for an empty value.

Chase Curry

Thanks all- on a deadline this AM, but will check this out this afternoon

Jordan Robert Dobson

http://coffeescript.org/#operators

Check out "The Existential Operator" for examples...

It's a little difficult to check for the existence of a variable in JavaScript. if (variable) ... comes close, but fails for zero, the empty string, and false. CoffeeScript's existential operator ? returns true unless a variable is null or undefined, which makes it analogous to Ruby's nil?

It can also be used for safer conditional assignment than ||= provides, for cases where you may be handling numbers or strings.

Jordan Robert Dobson

?. is pretty awesome as well. I just learned something new. :)

Ondrej Rohoň

Awesome!

Chase Curry

Thanks to everyone for the help- special thanks to Mike Feldstein for the example. This is exactly what I was looking for. BTW- what is the significance of super(options)?

Mike Feldstein

super calls the constructor of the parent class. Every class has a constructor, which is what happens when the class is instantiated. This is where all the setup occurs, like setting the size and position of the layer. If you never called super, the layer would never be 'constructed', all the code that FramerJS adds would never run.

Mike Feldstein
Read the entire post on Facebook