code like Lightbox example

Question

I'm searching for an code example of the Lightbox demo from famo.us. Unfortunately, the interesting part of the app in the codepen is uglified in the pens version of the famous.lib.js.

It's not the whole gallery thing I'm interested in, its "just" a scollable view with multiple elements in one row, depending on their size and the screen size.

Has anyone experiences in developing a View/Layout like this?

Thanks in advance

Answer 1

I have been doing some work with Scrollview and GridLayout. You can calculate grid dimensions based on contextSize and target/min cell size.

Here is an example to get you started. I am essentially adding a gridLayout as the sole view in Scrollview. I know this may work against scrollviews efficient rendering in that scrollview will always be rendering the entire grid, but I am doing it for the examples sake. I use Modifier around the gridLayout to ensure the size of the view is always calculated and scrollview always scrolls the right amount. So anyway, here is what I did..

var Engine          = require('famous/core/Engine');
var Surface         = require('famous/core/Surface');
var RenderNode      = require('famous/core/RenderNode');
var Modifier        = require('famous/core/Modifier'); // edited
var Scrollview      = require('famous/views/Scrollview');
var GridLayout      = require('famous/views/GridLayout');

var context = Engine.createContext();

var scrollViews = [];

var scrollview = new Scrollview();
scrollview.sequenceFrom(scrollViews);

var gridCells = [];

var grid = new GridLayout();
grid.sequenceFrom(gridCells);

grid.mod = new Modifier();

var cellCount     = 24;
var cellMinWidth  = 200.0;

grid.mod.sizeFrom(function(){

  var size        = context.getSize();
  var cellsX      = Math.floor(size[0] / cellMinWidth);
  var cellsY      = Math.ceil(cellCount * 1.0  / cellsX);
  var cellHeight  = size[0] * 1.0 / cellsX;

  grid.setOptions({dimensions:[cellsX,cellsY]});

  return [undefined,cellsY*cellHeight];
});

grid.node = new RenderNode();
grid.node.add(grid.mod).add(grid);


for (var i = 0; i < cellCount; i++) {
  var surface = new Surface({
    size:[undefined,undefined],
    properties: {
      backgroundColor:'hsl('+(i*360/12)+',75%,50%)'
    }
  });

  gridCells.push(surface);
  surface.pipe(scrollview);

};

scrollViews.push(grid.node);

context.add(scrollview);

FWIW To really maximize the efficiency of scrollview, you need to have a list of views that are rendered sequentially. Since we are only rendering one view in scrollview, we are always rendering everything, all the time. I have thought of a couple ways to get around this though, that both extend beyond the scope is this example.

1. You could do the visibility check yourself and render nodes based on the position of the scrollview.

2. You could create a gridLayout for each row, then manage the cells within each grid using list manipulation techniques.

BONUS:

If you just want to use GridLayout just for the modifiers, I found using _modifiers property rather helpful (Note: only available after deploy!). I was able to create a rearrangeable layout using this technique. The surfaces are all floating outside the gridlayout and only being positioned via their draggable modifier based on the gridlayouts modifiers. Here is that working demo of that..

http://higherorderhuman.com/examples/rearrangeable.html

Hope this helps!