apostrophe-column-widget

app.js

// just because its needed in template...
Array.prototype.mapToNum = function(){
    return this.map(v => parseFloat(v))
}
Array.prototype.mapWithIdx = function(){
    return this.map((v, i) => ({ v, i }))
}
Array.prototype.filterByRegExp = function(regex){
    regex = new RegExp(regex.source);
    const res = [];
    for(const v of this) if(regex.test(v)) res.push(v);
    return res
}

const path = require('path');

const apos = require('apostrophe')({
    shortName: 'football',
    modules: {
        'apostrophe-assets': {
            // Set to true for full CSS and JS minify, on staging and production servers
            minify: false
        },
        // If these are your db settings then you don't need to be explicit. If not
        // you can uncomment this and get more specific.
        'apostrophe-db': {
            uri: 'mongodb://db:27017/mydb'
        },
        'apostrophe-templates': { viewsFolderFallback: path.join(__dirname, 'views') },
        'columns-widgets': {},
        'link-widgets': {},
    },
    configureNunjucks: function(env) {
        env.addFilter('mapToNum', v => v.map(v => parseFloat(v)));
    },
});

lib ⁄ modules ⁄ columns-widgets ⁄ index.js

module.exports = {
    extend: 'apostrophe-widgets',
    label: 'Columns',
    addFields: [
        {
            name: 'scheme',
            type: 'string',
            label: 'Scheme. For example, 1-2-3 will spawn 3 columns with widths as 16.6%, 33.3%, 50%. On mobile all the columns will be full-width. There are modifiers for each numbers. "d" shows column only on desktop, "t" shows column only on tablet, "m" shows column only on mobile. For example, scheme with modifiers may be 1d-2m-3',
            required: true
        },
    ]
}

lib ⁄ modules ⁄ columns-widgets ⁄ views ⁄ widget.html

{% set columns = data.widget.scheme.split('-') %}
{% set mobile = r/^\d+m$/ %}
{% set tablet = r/^\d+t$/ %}
{% set desktop = r/^\d+d$/ %}
{% set mobileColumns = columns.filterByRegExp(r/[m\d]$/) %}
{% set tabletColumns = columns.filterByRegExp(r/[t\d]$/) %}
{% set desktopColumns = columns.filterByRegExp(r/[d\d]$/) %}
{% set num = r/^(\d+)\w?$/ %}
{% set availableWidgets = {
    'apostrophe-images': {
        size: 'full'
    },
    'apostrophe-rich-text': {
        toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink' ],
        styles: [
            { name: 'Heading', element: 'h3' },
            { name: 'Subheading', element: 'h4' },
            { name: 'Paragraph', element: 'p' }
        ]
    },
    columns: {},
    link: {}
} %}

<div class="columns-widget{% if data.user %} columns-widget-editable{% endif %}"
    style="--columns-count:{{
        columns.mapToNum() | sum
    }};--mobile-columns-count:{{
        mobileColumns.mapToNum() | sum
    }};--tablet-columns-count:{{
        tabletColumns.mapToNum() | sum
    }};--desktop-columns-count:{{
        desktopColumns.mapToNum() | sum
    }};">{%
        for column in columns.mapWithIdx()
        %}<div
            style="--columns:{{ num.exec(column.v)[1] }};"
            class="columns-widget-column{%
                if mobile.test(column.v)
            %} columns-widget-mobile-column{%
                elif tablet.test(column.v)
            %} columns-widget-tablet-column{%
                elif desktop.test(column.v)
            %} columns-widget-desktop-column{%
                endif
            %}"
        >{{
            apos.area(data.widget, 'area' + column.i, {
                widgets: availableWidgets
            })
        }}</div>{%
        endfor
%}</div>

screen.png