Problem/Motivation
The markup for the initial state of the progress bar is inside progress-bar.html.twg:
<div id="progress" class="progress">
{% if label %}
<div class="progress__label">{{ label }}</div>
{% endif %}
<div class="progress__track"><div class="progress__bar" style="width: {{ percent }}%"></div></div>
<div class="progress__percentage">{{ percent }}%</div>
<div class="progress__description">{{ message }}</div>
</div>
The markup for each 'update' of the progress bar added as a string inside of progress.js:
this.element = $('<div class="progress" aria-live="polite"></div>').attr('id', id);
this.element.html('<div class="progress__label"> </div>' +
'<div class="progress__track"><div class="progress__bar"></div></div>' +
'<div class="progress__percentage"></div>' +
'<div class="progress__description"> </div>');
If a theme wants to change the mark up of the progress bar they must do it in two places, which is not obvious. It's also more complex and potentially dangerous to change the mark up string in the the javascript:
setProgress: function (percentage, message, label) {
if (percentage >= 0 && percentage <= 100) {
$(this.element).find('div.progress__bar').css('width', percentage + '%');
$(this.element).find('div.progress__percentage').html(percentage + '%');
}
$('div.progress__description', this.element).html(message);
$('div.progress__label', this.element).html(label);
if (this.updateCallback) {
this.updateCallback(percentage, message, this);
}
},
To update the progress bar the javascript looks for specific classes in mark up/
Proposed resolution
This is a fun excuse to experiment with Twig.js. If we loaded progress-bar.html.twig on the front-end we would cut out the maintenance burden of specifying the code in two places as well as making it easy for themes to change the mark up.
We can also use this to make the JS less dependant on these specific progress bar classes but just passing the variables through the template each time instead of search for classes in the mark up.
Remaining tasks
User interface changes
None
API changes
None?