MDL-71603 editor_atto: Wrap toolbar buttons in toolbar rows

This commit is contained in:
Shamim Rezaie 2021-06-28 15:48:26 +10:00
parent 8c0853d026
commit 90b3d575e3
8 changed files with 72 additions and 48 deletions

View File

@ -37,7 +37,8 @@ var PLUGINNAME = 'atto_collapse',
ATTRSHOWGROUPS = 'showgroups',
COLLAPSE = 'collapse',
COLLAPSED = 'collapsed',
GROUPS = '.atto_group';
GROUPS = '.atto_group',
ROWS = '.atto_toolbar_row';
Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
initializer: function() {
@ -62,11 +63,23 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
// Perform a toggle after all plugins have been loaded for the first time.
this.get('host').on('pluginsloaded', function(e, button) {
this._setVisibility(button);
// Add 2 rows in the toolbar.
var toolbarRows = [
Y.Node.create('<div class="atto_toolbar_row"></div>'),
Y.Node.create('<div class="atto_toolbar_row" tabindex="-1"></div>'),
];
this.toolbar.appendChild(toolbarRows[0]).insert(toolbarRows[1], 'after');
// Set the toolbar to break after the initial those displayed by default.
var firstGroup = this.toolbar.all(GROUPS).item(this.get(ATTRSHOWGROUPS));
firstGroup.insert('<div class="toolbarbreak"></div>', 'before');
// Split toolbar buttons between the 2 rows created above.
var buttonGroups = this.toolbar.all(GROUPS);
buttonGroups.slice(0, this.get(ATTRSHOWGROUPS)).each(function(buttonGroup) {
toolbarRows[0].appendChild(buttonGroup);
});
buttonGroups.slice(this.get(ATTRSHOWGROUPS)).each(function(buttonGroup) {
toolbarRows[1].appendChild(buttonGroup);
});
this._setVisibility(button);
}, this, button);
},
@ -101,15 +114,15 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
* @private
*/
_setVisibility: function(button, visibility) {
var groups = this.toolbar.all(GROUPS).slice(this.get(ATTRSHOWGROUPS));
var secondaryRow = this.toolbar.all(ROWS).item(1);
if (visibility) {
button.set('title', M.util.get_string('showfewer', PLUGINNAME));
groups.show();
secondaryRow.show();
button.setData(COLLAPSED, false);
} else {
button.set('title', M.util.get_string('showmore', PLUGINNAME));
groups.hide();
secondaryRow.hide();
button.setData(COLLAPSED, true);
}

View File

@ -1 +1 @@
YUI.add("moodle-atto_collapse-button",function(s,t){var o="atto_collapse",e="showgroups",l="collapse",a="collapsed",n=".atto_group";s.namespace("M.atto_collapse").Button=s.Base.create("button",s.M.editor_atto.EditorPlugin,[],{initializer:function(){var t,i=s.Object.size(this.get("host").get("plugins"));i<=1+parseInt(this.get(e),10)||this.toolbar.all(n).size()>this.get(e)||(t=this.addButton({icon:"icon",iconComponent:o,callback:this._toggle}),this.get("host").on("pluginsloaded",function(t,i){this._setVisibility(i),this.toolbar.all(n).item(this.get(e)).insert('<div class="toolbarbreak"></div>',"before")},this,t))},_toggle:function(t){t.preventDefault();var i=this.buttons[l];i.getData(a)?(this.highlightButtons(l),this._setVisibility(i,!0)):(this.unHighlightButtons(l),this._setVisibility(i)),this.buttons[this.name].focus()},_setVisibility:function(t,i){var s=this.toolbar.all(n).slice(this.get(e));i?(t.set("title",M.util.get_string("showfewer",o)),s.show(),t.setData(a,!1)):(t.set("title",M.util.get_string("showmore",o)),s.hide(),t.setData(a,!0))}},{ATTRS:{showgroups:{value:3}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
YUI.add("moodle-atto_collapse-button",function(s,t){var e="atto_collapse",a="showgroups",o="collapse",l="collapsed",n=".atto_group";s.namespace("M.atto_collapse").Button=s.Base.create("button",s.M.editor_atto.EditorPlugin,[],{initializer:function(){var t,i=s.Object.size(this.get("host").get("plugins"));i<=1+parseInt(this.get(a),10)||this.toolbar.all(n).size()>this.get(a)||(t=this.addButton({icon:"icon",iconComponent:e,callback:this._toggle}),this.get("host").on("pluginsloaded",function(t,i){var o,e=[s.Node.create('<div class="atto_toolbar_row"></div>'),s.Node.create('<div class="atto_toolbar_row" tabindex="-1"></div>')];this.toolbar.appendChild(e[0]).insert(e[1],"after"),(o=this.toolbar.all(n)).slice(0,this.get(a)).each(function(t){e[0].appendChild(t)}),o.slice(this.get(a)).each(function(t){e[1].appendChild(t)}),this._setVisibility(i)},this,t))},_toggle:function(t){t.preventDefault();var i=this.buttons[o];i.getData(l)?(this.highlightButtons(o),this._setVisibility(i,!0)):(this.unHighlightButtons(o),this._setVisibility(i)),this.buttons[this.name].focus()},_setVisibility:function(t,i){var o=this.toolbar.all(".atto_toolbar_row").item(1);i?(t.set("title",M.util.get_string("showfewer",e)),o.show(),t.setData(l,!1)):(t.set("title",M.util.get_string("showmore",e)),o.hide(),t.setData(l,!0))}},{ATTRS:{showgroups:{value:3}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});

View File

@ -37,7 +37,8 @@ var PLUGINNAME = 'atto_collapse',
ATTRSHOWGROUPS = 'showgroups',
COLLAPSE = 'collapse',
COLLAPSED = 'collapsed',
GROUPS = '.atto_group';
GROUPS = '.atto_group',
ROWS = '.atto_toolbar_row';
Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
initializer: function() {
@ -58,11 +59,23 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
// Perform a toggle after all plugins have been loaded for the first time.
this.get('host').on('pluginsloaded', function(e, button) {
this._setVisibility(button);
// Add 2 rows in the toolbar.
var toolbarRows = [
Y.Node.create('<div class="atto_toolbar_row"></div>'),
Y.Node.create('<div class="atto_toolbar_row" tabindex="-1"></div>'),
];
this.toolbar.appendChild(toolbarRows[0]).insert(toolbarRows[1], 'after');
// Set the toolbar to break after the initial those displayed by default.
var firstGroup = this.toolbar.all(GROUPS).item(this.get(ATTRSHOWGROUPS));
firstGroup.insert('<div class="toolbarbreak"></div>', 'before');
// Split toolbar buttons between the 2 rows created above.
var buttonGroups = this.toolbar.all(GROUPS);
buttonGroups.slice(0, this.get(ATTRSHOWGROUPS)).each(function(buttonGroup) {
toolbarRows[0].appendChild(buttonGroup);
});
buttonGroups.slice(this.get(ATTRSHOWGROUPS)).each(function(buttonGroup) {
toolbarRows[1].appendChild(buttonGroup);
});
this._setVisibility(button);
}, this, button);
},
@ -97,15 +110,15 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
* @private
*/
_setVisibility: function(button, visibility) {
var groups = this.toolbar.all(GROUPS).slice(this.get(ATTRSHOWGROUPS));
var secondaryRow = this.toolbar.all(ROWS).item(1);
if (visibility) {
button.set('title', M.util.get_string('showfewer', PLUGINNAME));
groups.show();
secondaryRow.show();
button.setData(COLLAPSED, false);
} else {
button.set('title', M.util.get_string('showmore', PLUGINNAME));
groups.hide();
secondaryRow.hide();
button.setData(COLLAPSED, true);
}

View File

@ -35,7 +35,8 @@ var PLUGINNAME = 'atto_collapse',
ATTRSHOWGROUPS = 'showgroups',
COLLAPSE = 'collapse',
COLLAPSED = 'collapsed',
GROUPS = '.atto_group';
GROUPS = '.atto_group',
ROWS = '.atto_toolbar_row';
Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
initializer: function() {
@ -60,11 +61,23 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
// Perform a toggle after all plugins have been loaded for the first time.
this.get('host').on('pluginsloaded', function(e, button) {
this._setVisibility(button);
// Add 2 rows in the toolbar.
var toolbarRows = [
Y.Node.create('<div class="atto_toolbar_row"></div>'),
Y.Node.create('<div class="atto_toolbar_row" tabindex="-1"></div>'),
];
this.toolbar.appendChild(toolbarRows[0]).insert(toolbarRows[1], 'after');
// Set the toolbar to break after the initial those displayed by default.
var firstGroup = this.toolbar.all(GROUPS).item(this.get(ATTRSHOWGROUPS));
firstGroup.insert('<div class="toolbarbreak"></div>', 'before');
// Split toolbar buttons between the 2 rows created above.
var buttonGroups = this.toolbar.all(GROUPS);
buttonGroups.slice(0, this.get(ATTRSHOWGROUPS)).each(function(buttonGroup) {
toolbarRows[0].appendChild(buttonGroup);
});
buttonGroups.slice(this.get(ATTRSHOWGROUPS)).each(function(buttonGroup) {
toolbarRows[1].appendChild(buttonGroup);
});
this._setVisibility(button);
}, this, button);
},
@ -99,15 +112,15 @@ Y.namespace('M.atto_collapse').Button = Y.Base.create('button', Y.M.editor_atto.
* @private
*/
_setVisibility: function(button, visibility) {
var groups = this.toolbar.all(GROUPS).slice(this.get(ATTRSHOWGROUPS));
var secondaryRow = this.toolbar.all(ROWS).item(1);
if (visibility) {
button.set('title', M.util.get_string('showfewer', PLUGINNAME));
groups.show();
secondaryRow.show();
button.setData(COLLAPSED, false);
} else {
button.set('title', M.util.get_string('showmore', PLUGINNAME));
groups.hide();
secondaryRow.hide();
button.setData(COLLAPSED, true);
}

View File

@ -2310,7 +2310,6 @@ EditorToolbarNav.prototype = {
*/
_findFirstFocusable: function(buttons, startAt, direction) {
var checkCount = 0,
group,
candidate,
button,
index;
@ -2340,12 +2339,8 @@ EditorToolbarNav.prototype = {
// Loop while:
// * we haven't checked every button;
// * the button is hidden or disabled;
// * the group is hidden.
if (candidate.hasAttribute('hidden') || candidate.hasAttribute('disabled')) {
continue;
}
group = candidate.ancestor('.atto_group');
if (group.hasAttribute('hidden')) {
// * the button is inside a hidden wrapper element.
if (candidate.hasAttribute('hidden') || candidate.hasAttribute('disabled') || candidate.ancestor('[hidden]')) {
continue;
}

File diff suppressed because one or more lines are too long

View File

@ -2286,7 +2286,6 @@ EditorToolbarNav.prototype = {
*/
_findFirstFocusable: function(buttons, startAt, direction) {
var checkCount = 0,
group,
candidate,
button,
index;
@ -2315,12 +2314,8 @@ EditorToolbarNav.prototype = {
// Loop while:
// * we haven't checked every button;
// * the button is hidden or disabled;
// * the group is hidden.
if (candidate.hasAttribute('hidden') || candidate.hasAttribute('disabled')) {
continue;
}
group = candidate.ancestor('.atto_group');
if (group.hasAttribute('hidden')) {
// * the button is inside a hidden wrapper element.
if (candidate.hasAttribute('hidden') || candidate.hasAttribute('disabled') || candidate.ancestor('[hidden]')) {
continue;
}

View File

@ -106,7 +106,6 @@ EditorToolbarNav.prototype = {
*/
_findFirstFocusable: function(buttons, startAt, direction) {
var checkCount = 0,
group,
candidate,
button,
index;
@ -136,12 +135,8 @@ EditorToolbarNav.prototype = {
// Loop while:
// * we haven't checked every button;
// * the button is hidden or disabled;
// * the group is hidden.
if (candidate.hasAttribute('hidden') || candidate.hasAttribute('disabled')) {
continue;
}
group = candidate.ancestor('.atto_group');
if (group.hasAttribute('hidden')) {
// * the button is inside a hidden wrapper element.
if (candidate.hasAttribute('hidden') || candidate.hasAttribute('disabled') || candidate.ancestor('[hidden]')) {
continue;
}