fview-flex

So IjzerenHein's famous-flex is pretty friggin' awesome, and without a doubt the best community component for Famo.us by a substantial distance. This is the start of a famous-views wrapper for it (for Meteor).

VERY EARLY RELEASE!!! Feel free to play around but don't use this for anything serious. Works with both mjn:famous and raix:famono (since v0.0.2).

Live demo

Too add to your project, just meteor add gadicohen:fview-flex. To clone from github, see Development below (in short, make sure to submodule init/update).

Usage:

  +ContainerSurface perspective=500 overflow="hidden"
    +FlexScrollView layout="WheelLayout" direction="Y" layoutOptions=layoutOptions
      +famousEach surfaces
        +Surface style=style
          | #{_id}

Note: Beware of overflow: hidden, it breaks z-translation quite badly - if you don't need it, don't use it.

Attributes:

• All attributes are parsed using famous-views and given on init (i.e. you can give either a string or fview string in the template, or use a template helper to give an actual value). So you can use any option mentioned

in the famous-flex docs.

• layout, direction, layoutOptions are all reactive, see the

demo source for a good example.

• If none of your layoutOptions are reactive, you can use straight JSON

directly from the template, e.g. layoutOptions='{ "itemSize": [50,90], "diameter": 500, "radialOpacity": 0 }'.

• No problem to use a helper to return your own custom layout function to

layout.

You can also use {{#FlexLayoutController}} directly if you don't need scrolling.

Special behaviour

• If the FlexScrollView's immediate parent is a ContainerSurface, we'll set up

all the event piping for you. Otherwise, by default, we'll still automatically pipe all children to it, just like in regular ScrollView with famousEach. But generally you'll want to use a ContainerSurface to ensure smooth scrolling even when going over "gaps" between the Surfaces.

Progress

famous-views is developed in my spare time. fview-flex is developed in my spare time from famous-views :) I'm not sure how quickly I'll get the full list below implemented, however, I'll definitely prioritize according to demand. Open an issue for feature / prioritization requests, and I'll try get to these first, especially if there are a lot of +1's.

Basically you can use all the components of famous-flex right now, through js if not available for templates.

• Standard Layouts (full docs)

  • --- Non-scrollable ---
  • GridLayout
  • ProportionalLayout
  • HeaderFooterLayout (compared to famo.us' HeaderFooterLayout, this could update the header/footer size dynamically)
  • NavBarLayout
  • TabBarLayout
  • --- Scrollable ----
  • ListLayout ([x] stickyHeaders)
  • CollectionLayout
  • WheelLayout

• LayoutHelpers(layout literals)

  • LayoutDockHelper (add template support for dock literals)

• Widgets

  • DatePicker (add template support)
  • TabBar (add template support)

• LayoutControllers, LayoutHelpers, etc.

A DatePicker example(will add template support in the future :):

  var datePicker = new Flex.DatePicker({
    date: new Date(),
    perspective: 500,
    wheelLayout: {
      itemSize: 25,
      diameter: 100,
      radialOpacity: -0.5
    },
    createRenderables: {
      top: true,
      bottom: true
    },
    classes: ['transparent']
  });
  datePicker.setComponents([
    new Flex.DatePicker.Component.Month(),
    new Flex.DatePicker.Component.Day(),
    new Flex.DatePicker.Component.Year()
  ]);

  datePicker.on('datechange', function(event) {
    console.log('date-changed to: ' + event.date.toString());
  });

A HeaderFooterLayout example:

{{#FlexLayoutController layout='HeaderFooterLayout' layoutOptions=layoutOptions}}
  {{#Surface target="header" size="[undefined, 40]"}}
  {{/Surface}}
  {{#Surface target="content"}}
  {{/Surface}}
  {{#Surface target="footer" size="[undefined, 80]"}}
  {{/Surface}}
{{/FlexLayoutController}}

A LayoutDockHelper example:

The template:

<template name="dockExample">
{{#FlexLayoutController layout=layout dataSource=dataSource layoutOptions=layoutOptions}}
{{/FlexLayoutController}}
</template>

In JS:

Template.dockExample.helpers({
  'layout': function() {
    return {
      dock: [
        ['fill', 'background'],
        ['left', undefined, 8],
        ['top', undefined, 8],
        ['right', undefined, 8],
        ['bottom', undefined, 8],
        ['right', 'send', undefined, 1],
        ['fill', 'input', 1]
      ]
    };
  },
  'dataSource': function() {
    return {
      background: backgroundSurface,
      input: inputSurface,
      send:  sendSurface
    };
  },
  'layoutOptions': function() {
    return {
      margins: [0, 0, 0, 0]
    };
  }
});

I think future release can add support for layout literals(and other common layouts) like this:

{{#FlexLayoutController layout='HeaderFooterLayout/ListLayout/Dock/or whatever layout' margin="[10, 10, 10, 10]"}}
  {{#Surface target="left" size="[undefined, 100]"}}
    {{>templateA}}
  {{/Surface}}
  {{#Surface target="right" size="[undefined, 100]"}}
    {{>templateB}}
  {{/Surface}}
{{/FlexLayoutController}}

BTW, you can use RefreshLoader & AutosizeTextareaSurface like this:

var loader = new Flex.RefreshLoader(...);

Development

If you plan to contribute, you probably want to clone your own fork. See https://help.github.com/articles/using-pull-requests/ for more details.

$ git clone https://github.com/gadicc/fview-flex.git
$ cd fview-flex
$ git submodule init
$ git submodule update

The last two lines are necessary because we don't include all the original fmaous-flex etc code in the repo, rather, we include them as submodules and can update / checkout a particular commit whenever we want. If you don't you'll see errors like:

=> Errors while initializing project:

While building package gadicohen:fview-flex:
error: File not found: lib/famous-flex/src/LayoutUtility.js
error: File not found: lib/famous-flex/src/LayoutContext.js

etc.