added frontend setup

gulpfile.js

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2013, Divio AG
+ * Licensed under BSD
+ * http://github.com/divio/djangocms-boilerplate-webpack
+ */
+
+// INFO:
+// - The minimatch/graceful-fs warnings are from gulp, needs upgrade to 4.0 once released.
+
+// #############################################################################
+// IMPORTS
+const argv = require('minimist')(process.argv.slice(2));
+const gulp = require('gulp');
+
+// #############################################################################
+// SETTINGS
+const PROJECT_ROOT = __dirname;
+const PROJECT_STATIC = '/djangocms_bootstrap4/static/djangocms_bootstrap4/'
+const PROJECT_PATH = {
+    css: PROJECT_ROOT + PROJECT_STATIC + '/css',
+    js: PROJECT_ROOT + PROJECT_STATIC + '/js',
+    sprites: PROJECT_ROOT + PROJECT_STATIC + '/sprites',
+    sass: PROJECT_ROOT + '/private/sass',
+    webpack: PROJECT_ROOT + '/private/js',
+    svg: PROJECT_ROOT + '/private/svg',
+};
+const PROJECT_PATTERNS = {
+    css: [
+        PROJECT_PATH.css + '/*base*.css',
+    ],
+    js: [
+        '*.js',
+        './tools/tasks/**/*.js',
+        PROJECT_PATH.webpack + '*.config.js',
+        PROJECT_PATH.webpack + '/**/*.js',
+        '!' + PROJECT_PATH.webpack + '/*.min.js',
+        '!' + PROJECT_PATH.webpack + '/**/*.min.js',
+    ],
+    sass: [
+        PROJECT_PATH.sass + '/**/*.{scss,sass}',
+        '!' + PROJECT_PATH.sass + '/libs/_svgsprite.scss',
+    ],
+    svg: {
+        icons: [PROJECT_PATH.svg + '/**/*.svg'],
+    },
+};
+
+/**
+ * Generic utility to import gulp tasks and pass options to them
+ *
+ * @param {String} id - task name
+ * @param {Object} [extra] - optional options to pass
+ * @returns {Function} - task definition
+ */
+function task(id, extra) {
+    return require('./tools/tasks/' + id)(
+        gulp,
+        Object.assign(
+            {
+                PROJECT_ROOT: PROJECT_ROOT,
+                PROJECT_PATH: PROJECT_PATH,
+                PROJECT_PATTERNS: PROJECT_PATTERNS,
+                argv: argv,
+            },
+            extra
+        )
+    );
+}
+
+
+// #############################################################################
+// TASKS
+gulp.task('sass', task('sass'));
+gulp.task('webpack', task('webpack', { watch: true }));
+gulp.task('lint', task('lint'));
+gulp.task('icons', task('svg', { svg: 'icons' }));
+
+gulp.task('default', ['sass', 'webpack', 'watch']);
+
+gulp.task('watch', function () {
+    gulp.start('webpack');
+    gulp.watch(PROJECT_PATTERNS.sass, ['sass']);
+    gulp.watch(PROJECT_PATTERNS.js, ['lint']);
+});

private/js/.babelrc

@@ -0,0 +1,15 @@
+{
+    "presets": [
+        ["env", {
+            "modules": false
+        }]
+    ],
+    "plugins": ["transform-runtime"],
+    "env": {
+        "production": {
+            "plugins": [
+                "lodash"
+            ]
+        }
+    }
+}

private/js/base.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2013, Divio AG
+ * Licensed under BSD
+ * http://github.com/divio/djangocms-boilerplate-webpack
+ */
+
+// import 'bootstrap/js/dist/alert'

private/js/components/button-group.js

@@ -0,0 +1,109 @@
+import { iconTemplate } from 'components/templates'
+
+/**
+ * @class ButtonGroup
+ * @public
+ */
+export default class ButtonGroup {
+    /**
+     * @method constructor
+     * @param {Object} options
+     * @param {String} options.select
+     * @param {String} options.static
+     * @param {String[]} [options.icons]
+     */
+    constructor(options) {
+        this.options = options;
+        this.templates = {
+            wrapper: (cls = '', buttons = '') => `
+                <div class="bootstrap4-button-group${cls}">
+                    <div class="btn-group" role="group" aria-label="">
+                        ${buttons}
+                    </div>
+                </div>`,
+            button: (icon = '', text = '') => `
+                <button type="button" class="btn" title="${text}">
+                    ${icon}<span class="sr-only">${text}</span>
+                </button>`,
+        };
+        this.select = $(this.options.select);
+        this.selectOptions = this.select.find('option');
+
+        // initialize
+        this.select.after(
+            this.setEvents($(this.getTemplate()))
+        );
+    }
+
+    /**
+     * @method setEvents
+     * @param {jQuery} template
+     * @return {jQuery} template
+     */
+    setEvents(template) {
+        let buttons = template.find('button');
+        let select = this.select;
+        let options = this.select.find('option');
+        let index = options.index(options.filter(':selected'));
+
+        buttons.on('click', function (event) {
+            event.preventDefault();
+            // set the value on the select
+            select.find('option')
+                .prop('selected', false)
+                .eq(buttons.index(this))
+                .prop('selected', true);
+            // set icon color
+            buttons.find('.icon').removeClass('icon-white');
+            $(this).find('.icon').addClass('icon-white');
+            // set active state of the button
+            buttons.removeClass('btn-primary');
+            $(this).addClass('btn-primary');
+        });
+
+        // set initial active item
+        buttons.eq(index).trigger('click');
+
+        return template;
+    }
+
+    /**
+     * @method getTemplate
+     * @return {String} template
+     */
+    getTemplate() {
+        let cls = '';
+
+        this.select.addClass('hidden');
+
+        if (this.options.icons &&
+            this.options.icons.length !== this.selectOptions.length) {
+            throw new Error('Provided icons do not match options.');
+        } else if (this.options.icons) {
+            cls = ' bootstrap4-button-group-icons';
+        }
+
+        const buttons = this.selectOptions.toArray().reduce((btns, selectOption, index) => {
+            let text = $(selectOption).text();
+            let icon;
+
+            // prepare icon
+            if (this.options.icons) {
+                icon = iconTemplate(
+                    this.options.icons[index],
+                    this.options.static,
+                    $(selectOption).text(),
+                );
+            } else {
+                icon = text;
+            }
+            // add button
+            btns += this.templates.button(icon, text);
+
+            return btns;
+        }, '');
+
+        return this.templates.wrapper(cls, buttons);
+    }
+
+}

private/js/components/grid-layout.js

@@ -0,0 +1,101 @@
+/**
+ * @class GridLayout
+ * @public
+ */
+export default class GridLayout {
+    /**
+     * @method constructor
+     * @param {Object} options
+     * @param {Array} options.sizes
+     * @param {Array} options.row
+     * @param {String} options.reset
+     * @param {String} options.static
+     */
+    constructor(options) {
+        this.options = options;
+
+        this.setHeader();
+        this.setColumn();
+        this.setReset();
+    }
+
+    /**
+     * @method setHeader
+     */
+    setHeader() {
+        let container = $('.form-row.field-xs_col .field-box');
+        let sizes = ['size-xs', 'size-sm', 'size-md', 'size-lg', 'size-xl'];
+        let wrapper = (wrapper) => `<div class="icon-thead">${wrapper}</div>`;
+        let icons = (icon, title = '', staticPath = this.options.static) => `
+            <span class="icon icon-${icon}" title="${title}">
+                <svg role="presentation">
+                    <use xlink:href="${staticPath}djangocms_bootstrap4/sprites/icons.svg#${icon}"></use>
+                </svg>
+            </span>
+            <span class="icon-title">${title}</span>`;
+        let tmp = '';
+
+        sizes.forEach(function (item, index) {
+            tmp = icons(item, this.options.sizes[index]);
+
+            container.eq(index).prepend(
+                wrapper(tmp)
+            );
+        }, this);
+    }
+
+    /**
+     * @method setColumn
+     */
+    setColumn() {
+        let container = $(`
+            .form-row.field-xs_col,
+            .form-row.field-xs_order,
+            .form-row.field-xs_ml,
+            .form-row.field-xs_mr
+        `);
+        let template = (text = '', link = '#', staticPath = this.options.static) => `
+            <div class="field-box field-box-label">
+                <a href="${link}" target="_blank" class="d-inline-block text-right">
+                    ${text}
+                    <span class="icon icon-info icon-primary">
+                        <svg role="presentation">
+                            <use xlink:href="${staticPath}djangocms_bootstrap4/sprites/icons.svg#info"></use>
+                        </svg>
+                    </span>
+                </a>
+            </div>
+        `;
+        let links = [
+            'https://getbootstrap.com/docs/4.0/layout/grid/#grid-options',
+            'https://getbootstrap.com/docs/4.0/layout/grid/#reordering',
+            'https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns',
+            'https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns',
+        ];
+
+        container.toArray().forEach(function (item, index) {
+            $(item).prepend(template(this.options.rows[index], links[index]));
+        }, this);
+    }
+
+    /**
+     * @method setReset
+     */
+    setReset() {
+        let container = $('.form-row.field-xs_col');
+        let wrapper = container.closest('fieldset');
+        let template = (text = this.options.reset) => `
+            <a href="#" class="btn grid-reset">${text}</a>
+        `;
+        let button = $(template());
+
+        button.on('click', function (event) {
+            event.preventDefault();
+            wrapper.find('input').val('');
+            wrapper.find('input[type="checkbox"]').prop('checked', false);
+        });
+
+        container.append(button);
+    }
+
+}

private/js/components/templates.js

@@ -0,0 +1,9 @@
+/**
+ * Templates
+ */
+export const iconTemplate = (icon, staticPath = '/static/', title = '') => `
+    <span class="icon icon-${icon}" title="${title}">
+        <svg role="presentation">
+            <use xlink:href="${staticPath}djangocms_bootstrap4/sprites/icons.svg#${icon}"></use>
+        </svg>
+    </span>`;

private/js/grid.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2013, Divio AG
+ * Licensed under BSD
+ * http://github.com/divio/djangocms-boilerplate-webpack
+ */
+
+// import 'bootstrap/js/dist/alert'
+import ButtonGroup from 'components/button-group';
+import GridLayout from 'components/grid-layout'
+import { iconTemplate } from 'components/templates'
+
+
+$(() => {
+    // Row plugin
+    if ($('.djangocms-bootstrap4-row').length) {
+        let static_url = $('.djangocms-bootstrap4-row').data().static;
+
+        // Bootstrap 4 Grid Row - Vertical Alignment
+        new ButtonGroup({
+            static: static_url,
+            select: '#id_vertical_alignment',
+            icons: ['align-reset', 'flex-align-start', 'flex-align-center', 'flex-align-end'],
+        });
+        // Bootstrap 4 Grid Row - Horizontal Alignment
+        new ButtonGroup({
+            static: static_url,
+            select: '#id_horizontal_alignment',
+            icons: ['align-reset', 'flex-content-start', 'flex-content-center', 'flex-content-end',
+                'flex-content-around', 'flex-content-between'],
+        });
+
+        $('.form-row.field-create > div').before(
+            iconTemplate('columns', static_url)
+        );
+    }
+
+    // Column plugin
+    let column = $('.djangocms-bootstrap4-column');
+    if (column.length) {
+        let static_url = $('.djangocms-bootstrap4-column').data().static;
+
+        // Bootstrap 4 Grid Column - Alignment
+        new ButtonGroup({
+            select: '#id_column_alignment',
+            icons: ['align-reset', 'flex-self-start', 'flex-self-center', 'flex-self-end'],
+            static: static_url,
+        });
+        // Bootstrap 4 Grid Column - Reponsive Settings
+        new GridLayout({
+            sizes: column.data().sizes,
+            rows: column.data().rows,
+            reset: column.data().reset,
+            static: static_url,
+        });
+    }
+});