L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'MDL-71669-311' of git://github.com/junpataleta/moodle into MOODLE_311_STABLE

Browse Source
This commit is contained in:
Andrew Nicols
2021-06-23 14:07:13 +08:00
parent 0cc154a14c 335e628e27
commit e57e76096f
15 changed files with 421 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/atto/amd/build/events.min.js
Vendored
+2
View File
@@ -0,0 +1,2 @@
define ("editor_atto/events",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.notifyButtonHighlightToggled=a.eventTypes=void 0;var b={attoButtonHighlightToggled:"editor_atto/attoButtonHighlightToggled"};a.eventTypes=b;a.notifyButtonHighlightToggled=function notifyButtonHighlightToggled(a,c,d){var e=new CustomEvent(b.attoButtonHighlightToggled,{bubbles:!0,cancelable:!1,composed:!1,detail:{buttonName:c,highlight:d}}),f=a||document;f.dispatchEvent(e);return e}});
//# sourceMappingURL=events.min.js.map
lib/editor/atto/amd/build/events.min.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/events.js"],"names":["eventTypes","attoButtonHighlightToggled","notifyButtonHighlightToggled","attoButton","buttonName","highlight","customEvent","CustomEvent","bubbles","cancelable","composed","detail","container","document","dispatchEvent"],"mappings":"sKA6BO,GAAMA,CAAAA,CAAU,CAAG,CAWtBC,0BAA0B,CAAE,wCAXN,CAAnB,C,8CAwBqC,QAA/BC,CAAAA,4BAA+B,CAACC,CAAD,CAAaC,CAAb,CAAyBC,CAAzB,CAAuC,IAMzEC,CAAAA,CAAW,CAAG,GAAIC,CAAAA,WAAJ,CAChBP,CAAU,CAACC,0BADK,CAEhB,CACIO,OAAO,GADX,CAEIC,UAAU,GAFd,CAGIC,QAAQ,GAHZ,CAIIC,MAAM,CAXC,CACXP,UAAU,CAAVA,CADW,CAEXC,SAAS,CAATA,CAFW,CAOX,CAFgB,CAN2D,CAgBzEO,CAAS,CAAGT,CAAU,EAAIU,QAhB+C,CAiB/ED,CAAS,CAACE,aAAV,CAAwBR,CAAxB,EAEA,MAAOA,CAAAA,CACV,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/ //\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Javascript events for the `editor_atto` plugin.\n *\n * @module editor_atto/events\n * @copyright 2021 Jun Pataleta <[email protected]>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n * @since 3.10.5\n */\n\n/**\n * Events for the `editor_atto` plugin.\n *\n * @constant\n * @property {String} attoButtonHighlightToggled See {@link event:attoButtonHighlightToggled}\n */\nexport const eventTypes = {\n /**\n * An event triggered when a toolbar button's highlight gets toggled.\n *\n * @event attoButtonHighlightToggled\n * @type {CustomEvent}\n * @property {HTMLElement} target The button which had its highlight toggled.\n * @property {object} detail\n * @property {String} detail.buttonName The name of the Atto button that has had its highlight toggled.\n * @property {Boolean} detail.highlight True when the button was highlighted. False, otherwise.\n */\n attoButtonHighlightToggled: 'editor_atto/attoButtonHighlightToggled',\n};\n\n/**\n * Trigger an event to indicate that a button's highlight was toggled.\n *\n * @method notifyButtonHighlightToggled\n * @returns {CustomEvent}\n * @fires attoButtonHighlightToggled\n * @param {HTMLElement} attoButton The button object.\n * @param {String} buttonName The button name.\n * @param {Boolean} highlight True when the button was highlighted. False, otherwise.\n */\nexport const notifyButtonHighlightToggled = (attoButton, buttonName, highlight) => {\n const detail = {\n buttonName,\n highlight,\n };\n\n const customEvent = new CustomEvent(\n eventTypes.attoButtonHighlightToggled,\n {\n bubbles: true,\n cancelable: false,\n composed: false,\n detail,\n }\n );\n\n const container = attoButton || document;\n container.dispatchEvent(customEvent);\n\n return customEvent;\n};\n"],"file":"events.min.js"}
lib/editor/atto/amd/src/events.js
+73
View File
@@ -0,0 +1,73 @@
// This file is part of Moodle - http://moodle.org/ //
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* Javascript events for the `editor_atto` plugin.
*
* @module editor_atto/events
* @copyright 2021 Jun Pataleta <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
* @since 3.10.5
*/
/**
* Events for the `editor_atto` plugin.
*
* @constant
* @property {String} attoButtonHighlightToggled See {@link event:attoButtonHighlightToggled}
*/
export const eventTypes = {
/**
* An event triggered when a toolbar button's highlight gets toggled.
*
* @event attoButtonHighlightToggled
* @type {CustomEvent}
* @property {HTMLElement} target The button which had its highlight toggled.
* @property {object} detail
* @property {String} detail.buttonName The name of the Atto button that has had its highlight toggled.
* @property {Boolean} detail.highlight True when the button was highlighted. False, otherwise.
*/
attoButtonHighlightToggled: 'editor_atto/attoButtonHighlightToggled',
};
/**
* Trigger an event to indicate that a button's highlight was toggled.
*
* @method notifyButtonHighlightToggled
* @returns {CustomEvent}
* @fires attoButtonHighlightToggled
* @param {HTMLElement} attoButton The button object.
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
*/
export const notifyButtonHighlightToggled = (attoButton, buttonName, highlight) => {
const detail = {
buttonName,
highlight,
};
const customEvent = new CustomEvent(
eventTypes.attoButtonHighlightToggled,
{
bubbles: true,
cancelable: false,
composed: false,
detail,
}
);
attoButton.dispatchEvent(customEvent);
return customEvent;
};
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
Vendored
+48 -4
View File
@@ -293,11 +293,20 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
_menuOptions: null,
initializer: function() {
this.addButton({
var button = this.addButton({
icon: 'e/table',
callback: this._displayTableEditor,
tags: 'table'
});
// Listen for toggled highlighting.
require(['editor_atto/events'], function(attoEvents) {
var domButton = button.getDOMNode();
domButton.addEventListener(attoEvents.eventTypes.attoButtonHighlightToggled, function(e) {
this._setAriaAttributes(e.detail.buttonName, e.detail.highlight);
}.bind(this));
}.bind(this));
// Disable mozilla table controls.
if (Y.UA.gecko) {
document.execCommand("enableInlineTableEditing", false, false);
@@ -305,6 +314,30 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Sets the appropriate ARIA attributes for the table button when it switches roles between a button and a menu button.
*
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
* @private
*/
_setAriaAttributes: function(buttonName, highlight) {
var menuButton = this.buttons[buttonName];
if (menuButton) {
if (highlight) {
// This button becomes a menu button. Add appropriate ARIA attributes.
var id = menuButton.getAttribute('id');
menuButton.setAttribute('aria-haspopup', true);
menuButton.setAttribute('aria-controls', id + '_menu');
menuButton.setAttribute('aria-expanded', true);
} else {
menuButton.removeAttribute('aria-haspopup');
menuButton.removeAttribute('aria-controls');
menuButton.removeAttribute('aria-expanded');
}
}
},
/**
* Display the table tool.
*
@@ -343,10 +376,19 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_displayTableEditor: function(e) {
var cell = this._getSuitableTableCell();
var menuButton = e.currentTarget.ancestor('button', true);
if (cell) {
var id = menuButton.getAttribute('id');
// Indicate that the menu is expanded.
menuButton.setAttribute('aria-expanded', true);
// Add the cell to the EventFacade to save duplication in when showing the menu.
e.tableCell = cell;
return this._showTableMenu(e);
return this._showTableMenu(e, id);
} else {
// Dialog mode. Remove aria-expanded attribute.
menuButton.removeAttribute('aria-expanded');
}
return this._displayDialogue(e);
},
@@ -815,9 +857,10 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*
* @method _showTableMenu
* @param {EventFacade} e
* @param {String} buttonId The ID of the menu button associated with this menu.
* @private
*/
_showTableMenu: function(e) {
_showTableMenu: function(e, buttonId) {
e.preventDefault();
var boundingBox;
@@ -873,7 +916,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
];
this._contextMenu = new Y.M.editor_atto.Menu({
items: this._menuOptions
items: this._menuOptions,
buttonId: buttonId
});
// Add event handlers for table control menus.
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
Vendored
+48 -4
View File
@@ -293,11 +293,20 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
_menuOptions: null,
initializer: function() {
this.addButton({
var button = this.addButton({
icon: 'e/table',
callback: this._displayTableEditor,
tags: 'table'
});
// Listen for toggled highlighting.
require(['editor_atto/events'], function(attoEvents) {
var domButton = button.getDOMNode();
domButton.addEventListener(attoEvents.eventTypes.attoButtonHighlightToggled, function(e) {
this._setAriaAttributes(e.detail.buttonName, e.detail.highlight);
}.bind(this));
}.bind(this));
// Disable mozilla table controls.
if (Y.UA.gecko) {
document.execCommand("enableInlineTableEditing", false, false);
@@ -305,6 +314,30 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Sets the appropriate ARIA attributes for the table button when it switches roles between a button and a menu button.
*
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
* @private
*/
_setAriaAttributes: function(buttonName, highlight) {
var menuButton = this.buttons[buttonName];
if (menuButton) {
if (highlight) {
// This button becomes a menu button. Add appropriate ARIA attributes.
var id = menuButton.getAttribute('id');
menuButton.setAttribute('aria-haspopup', true);
menuButton.setAttribute('aria-controls', id + '_menu');
menuButton.setAttribute('aria-expanded', true);
} else {
menuButton.removeAttribute('aria-haspopup');
menuButton.removeAttribute('aria-controls');
menuButton.removeAttribute('aria-expanded');
}
}
},
/**
* Display the table tool.
*
@@ -343,10 +376,19 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_displayTableEditor: function(e) {
var cell = this._getSuitableTableCell();
var menuButton = e.currentTarget.ancestor('button', true);
if (cell) {
var id = menuButton.getAttribute('id');
// Indicate that the menu is expanded.
menuButton.setAttribute('aria-expanded', true);
// Add the cell to the EventFacade to save duplication in when showing the menu.
e.tableCell = cell;
return this._showTableMenu(e);
return this._showTableMenu(e, id);
} else {
// Dialog mode. Remove aria-expanded attribute.
menuButton.removeAttribute('aria-expanded');
}
return this._displayDialogue(e);
},
@@ -815,9 +857,10 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*
* @method _showTableMenu
* @param {EventFacade} e
* @param {String} buttonId The ID of the menu button associated with this menu.
* @private
*/
_showTableMenu: function(e) {
_showTableMenu: function(e, buttonId) {
e.preventDefault();
var boundingBox;
@@ -873,7 +916,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
];
this._contextMenu = new Y.M.editor_atto.Menu({
items: this._menuOptions
items: this._menuOptions,
buttonId: buttonId
});
// Add event handlers for table control menus.
lib/editor/atto/plugins/table/yui/src/button/js/button.js
Vendored
+48 -4
View File
@@ -291,11 +291,20 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
_menuOptions: null,
initializer: function() {
this.addButton({
var button = this.addButton({
icon: 'e/table',
callback: this._displayTableEditor,
tags: 'table'
});
// Listen for toggled highlighting.
require(['editor_atto/events'], function(attoEvents) {
var domButton = button.getDOMNode();
domButton.addEventListener(attoEvents.eventTypes.attoButtonHighlightToggled, function(e) {
this._setAriaAttributes(e.detail.buttonName, e.detail.highlight);
}.bind(this));
}.bind(this));
// Disable mozilla table controls.
if (Y.UA.gecko) {
document.execCommand("enableInlineTableEditing", false, false);
@@ -303,6 +312,30 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
},
/**
* Sets the appropriate ARIA attributes for the table button when it switches roles between a button and a menu button.
*
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
* @private
*/
_setAriaAttributes: function(buttonName, highlight) {
var menuButton = this.buttons[buttonName];
if (menuButton) {
if (highlight) {
// This button becomes a menu button. Add appropriate ARIA attributes.
var id = menuButton.getAttribute('id');
menuButton.setAttribute('aria-haspopup', true);
menuButton.setAttribute('aria-controls', id + '_menu');
menuButton.setAttribute('aria-expanded', true);
} else {
menuButton.removeAttribute('aria-haspopup');
menuButton.removeAttribute('aria-controls');
menuButton.removeAttribute('aria-expanded');
}
}
},
/**
* Display the table tool.
*
@@ -341,10 +374,19 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*/
_displayTableEditor: function(e) {
var cell = this._getSuitableTableCell();
var menuButton = e.currentTarget.ancestor('button', true);
if (cell) {
var id = menuButton.getAttribute('id');
// Indicate that the menu is expanded.
menuButton.setAttribute('aria-expanded', true);
// Add the cell to the EventFacade to save duplication in when showing the menu.
e.tableCell = cell;
return this._showTableMenu(e);
return this._showTableMenu(e, id);
} else {
// Dialog mode. Remove aria-expanded attribute.
menuButton.removeAttribute('aria-expanded');
}
return this._displayDialogue(e);
},
@@ -813,9 +855,10 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
*
* @method _showTableMenu
* @param {EventFacade} e
* @param {String} buttonId The ID of the menu button associated with this menu.
* @private
*/
_showTableMenu: function(e) {
_showTableMenu: function(e, buttonId) {
e.preventDefault();
var boundingBox;
@@ -871,7 +914,8 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
];
this._contextMenu = new Y.M.editor_atto.Menu({
items: this._menuOptions
items: this._menuOptions,
buttonId: buttonId
});
// Add event handlers for table control menus.
lib/editor/atto/yui/build/moodle-editor_atto-menu/moodle-editor_atto-menu-debug.js
Vendored
+31 -9
View File
@@ -29,9 +29,9 @@ var LOGNAME = 'moodle-editor_atto-menu';
var MENUDIALOGUE = '' +
'<div class="open {{config.buttonClass}} atto_menu" ' +
'style="min-width:{{config.innerOverlayWidth}};">' +
'<ul class="dropdown-menu">' +
'<ul class="dropdown-menu" role="menu" id="{{config.buttonId}}_menu" aria-labelledby="{{config.buttonId}}">' +
'{{#each config.items}}' +
'<li role="presentation" class="atto_menuentry">' +
'<li role="none" class="atto_menuentry">' +
'<a href="#" role="menuitem" data-index="{{@index}}" {{#each data}}data-{{@key}}="{{this}}"{{/each}}>' +
'{{{text}}}' +
'</a>' +
@@ -67,12 +67,19 @@ Y.extend(Menu, M.core.dialogue, {
*/
_menuHandlers: null,
/**
* The menu button that controls this menu.
*/
_menuButton: null,
initializer: function(config) {
var headertext,
var headerText,
bb;
this._menuHandlers = [];
this._menuButton = document.getElementById(config.buttonId);
// Create the actual button.
var template = Y.Handlebars.compile(MENUDIALOGUE),
menu = Y.Node.create(template({
@@ -83,14 +90,24 @@ Y.extend(Menu, M.core.dialogue, {
bb = this.get('boundingBox');
bb.addClass('editor_atto_controlmenu');
bb.addClass('editor_atto_menu');
bb.one('.moodle-dialogue-wrap')
.removeClass('moodle-dialogue-wrap')
.addClass('moodle-dialogue-content');
headertext = Y.Node.create('<h3/>')
// Get the dialogue container for this menu.
var content = bb.one('.moodle-dialogue-wrap');
content.removeClass('moodle-dialogue-wrap')
.addClass('moodle-dialogue-content');
// Remove the dialog role attribute.
content.removeAttribute('role');
// Remove aria-labelledby in the container. The aria-labelledby attribute is properly set in the menu's template.
content.removeAttribute('aria-labelledby');
// Render heading if necessary.
headerText = this.get('headerText').trim();
if (headerText) {
var heading = Y.Node.create('<h3/>')
.addClass('accesshide')
.setHTML(this.get('headerText'));
this.get('bodyContent').prepend(headertext);
.setHTML(headerText);
this.get('bodyContent').prepend(heading);
}
// Hide the header and footer node entirely.
this.headerNode.hide();
@@ -152,6 +169,11 @@ Y.extend(Menu, M.core.dialogue, {
e.preventDefault();
}
// Remove menu button's aria-expanded attribute when this menu is hidden.
if (this._menuButton) {
this._menuButton.removeAttribute('aria-expanded');
}
return Menu.superclass.hide.call(this, arguments);
},
lib/editor/atto/yui/build/moodle-editor_atto-menu/moodle-editor_atto-menu-min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
YUI.add("moodle-editor_atto-menu",function(i,e){var s='<div class="open {{config.buttonClass}} atto_menu" style="min-width:{{config.innerOverlayWidth}};"><ul class="dropdown-menu">{{#each config.items}}<li role="presentation" class="atto_menuentry"><a href="#" role="menuitem" data-index="{{@index}}" {{#each data}}data-{{@key}}="{{this}}"{{/each}}>{{{text}}}</a></li>{{/each}}</ul></div>',t=function(){t.superclass.constructor.apply(this,arguments)};i.extend(t,M.core.dialogue,{_menuHandlers:null,initializer:function(e){var t,n,o,a;this._menuHandlers=[],o=i.Handlebars.compile(s),a=i.Node.create(o({config:e})),this.set("bodyContent",a),(n=this.get("boundingBox")).addClass("editor_atto_controlmenu"),n.addClass("editor_atto_menu"),n.one(".moodle-dialogue-wrap").removeClass("moodle-dialogue-wrap").addClass("moodle-dialogue-content"),t=i.Node.create("<h3/>").addClass("accesshide").setHTML(this.get("headerText")),this.get("bodyContent").prepend(t),this.headerNode.hide(),this.footerNode.hide(),this._setupHandlers()},_setupHandlers:function(){var e=this.get("contentBox");this._menuHandlers.push(e.delegate("key",this._chooseMenuItem,"32, enter",".atto_menuentry",this),e.delegate("key",this._handleKeyboardEvent,"down:38,40",".dropdown-menu",this),e.on("focusoutside",this.hide,this),e.delegate("key",this.hide,"down:37,39,esc",".dropdown-menu",this))},_chooseMenuItem:function(e){e.target.simulate("click"),e.preventDefault()},hide:function(e){if(!0!==this.get("preventHideMenu"))return e&&e.preventDefault(),t.superclass.hide.call(this,arguments)},_handleKeyboardEvent:function(e){var t,n,o,a,i,s,d;for(e.preventDefault(),t=e.currentTarget.all('a[role="menuitem"]'),n=!1,a=1,i=o=0,s=e.target.ancestor('a[role="menuitem"]',!0);!n&&o<t.size();)t.item(o)===s?n=!0:o++;if(n){for(38===e.keyCode&&(a=-1);(o+=a)<0?o=t.size()-1:o>=t.size()&&(o=0),d=t.item(o),++i<t.size()&&d!==s&&d.hasAttribute("hidden"););d&&d.focus(),e.preventDefault(),e.stopImmediatePropagation()}}},{NAME:"menu",ATTRS:{headerText:{value:""}}}),i.Base.modifyAttrs(t,{width:{value:"auto"},hideOn:{value:[{eventName:"clickoutside"}]},extraClasses:{value:["editor_atto_menu"]},responsive:{value:!1},visible:{value:!1},center:{value:!1},closeButton:{value:!1}}),i.namespace("M.editor_atto").Menu=t},"@VERSION@",{requires:["moodle-core-notification-dialogue","node","event","event-custom"]});
YUI.add("moodle-editor_atto-menu",function(s,e){var u='<div class="open {{config.buttonClass}} atto_menu" style="min-width:{{config.innerOverlayWidth}};"><ul class="dropdown-menu" role="menu" id="{{config.buttonId}}_menu" aria-labelledby="{{config.buttonId}}">{{#each config.items}}<li role="none" class="atto_menuentry"><a href="#" role="menuitem" data-index="{{@index}}" {{#each data}}data-{{@key}}="{{this}}"{{/each}}>{{{text}}}</a></li>{{/each}}</ul></div>',t=function(){t.superclass.constructor.apply(this,arguments)};s.extend(t,M.core.dialogue,{_menuHandlers:null,_menuButton:null,initializer:function(e){var t,n,o,a,i,d;this._menuHandlers=[],this._menuButton=document.getElementById(e.buttonId),o=s.Handlebars.compile(u),a=s.Node.create(o({config:e})),this.set("bodyContent",a),(n=this.get("boundingBox")).addClass("editor_atto_controlmenu"),n.addClass("editor_atto_menu"),(i=n.one(".moodle-dialogue-wrap")).removeClass("moodle-dialogue-wrap").addClass("moodle-dialogue-content"),i.removeAttribute("role"),i.removeAttribute("aria-labelledby"),(t=this.get("headerText").trim())&&(d=s.Node.create("<h3/>").addClass("accesshide").setHTML(t),this.get("bodyContent").prepend(d)),this.headerNode.hide(),this.footerNode.hide(),this._setupHandlers()},_setupHandlers:function(){var e=this.get("contentBox");this._menuHandlers.push(e.delegate("key",this._chooseMenuItem,"32, enter",".atto_menuentry",this),e.delegate("key",this._handleKeyboardEvent,"down:38,40",".dropdown-menu",this),e.on("focusoutside",this.hide,this),e.delegate("key",this.hide,"down:37,39,esc",".dropdown-menu",this))},_chooseMenuItem:function(e){e.target.simulate("click"),e.preventDefault()},hide:function(e){if(!0!==this.get("preventHideMenu"))return e&&e.preventDefault(),this._menuButton&&this._menuButton.removeAttribute("aria-expanded"),t.superclass.hide.call(this,arguments)},_handleKeyboardEvent:function(e){var t,n,o,a,i,d,s;for(e.preventDefault(),t=e.currentTarget.all('a[role="menuitem"]'),n=!1,a=1,i=o=0,d=e.target.ancestor('a[role="menuitem"]',!0);!n&&o<t.size();)t.item(o)===d?n=!0:o++;if(n){for(38===e.keyCode&&(a=-1);(o+=a)<0?o=t.size()-1:o>=t.size()&&(o=0),s=t.item(o),++i<t.size()&&s!==d&&s.hasAttribute("hidden"););s&&s.focus(),e.preventDefault(),e.stopImmediatePropagation()}}},{NAME:"menu",ATTRS:{headerText:{value:""}}}),s.Base.modifyAttrs(t,{width:{value:"auto"},hideOn:{value:[{eventName:"clickoutside"}]},extraClasses:{value:["editor_atto_menu"]},responsive:{value:!1},visible:{value:!1},center:{value:!1},closeButton:{value:!1}}),s.namespace("M.editor_atto").Menu=t},"@VERSION@",{requires:["moodle-core-notification-dialogue","node","event","event-custom"]});
lib/editor/atto/yui/build/moodle-editor_atto-menu/moodle-editor_atto-menu.js
Vendored
+31 -9
View File
@@ -29,9 +29,9 @@ var LOGNAME = 'moodle-editor_atto-menu';
var MENUDIALOGUE = '' +
'<div class="open {{config.buttonClass}} atto_menu" ' +
'style="min-width:{{config.innerOverlayWidth}};">' +
'<ul class="dropdown-menu">' +
'<ul class="dropdown-menu" role="menu" id="{{config.buttonId}}_menu" aria-labelledby="{{config.buttonId}}">' +
'{{#each config.items}}' +
'<li role="presentation" class="atto_menuentry">' +
'<li role="none" class="atto_menuentry">' +
'<a href="#" role="menuitem" data-index="{{@index}}" {{#each data}}data-{{@key}}="{{this}}"{{/each}}>' +
'{{{text}}}' +
'</a>' +
@@ -67,12 +67,19 @@ Y.extend(Menu, M.core.dialogue, {
*/
_menuHandlers: null,
/**
* The menu button that controls this menu.
*/
_menuButton: null,
initializer: function(config) {
var headertext,
var headerText,
bb;
this._menuHandlers = [];
this._menuButton = document.getElementById(config.buttonId);
// Create the actual button.
var template = Y.Handlebars.compile(MENUDIALOGUE),
menu = Y.Node.create(template({
@@ -83,14 +90,24 @@ Y.extend(Menu, M.core.dialogue, {
bb = this.get('boundingBox');
bb.addClass('editor_atto_controlmenu');
bb.addClass('editor_atto_menu');
bb.one('.moodle-dialogue-wrap')
.removeClass('moodle-dialogue-wrap')
.addClass('moodle-dialogue-content');
headertext = Y.Node.create('<h3/>')
// Get the dialogue container for this menu.
var content = bb.one('.moodle-dialogue-wrap');
content.removeClass('moodle-dialogue-wrap')
.addClass('moodle-dialogue-content');
// Remove the dialog role attribute.
content.removeAttribute('role');
// Remove aria-labelledby in the container. The aria-labelledby attribute is properly set in the menu's template.
content.removeAttribute('aria-labelledby');
// Render heading if necessary.
headerText = this.get('headerText').trim();
if (headerText) {
var heading = Y.Node.create('<h3/>')
.addClass('accesshide')
.setHTML(this.get('headerText'));
this.get('bodyContent').prepend(headertext);
.setHTML(headerText);
this.get('bodyContent').prepend(heading);
}
// Hide the header and footer node entirely.
this.headerNode.hide();
@@ -152,6 +169,11 @@ Y.extend(Menu, M.core.dialogue, {
e.preventDefault();
}
// Remove menu button's aria-expanded attribute when this menu is hidden.
if (this._menuButton) {
this._menuButton.removeAttribute('aria-expanded');
}
return Menu.superclass.hide.call(this, arguments);
},
lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-debug.js
Vendored
+34 -4
View File
@@ -179,9 +179,11 @@ Y.namespace('M.editor_atto').EditorPlugin = EditorPlugin;
var MENUTEMPLATE = '' +
'<button class="{{buttonClass}} atto_hasmenu" ' +
'id="{{id}}" ' +
'tabindex="-1" ' +
'type="button" ' +
'title="{{title}}">' +
'title="{{title}}" ' +
'aria-haspopup="true" ' +
'aria-controls="{{id}}_menu">' +
'<span class="editor_atto_menu_icon"></span>' +
'<span class="editor_atto_menu_expand"></span>' +
'</button>';
@@ -527,13 +529,18 @@ EditorPluginButtons.prototype = {
}
// Create the actual button.
var id = 'atto_' + pluginname + '_menubutton_' + Y.stamp(this);
var template = Y.Handlebars.compile(MENUTEMPLATE);
button = Y.Node.create(template({
buttonClass: buttonClass,
config: config,
title: title
title: title,
id: id
}));
// Add this button id to the config. It will be used in the menu later.
config.buttonId = id;
window.require(['core/templates'], function(Templates) {
Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) {
button.one(CSS.MENUICON).append(iconhtml);
@@ -585,7 +592,8 @@ EditorPluginButtons.prototype = {
return;
}
if (e.currentTarget.ancestor('button', true).hasAttribute(DISABLED)) {
var menuButton = e.currentTarget.ancestor('button', true);
if (menuButton.hasAttribute(DISABLED)) {
// Exit early if the clicked button was disabled.
return;
}
@@ -627,6 +635,9 @@ EditorPluginButtons.prototype = {
// Display the menu.
menuDialogue.show();
// Indicate that the menu is expanded.
menuButton.setAttribute("aria-expanded", true);
// Position it next to the button which opened it.
menuDialogue.align(this.buttons[config.buttonName], [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]);
@@ -1024,16 +1035,35 @@ EditorPluginButtons.prototype = {
if (button) {
if (this.buttons[button]) {
this.buttons[button][method](HIGHLIGHT);
this._buttonHighlightToggled(button, highlight);
}
} else {
Y.Object.each(this.buttons, function(button) {
button[method](HIGHLIGHT);
this._buttonHighlightToggled(button, highlight);
}, this);
}
return this;
},
/**
* Fires a custom event that notifies listeners that a button's highlight has been toggled.
*
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
* @private
*/
_buttonHighlightToggled: function(buttonName, highlight) {
var toggledButton = this.buttons[buttonName];
if (toggledButton) {
// Fire an event that the button highlight was toggled.
require(['editor_atto/events'], function(attoEvents) {
attoEvents.notifyButtonHighlightToggled(toggledButton.getDOMNode(), buttonName, highlight);
});
}
},
/**
* Get the default meta key to use with keyboard events.
*
lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin-min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
lib/editor/atto/yui/build/moodle-editor_atto-plugin/moodle-editor_atto-plugin.js
Vendored
+34 -4
View File
@@ -179,9 +179,11 @@ Y.namespace('M.editor_atto').EditorPlugin = EditorPlugin;
var MENUTEMPLATE = '' +
'<button class="{{buttonClass}} atto_hasmenu" ' +
'id="{{id}}" ' +
'tabindex="-1" ' +
'type="button" ' +
'title="{{title}}">' +
'title="{{title}}" ' +
'aria-haspopup="true" ' +
'aria-controls="{{id}}_menu">' +
'<span class="editor_atto_menu_icon"></span>' +
'<span class="editor_atto_menu_expand"></span>' +
'</button>';
@@ -525,13 +527,18 @@ EditorPluginButtons.prototype = {
}
// Create the actual button.
var id = 'atto_' + pluginname + '_menubutton_' + Y.stamp(this);
var template = Y.Handlebars.compile(MENUTEMPLATE);
button = Y.Node.create(template({
buttonClass: buttonClass,
config: config,
title: title
title: title,
id: id
}));
// Add this button id to the config. It will be used in the menu later.
config.buttonId = id;
window.require(['core/templates'], function(Templates) {
Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) {
button.one(CSS.MENUICON).append(iconhtml);
@@ -583,7 +590,8 @@ EditorPluginButtons.prototype = {
return;
}
if (e.currentTarget.ancestor('button', true).hasAttribute(DISABLED)) {
var menuButton = e.currentTarget.ancestor('button', true);
if (menuButton.hasAttribute(DISABLED)) {
// Exit early if the clicked button was disabled.
return;
}
@@ -625,6 +633,9 @@ EditorPluginButtons.prototype = {
// Display the menu.
menuDialogue.show();
// Indicate that the menu is expanded.
menuButton.setAttribute("aria-expanded", true);
// Position it next to the button which opened it.
menuDialogue.align(this.buttons[config.buttonName], [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]);
@@ -1020,16 +1031,35 @@ EditorPluginButtons.prototype = {
if (button) {
if (this.buttons[button]) {
this.buttons[button][method](HIGHLIGHT);
this._buttonHighlightToggled(button, highlight);
}
} else {
Y.Object.each(this.buttons, function(button) {
button[method](HIGHLIGHT);
this._buttonHighlightToggled(button, highlight);
}, this);
}
return this;
},
/**
* Fires a custom event that notifies listeners that a button's highlight has been toggled.
*
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
* @private
*/
_buttonHighlightToggled: function(buttonName, highlight) {
var toggledButton = this.buttons[buttonName];
if (toggledButton) {
// Fire an event that the button highlight was toggled.
require(['editor_atto/events'], function(attoEvents) {
attoEvents.notifyButtonHighlightToggled(toggledButton.getDOMNode(), buttonName, highlight);
});
}
},
/**
* Get the default meta key to use with keyboard events.
*
lib/editor/atto/yui/src/editor/js/editor-plugin-buttons.js
Vendored
+34 -4
View File
@@ -29,9 +29,11 @@
var MENUTEMPLATE = '' +
'<button class="{{buttonClass}} atto_hasmenu" ' +
'id="{{id}}" ' +
'tabindex="-1" ' +
'type="button" ' +
'title="{{title}}">' +
'title="{{title}}" ' +
'aria-haspopup="true" ' +
'aria-controls="{{id}}_menu">' +
'<span class="editor_atto_menu_icon"></span>' +
'<span class="editor_atto_menu_expand"></span>' +
'</button>';
@@ -377,13 +379,18 @@ EditorPluginButtons.prototype = {
}
// Create the actual button.
var id = 'atto_' + pluginname + '_menubutton_' + Y.stamp(this);
var template = Y.Handlebars.compile(MENUTEMPLATE);
button = Y.Node.create(template({
buttonClass: buttonClass,
config: config,
title: title
title: title,
id: id
}));
// Add this button id to the config. It will be used in the menu later.
config.buttonId = id;
window.require(['core/templates'], function(Templates) {
Templates.renderPix(config.icon, config.iconComponent, title).then(function(iconhtml) {
button.one(CSS.MENUICON).append(iconhtml);
@@ -435,7 +442,8 @@ EditorPluginButtons.prototype = {
return;
}
if (e.currentTarget.ancestor('button', true).hasAttribute(DISABLED)) {
var menuButton = e.currentTarget.ancestor('button', true);
if (menuButton.hasAttribute(DISABLED)) {
// Exit early if the clicked button was disabled.
return;
}
@@ -477,6 +485,9 @@ EditorPluginButtons.prototype = {
// Display the menu.
menuDialogue.show();
// Indicate that the menu is expanded.
menuButton.setAttribute("aria-expanded", true);
// Position it next to the button which opened it.
menuDialogue.align(this.buttons[config.buttonName], [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]);
@@ -874,16 +885,35 @@ EditorPluginButtons.prototype = {
if (button) {
if (this.buttons[button]) {
this.buttons[button][method](HIGHLIGHT);
this._buttonHighlightToggled(button, highlight);
}
} else {
Y.Object.each(this.buttons, function(button) {
button[method](HIGHLIGHT);
this._buttonHighlightToggled(button, highlight);
}, this);
}
return this;
},
/**
* Fires a custom event that notifies listeners that a button's highlight has been toggled.
*
* @param {String} buttonName The button name.
* @param {Boolean} highlight True when the button was highlighted. False, otherwise.
* @private
*/
_buttonHighlightToggled: function(buttonName, highlight) {
var toggledButton = this.buttons[buttonName];
if (toggledButton) {
// Fire an event that the button highlight was toggled.
require(['editor_atto/events'], function(attoEvents) {
attoEvents.notifyButtonHighlightToggled(toggledButton.getDOMNode(), buttonName, highlight);
});
}
},
/**
* Get the default meta key to use with keyboard events.
*
lib/editor/atto/yui/src/editor/js/menu.js
Vendored
+31 -9
View File
@@ -27,9 +27,9 @@ var LOGNAME = 'moodle-editor_atto-menu';
var MENUDIALOGUE = '' +
'<div class="open {{config.buttonClass}} atto_menu" ' +
'style="min-width:{{config.innerOverlayWidth}};">' +
'<ul class="dropdown-menu">' +
'<ul class="dropdown-menu" role="menu" id="{{config.buttonId}}_menu" aria-labelledby="{{config.buttonId}}">' +
'{{#each config.items}}' +
'<li role="presentation" class="atto_menuentry">' +
'<li role="none" class="atto_menuentry">' +
'<a href="#" role="menuitem" data-index="{{@index}}" {{#each data}}data-{{@key}}="{{this}}"{{/each}}>' +
'{{{text}}}' +
'</a>' +
@@ -65,12 +65,19 @@ Y.extend(Menu, M.core.dialogue, {
*/
_menuHandlers: null,
/**
* The menu button that controls this menu.
*/
_menuButton: null,
initializer: function(config) {
var headertext,
var headerText,
bb;
this._menuHandlers = [];
this._menuButton = document.getElementById(config.buttonId);
// Create the actual button.
var template = Y.Handlebars.compile(MENUDIALOGUE),
menu = Y.Node.create(template({
@@ -81,14 +88,24 @@ Y.extend(Menu, M.core.dialogue, {
bb = this.get('boundingBox');
bb.addClass('editor_atto_controlmenu');
bb.addClass('editor_atto_menu');
bb.one('.moodle-dialogue-wrap')
.removeClass('moodle-dialogue-wrap')
.addClass('moodle-dialogue-content');
headertext = Y.Node.create('<h3/>')
// Get the dialogue container for this menu.
var content = bb.one('.moodle-dialogue-wrap');
content.removeClass('moodle-dialogue-wrap')
.addClass('moodle-dialogue-content');
// Remove the dialog role attribute.
content.removeAttribute('role');
// Remove aria-labelledby in the container. The aria-labelledby attribute is properly set in the menu's template.
content.removeAttribute('aria-labelledby');
// Render heading if necessary.
headerText = this.get('headerText').trim();
if (headerText) {
var heading = Y.Node.create('<h3/>')
.addClass('accesshide')
.setHTML(this.get('headerText'));
this.get('bodyContent').prepend(headertext);
.setHTML(headerText);
this.get('bodyContent').prepend(heading);
}
// Hide the header and footer node entirely.
this.headerNode.hide();
@@ -150,6 +167,11 @@ Y.extend(Menu, M.core.dialogue, {
e.preventDefault();
}
// Remove menu button's aria-expanded attribute when this menu is hidden.
if (this._menuButton) {
this._menuButton.removeAttribute('aria-expanded');
}
return Menu.superclass.hide.call(this, arguments);
},