mirror of
https://github.com/moodle/moodle.git
synced 2025-03-22 00:20:37 +01:00
MDL-71603 editor_atto: Wrap toolbar buttons in toolbar rows
This commit is contained in:
parent
8c0853d026
commit
90b3d575e3
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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"]});
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user