Generate a 8-screens grid by keeping the views easily identifiable in the Pixate Editor, and set an initialization state

pixate-8-screens-grid-init.js

/**
 * Template: 8-Screens Grid
 * @summary A customizable 8-screens grid
 * @description Generate a 8-screens grid by keeping the views easily
 * identifiable in the Pixate Editor, and set an initialization state
 * @author Luca Orio
 * @copyright Luca Orio (c) 2015
 * @license MIT
 * @see http://github.com/lucaorio
 * @version 0.1
 */

// define the views and their attributes
var viewsArr = [
  { name: 'view-01', bgColor: '#34495e', init: 'position' },
  { name: 'view-02', bgColor: '#d35400', init: 'position' },
  { name: 'view-03', bgColor: '##9b59b6', init: 'position' },
  { name: 'view-04', bgColor: '#0097a4', init: 'position' },
  { name: 'view-05', bgColor: '#e74c3c', init: 'opacity' },
  { name: 'view-06', bgColor: '#f39c12', init: 'opacity' },
  { name: 'view-07', bgColor: '#27af60', init: 'opacity' },
  { name: 'view-08', bgColor: '#6b6f72', init: 'opacity' }
];

// define the padding between each view in the Pixate editor and other specs
var padding = 10;
var statusbarH = 20;
var navbarH = 44;

/**
 *
 * From now on, edit at your own risk :)
 *
 */

// variables definition
var viewport,
  viewsLength,
  views,
  navbars,
  statusbar;

// get the viewport dimensions
viewport = { width: Screen.width, height: Screen.height };

// create the statusbar, navbars and views wrapper
statusbar = createEl({
  name: 'statusbar',
  width: viewport.width,
  height: statusbarH,
  bgColor: '#000000'
});

navbars = createEl({
  name: 'navbars',
  width: viewport.width,
  height: navbarH,
  bgColor: 'transparent',
  y: statusbarH
});

views = createEl({
  name: 'views',
  width: viewport.width,
  height: viewport.height - statusbarH,
  bgColor: 'transparent',
  y: statusbarH
});

// generation of navbars and views
viewsLength = viewsArr.length;
for (var i = 0; i < viewsLength; i++) {
  // calculate the coordinates for views and navbars
  if (i <= 3) {
    var xPos = (viewport.width + padding) * i;
    var yPos = 0;
  } else {
    var xPos = (viewport.width + padding) * (i-4);
    var yPos = viewport.height - statusbarH / 2;
  }

  // create the navbars and views
  var navbar = createEl({
    name: 'navbar-' + viewsArr[i].name,
    clipping: ClippingType.bounds,
    width: viewport.width,
    height: navbarH,
    bgColor: '#ffffff',
    opacity: 0.8,
    nesting: navbars,
    x: xPos,
    y: yPos
  });

  var view = createEl({
    name: viewsArr[i].name,
    clipping: ClippingType.bounds,
    width: viewport.width,
    height: viewport.height - statusbarH,
    bgColor: viewsArr[i].bgColor,
    nesting: views,
    x: xPos,
    y: yPos,
    init: viewsArr[i].init
  });
}

// generation function
function createEl(opts) {
  var el = createLayer(opts.name);
  el.width = opts.width || 100;
  el.height = opts.height || 100;
  el.x = opts.x || 0;
  el.y = opts.y || 0;
  el.backgroundColor = opts.bgColor || '#000000';
  el.opacity = opts.opacity || 1;
  el.clipping = opts.clipping || 'none';
  opts.nesting && nestLayers(opts.nesting, el);

  if (opts.init === 'position') initPos(el)
  else if (opts.init === 'opacity') initOpa(el);

  return el;
}

function initPos (el, toZero) {
  var init = createMoveAnimation(el);
  init.name = 'init-position';
  init.basedOn = Screen.loaded;
  init.animates = AnimationMode.withDuration;
  init.toX = toZero ? 0 : viewport.width;
  init.toY = 0;
  init.duration = 0;
}

function initOpa (el) {
  var init = createFadeAnimation(el);
  init.name = 'init-opacity';
  init.basedOn = Screen.loaded;
  init.animates = AnimationMode.withDuration;
  init.to = 0;
  init.duration = 0;
  initPos(el, true);
}