grapesjs_codeapps/src/index.js

Free and Open Source Web Builder Framework/SC Modification

import $ from 'cash-dom';
import Editor from './editor';
import { isElement, isFunction } from 'underscore';
import polyfills from 'utils/polyfills';
import PluginManager from './plugin_manager';

polyfills();

const lang = {
  cc: 'grape',
  absolute: 'absolutna',
  actions: 'Akcje',
  activateCode: 'Aktywuj kod rabat w tle',
  addImage: 'Dodaj obrazek',
  alt: 'Tekst zastepczy',
  background: 'Tło',
  basic: 'Podstawowe',
  block: 'Blok',
  border: 'Obramowanie',
  bottom: 'Dół',
  boxShadow: 'Cień',
  button: 'Przycisk',
  cat1: 'Szablony Pop-up',
  cat2: 'Zapisane szablony',
  cat3: 'Szablony Widget',
  cat4: 'Szablony Email',
  cat5: 'Szablony Web push',
  checkbox: 'Checkbox',
  circle: 'Okrąg',
  classes: 'Klasy',
  click: 'Kliknięcie',
  closeIcon: 'Ikona zamknięcia',
  closePopup: 'Zamknij pop-up',
  color: 'Kolor',
  column: 'Kolumna',
  columns: 'Kolumny',
  componentSettings: 'Ustawienia elementu',
  custom: 'Własne',
  customCode: 'Własny kod',
  customFont: 'Własna czcionka',
  decorations: 'Dekoracja',
  dimension: 'Rozmiar',
  display: 'Wyświelatnie',
  dropHere: 'Upuści pliki tutaj lub kliknij',
  elements: 'Elementy',
  extra: 'Dodatkowe',
  fixed: 'Pływanie',
  float: 'Wyrównanie',
  fontFamily: 'Czcionka',
  fontSize: 'Rozmiar',
  fontWeight: 'Grubość',
  form: 'Formularz',
  forms: 'Formularze',
  general: 'Ogólne',
  groupOfProducts: 'Grupa produktów',
  height: 'Wysokość',
  hover: 'Najechanie',
  image: 'Obrazek',
  inline: 'Linnia',
  inlineB: 'Pełna Linnia',
  input: 'Pole',
  label: 'Tytuł',
  layers: 'Warstwy',
  layout: 'Układ',
  left: 'Lewa',
  letterSpacing: 'Odstęp',
  lineHeight: 'Wysokość linni',
  link: 'Link',
  location: 'Lokacja',
  margin: 'Margines',
  move: 'Przenieś do koszyka i atywuj rabat',
  name: 'Nazwa',
  none: 'brak',
  padding: 'Padding',
  parity: 'Parzysty',
  perspective: 'Perspektywa',
  popupSettings: 'Ustawienia Pop-up',
  popupSettingsTitle: 'Ustaw pozycję pop-up',
  position: 'Pozycja',
  price: 'Cena',
  quantity: 'Ilość',
  radio: 'Radio',
  radius: 'zaokrąglenie',
  rectangle: 'Prostokąt',
  relative: 'relatywnie',
  required: 'Wymagane',
  right: 'Prawo',
  rotate: 'obrót',
  select: 'Wybierz',
  selected: 'Wybrane',
  selectElement: 'Wybierz element przed edycją',
  selectImage: 'Wybierz obrazek',
  settings: 'Ustawienia',
  shapes: 'Figury',
  showCode: 'Pokaż kod rabatowy',
  square: 'Kwadrat',
  state: '- Stan -',
  static: 'statyczne',
  style: 'styl',
  title: 'Tytuł',
  templates: 'Szablony',
  text: 'Tekst',
  textAlign: 'Pozycja tekstu',
  textArea: 'Obszar tekstowy',
  textShadow: 'Cień tekstu',
  top: 'Góra',
  transform: 'Przesunięcie',
  transition: 'Przejście',
  typography: 'Typografia',
  width: 'Szerokość',
  'max-width': 'Szerkość max',
  'min-height': 'Wysokość max',
  'margin-top': 'Góra',
  'margin-left': 'Lewa',
  'margin-right': 'Prawa',
  'margin-bottom': 'Dół',
  'padding-top': 'Góra',
  'padding-left': 'Lewa',
  'padding-right': 'Prawa',
  'padding-bottom': 'Dół',
  'font-family': 'Czcionka',
  'font-size': 'Rozmiar',
  'font-weight': 'Grubość',
  'letter-spacing': 'Odstęp',
  'line-height': 'Wyskość linni',
  'text-align': 'Wyrówanie',
  'text-shadow': 'Cień',
  'text-shadow-h': 'Pozycja X',
  'text-shadow-v': 'Pozycja Y',
  'text-shadow-blur': 'Zasięg',
  'text-shadow-color': 'Kolor',
  'transform-rotate-x': 'Rotacja X',
  'transform-rotate-y': 'Rotacja Y',
  'transform-rotate-z': 'Rotacja Z',
  'transform-scale-x': 'Skalowanie X',
  'transform-scale-y': 'Skalowanie Y',
  'transform-scale-z': 'Skalowanie Z',
  'background-image': 'Obrazek',
  'background-repeat': 'Powtarzanie',
  'background-position': 'Pozycja',
  'background-attachment': 'Załącznik',
  'background-size': 'Rozmiar',
  'background-color': 'Kolor',
  'transition-property': 'Animuj',
  'transition-duration': 'Czas',
  'transition-timing-function': 'Animacja',
  'border-radius': 'Zaokrąglenie',
  'border-top-left-radius': 'Lewa góra',
  'border-top-right-radius': 'Prawa góra',
  'border-bottom-left-radius': 'Lewy dół',
  'border-bottom-right-radius': 'Prawy dół',
  'border-width': 'Grubość',
  'border-style': 'Styl',
  'border-color': 'Kolor',
  'box-shadow': 'Cień',
  prop: {
    none: 'brak',
    left: 'lewa',
    right: 'prawa',
    block: 'blok',
    inline: 'w linni',
    satic: 'statyczna',
    relative: 'relatywna',
    absolute: 'absolutna',
    fixed: 'pływająca',
    'inline-block': 'w bloku'
  },
  lay: {
    body: 'Pop-up',
    'button-action': 'Button',
    svg: 'Wektor',
    text: 'Tekst',
    box: 'Element',
    row: 'Wiersz',
    cell: 'Komórka',
    image: 'Obrazek',
    form: 'Formularz',
    circle: 'Okrąg',
    rect: 'Element'
  }
};
if (!window.lang) {
  window.lang = lang;
}

module.exports = (() => {
  const plugins = new PluginManager();
  const editors = [];
  const defaultConfig = {
    // If true renders editor on init
    autorender: 1,

    // Array of plugins to init
    plugins: [],

    // Custom options for plugins
    pluginsOpts: {}
  };

  return {
    $,

    editors,

    plugins,

    // Will be replaced on build
    version: '<# VERSION #>',

    /**
     * Initialize the editor with passed options
     * @param {Object} config Configuration object
     * @param {string|HTMLElement} config.container Selector which indicates where render the editor
     * @param {Boolean} [config.autorender=true] If true, auto-render the content
     * @param {Array} [config.plugins=[]] Array of plugins to execute on start
     * @param {Object} [config.pluginsOpts={}] Custom options for plugins
     * @return {Editor} Editor instance
     * @example
     * var editor = grapesjs.init({
     *   container: '#myeditor',
     *   components: '<article class="hello">Hello world</article>',
     *   style: '.hello{color: red}',
     * })
     */
    init(config = {}) {
      const els = config.container;
      if (!els) throw new Error("'container' is required");
      config = { ...defaultConfig, ...config };
      config.el = isElement(els) ? els : document.querySelector(els);
      const editor = new Editor(config).init();

      // Load plugins
      config.plugins.forEach(pluginId => {
        let plugin = plugins.get(pluginId);
        const plgOptions = config.pluginsOpts[pluginId] || {};

        // Try to search in global context
        if (!plugin) {
          const wplg = window[pluginId];
          plugin = wplg && wplg.default ? wplg.default : wplg;
        }

        if (plugin) {
          plugin(editor, plgOptions);
        } else if (isFunction(pluginId)) {
          pluginId(editor, plgOptions);
        } else {
          console.warn(`Plugin ${pluginId} not found`);
        }
      });

      // Execute `onLoad` on modules once all plugins are initialized.
      // A plugin might have extended/added some custom type so this
      // is a good point to load stuff like components, css rules, etc.
      editor.getModel().loadOnStart();
      config.autorender && editor.render();
      editors.push(editor);

      return editor;
    }
  };
})();