Keeping layout and functionality separate about famous-flex

[StephanBijzitter]

Possible uses:

        // apply to all data sources
        layoutController.setDataSourceOptions({
            properties : {
                color : 'white',
                lineHeight : '48px',
                textAlign : 'center'
            }
        });

        // apply to just the left and right items
        layoutController.setDataSourceOptions({
            properties : {
                background : 'blue'
            }
        }, ['leftItems', 'rightItems']);

        // apply to just the title
        layoutController.setDataSourceOptions({
            properties : {
                background : 'darkgreen'
            }
        }, 'title');

        // apply with a function
        layoutController.setDataSourceOptions({
            properties : {
                color : 'red'
            }
        }, function(key) {
            // return true if the key contains an e, because yolo
            // in this case: title, leftItems, rightItems
            // but not: background
            return key.indexOf('e') > -1;
        });

[IjzerenHein]

Stephan, I think this would make a great contribution.

I do have some concerns about the solution. In my opinion, it is too opinionated (pun intended) and based on the premise that anything can be set using setOptions. What if you want to add a class ('.addClass') or do something else with a renderable? Or select only the header-sections in a ListLayout?

I myself would prefer a more flexible method for enumerating the renderables in the data-source which allows me to do any arbitrary task on it. Something like this:

Simple form:

layoutController.forEach(function(renderable) {
  renderable.setProperties({
    backgroundColor: 'green'
  });
});

Complete form:

layoutController.forEach(function(renderable, indexOrId) {
  if ((indexOrId === 'leftItems') || (indexOrId === 'rightItems')) {
    for (var i = 0; i < renderable.length; i++) {
      renderable[i].addClass('highlight');
    }
  }
});

[StephanBijzitter]

It's funny you should say that Hein because I was thinking the exact same while writing this function.
It could really be used for anything! Enumerate renderables, pass them through a validation process and invoke functions if they pass the validation.

I'll edit my things tomorrow 👍

In your last example you assume that a renderable cannot have children, which is correct. But what if the following structure takes place:

            dataSource : {
                dur : hur,
                and : fur,
                but : [
                    [stephan, is, extremely, sexy],
                    [ _while, hein, well, he, is, all_right]
                ]
            }

In this case your example would fail as it assumes but's child is a renderable, while in fact it's yet another array. Therefore we should definitely recursively check on the backend and only give the endpoints to the user for processing. In this case hur, fur, stephan, is, extremely, sexy, _while, hein, well, he, is, all_right.

[IjzerenHein]

Well I guess you could embed an array in an array, in an object, in another object, in an array, and so on. It might even make sense to have such a dataSource layout (in some cases) and to write a layout-function for it. But I wouldn't go as far as to make a single enumeration function for it, which flattens this arbitrary structure and outputs just the renderables. You would probably also want to know the parent hierarchy..
Basically, I don't want to add an opinionated "smart" function for this, but instead provide a lower level solution which will serve all purposes and any hierarchy.

[StephanBijzitter]

Hmm it would indeed be good to know about the parents, which a function like that would indeed remove or abstract away.

[IjzerenHein]

Let me know if you still want to add this feature, then I will include it in the next official release. If not, I'll might add it myself.

Also, your material design screenshot looks awesome, can't wait to see the live demo's :)

[StephanBijzitter]

I'll make some adjustments tomorrow!

You should look into adding CLAs and Travis by the way :-) It was surprisingly easy to add to my own project and does a wonderful job.

https://www.clahub.com/ (just log in using Github and enable on a per project basis)
Example: https://www.clahub.com/agreements/StephanBijzitter/Famous-Material-Examples

Same thing for Travis really, if you scaffold your Famo.us project with Yeoman a travis config file will be auto generated (you can find it in the main directory of my examples, if you don't have it) and it works out of the box O_o

[IjzerenHein]

Awesome!

[talves]

@StephanBijzitter 👍 on the CLAHub suggestion! Never knew it existed until now.