How to use the pro-layouts.createLayout function in pro-layouts

To help you get started, we’ve selected a few pro-layouts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wix / pro-gallery / packages / playground / src / components / Benchmarks / Benchmarks.js View on Github external
const createLayouts = layouts => {
    createLayout(layouts[0].layoutParams); //warmup
    console.time(
      `Created ${numberOfRuns} Layouts with ${numberOfImages} images. It took: `
    );
    const startTime = Date.now();
    for (let i = 0; i < numberOfRuns; i++) {
      createLayout(layouts[i].layoutParams);
    }
    const duration = Date.now() - startTime;
    console.timeEnd(
      `Created ${numberOfRuns} Layouts with ${numberOfImages} images. It took: `
    );
    return duration;
  };
github wix / pro-gallery / packages / layouts / examples / absolute.js View on Github external
itemSpacing: 20,
  allowedGroupTypes: ['1', '2v', '3v']
  //add more style params here
};
const container = {
  width: window.innerWidth,
  height: window.innerHeight
};

const layoutParams = {
  items,
  styleParams,
  container
};

const layout = createLayout(layoutParams);
const parent = document.createElement('div');
parent.id = 'root';
document.body.prepend(parent);

for (let i = 0; i < layout.items.length; i++) {
  const item = layout.items[i].scheme;
  const iDom = document.createElement('div');
  iDom.innerHTML = i;
  iDom.style.width = item.width + 'px';
  iDom.style.height = item.height + 'px';
  iDom.style.position = 'absolute';
  iDom.style.top = item.offset.top + 'px';
  iDom.style.left = item.offset.left + 'px';
  iDom.style.backgroundColor = items[i].bgColor;
  parent.prepend(iDom);
}
github wix / pro-gallery / packages / layouts / examples / relative.js View on Github external
isColumnsLayout: false,
  itemSpacing: 20
  //add more style params here
};
const container = {
  width: window.innerWidth,
  height: window.innerHeight
};

const layoutParams = {
  items,
  styleParams,
  container
};

const layout = createLayout(layoutParams);
const parent = document.createElement('div');
parent.id = 'root';
document.body.prepend(parent);
document.body.style.margin = '-' + styleParams.itemSpacing + 'px';
document.body.style.padding = 0;

for (let column, c = 0; column = layout.columns[c]; c++) {
  const cDom = document.createElement('div');
  cDom.id = 'column';
  cDom.style.width = layout.colWidth + 'px';
  cDom.style.float = 'left';
  cDom.style.position = 'relative';
  parent.prepend(cDom);

  for (let group, g = 0; group = column[g]; g++) {
    const gDom = document.createElement('div');
github wix / pro-gallery / packages / gallery / src / components / helpers / cssLayoutsHelper.js View on Github external
const cssLayouts = widths.map(width => {
      const _layoutParams = {
        ...layoutParams,
        ...{
          container: { ...layoutParams.container, galleryWidth: width, width },
        },
      };
      return createLayout(_layoutParams);
    });
    return createCssFromLayouts(galleryDomId, cssLayouts, layoutParams.styleParams, widths);

pro-layouts

MIT
Latest version published 1 month ago

Package Health Score

78 / 100
Full package analysis

Similar packages