MDL-68722 atto_equation: fix for form elements with special characters

Element id's containing characters such as ':' would break the tab
selector in bootstrap.

This specifically affects the essay question type.
This commit is contained in:
Matt Clarkson 2020-10-23 16:06:36 +13:00
parent 3ba1073919
commit 541e90c32c
4 changed files with 56 additions and 2 deletions

View File

@ -76,6 +76,7 @@ var COMPONENTNAME = 'atto_equation',
'{{#each library}}' +
'<li class="nav-item">' +
'<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
' data-target="#{{../elementidescaped}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"' +
' role="tab" data-toggle="tab">' +
'{{get_string groupname ../component}}' +
'</a>' +
@ -688,6 +689,7 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
});
content = template({
elementid: this.get('host').get('elementid'),
elementidescaped: this._escapeQuerySelector(this.get('host').get('elementid')),
component: COMPONENTNAME,
library: library,
CSS: CSS,
@ -712,7 +714,23 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
content = preview.responseText;
}
return content;
},
/**
* Escape special characters in string used as a JS query selector
*
* @method _excapeQuerySelector
* @param {string} selector
* @returns {string}
*/
_escapeQuerySelector: function(selector) {
// Bootstrap requires that query selectors have special chars excaped.
// See: https://getbootstrap.com/docs/4.2/getting-started/javascript/#selectors
return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
}
}, {
ATTRS: {
/**

View File

@ -76,6 +76,7 @@ var COMPONENTNAME = 'atto_equation',
'{{#each library}}' +
'<li class="nav-item">' +
'<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
' data-target="#{{../elementidescaped}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"' +
' role="tab" data-toggle="tab">' +
'{{get_string groupname ../component}}' +
'</a>' +
@ -686,6 +687,7 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
});
content = template({
elementid: this.get('host').get('elementid'),
elementidescaped: this._escapeQuerySelector(this.get('host').get('elementid')),
component: COMPONENTNAME,
library: library,
CSS: CSS,
@ -710,7 +712,23 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
content = preview.responseText;
}
return content;
},
/**
* Escape special characters in string used as a JS query selector
*
* @method _excapeQuerySelector
* @param {string} selector
* @returns {string}
*/
_escapeQuerySelector: function(selector) {
// Bootstrap requires that query selectors have special chars excaped.
// See: https://getbootstrap.com/docs/4.2/getting-started/javascript/#selectors
return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
}
}, {
ATTRS: {
/**

View File

@ -74,6 +74,7 @@ var COMPONENTNAME = 'atto_equation',
'{{#each library}}' +
'<li class="nav-item">' +
'<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
' data-target="#{{../elementidescaped}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"' +
' role="tab" data-toggle="tab">' +
'{{get_string groupname ../component}}' +
'</a>' +
@ -686,6 +687,7 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
});
content = template({
elementid: this.get('host').get('elementid'),
elementidescaped: this._escapeQuerySelector(this.get('host').get('elementid')),
component: COMPONENTNAME,
library: library,
CSS: CSS,
@ -710,7 +712,23 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
content = preview.responseText;
}
return content;
},
/**
* Escape special characters in string used as a JS query selector
*
* @method _excapeQuerySelector
* @param {string} selector
* @returns {string}
*/
_escapeQuerySelector: function(selector) {
// Bootstrap requires that query selectors have special chars excaped.
// See: https://getbootstrap.com/docs/4.2/getting-started/javascript/#selectors
return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
}
}, {
ATTRS: {
/**