Classname-like naming in Framer

In many cases, your Framer prototype will consist out of views that have a lot of properties and behaviour in common. For example, you’ll have modal views that have the same animation.

For this, I created a function that can group together these views. The way it works is as follows: you name your layer groups with a specific ‘classname’. In case of modal views you could name one of your layer groups modal ModalOne and another one modal ModalTwo.

You can group these modals in an object named modalViews with the following line (note the space at the end of the string as a separator):

var modalViews = getViewsByClassName('modal ');

The function that is used for this, looks as follows:

function getViewsByClassName(_className, _parentView) {
    var _groupWithViews = {};

    if(arguments.length == 1) {
        var _parentView = PSD;
    }

    for (var _groupName in _parentView) {
        if(_groupName.indexOf(_className) > -1) {
            var _customName = _groupName.split(_className).join('');
            _groupWithViews[_customName] = _parentView[_groupName];
        }
    }

    return _groupWithViews;
}

You can now loop through the modalViews object and add behaviour to it as follows:

for (var view in modalViews) {
    modalViews[view].on('click', function() { alert('Clicked on a Modal View!'); });
}

Sidenote: If you want to look in a subset of your layer groups, you can specify the second parameter in getViewsByClassName as the scope in which you want to search.