framer-templates

framer-templates copied to clipboard

I just tried to create a custom template using your repo. However, I get this error when I include it in Framer studio.

[undefined] TypeError: undefined is not an object (evaluating 'Framer.Config.template')

I get the same error if I include one of the existing templates as well. It looks like the repo hasn't been updated in awhile, so I just wanted to check it has been tested recently or if the problem is something I did.

It took a bit of hacking, but I got it to work with the following changes:

var options = _.defaults(Framer.Config.template || {}, defaults);

To:

var options = _.defaults({}, defaults);

And then changing the root from:

root = document.getElementById('FramerRoot');

To:

root = document.getElementById('FramerContextRoot-Default');

Thanks for bringing this up (and for providing the fix as well). I'll try to get around to updating the templates in the next few days.

All should be fine now.

Thanks! I will check it out this morning.

This positioned the device correctly, but the content frame was not being resized. I added the following code to resize the content frame:

function positionFramerRoot(){

   // ... code to position the framer ...

    var deviceBackground = root.querySelector('.DeviceBackground');
    deviceBackground.style.width = contentWidth + 'px';
    deviceBackground.style.height = contentHeight + 'px';

    var devicePhone= root.querySelector('.DevicePhone');
    devicePhone.style.width = contentWidth + 'px';
    devicePhone.style.height = contentHeight + 'px';

    var deviceScreen= root.querySelector('.DeviceScreen');
    deviceScreen.style.width = contentWidth + 'px';
    deviceScreen.style.height = contentHeight + 'px';

    var deviceComponentPort = root.querySelector('.DeviceComponentPort');
    deviceComponentPort.style.width = contentWidth + 'px';
    deviceComponentPort.style.height = contentHeight + 'px';

    var deviceContent = root.querySelector('.DeviceContent');
    deviceContent.style.width = contentWidth + 'px';
    deviceContent.style.height = contentHeight + 'px';

}

This works pretty well for me now, although the cursor is gigantic.

I wanted to add that my touch events are not working with the fix I applied as well.

Can you try again? I've tested touch events on my iPhone and everything seems to be working correctly now, but please confirm it works on your end as well.

Out of curiosity, why are you using these templates, instead of just configuring Framer.Device?

I will try it out this morning. I am using the library to create a custom device (Samsung Tab S). It has a pretty unique resolution (1600 x 2560). I took a look at Framer.Device but it looks like it is limited to setting the background. But, I am really new to Framer. So, I might not know what is possible within the tool.