pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Update aria-fixed semantic-dropdown to fomantic master (#10096)

Browse source 
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
zeripath 2020-02-02 22:28:00 +00:00 committed by GitHub
parent bf1970d0bd
commit b4914249ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
web_src/js/semanticDropdown.js
View file

@ -1,6 +1,3 @@
/* This is a patched version of semantic.dropdown which includes a11y changes, see
https://github.com/go-gitea/gitea/pull/8638#issuecomment-549175290 */
/*! /*!
* # Fomantic-UI - Dropdown * # Fomantic-UI - Dropdown
* http://github.com/fomantic/Fomantic-UI/ * http://github.com/fomantic/Fomantic-UI/
@ -41,6 +38,10 @@ $.fn.dropdown = function(parameters) {
moduleSelector = $allModules.selector || '', moduleSelector = $allModules.selector || '',
hasTouch = ('ontouchstart' in document.documentElement), hasTouch = ('ontouchstart' in document.documentElement),
clickEvent = hasTouch
? 'touchstart'
: 'click',
time = new Date().getTime(), time = new Date().getTime(),
performance = [], performance = [],
@ -663,27 +664,10 @@ $.fn.dropdown = function(parameters) {
bind: { bind: {
events: function() { events: function() {
if(hasTouch) {
module.bind.touchEvents();
}
module.bind.keyboardEvents(); module.bind.keyboardEvents();
module.bind.inputEvents(); module.bind.inputEvents();
module.bind.mouseEvents(); module.bind.mouseEvents();
}, },
touchEvents: function() {
module.debug('Touch device detected binding additional touch events');
if( module.is.searchSelection() ) {
// do nothing special yet
}
else if( module.is.single() ) {
$module
.on('touchstart' + eventNamespace, module.event.test.toggle)
;
}
$menu
.on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)
;
},
keyboardEvents: function() { keyboardEvents: function() {
module.verbose('Binding keyboard events'); module.verbose('Binding keyboard events');
$module $module
@ -710,8 +694,8 @@ $.fn.dropdown = function(parameters) {
module.verbose('Binding mouse events'); module.verbose('Binding mouse events');
if(module.is.multiple()) { if(module.is.multiple()) {
$module $module
.on('click' + eventNamespace, selector.label, module.event.label.click) .on(clickEvent + eventNamespace, selector.label, module.event.label.click)
.on('click' + eventNamespace, selector.remove, module.event.remove.click) .on(clickEvent + eventNamespace, selector.remove, module.event.remove.click)
; ;
} }
if( module.is.searchSelection() ) { if( module.is.searchSelection() ) {
@ -720,24 +704,24 @@ $.fn.dropdown = function(parameters) {
.on('mouseup' + eventNamespace, module.event.mouseup) .on('mouseup' + eventNamespace, module.event.mouseup)
.on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown) .on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown)
.on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup) .on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup)
.on('click' + eventNamespace, selector.icon, module.event.icon.click) .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
.on('click' + eventNamespace, selector.clearIcon, module.event.clearIcon.click) .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
.on('focus' + eventNamespace, selector.search, module.event.search.focus) .on('focus' + eventNamespace, selector.search, module.event.search.focus)
.on('click' + eventNamespace, selector.search, module.event.search.focus) .on(clickEvent + eventNamespace, selector.search, module.event.search.focus)
.on('blur' + eventNamespace, selector.search, module.event.search.blur) .on('blur' + eventNamespace, selector.search, module.event.search.blur)
.on('click' + eventNamespace, selector.text, module.event.text.focus) .on(clickEvent + eventNamespace, selector.text, module.event.text.focus)
; ;
if(module.is.multiple()) { if(module.is.multiple()) {
$module $module
.on('click' + eventNamespace, module.event.click) .on(clickEvent + eventNamespace, module.event.click)
; ;
} }
} }
else { else {
if(settings.on == 'click') { if(settings.on == 'click') {
$module $module
.on('click' + eventNamespace, selector.icon, module.event.icon.click) .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
.on('click' + eventNamespace, module.event.test.toggle) .on(clickEvent + eventNamespace, module.event.test.toggle)
; ;
} }
else if(settings.on == 'hover') { else if(settings.on == 'hover') {
@ -755,7 +739,7 @@ $.fn.dropdown = function(parameters) {
.on('mousedown' + eventNamespace, module.event.mousedown) .on('mousedown' + eventNamespace, module.event.mousedown)
.on('mouseup' + eventNamespace, module.event.mouseup) .on('mouseup' + eventNamespace, module.event.mouseup)
.on('focus' + eventNamespace, module.event.focus) .on('focus' + eventNamespace, module.event.focus)
.on('click' + eventNamespace, selector.clearIcon, module.event.clearIcon.click) .on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
; ;
if(module.has.menuSearch() ) { if(module.has.menuSearch() ) {
$module $module
@ -769,7 +753,7 @@ $.fn.dropdown = function(parameters) {
} }
} }
$menu $menu
.on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter) .on((hasTouch ? 'touchstart' : 'mouseenter') + eventNamespace, selector.item, module.event.item.mouseenter)
.on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave) .on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave)
.on('click' + eventNamespace, selector.item, module.event.item.click) .on('click' + eventNamespace, selector.item, module.event.item.click)
; ;
@ -783,7 +767,7 @@ $.fn.dropdown = function(parameters) {
; ;
} }
$document $document
.on('click' + elementNamespace, module.event.test.hide) .on(clickEvent + elementNamespace, module.event.test.hide)
; ;
} }
}, },
@ -798,7 +782,7 @@ $.fn.dropdown = function(parameters) {
; ;
} }
$document $document
.off('click' + elementNamespace) .off(clickEvent + elementNamespace)
; ;
} }
}, },
@ -946,6 +930,10 @@ $.fn.dropdown = function(parameters) {
text, text,
value value
; ;
if($choice.hasClass(className.unfilterable)) {
results.push(this);
return true;
}
if(settings.match === 'both' || settings.match === 'text') { if(settings.match === 'both' || settings.match === 'text') {
text = module.remove.diacritics(String(module.get.choiceText($choice, false))); text = module.remove.diacritics(String(module.get.choiceText($choice, false)));
if(text.search(beginsWithRegExp) !== -1) { if(text.search(beginsWithRegExp) !== -1) {
@ -1084,6 +1072,7 @@ $.fn.dropdown = function(parameters) {
if(settings.allowAdditions || (hasSelected && !module.is.multiple())) { if(settings.allowAdditions || (hasSelected && !module.is.multiple())) {
module.debug('Forcing partial selection to selected item', $selectedItem); module.debug('Forcing partial selection to selected item', $selectedItem);
$selectedItem[0].click(); $selectedItem[0].click();
return;
} }
else { else {
module.remove.searchTerm(); module.remove.searchTerm();
@ -1115,7 +1104,7 @@ $.fn.dropdown = function(parameters) {
var var
value = settings.templates.deQuote(item[fields.value]), value = settings.templates.deQuote(item[fields.value]),
name = settings.templates.escape( name = settings.templates.escape(
item[fields.name] || item[fields.value], item[fields.name] || '',
settings.preserveHTML settings.preserveHTML
) )
; ;
@ -2077,6 +2066,9 @@ $.fn.dropdown = function(parameters) {
value = ( $option.attr('value') !== undefined ) value = ( $option.attr('value') !== undefined )
? $option.attr('value') ? $option.attr('value')
: name, : name,
text = ( $option.data(metadata.text) !== undefined )
? $option.data(metadata.text)
: name,
group = $option.parent('optgroup') group = $option.parent('optgroup')
; ;
if(settings.placeholder === 'auto' && value === '') { if(settings.placeholder === 'auto' && value === '') {
@ -2094,6 +2086,7 @@ $.fn.dropdown = function(parameters) {
select.values.push({ select.values.push({
name : name, name : name,
value : value, value : value,
text : text,
disabled : disabled disabled : disabled
}); });
} }
@ -2182,7 +2175,7 @@ $.fn.dropdown = function(parameters) {
return; return;
} }
if(isMultiple) { if(isMultiple) {
if($.inArray( String(optionValue), value) !== -1) { if($.inArray(module.escape.htmlEntities(String(optionValue)), value) !== -1) {
$selectedItem = ($selectedItem) $selectedItem = ($selectedItem)
? $selectedItem.add($choice) ? $selectedItem.add($choice)
: $choice : $choice
@ -2201,7 +2194,7 @@ $.fn.dropdown = function(parameters) {
optionValue = optionValue.toLowerCase(); optionValue = optionValue.toLowerCase();
value = value.toLowerCase(); value = value.toLowerCase();
} }
if( String(optionValue) == String(value)) { if(module.escape.htmlEntities(String(optionValue)) === module.escape.htmlEntities(String(value))) {
module.verbose('Found select item by value', optionValue, value); module.verbose('Found select item by value', optionValue, value);
$selectedItem = $choice; $selectedItem = $choice;
return true; return true;
@ -3175,6 +3168,7 @@ $.fn.dropdown = function(parameters) {
values = module.get.values(), values = module.get.values(),
newValue newValue
; ;
removedValue = module.escape.htmlEntities(removedValue);
if( module.has.selectInput() ) { if( module.has.selectInput() ) {
module.verbose('Input is <select> removing selected option', removedValue); module.verbose('Input is <select> removing selected option', removedValue);
newValue = module.remove.arrayValue(removedValue, values); newValue = module.remove.arrayValue(removedValue, values);
@ -3764,10 +3758,9 @@ $.fn.dropdown = function(parameters) {
}, },
htmlEntities: function(string) { htmlEntities: function(string) {
var var
badChars = /[&<>"'`]/g, badChars = /[<>"'`]/g,
shouldEscape = /[&<>"'`]/, shouldEscape = /[&<>"'`]/,
escape = { escape = {
"&": "&amp;",
"<": "&lt;", "<": "&lt;",
">": "&gt;", ">": "&gt;",
'"': "&quot;", '"': "&quot;",
@ -3779,6 +3772,7 @@ $.fn.dropdown = function(parameters) {
} }
; ;
if(shouldEscape.test(string)) { if(shouldEscape.test(string)) {
string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
return string.replace(badChars, escapedChar); return string.replace(badChars, escapedChar);
} }
return string; return string;
@ -4175,7 +4169,8 @@ $.fn.dropdown.settings = {
delete : 'delete', delete : 'delete',
header : 'header', header : 'header',
divider : 'divider', divider : 'divider',
groupIcon : '' groupIcon : '',
unfilterable : 'unfilterable'
} }
}; };
@ -4190,10 +4185,9 @@ $.fn.dropdown.settings.templates = {
return string; return string;
} }
var var
badChars = /[&<>"'`]/g, badChars = /[<>"'`]/g,
shouldEscape = /[&<>"'`]/, shouldEscape = /[&<>"'`]/,
escape = { escape = {
"&": "&amp;",
"<": "&lt;", "<": "&lt;",
">": "&gt;", ">": "&gt;",
'"': "&quot;", '"': "&quot;",
@ -4205,6 +4199,7 @@ $.fn.dropdown.settings.templates = {
} }
; ;
if(shouldEscape.test(string)) { if(shouldEscape.test(string)) {
string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
return string.replace(badChars, escapedChar); return string.replace(badChars, escapedChar);
} }
return string; return string;
@ -4260,10 +4255,10 @@ $.fn.dropdown.settings.templates = {
if(option[fields.icon]) { if(option[fields.icon]) {
html += '<i class="'+deQuote(option[fields.icon])+' '+(option[fields.iconClass] ? deQuote(option[fields.iconClass]) : className.icon)+'"></i>'; html += '<i class="'+deQuote(option[fields.icon])+' '+(option[fields.iconClass] ? deQuote(option[fields.iconClass]) : className.icon)+'"></i>';
} }
html += escape(option[fields.name] || option[fields.value],preserveHTML); html += escape(option[fields.name] || '', preserveHTML);
html += '</div>'; html += '</div>';
} else if (itemType === 'header') { } else if (itemType === 'header') {
var groupName = escape(option[fields.name],preserveHTML), var groupName = escape(option[fields.name] || '', preserveHTML),
groupIcon = option[fields.icon] ? deQuote(option[fields.icon]) : className.groupIcon groupIcon = option[fields.icon] ? deQuote(option[fields.icon]) : className.groupIcon
; ;
if(groupName !== '' || groupIcon !== '') { if(groupName !== '' || groupIcon !== '') {