Updated dropdowns to hide after option click

Fixes #429
This commit is contained in:
Dan Brown 2017-07-22 14:02:47 +01:00
parent 2ea7e10923
commit bc067e9ad4
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 24 additions and 18 deletions

View File

@ -379,7 +379,7 @@ module.exports = function (ngApp, events) {
*/ */
$scope.discardDraft = function () { $scope.discardDraft = function () {
let url = window.baseUrl('/ajax/page/' + pageId); let url = window.baseUrl('/ajax/page/' + pageId);
$http.get(url).then((responseData) => { $http.get(url).then(responseData => {
if (autoSave) $interval.cancel(autoSave); if (autoSave) $interval.cancel(autoSave);
$scope.draftText = trans('entities.pages_editing_page'); $scope.draftText = trans('entities.pages_editing_page');
$scope.isUpdateDraft = false; $scope.isUpdateDraft = false;

View File

@ -123,25 +123,31 @@ module.exports = function (ngApp, events) {
restrict: 'A', restrict: 'A',
link: function (scope, element, attrs) { link: function (scope, element, attrs) {
const menu = element.find('ul'); const menu = element.find('ul');
element.find('[dropdown-toggle]').on('click', function () {
function hide() {
menu.hide();
menu.removeClass('anim menuIn');
}
function show() {
menu.show().addClass('anim menuIn'); menu.show().addClass('anim menuIn');
element.mouseleave(hide);
// Focus on input if exist in dropdown and hide on enter press
let inputs = menu.find('input'); let inputs = menu.find('input');
let hasInput = inputs.length > 0; if (inputs.length > 0) inputs.first().focus();
if (hasInput) { }
inputs.first().focus();
// Hide menu on option click
element.on('click', '> ul a', hide);
// Show dropdown on toggle click.
element.find('[dropdown-toggle]').on('click', show);
// Hide menu on enter press in inputs
element.on('keypress', 'input', event => { element.on('keypress', 'input', event => {
if (event.keyCode === 13) { if (event.keyCode !== 13) return true;
event.preventDefault(); event.preventDefault();
menu.hide(); hide();
menu.removeClass('anim menuIn');
return false; return false;
}
});
}
element.mouseleave(function () {
menu.hide();
menu.removeClass('anim menuIn');
});
}); });
} }
}; };