0

I have a requirement where a user is allowed to add a single type of widget in an area which should layout in the form of a grid. The widget itself contains a value which determines its width by using bootstrap classes. Here is the widget definition

// 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
      }
    }
  ]
};

and this is the 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>

The problem is that there is a lot of markup which contains the apos-ui elements as part of the area item. And I want to make these columns part of the area wrappers markup, so that the elements can float on the page properly along with the apos-ui controls.

What happens at the moment is that the user experience is not very intuitive since the apos-ui controls just overlap over each other.

Fotis Paraskevopoulos
  • 1,001
  • 2
  • 12
  • 19

1 Answers1

1

I would recommend taking a look at extending apostrophe-areas/views/widget.html at your project level. In this template, you should have access to data.widget.grid and you would then be able to modify the widget wrapper classes with it.

Alex Gilbert
  • 143
  • 5
  • Hello Alex, this was my first attempt, but it doesn't do what I want. `apostrophe-areas/area.html` and `apostrophe-areas/widget.html` cascade. This means that if I override these two files to include `container` and `row` bootstrap classes, these will be found in all contained widgets. //widget my-widget/views/widget.html {{ apos.singleton(data.widget,'images','apostrophe-images',{edit:false})}} will cause the following hiearchy apostrophe-widget-wrapper (.container) apostrophe-widget(.row) apostrophe-widget-wrapper (.container) – Fotis Paraskevopoulos Nov 24 '16 at 16:59
  • Ah, great point. I can see how that would get complicated if you are nesting additional widgets inside of the grid widget. No other options are jumping to mind at this moment, but I'm sure there's some way that involves overriding certain core templates to achieve the behavior you're looking for. – Alex Gilbert Nov 28 '16 at 14:44