Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Feb 2, 2020
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8616a5
Update aria-fixed semantic-dropdown to fomantic master
zeripath Feb 1, 2020
e787cc8
Merge branch 'master' into update-semantic-dropdown
techknowlogick Feb 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 38 additions & 43 deletions web_src/js/semanticDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
* http://github.com/fomantic/Fomantic-UI/
Expand Down Expand Up @@ -41,6 +38,10 @@ $.fn.dropdown = function(parameters) {
moduleSelector = $allModules.selector || '',

hasTouch = ('ontouchstart' in document.documentElement),
clickEvent = hasTouch
? 'touchstart'
: 'click',

time = new Date().getTime(),
performance = [],

Expand Down Expand Up @@ -663,27 +664,10 @@ $.fn.dropdown = function(parameters) {

bind: {
events: function() {
if(hasTouch) {
module.bind.touchEvents();
}
module.bind.keyboardEvents();
module.bind.inputEvents();
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() {
module.verbose('Binding keyboard events');
$module
Expand All @@ -710,8 +694,8 @@ $.fn.dropdown = function(parameters) {
module.verbose('Binding mouse events');
if(module.is.multiple()) {
$module
.on('click' + eventNamespace, selector.label, module.event.label.click)
.on('click' + eventNamespace, selector.remove, module.event.remove.click)
.on(clickEvent + eventNamespace, selector.label, module.event.label.click)
.on(clickEvent + eventNamespace, selector.remove, module.event.remove.click)
;
}
if( module.is.searchSelection() ) {
Expand All @@ -720,24 +704,24 @@ $.fn.dropdown = function(parameters) {
.on('mouseup' + eventNamespace, module.event.mouseup)
.on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown)
.on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup)
.on('click' + eventNamespace, selector.icon, module.event.icon.click)
.on('click' + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
.on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
.on(clickEvent + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
.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('click' + eventNamespace, selector.text, module.event.text.focus)
.on(clickEvent + eventNamespace, selector.text, module.event.text.focus)
;
if(module.is.multiple()) {
$module
.on('click' + eventNamespace, module.event.click)
.on(clickEvent + eventNamespace, module.event.click)
;
}
}
else {
if(settings.on == 'click') {
$module
.on('click' + eventNamespace, selector.icon, module.event.icon.click)
.on('click' + eventNamespace, module.event.test.toggle)
.on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
.on(clickEvent + eventNamespace, module.event.test.toggle)
;
}
else if(settings.on == 'hover') {
Expand All @@ -755,7 +739,7 @@ $.fn.dropdown = function(parameters) {
.on('mousedown' + eventNamespace, module.event.mousedown)
.on('mouseup' + eventNamespace, module.event.mouseup)
.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() ) {
$module
Expand All @@ -769,7 +753,7 @@ $.fn.dropdown = function(parameters) {
}
}
$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('click' + eventNamespace, selector.item, module.event.item.click)
;
Expand All @@ -783,7 +767,7 @@ $.fn.dropdown = function(parameters) {
;
}
$document
.on('click' + elementNamespace, module.event.test.hide)
.on(clickEvent + elementNamespace, module.event.test.hide)
;
}
},
Expand All @@ -798,7 +782,7 @@ $.fn.dropdown = function(parameters) {
;
}
$document
.off('click' + elementNamespace)
.off(clickEvent + elementNamespace)
;
}
},
Expand Down Expand Up @@ -946,6 +930,10 @@ $.fn.dropdown = function(parameters) {
text,
value
;
if($choice.hasClass(className.unfilterable)) {
results.push(this);
return true;
}
if(settings.match === 'both' || settings.match === 'text') {
text = module.remove.diacritics(String(module.get.choiceText($choice, false)));
if(text.search(beginsWithRegExp) !== -1) {
Expand Down Expand Up @@ -1084,6 +1072,7 @@ $.fn.dropdown = function(parameters) {
if(settings.allowAdditions || (hasSelected && !module.is.multiple())) {
module.debug('Forcing partial selection to selected item', $selectedItem);
$selectedItem[0].click();
return;
}
else {
module.remove.searchTerm();
Expand Down Expand Up @@ -1115,7 +1104,7 @@ $.fn.dropdown = function(parameters) {
var
value = settings.templates.deQuote(item[fields.value]),
name = settings.templates.escape(
item[fields.name] || item[fields.value],
item[fields.name] || '',
settings.preserveHTML
)
;
Expand Down Expand Up @@ -2077,6 +2066,9 @@ $.fn.dropdown = function(parameters) {
value = ( $option.attr('value') !== undefined )
? $option.attr('value')
: name,
text = ( $option.data(metadata.text) !== undefined )
? $option.data(metadata.text)
: name,
group = $option.parent('optgroup')
;
if(settings.placeholder === 'auto' && value === '') {
Expand All @@ -2094,6 +2086,7 @@ $.fn.dropdown = function(parameters) {
select.values.push({
name : name,
value : value,
text : text,
disabled : disabled
});
}
Expand Down Expand Up @@ -2182,7 +2175,7 @@ $.fn.dropdown = function(parameters) {
return;
}
if(isMultiple) {
if($.inArray( String(optionValue), value) !== -1) {
if($.inArray(module.escape.htmlEntities(String(optionValue)), value) !== -1) {
$selectedItem = ($selectedItem)
? $selectedItem.add($choice)
: $choice
Expand All @@ -2201,7 +2194,7 @@ $.fn.dropdown = function(parameters) {
optionValue = optionValue.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);
$selectedItem = $choice;
return true;
Expand Down Expand Up @@ -3175,6 +3168,7 @@ $.fn.dropdown = function(parameters) {
values = module.get.values(),
newValue
;
removedValue = module.escape.htmlEntities(removedValue);
if( module.has.selectInput() ) {
module.verbose('Input is <select> removing selected option', removedValue);
newValue = module.remove.arrayValue(removedValue, values);
Expand Down Expand Up @@ -3764,10 +3758,9 @@ $.fn.dropdown = function(parameters) {
},
htmlEntities: function(string) {
var
badChars = /[&<>"'`]/g,
badChars = /[<>"'`]/g,
shouldEscape = /[&<>"'`]/,
escape = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
Expand All @@ -3779,6 +3772,7 @@ $.fn.dropdown = function(parameters) {
}
;
if(shouldEscape.test(string)) {
string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
return string.replace(badChars, escapedChar);
}
return string;
Expand Down Expand Up @@ -4175,7 +4169,8 @@ $.fn.dropdown.settings = {
delete : 'delete',
header : 'header',
divider : 'divider',
groupIcon : ''
groupIcon : '',
unfilterable : 'unfilterable'
}

};
Expand All @@ -4190,10 +4185,9 @@ $.fn.dropdown.settings.templates = {
return string;
}
var
badChars = /[&<>"'`]/g,
badChars = /[<>"'`]/g,
shouldEscape = /[&<>"'`]/,
escape = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
Expand All @@ -4205,6 +4199,7 @@ $.fn.dropdown.settings.templates = {
}
;
if(shouldEscape.test(string)) {
string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
return string.replace(badChars, escapedChar);
}
return string;
Expand Down Expand Up @@ -4260,10 +4255,10 @@ $.fn.dropdown.settings.templates = {
if(option[fields.icon]) {
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>';
} 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
;
if(groupName !== '' || groupIcon !== '') {
Expand Down