Динамическое добавление виджетов DIV в другой виджет DIV в apostrophe-cms - PullRequest
Новая
       12

Динамическое добавление виджетов DIV в другой виджет DIV в apostrophe-cms

0 голосов
/ 16 ноября 2018

Я построил два виджета в CMS Apostrophe:

Многостолбцовый виджет, к которому применен класс flexbox и который обслуживает виджет Add-column, который, в свою очередь, обслуживает расширенный текст и т. Д., Который предназначен для изгибания с любым количеством столбцов Add-Columns, вставленных в виджет Multi-Column. Проблема в том, что все становится немного прикольным. Пользовательский интерфейс редактора немного сходит с ума с горизонтальной разметкой, перетаскивание иногда дублирует и теряет контент, вы должны действительно стараться понять, что выбирается.

Есть ли какие-либо инструменты или советы по работе с этим типом макета? 

index.js for multiple-column widget
======================================
module.exports = {
extend: 'apostrophe-widgets',
label: 'Multiple Column Layout',
contextualOnly: true,
addFields: [
    {
      name: 'multiColContainer',
      type: 'area',
      label: 'Multiple Column Container',
    }
  ]
};

widget.html for multiple-column-widget
======================================
<div class="multiple-column">
  {{ apos.area(data.widget, 'multiColContainer', {
        widgets: {

    'add-column': {}
        }
    }) }}

</div>

index.js for add-column-widget
==============================
module.exports = {
extend: 'apostrophe-widgets',
label: 'Add Column',
contextualOnly: true,
addFields: [
{
  name: 'addColumn',
  type: 'area',
  label: 'Column',
}
]
};

widget.html for add-column-widget
=================================
    <div class="add-column">
    {{ apos.area(data.widget, 'addColumn', {
        widgets: {
            'apostrophe-images': {},
            'link': {},
            'apostrophe-video':{},
            'apostrophe-rich-text': {
            toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Table', 'BulletedList', 'Blockquote', 'Strike',  'Subscript', 'Superscript'],
            styles: [
                { name: 'Heading', element: 'h1' },
                { name: 'Subheading', element: 'h2' },
                { name: 'Title', element: 'h3' },
                { name: 'Small Title', element: 'h4' },
                { name: 'Paragraph', element: 'p' }
                ]
            }
        }
    }) }}
</div>

changes to site.less for displaying flex and to help out during editing
=======================================================================
.multiple-column {
  .apos-area-widgets, // proper context for logged-in user
  .apos-area { // proper context for logged-out user
  display: flex;
  justify-content: space-around;
 }

.apos-area-widget-wrapper {
   flex-grow: 1;
   flex-basis: 0;
  }

}
// try and help to identify what is what
.multiple-column {
  .apos-area-widgets{
    :hover{border:1px dashed red;}

  .add-column{
    :hover{border:1px dashed greenyellow;}
   }
 }
}
...