Mirror/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2024-11-16 08:58:30 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fixed some edge cases for popover triggering

Browse source
This commit is contained in:
n1474335 2017-08-01 19:23:30 +00:00
parent a15034b03e
commit e8e5eb9c53
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/web/HTMLOperation.js
View file

@ -50,8 +50,8 @@ HTMLOperation.prototype.toStubHtml = function(removeIcon) {
let html = "<li class='operation'"; let html = "<li class='operation'";
if (this.description) { if (this.description) {
html += " data-container='body' data-placement='auto right'\ html += " data-container='body' data-toggle='popover' data-placement='auto right'\
data-content=\"" + this.description + "\""; data-content=\"" + this.description + "\" data-html='true' data-trigger='hover'";
} }
html += ">" + this.name; html += ">" + this.name;

23
src/web/OperationsWaiter.js
View file

@ -155,9 +155,20 @@ OperationsWaiter.prototype.getSelectedOp = function(ops) {
*/ */
OperationsWaiter.prototype.opListCreate = function(e) { OperationsWaiter.prototype.opListCreate = function(e) {
this.manager.recipe.createSortableSeedList(e.target); this.manager.recipe.createSortableSeedList(e.target);
// Allows popover to gain focus for eg. pressing buttons/scrolling this.enableOpsListPopovers(e.target);
$(".operation").popover({trigger: "manual", html: true, animation: true}) };
.on("mouseenter", function () {
/**
* Sets up popovers, allowing the popover itself to gain focus which enables scrolling
* and other interactions.
*
* @param {Element} el - The element to start selecting from
*/
OperationsWaiter.prototype.enableOpsListPopovers = function(el) {
$(el).find("[data-toggle=popover]").addBack("[data-toggle=popover]")
.popover({trigger: "manual"})
.on("mouseenter", function() {
const _this = this; const _this = this;
$(this).popover("show"); $(this).popover("show");
$(".popover").on("mouseleave", function () { $(".popover").on("mouseleave", function () {
@ -165,8 +176,10 @@ OperationsWaiter.prototype.opListCreate = function(e) {
}); });
}).on("mouseleave", function () { }).on("mouseleave", function () {
const _this = this; const _this = this;
setTimeout(function () { setTimeout(function() {
if (!$(".popover:hover").length) { // Determine if the popover associated with this element is being hovered over
if ($(_this).data("bs.popover") &&
!$(_this).data("bs.popover").$tip.is(":hover")) {
$(_this).popover("hide"); $(_this).popover("hide");
} }
}, 50); }, 50);

5
src/web/RecipeWaiter.js
View file

@ -93,7 +93,7 @@ RecipeWaiter.prototype.createSortableSeedList = function(listEl) {
// Removes popover element and event bindings from the dragged operation but not the // Removes popover element and event bindings from the dragged operation but not the
// event bindings from the one left in the operations list. Without manually removing // event bindings from the one left in the operations list. Without manually removing
// these bindings, we cannot re-initialise the popover on the stub operation. // these bindings, we cannot re-initialise the popover on the stub operation.
$(evt.item).popover("destroy"); $(evt.item).popover("destroy").removeData("bs.popover").off("mouseenter").off("mouseleave");
$(evt.clone).off(".popover").removeData("bs.popover"); $(evt.clone).off(".popover").removeData("bs.popover");
evt.item.setAttribute("data-toggle", "popover-disabled"); evt.item.setAttribute("data-toggle", "popover-disabled");
}, },
@ -120,8 +120,7 @@ RecipeWaiter.prototype.opSortEnd = function(evt) {
// Reinitialise the popover on the original element in the ops list because for some reason it // Reinitialise the popover on the original element in the ops list because for some reason it
// gets destroyed and recreated. // gets destroyed and recreated.
$(evt.clone).popover(); this.manager.ops.enableOpsListPopovers(evt.clone);
$(evt.clone).children("[data-toggle=popover]").popover();
if (evt.item.parentNode.id !== "rec-list") { if (evt.item.parentNode.id !== "rec-list") {
return; return;