Apostrophes Lean frontend is nice, I got a huge performance boost but I have some Problems to understand how to register some of my own widget players like explained here.
For example for this one lib/modules/contact-form-widgets/public/js/always.js
It's a contact form I made after your documentation.
apos.define('contact-form-widgets', {
extend: 'apostrophe-widgets',
construct: function(self, options) {
self.play = function($widget, data, options) {
var $form = $widget.find('[data-contact-form]');
var schema = self.options.submitSchema;
var piece = _.cloneDeep(self.options.piece);
return apos.schemas.populate($form, self.schema, self.piece, function(err) {
if (err) {
alert('A problem occurred setting up the contact form.');
return;
}
enableSubmit();
});
function enableSubmit() {
$form.on('submit', function() {
submit();
return false;
});
}
function submit() {
return async.series([
convert,
submitToServer
], function(err) {
if (err) {
alert('Email settings missing, message not send!');
} else {
// Replace the form with its formerly hidden thank you message
$form.replaceWith($form.find('[data-thank-you]'));
}
});
function convert(callback) {
return apos.schemas.convert($form, schema, piece, callback);
}
function submitToServer(callback) {
return self.api('submit', piece, function(data) {
if (data.status === 'ok') {
// All is well
return callback(null);
}
// API-level error
return callback('error');
}, function(err) {
// Transport-level error
return callback(err);
});
}
}
};
}
});
So what i saw in the code of apostrophe-video
I need a file: lib/modules/contact-form-widgets/public/js/lean.js
like that:
apos.utils.widgetPlayers['apostrophe-video'] = function(el, data, options) {
// Utilize the provided `data` (properties of the widget)
// and `options` (options passed to the singleton or area for
// this widget) to enhance `el`, a DOM element representing the widget
};
But I didn't understood how to modify my always.js file according to you documentation and seek some help to understand this function further, so I can create lean players for my widgets.
This particular widget player would not be easy to move into a lean context, as you discovered. In years of Apostrophe development I don't think I've seen a widget player use so many module methods and data. I would have thought some of that original player would not work, but maybe it does (and where is async
coming from?).
You could use Apostrophe Forms, as you mention in your comment. That would probably be the best option. Alternatively you would need to replace all of the references in the player function to self
and apos
(except for what's in the browser in with lean: true
). Primarily that would mean doing most of the data work on the server. Most of that could be moved into custom route handlers.