N°2251 Replace qtip calls by tippyjs calls

2026-02-12 23:14:18 +01:00 · 2020-12-02 10:05:59 +01:00
parent 1252d760ab
commit d1b12ee04b
4 changed files with 76 additions and 77 deletions
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -398,11 +398,10 @@ EOF
 							'style="vertical-align:middle"')."&nbsp;$sLink<br/>";
 					$sTip .= Dict::S('Core:Synchro:LastSynchro').'<br/>'.$sLastSynchro."</p>";
 				}
+				$sTip = utils::HtmlEntities($sTip);
 				$sLabel = htmlentities(Dict::S('Tag:Synchronized'), ENT_QUOTES, 'UTF-8');
 				$sSynchroTagId = 'synchro_icon-'.$this->GetKey();
-				$aIcons[] = "<div class=\"tag\" id=\"$sSynchroTagId\"><span class=\"object-synchronized fas fa-lock fa-1x\">&nbsp;</span>&nbsp;$sLabel</div>";
-				$sTip = addslashes($sTip);
-				$oPage->add_ready_script("$('#$sSynchroTagId').qtip( { content: '$sTip', show: 'mouseover', hide: { fixed: true }, style: { name: 'dark', tip: 'topLeft' }, position: { corner: { target: 'bottomMiddle', tooltip: 'topLeft' }} } );");
+				$aIcons[] = '<div class="tag" id="'.$sSynchroTagId.'" data-tooltip-content="'.$sTip.'" data-tooltip-html-enabled="true"><span class="object-synchronized fas fa-lock fa-1x"></span>'.$sLabel.'</div>';
 			}
 		}

@@ -876,7 +875,6 @@ EOF
 											if ($iFlags & OPT_ATT_SLAVE) {
 												$aReasons = array();
 												$this->GetSynchroReplicaFlags($sAttCode, $aReasons);
-												$sSynchroIcon = "&nbsp;<img id=\"synchro_$sInputId\" src=\"../images/transp-lock.png\" style=\"vertical-align:middle\"/>";
 												$sTip = '';
 												foreach ($aReasons as $aRow) {
 													$sDescription = htmlentities($aRow['description'], ENT_QUOTES,
@@ -887,8 +885,8 @@ EOF
 													$sTip .= "<div class='synchro-source-title'>Synchronized with {$aRow['name']}</div>";
 													$sTip .= "<div class='synchro-source-description'>$sDescription</div>";
 												}
-												$sTip = addslashes($sTip);
-												$oPage->add_ready_script("$('#synchro_$sInputId').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );");
+												$sTip = utils::HtmlEntities($sTip);
+												$sSynchroIcon = '<img id="synchro_'.$sInputId.'" src="../images/transp-lock.png"  data-tooltip-content="'.$sTip.'" data-tooltip-html-enabled="true" />';
 												$sComments = $sSynchroIcon;
 											}

@@ -2339,37 +2337,37 @@ EOF
 					}
 					else
 					{
-						$sHTMLValue = "<div class=\"field_input_zone ibo-input-wrapper ibo-input-string-wrapper\" data-validation=\"untouched\"><input class=\"ibo-input ibo-input-string\" title=\"$sHelpText\" type=\"text\" maxlength=\"$iFieldSize\" name=\"attr_{$sFieldPrefix}{$sAttCode}{$sNameSuffix}\" value=\"".htmlentities($sDisplayValue,
-								ENT_QUOTES, 'UTF-8')."\" id=\"$iId\"/></div>{$sValidationSpan}{$sReloadSpan}";
-						$aEventsList[] = 'keyup';
-						$aEventsList[] = 'change';
-
+						$sTip = '';
 						// Adding tooltip so we can read the whole value when its very long (eg. URL)
 						if (!empty($sDisplayValue))
 						{
+							$sTip = ' data-tooltip-content="'.utils::HtmlEntities($sDisplayValue).'"';
 							$oPage->add_ready_script(
 								<<<EOF
-								var sEscapedVal = $('<div/>').text($('#{$iId}').val()).html();
-								$('#{$iId}').qtip( { content: sEscapedVal, show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'bottomLeft' }, position: { corner: { target: 'topLeft', tooltip: 'bottomLeft' }, adjust: { y: -15}} } );
-								
 								$('#{$iId}').bind('keyup', function(evt, sFormId){ 
-									var oQTipAPI = $(this).qtip('api');
+									var sVal = $('#{$iId}').val();
+									var oTippy = this._tippy;
 									
-									if($(this).val() === '')
+									if(sVal === '')
 									{
-										oQTipAPI.hide();
-										oQTipAPI.disable(true); 
+										oTippy.hide();
+										oTippy.disable(); 
 									}
 									else
 									{
-										oQTipAPI.disable(false); 
+										oTippy.enable(); 
 									}
-									var sEscapedVal = $('<div/>').text($(this).val()).html();                  
-									oQTipAPI.updateContent(sEscapedVal);
+									oTippy.setContent(sVal);
 								});
 EOF
 							);
 						}
+						
+						$sHTMLValue = '<div class="field_input_zone ibo-input-wrapper ibo-input-string-wrapper" data-validation="untouched"><input class="ibo-input ibo-input-string" title="'.$sHelpText.'" type="text" maxlength="'.$iFieldSize.'" name="attr_'.$sFieldPrefix.$sAttCode.$sNameSuffix.'" value="'.htmlentities($sDisplayValue,
+								ENT_QUOTES, 'UTF-8').'" id="'.$iId.'"'.$sTip.' /></div>'.$sValidationSpan.$sReloadSpan;
+						$aEventsList[] = 'keyup';
+						$aEventsList[] = 'change';
+
 					}
 					break;
 			}
@@ -4517,12 +4515,11 @@ HTML
 					if ($oAttDef->GetEditClass() == 'One Way Password')
 					{

-						$sTip = "Unknown values";
-						$sReadyScript .= "$('#multi_values_$sAttCode').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );";
+						$sTip = Dict::S('UI:Component:Field:BulkModify:UnknownValues:Tooltip');

 						$oDummyObj->Set($sAttCode, null);
 						$aComments[$sAttCode] = '<input type="checkbox" id="enable_'.$iFormId.'_'.$sAttCode.'" onClick="ToggleField(this.checked, \''.$iFormId.'_'.$sAttCode.'\')"/>';
-						$aComments[$sAttCode] .= '<div class="multi_values" id="multi_values_'.$sAttCode.'"> ? </div>';
+						$aComments[$sAttCode] .= '<div class="multi_values" id="multi_values_'.$sAttCode.'" data-tooltip-content="'.$sTip.'"> ? </div>';
 						$sReadyScript .= 'ToggleField(false, \''.$iFormId.'_'.$sAttCode.'\');'."\n";
 					}
 					else
--- a/dictionaries/ui/components/en.dictionary.itop.field.php
+++ b/dictionaries/ui/components/en.dictionary.itop.field.php
@@ -0,0 +1,23 @@
+<?php
+/**
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+// Global search
+Dict::Add('EN US', 'English', 'English', array(
+	'UI:Component:Field:BulkModify:UnknownValues:Tooltip' => 'Unknown values',
+));
--- a/pages/UI.php
+++ b/pages/UI.php
@@ -1440,9 +1440,8 @@ HTML
 							}					
 						}
 						$sTip .= "</ul></p>";
-						$sTip = addslashes($sTip);
-						$sReadyScript .= "$('#multi_values_$sFieldInputId').qtip( { content: '$sTip', show: 'mouseover', hide: 'mouseout', style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );\n";
-						$sComments .= '<div class="multi_values" id="multi_values_'.$sFieldInputId.'">'.count($aValues[$sAttCode]).'</div>';
+						$sTip = utils::HtmlEntities($sTip);
+						$sComments .= '<div class="multi_values" id="multi_values_'.$sFieldInputId.'"  data-tooltip-content="'.$sTip.'" data-tooltip-html-enabled="true">'.count($aValues[$sAttCode]).'</div>';
 					}
 					$aDetails[] = array('label' => '<span>'.$oAttDef->GetLabel().'</span>', 'value' => "<span id=\"field_$sFieldInputId\">$sHTMLValue</span>", 'comments' => $sComments);
 					$aFieldsMap[$sAttCode] = $sFieldInputId;
--- a/pages/schema.php
+++ b/pages/schema.php
@@ -873,7 +873,7 @@ function DisplayClassDetails($oPage, $sClass, $sContext)
 		$aOrigins[$sOrigin] = true;
 		$sAllowedValues = "";
 		$sMoreInfo = "";
-		$sDefaultNullValue = '""';
+		$sDefaultNullValue = '';
 		$aCols = array();
 		foreach ($oAttDef->GetSQLColumns() as $sCol => $sFieldDesc)
 		{
@@ -891,8 +891,8 @@ function DisplayClassDetails($oPage, $sClass, $sContext)
 				{
 					$sDefaultNullValue = json_encode($sDefaultNullValue);
 				}
-				$sDefaultNullValue = (!is_null($sDefaultNullValue) ? json_encode(Dict::Format('UI:Schema:DefaultNullValue',
-					$sDefaultNullValue)) : '""');
+				$sDefaultNullValue = (!is_null($sDefaultNullValue) ? Dict::Format('UI:Schema:DefaultNullValue',
+					$sDefaultNullValue) : '');
 			}
 			else
 			{
@@ -927,47 +927,27 @@ function DisplayClassDetails($oPage, $sClass, $sContext)
 		elseif (is_object($oAllowedValuesDef = $oAttDef->GetValuesDef()))
 		{
 			$sAllowedValues = str_replace("Filter: ", "", $oAllowedValuesDef->GetValuesDescription());
-			$sAllowedValuesEscpd = json_encode($sAllowedValues);
+			$sAllowedValuesEscpd = utils::HtmlEntities($sAllowedValues);

 			$sFilterURL = urlencode($sAllowedValues);
-			$sAllowedValues = "<span id=\"values".$sAttrCode."\"><a href=\"run_query.php?expression=".$sFilterURL."\">⚵</a>".Dict::S('UI:Schema:Attribute/Filter')."</span>";
+			$sAllowedValues = '<span id="values'.$sAttrCode.'" data-tooltip-content="'.$sAllowedValuesEscpd.'"><a href="run_query.php?expression='.$sFilterURL.'">⚵</a>'.Dict::S('UI:Schema:Attribute/Filter')."</span>";
 		}
 		else
 		{
 			$sAllowedValues = '';
 		}
-		$sAttrValueEscpd = json_encode($sValue);
-		$sAttrTypeDescEscpd = json_encode($sTypeDesc);
-		$sAttrOriginEscpd = json_encode($sOrigin);
+		$sAttrValueEscpd = utils::HtmlEntities($sValue);
+		$sAttrTypeDescEscpd = utils::HtmlEntities($sTypeDesc);
+		$sAttrOriginEscpd = utils::HtmlEntities($sOrigin);
+		$sDefaultNullValueEscpd = utils::HtmlEntities($sDefaultNullValue);

 		$aDetails[] = array(
-			'code' => "<span id=\"attr".$sAttrCode."\"><span class=\"attrLabel\">".$oAttDef->GetLabel()."</span> <span class=\"parenthesis\">(</span><span class=\"attrCode\">".$oAttDef->GetCode()."</span><span class=\"parenthesis\">)</span></span>",
-			'type' => "<span id=\"type".$sAttrCode."\"><span class=\"attrLabel\">".$sTypeDict."</span> <span class=\"parenthesis\">(</span><span class=\"attrCode\">".$sType."</span><span class=\"parenthesis\">)</span></span>",
-			'origincolor' => "<span class=\"originColor".$sOrigin."\"></span>",
+			'code' => '<span id="attr'.$sAttrCode.'" data-tooltip-content="'.$sAttrValueEscpd.'"><span class="attrLabel">'.$oAttDef->GetLabel().'</span> <span class="parenthesis">(</span><span class="attrCode">'.$oAttDef->GetCode().'</span><span class="parenthesis">)</span></span>',
+			'type' => '<span id="type'.$sAttrCode.'" data-tooltip-content="'.$sAttrTypeDescEscpd.'"><span class="attrLabel">'.$sTypeDict.'</span> <span class="parenthesis">(</span><span class="attrCode">'.$sType.'</span><span class="parenthesis">)</span></span>',
+			'origincolor' => '<span class="originColor'.$sOrigin.'" data-tooltip-content="'.$sAttrOriginEscpd.'"></span>',
 			'origin' => "<span id=\"origin".$sAttrCode."\">$sOrigin</span>",
 			'values' => $sAllowedValues,
-			'moreinfo' => "<span id=\"moreinfo".$sAttrCode."\"> $sMoreInfo</span>",
-		);
-		//tooltip construction
-		$oPage->add_ready_script(
-			<<<EOF
-            	if($sAttrValueEscpd != ''){
-		       		$('#attr$sAttrCode').qtip( { content: $sAttrValueEscpd, show: 'mouseover', hide: {fixed : true, delay : 500}, style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );
-		       	}
-		       	if($sAttrTypeDescEscpd != ''){
-		      	  $('#type$sAttrCode').qtip( { content: $sAttrTypeDescEscpd, show: 'mouseover', hide: {fixed : true, delay : 500}, style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );
-				}
-				if($sAttrOriginEscpd != ''){
-					$('#originColor$sAttrCode').parent().qtip( { content: $sAttrOriginEscpd, show: 'mouseover', hide: {fixed : true, delay : 500}, style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );
-				}
-				if( !$sIsEnumValues && $sAllowedValuesEscpd != ''){
-					$('#values$sAttrCode').qtip( { content: $sAllowedValuesEscpd, show: 'mouseover', hide: {fixed : true, delay : 500}, style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );
-				}
-				if($sDefaultNullValue != ''){
-					$('#moreinfo$sAttrCode').qtip( { content: $sDefaultNullValue, show: 'mouseover', hide: {fixed : true, delay : 500}, style: { name: 'dark', tip: 'leftTop' }, position: { corner: { target: 'rightMiddle', tooltip: 'leftTop' }} } );
-				}
-EOF
-
+			'moreinfo' => '<span id="moreinfo'.$sAttrCode.'" data-tooltip-content="'.$sDefaultNullValueEscpd.'">'.$sMoreInfo.'</span>',
 		);

 	}
@@ -1136,10 +1116,10 @@ EOF
 );

 $oPage->add(" <div class='ui-widget'> </div><div id='dataModelSplitPane'>");
-$oPage->add("<div class='ui-layout-west data-model-viewer'> ");
+$oPage->add("<div class='data-model-viewer'> ");
 DisplayClassesList($oPage, $sContext);
 $oPage->add("</div>");
-$oPage->add("<div class='ui-layout-center data-model-viewer'>");
+$oPage->add("<div class='data-model-viewer'>");

 switch ($operation)
 {
@@ -1178,21 +1158,21 @@ JS
 }
 $oPage->add("</div>");
 $oPage->add("</div>");
-//split the page in 2 panels
-$oPage->add_init_script(
-	<<<EOF
-		$('#dataModelSplitPane').layout({
-			west : {size: "20%", minSize : 200,paneSize : 600},
-			center : {
-				onresize_end : function(){
-					$("#dataModelScrollableDiv").width($(".ui-layout-center.data-model-viewer").width());
-				}
-			}
-		});
-		// Layout
-EOF
-
-);
+////split the page in 2 panels
+//$oPage->add_init_script(
+//	<<<EOF
+//		$('#dataModelSplitPane').layout({
+//			west : {size: "20%", minSize : 200,paneSize : 600},
+//			center : {
+//				onresize_end : function(){
+//					$("#dataModelScrollableDiv").width($(".ui-layout-center.data-model-viewer").width());
+//				}
+//			}
+//		});
+//		// Layout
+//EOF
+//
+//);

 $oPage->output();
 ?>