Hello All, I´m new to Apostrophe and am still trying to get the hang of this, however, I´m currently stuck on what seems to be a simple issue, but I can’t find a concrete example of how to solve it.
Basically: I have nested widgets. The inner widgets either won’t persist after a page reload, or I will get a “You were not able to take control of the document”
I read here that the there needs to be a schema…but i get this error whether I use a singleton or a area with widgets.
I’ll share some extracts:
lib/modules/section-widgets/index.js
var _ = require('lodash');
module.exports = {
extend: 'apostrophe-widgets',
name: 'section',
label: 'Section',
contextualOnly: false,
beforeConstruct: function(self, options) {
options.addFields=[ { /* stuff */}].concat(options.addFields || []);
options.arrangeFields = _.merge([ /*stuff*/],
options.arrangeFields || []);
}
}
lib/modules/section-widgets/views/widget.html
{#{ stuff }#}
{% if data.widget.contentType == 'centered-title' %}
<div class="text-center">
<div class="container-fluid">
{{ apos.singleton(data.widget, 'sectionCenteredTitle',
'apostrophe-rich-text', {
toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink'],
styles: [ { name: 'Header', element: 'h2' } ]
}) }}
</div>
</div>
{% else %}
<div class="container-fluid">
<div class="row">
{% for i in range(0, data.widget.columnCount) -%}
<div class="col col-lg-{{ data.widget.responsiveDesktop }} col-md-{{ data.widget.responsiveTablet }} col-xs-{{ data.widget.responsiveMobile }}">
{{
apos.area(data.widget, 'sectioncontent', {
widgets: {
'apostrophe-rich-text': {
toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink'],
styles: [ { name: 'Header', element: 'h2' }]
},
'apostrophe-images': {
size: 'full',
controls: {movable: true, position: 'bottom-right' }
},
'map': {},
'button':{}
}
})
}}
</div>
{%- endfor %}
</div>
</div>
{% endif %}
section is being invoked from another page as:
{{ apos.area(data.page, 'blankSection', {
widgets: {
'section': {}
...
}
}) }}
Any thoughts?