From 6f16ec8df98355e9d18a73f055f719f5bef7ff4b Mon Sep 17 00:00:00 2001
From: mokaddem <sami.mokaddem@circl.lu>
Date: Mon, 14 Jan 2019 16:50:59 +0100
Subject: [PATCH] chg: [UI] WIP - generic_picker popover is attached to body

Needed to add reference to the original node that toggle the popover
---
 app/View/Elements/eventattribute.ctp |  2 +-
 app/View/Elements/generic_picker.ctp |  4 ++--
 app/webroot/js/misp.js               | 29 ++++++++++++++++++++--------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/View/Elements/eventattribute.ctp b/app/View/Elements/eventattribute.ctp
index 879bd1fd0..b4084fb30 100644
--- a/app/View/Elements/eventattribute.ctp
+++ b/app/View/Elements/eventattribute.ctp
@@ -116,7 +116,7 @@
     <div class="tabMenu tabMenuEditBlock noPrint">
         <span id="create-button" title="<?php echo __('Add attribute');?>" role="button" tabindex="0" aria-label="<?php echo __('Add attribute');?>" class="icon-plus useCursorPointer" onClick="clickCreateButton(<?php echo $event['Event']['id']; ?>, '<?php echo $possibleAction; ?>');"></span>
         <span id="multi-edit-button" title="<?php echo __('Edit selected Attributes');?>" role="button" tabindex="0" aria-label="<?php echo __('Edit selected Attributes');?>" class="hidden icon-edit mass-select useCursorPointer" onClick="editSelectedAttributes(<?php echo $event['Event']['id']; ?>);"></span>
-        <span id="multi-tag-button" title="<?php echo __('Tag selected Attributes');?>" role="button" tabindex="0" aria-label="<?php echo __('Tag selected Attributes');?>" class="hidden icon-tag mass-select useCursorPointer" onClick="getPopup('selected/attribute', 'tags', 'selectTaxonomy');"></span>
+        <span id="multi-tag-button" title="<?php echo __('Tag selected Attributes');?>" role="button" tabindex="0" aria-label="<?php echo __('Tag selected Attributes');?>" class="hidden icon-tag mass-select useCursorPointer" onClick="popoverPopup(this, 'selected/attribute', 'tags', 'selectTaxonomy');"></span>
         <span id="multi-delete-button" title="<?php echo __('Delete selected Attributes');?>" role="button" tabindex="0" aria-label="<?php echo __('Delete selected Attributes');?>" class="hidden icon-trash mass-select useCursorPointer" onClick="multiSelectAction(<?php echo $event['Event']['id']; ?>, 'deleteAttributes');"></span>
         <span id="multi-accept-button" title="<?php echo __('Accept selected Proposals');?>" role="button" tabindex="0" aria-label="<?php echo __('Accept selected Proposals');?>" class="hidden icon-ok mass-proposal-select useCursorPointer" onClick="multiSelectAction(<?php echo $event['Event']['id']; ?>, 'acceptProposals');"></span>
         <span id="multi-discard-button" title="<?php echo __('Discard selected Proposals');?>" role="button" tabindex="0" aria-label="<?php echo __('Discard selected Proposals');?>" class="hidden icon-remove mass-proposal-select useCursorPointer" onClick="multiSelectAction(<?php echo $event['Event']['id']; ?>, 'discardProposals');"></span>
diff --git a/app/View/Elements/generic_picker.ctp b/app/View/Elements/generic_picker.ctp
index 49e6433a1..f96458071 100644
--- a/app/View/Elements/generic_picker.ctp
+++ b/app/View/Elements/generic_picker.ctp
@@ -90,7 +90,6 @@
         $param_html = ' ';
         if (is_array($param)) { // add data as param
             if (isset($param['functionName'])) {
-                // $param_html .= 'onclick="' . $param['functionName'] . '" ';
                 $param_html .= 'onclick="execAndClose(this, ' . $param['functionName'] . ')" ';
             } else { // fallback to default submit function
                 if ($defaults['functionName'] !== '') {
@@ -140,7 +139,8 @@
 
 <script>
 function execAndClose(elem, alreadyExecuted) {
-    $(elem).closest('div.popover').prev().popover('destroy');
+    var dismissid = $(elem).closest('div.popover').attr('data-dismissid');
+    $('[data-dismissid="' + dismissid + '"]').popover('destroy');
 }
 
 function setupChosen(id) {
diff --git a/app/webroot/js/misp.js b/app/webroot/js/misp.js
index 2b042f998..30a3a8871 100644
--- a/app/webroot/js/misp.js
+++ b/app/webroot/js/misp.js
@@ -1395,28 +1395,37 @@ function openPopup(id) {
 }
 
 function openPopover(clicked, data) {
-	// popup handling //
-	var loadingHtml = '<div style="height: 75px; width: 75px;"><div class="spinner"></div><div class="loadingText">Loading</div></div>';
-	var closeButtonHtml = '<button type="button" class="close" style="margin-left: 5px;" onclick="$(this).closest(\'div.popover\').prev().popover(\'destroy\');">×</button>';
+	/* popup handling */
 	$clicked = $(clicked);
+	var randomId = Math.random().toString(36).substr(2,9); // used to recover the button that triggered the popover (so that we can destroy the popover)
+	var loadingHtml = '<div style="height: 75px; width: 75px;"><div class="spinner"></div><div class="loadingText">Loading</div></div>';
+	$clicked.attr('data-dismissid', randomId);
+	var closeButtonHtml = '<button type="button" class="close" style="margin-left: 5px;" onclick="$(&apos;[data-dismissid=&quot;' + randomId + '&quot;]&apos;).popover(\'destroy\');">×</button>';
+
 	var title = $clicked.attr('title');
 	var origTitle = $clicked.attr('data-original-title');
 	if (title !== undefined && title !== "") {
-		title = title.replace(closeButtonHtml, '');
+		var index = title.indexOf('<button');
+		title = index > 0 ? title.substring(0, index) : title;
 		title = title.length == 0 ? '&nbsp;' : title;
 		$clicked.attr('title', title + closeButtonHtml);
 	} else if(title === "" && origTitle !== undefined && origTitle !== "") { //  preserve title
-		title = origTitle.replace(closeButtonHtml, '');
+		var index = origTitle.indexOf('<button');
+		origTitle = index > 0 ? origTitle.substring(0, index) : origTitle;
+		title = origTitle;
 		$clicked.attr('title', title + closeButtonHtml);
 	} else {
 		$clicked.attr('title', '&nbsp;' + closeButtonHtml);
 	}
+
 	if (!$clicked.data('popover')) {
 		$clicked.addClass('have-a-popover');
 		$clicked.popover({
 			html: true,
 			trigger: 'manual',
-			content: loadingHtml
+			content: loadingHtml,
+			container: 'body',
+			template: '<div class="popover" role="tooltip" data-dismissid="' + randomId + '"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
 		}).popover('show');
 	} else {
 		// $clicked.popover('show');
@@ -1501,15 +1510,19 @@ function popoverPopup(clicked, id, context, target, admin) {
 function popoverConfirm(clicked) {
     var $clicked = $(clicked);
 	var popoverContent = '<div>';
-		popoverContent += '<span class="btn btn-primary" onclick=submitClosestForm(this)>Yes</span>';
+		popoverContent += '<span class="btn btn-primary" onclick=submitPopover(this)>Yes</span>';
 		popoverContent += '<span class="btn btn-inverse" style="float: right;" onclick=cancelPrompt()>Cancel</span>';
 	popoverContent += '</div>';
 	openPopover($clicked, popoverContent);
 }
 
-function submitClosestForm(clicked) {
+function submitPopover(clicked) {
 	$clicked = $(clicked);
 	$form = $clicked.closest('form');
+	if ($form.length === 0) { // popover container is body, submit from original node
+		var dismissid = $clicked.closest('div.popover').attr('data-dismissid');
+		$form = $('[data-dismissid="' + dismissid + '"]').closest('form');
+	}
 	$form.submit();
 }