UNPKG

1.06 kBJavaScriptView Raw
1'use strict';
2/**
3* builds a value for data-o-grid-colspan that will show or hide a card depending
4* @param {Object} show using o-grid breakpoints, sets up a grid colspan value to display the section (or not)
5* e.g. show: { default: true, M: false, XL: true }
6* NB if you are thinking about setting something other than 12 on n-concept section, you should wrap n-concept in something instead
7**/
8class ResponsiveGridsPresenter {
9 constructor (data) {
10 this.data = data;
11 }
12
13 /**
14 * @returns {String} string that can be used by o-grid e.g. 12 M0 XL12
15 **/
16 get responsiveGrids () {
17 if (!this.data || !this.data.show) {
18 return '';
19 }
20 const gridRules = Object.keys(this.data.show).map(breakpoint => {
21 if (breakpoint === 'default') {
22 return this.showOrHide(breakpoint);
23 } else {
24 return `${breakpoint}${this.showOrHide(breakpoint)}`;
25 }
26
27 });
28 return gridRules.join(' ');
29 }
30
31 //if true use 12, if false use 0
32 showOrHide (breakpoint) {
33 return (this.data.show[breakpoint]) ? '12': '0';
34 }
35}
36
37module.exports = ResponsiveGridsPresenter;