kk-webpack-base--config/src/twig/config-pimcore.js

Webpack config for kk-webpack-base

const { lorem } = require('./common-functions');

const editableBase = {
  isEmpty(empty = false) {
    return empty;
  },
};

exports.functions = {
  pimcore_image(id = null, options = {}) {
    if (id === null) {
      return '';
    }
    const height = 'height' in options ? options.height : 600;
    const width = 'width' in options ? options.width : 800;

    const image = `<img src="https://picsum.photos/seed/${id}/${width}/${height}" />`;

    return {
      ...editableBase,
      toString() {
        return image;
      },
    };
  },
  pimcore_headline(id = null, options = {}) {
    if (id === null) {
      return '';
    }
    const classes = [];
    const placeholder = options.placeholder ? options.placeholder : 'Headline';
    const headlineSeo = options.default?.headlineSeo
      ? options.default.headlineSeo
      : 'h3';
    options.default?.headlineVisual
      ? classes.push(options.default.headlineVisual)
      : null;
    options.headlineClass ? classes.push(options.headlineClass) : null;
    const classesAttr =
      classes.length > 0 ? ` class="${classes.join(' ')}"` : '';

    const headline = `<${headlineSeo}${classesAttr}>${placeholder}</${headlineSeo}>`;

    return {
      ...editableBase,
      toString() {
        return headline;
      },
    };
  },
  pimcore_input(id = null, options = {}) {
    if (id === null) {
      return '';
    }
    const placeholder = options.placeholder
      ? options.placeholder
      : lorem(25, false);
    return {
      ...editableBase,
      toString() {
        return placeholder;
      },
    };
  },
  pimcore_textarea(id = null, options = {}) {
    if (id === null) {
      return '';
    }
    const placeholder = options.placeholder ? options.placeholder : lorem(150);
    return {
      ...editableBase,
      toString() {
        return placeholder;
      },
    };
  },
  pimcore_wysiwyg(id = null, options = {}) {
    if (id === null) {
      return '';
    }
    const placeholder = options.placeholder
      ? options.placeholder
      : `
      <h4>${lorem(20, false)}</h4>
      <p>${lorem(50, false)}</p>
      <ol>
        <li>${lorem(10, false)}</li>
        <li>${lorem(5, false)}</li>
        <li>
          ${lorem(15, false)}
          <ul>
            <li>${lorem(10, false)}</li>
            <li>${lorem(5, false)}</li>
          </ul>
        </li>
        <li>${lorem(5, false)}</li>
      </ol>
      <h5>${lorem(30, false)}</h5>
      <p>${lorem(90, false)} <a href="#">${lorem(15)}</a> ${lorem(40)}</p>

    `;
    return {
      ...editableBase,
      toString() {
        return placeholder;
      },
    };
  },
  pimcore_select() {
    return null;
  },
  pimcore_block(name, options) {
    const opt = {
      default: 5,
      limit: 99,
      ...options
    };
    const iterator = opt.limit < opt.default ? opt.limit : opt.default;
    return {
      iterator: [...Array(iterator).keys()]
    }
  },
  has(editable) {
    return !!editable;
  },
};