Как сделать, чтобы обертки виджетов включали классы начальной загрузки

Question

У меня есть требование, когда пользователь может добавить один тип widget в area который должен макет в виде сетки. Сам виджет содержит значение, которое определяет его ширину с помощью bootstrap классы. Вот определение виджета

// lib/modules/grid-item-widget/index.js

module.exports={
  extend: 'apostrophe-widgets',
  label: 'Grid Item',

  addFields: [
    {
      name: 'grid',
      type: 'select',
      choices:[
        {label:'10%',value:'col-md-2'}
        ,{label:'30%',value:'col-md-3'}
        ,{label:'50%',value:'col-md-6'}
        ,{label:'70%',value:'col-md-8'}
        ,{label:'100%',value:'col-md-12'}
      ]
    },
    {
      name: 'image',
      type: 'singleton',
      label: 'Presentation Image',
      widgetType: 'apostrophe-images',
      options: {
        limit: 1
      }
    }
  ]
};

и это HTML

//lib/modules/grid-item-widget/views/widget.html

<div class="col-xs-12 col-md-{{ data.widget.grid }}">
  {{
      apos.singleton(data.widget,'image','apostrophe-images',{edit:false})
  }}
</div>

Проблема в том, что существует много разметки, которая содержит элементы apos-ui как часть элемента области. И я хочу сделать эти столбцы частью разметки упаковщиков областей, чтобы элементы могли плавно перемещаться на странице вместе с элементами управления apos-ui.

В настоящий момент происходит то, что пользовательский интерфейс не очень интуитивен, поскольку элементы управления apos-ui просто перекрывают друг друга.

Answer 1

Я бы порекомендовал взглянуть на расширение apostrophe-areas/views/widget.html на уровне вашего проекта. В этом шаблоне у вас должен быть доступ к data.widget.grid и тогда вы сможете изменить классы-обертки виджетов с ним.