- /**
- * Render function for rendering the toolbar configuration.
- *
- * @param {*} model
- * Model used for the view.
- * @param {string} [value]
- * The value that was changed.
- * @param {object} changedAttributes
- * The attributes that was changed.
- *
- * @return {Drupal.ckeditor.VisualView}
- * The {@link Drupal.ckeditor.VisualView} object.
- */
- render(model, value, changedAttributes) {
- this.insertPlaceholders();
- this.applySorting();
+ // Toggle button group names.
+ let groupNamesVisible = this.model.get('groupNamesVisible');
+ // If a button was just placed in the active toolbar, ensure that the
+ // button group names are visible.
+ if (
+ changedAttributes &&
+ changedAttributes.changes &&
+ changedAttributes.changes.isDirty
+ ) {
+ this.model.set({ groupNamesVisible: true }, { silent: true });
+ groupNamesVisible = true;
+ }
+ this.$el
+ .find('[data-toolbar="active"]')
+ .toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
+ this.$el
+ .find('.ckeditor-groupnames-toggle')
+ .text(
+ groupNamesVisible
+ ? Drupal.t('Hide group names')
+ : Drupal.t('Show group names'),
+ )
+ .attr('aria-pressed', groupNamesVisible);