mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-16 03:34:33 +02:00
Code Issues Releases Wiki Activity

Improvements to dropdown submit buttons so that the menu doesn't disappear immediately when accidentally outside of it.

Browse Source
This commit is contained in:
Ryan Cramer
2016-12-23 12:24:52 -05:00
parent e14d52f722
commit ba9688af65
4 changed files with 61 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
wire/modules/Inputfield/InputfieldSubmit/dropdown.js
View File

@@ -76,7 +76,7 @@ var InputfieldSubmitDropdown = {
*/
initDropdown: function($dropdown, $mainButton) {
var $toggleButton = $("<button><i class='fa fa-angle-down'></i></button>")
var $toggleButton = $("<button type='button'><i class='fa fa-angle-down'></i></button>")
.attr('id', 'pw-dropdown-toggle-' + $mainButton.attr('id'));
$mainButton.after($toggleButton);

2
wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js vendored
View File

@@ -1 +1 @@
var InputfieldSubmitDropdown={click:function(){var e=$(this);var b=e.attr("href");var f=e.closest(".pw-button-dropdown");var d;if(!f.length){return true}d=f.data("pw-button");if(e.hasClass("pw-button-dropdown-default")){}else{var c=e.attr("data-pw-dropdown-value");var a=f.attr("data-pw-dropdown-input");if(!c){return true}if(a){var g=$(a);if(!g.length){return true}g.val(c)}else{if(b.length>1){return true}}if(d){d.attr("value",c)}}if(!d){return true}$(":input:focus").blur();d.click();return false},dropdownCnt:0,initDropdown:function(e,d){var c=$("<button><i class='fa fa-angle-down'></i></button>").attr("id","pw-dropdown-toggle-"+d.attr("id"));d.after(c);c.button();var h=null;if(e.hasClass("pw-button-dropdown-template")){h=e;e=h.clone();h.hide()}InputfieldSubmitDropdown.dropdownCnt++;var g="pw-button-dropdown-"+InputfieldSubmitDropdown.dropdownCnt;e.addClass("pw-dropdown-menu pw-dropdown-menu-rounded pw-button-dropdown-init "+g);e.data("pw-button",d);var a=d.find(".ui-button-text");var b=$.trim(a.text());var f=a.html();e.find("a").each(function(){var j=$(this);if(h){var i=j.html();if(i.indexOf("%s")>-1){j.html(i.replace("%s",b))}}j.click(InputfieldSubmitDropdown.click)});d.addClass("pw-button-dropdown-main");c.after(e).addClass("pw-dropdown-toggle-click pw-dropdown-toggle pw-button-dropdown-toggle").attr("data-pw-dropdown","."+g);if(d.hasClass("ui-priority-secondary")){c.addClass("ui-priority-secondary")}if(d.hasClass("pw-head-button")){c.addClass("pw-head-button")}c.click(function(){return false}).on("pw-button-dropdown-off",function(){$(this).siblings(".pw-button-dropdown-main").removeClass("pw-button-dropdown-main").addClass("pw-button-dropdown-disabled");$(this).hide()}).on("pw-button-dropdown-on",function(){$(this).siblings(".pw-button-dropdown-disabled").addClass("pw-button-dropdown-main").removeClass("pw-button-dropdown-disabled");$(this).show()})},init:function(b,c){if($("body").hasClass("modal")){$("ul.pw-button-dropdown").hide();return false}var a=(typeof b=="string")?$(b):b;a.each(function(){var d=$(this);if(typeof c!="undefined"){c.addClass("pw-button-dropdown-template");InputfieldSubmitDropdown.initDropdown(c,d)}else{var e=$("#"+$(this).prop("id")+"_dropdown");if(e.length){InputfieldSubmitDropdown.initDropdown(e,d)}}});return true}};
var InputfieldSubmitDropdown={click:function(){var e=$(this);var b=e.attr("href");var f=e.closest(".pw-button-dropdown");var d;if(!f.length){return true}d=f.data("pw-button");if(e.hasClass("pw-button-dropdown-default")){}else{var c=e.attr("data-pw-dropdown-value");var a=f.attr("data-pw-dropdown-input");if(!c){return true}if(a){var g=$(a);if(!g.length){return true}g.val(c)}else{if(b.length>1){return true}}if(d){d.attr("value",c)}}if(!d){return true}$(":input:focus").blur();d.click();return false},dropdownCnt:0,initDropdown:function(e,d){var c=$("<button type='button'><i class='fa fa-angle-down'></i></button>").attr("id","pw-dropdown-toggle-"+d.attr("id"));d.after(c);c.button();var h=null;if(e.hasClass("pw-button-dropdown-template")){h=e;e=h.clone();h.hide()}InputfieldSubmitDropdown.dropdownCnt++;var g="pw-button-dropdown-"+InputfieldSubmitDropdown.dropdownCnt;e.addClass("pw-dropdown-menu pw-dropdown-menu-rounded pw-button-dropdown-init "+g);e.data("pw-button",d);var a=d.find(".ui-button-text");var b=$.trim(a.text());var f=a.html();e.find("a").each(function(){var j=$(this);if(h){var i=j.html();if(i.indexOf("%s")>-1){j.html(i.replace("%s",b))}}j.click(InputfieldSubmitDropdown.click)});d.addClass("pw-button-dropdown-main");c.after(e).addClass("pw-dropdown-toggle-click pw-dropdown-toggle pw-button-dropdown-toggle").attr("data-pw-dropdown","."+g);if(d.hasClass("ui-priority-secondary")){c.addClass("ui-priority-secondary")}if(d.hasClass("pw-head-button")){c.addClass("pw-head-button")}c.click(function(){return false}).on("pw-button-dropdown-off",function(){$(this).siblings(".pw-button-dropdown-main").removeClass("pw-button-dropdown-main").addClass("pw-button-dropdown-disabled");$(this).hide()}).on("pw-button-dropdown-on",function(){$(this).siblings(".pw-button-dropdown-disabled").addClass("pw-button-dropdown-main").removeClass("pw-button-dropdown-disabled");$(this).show()})},init:function(b,c){if($("body").hasClass("modal")){$("ul.pw-button-dropdown").hide();return false}var a=(typeof b=="string")?$(b):b;a.each(function(){var d=$(this);if(typeof c!="undefined"){c.addClass("pw-button-dropdown-template");InputfieldSubmitDropdown.initDropdown(c,d)}else{var e=$("#"+$(this).prop("id")+"_dropdown");if(e.length){InputfieldSubmitDropdown.initDropdown(e,d)}}});return true}};

69
wire/templates-admin/scripts/main.js
View File

@@ -28,9 +28,21 @@ var ProcessWireAdmin = {
at: "center top"
}
}).hover(function() {
$(this).addClass('ui-state-hover');
var $a = $(this);
if($a.is('a')) {
$a.addClass('ui-state-hover');
} else {
$a.data('pw-tooltip-cursor', $a.css('cursor'));
$a.css('cursor', 'pointer');
}
$a.addClass('pw-tooltip-hover');
$a.css('cursor', 'pointer');
}, function() {
$(this).removeClass('ui-state-hover');
var $a = $(this);
$a.removeClass('pw-tooltip-hover ui-state-hover');
if(!$a.is('a')) {
$a.css('cursor', $a.data('pw-tooltip-cursor'));
}
});
},
@@ -125,12 +137,28 @@ var ProcessWireAdmin = {
});
// when the mouse leaves the dropdown menu, hide it
$ul.mouseleave(function() {
//if($a.is(":hover")) return;
//if($a.filter(":hover").length) return;
$ul.hide();
$a.removeClass('hover');
});
if($a.hasClass('pw-dropdown-toggle-click')) {
var timer = null;
function mouseleaver() {
if(timer) clearTimeout(timer);
timer = setTimeout(function() {
if($ul.filter(":hover").length || $a.filter(":hover").length) {
return;
}
$ul.fadeOut('fast');
$a.removeClass('hover pw-dropdown-toggle-open');
}, 1000);
}
$ul.mouseleave(mouseleaver);
$a.mouseleave(mouseleaver);
} else {
$ul.mouseleave(function() {
//if($a.is(":hover")) return;
//if($a.filter(":hover").length) return;
$ul.hide();
$a.removeClass('hover');
});
}
}
function mouseenterDropdownToggle(e) {
@@ -142,9 +170,28 @@ var ProcessWireAdmin = {
var timeout = $a.data('pw-dropdown-timeout');
if($a.hasClass('pw-dropdown-toggle-click')) {
if(e.type != 'mousedown') return;
if(e.type != 'mousedown') return false;
$a.removeClass('ui-state-focus');
}
if($a.hasClass('pw-dropdown-toggle-open')) {
$a.removeClass('pw-dropdown-toggle-open hover');
$ul.hide();
return;
} else {
$('.pw-dropdown-toggle-open').each(function() {
var $a = $(this);
var $ul = $a.data('pw-dropdown-ul');
$ul.mouseleave();
});
$a.addClass('pw-dropdown-toggle-open');
/*
$('body').one('click', function() {
$a.removeClass('pw-dropdown-toggle-open hover');
$ul.hide();
});
*/
}
}
if($a.hasClass('pw-dropdown-disabled')) return;
timeout = setTimeout(function() {
@@ -322,7 +369,7 @@ var ProcessWireAdmin = {
$(document)
.on('mousedown', '.pw-dropdown-toggle-click', mouseenterDropdownToggle)
.on('mouseenter', '.pw-dropdown-toggle:not(.pw-dropdown-toggle-click)', mouseenterDropdownToggle)
.on('mouseleave', '.pw-dropdown-toggle', mouseleaveDropdownToggle)
.on('mouseleave', '.pw-dropdown-toggle:not(.pw-dropdown-toggle-click)', mouseleaveDropdownToggle)
.on('mouseenter', '.pw-dropdown-menu a.pw-has-ajax-items:not(.pw-ajax-items-loaded)', mouseenterDropdownAjaxItem) // navJSON
.on('mouseleave', '.pw-dropdown-menu a.pw-has-ajax-items', function() { // navJSON
hoveredDropdownAjaxItem = null;

2
wire/templates-admin/scripts/main.min.js vendored
View File

File diff suppressed because one or more lines are too long