NEW tooltip can be on hover or on click with textwithpicto function.

This commit is contained in:
Laurent Destailleur 2017-02-17 17:11:14 +01:00
parent 87cbbadeed
commit fd111cb1c6
5 changed files with 52 additions and 20 deletions

View File

@ -697,9 +697,14 @@ if ($action == 'create')
$htmltext.=$key.' = '.$langs->trans($val).'<br>';
}
$htmltext.='</i>';
$availablelink=$form->textwithpicto($langs->trans("AvailableVariables"), $htmltext, 1, 'help', '', 0, 2, 'availvar');
//print '<a href="javascript:document_preview(\''.DOL_URL_ROOT.'/admin/modulehelp.php?id='.$objMod->numero.'\',\'text/html\',\''.dol_escape_js($langs->trans("Module")).'\')">'.img_picto($langs->trans("ClickToShowDescription"), $imginfo).'</a>';
// Print mail form
print load_fiche_titre($langs->trans("NewMailing"), $form->textwithpicto($langs->trans("AvailableVariables"), $htmltext), 'title_generic');
print load_fiche_titre($langs->trans("NewMailing"), $availablelink, 'title_generic');
dol_fiche_head();

View File

@ -404,11 +404,12 @@ class Form
* @param int $notabs 0=Include table and tr tags, 1=Do not include table and tr tags, 2=use div, 3=use span
* @param string $incbefore Include code before the text
* @param int $noencodehtmltext Do not encode into html entity the htmltext
* @param int $tooltiptrigger ''=Tooltip on hover, 'abc'=Tooltip on click (abc is a unique key)
* @return string Code html du tooltip (texte+picto)
* @see Use function textwithpicto if you can.
* TODO Move this as static as soon as everybody use textwithpicto or @Form::textwithtooltip
*/
function textwithtooltip($text, $htmltext, $tooltipon = 1, $direction = 0, $img = '', $extracss = '', $notabs = 2, $incbefore = '', $noencodehtmltext = 0)
function textwithtooltip($text, $htmltext, $tooltipon = 1, $direction = 0, $img = '', $extracss = '', $notabs = 2, $incbefore = '', $noencodehtmltext = 0, $tooltiptrigger='')
{
global $conf;
@ -427,12 +428,30 @@ class Form
if ($direction < 0) { $extracss=($extracss?$extracss.' ':'').'inline-block'; $extrastyle='padding: 0px; padding-left: 3px !important;'; }
if ($direction > 0) { $extracss=($extracss?$extracss.' ':'').'inline-block'; $extrastyle='padding: 0px; padding-right: 3px !important;'; }
$classfortooltip='classfortooltip';
$s='';$textfordialog='';
$htmltext=str_replace('"',"&quot;",$htmltext);
if ($tooltipon == 2 || $tooltipon == 3) $paramfortooltipimg=' class="classfortooltip inline-block'.($extracss?' '.$extracss:'').'" style="padding: 0px;'.($extrastyle?' '.$extrastyle:'').'" title="'.($noencodehtmltext?$htmltext:dol_escape_htmltag($htmltext,1)).'"'; // Attribut to put on img tag to store tooltip
if ($tooltiptrigger != '')
{
$classfortooltip='classfortooltiponclick';
$textfordialog.='<div style="display: none;" id="idfortooltiponclick_'.$tooltiptrigger.'" class="classfortooltiponclicktext">'.$htmltext.'</div>';
}
if ($tooltipon == 2 || $tooltipon == 3)
{
$paramfortooltipimg=' class="'.$classfortooltip.' inline-block'.($extracss?' '.$extracss:'').'" style="padding: 0px;'.($extrastyle?' '.$extrastyle:'').'"';
if ($tooltiptrigger == '') $paramfortooltipimg.=' title="'.($noencodehtmltext?$htmltext:dol_escape_htmltag($htmltext,1)).'"'; // Attribut to put on img tag to store tooltip
else $paramfortooltipimg.=' dolid="'.$tooltiptrigger.'"';
}
else $paramfortooltipimg =($extracss?' class="'.$extracss.'"':'').($extrastyle?' style="'.$extrastyle.'"':''); // Attribut to put on td text tag
if ($tooltipon == 1 || $tooltipon == 3) $paramfortooltiptd=' class="classfortooltip inline-block'.($extracss?' '.$extracss:'').'" style="padding: 0px;'.($extrastyle?' '.$extrastyle:'').'" title="'.($noencodehtmltext?$htmltext:dol_escape_htmltag($htmltext,1)).'"'; // Attribut to put on td tag to store tooltip
if ($tooltipon == 1 || $tooltipon == 3)
{
$paramfortooltiptd=' class="'.$classfortooltip.' inline-block'.($extracss?' '.$extracss:'').'" style="padding: 0px;'.($extrastyle?' '.$extrastyle:'').'" ';
if ($tooltiptrigger == '') $paramfortooltiptd.=' title="'.($noencodehtmltext?$htmltext:dol_escape_htmltag($htmltext,1)).'"'; // Attribut to put on td tag to store tooltip
else $paramfortooltiptd.=' dolid="'.$tooltiptrigger.'"';
}
else $paramfortooltiptd =($extracss?' class="'.$extracss.'"':'').($extrastyle?' style="'.$extrastyle.'"':''); // Attribut to put on td text tag
$s="";
if (empty($notabs)) $s.='<table class="nobordernopadding" summary=""><tr style="height: auto;">';
elseif ($notabs == 2) $s.='<div class="inline-block">';
// Define value if value is before
@ -441,7 +460,7 @@ class Form
if ($tag == 'td') {
$s .= ' valign="top" width="14"';
}
$s.= '>'.$img.'</'.$tag.'>';
$s.= '>'.$textfordialog.$img.'</'.$tag.'>';
}
// Use another method to help avoid having a space in value in order to use this value with jquery
// Define label
@ -450,7 +469,7 @@ class Form
if ($direction > 0) {
$s.='<'.$tag.$paramfortooltipimg;
if ($tag == 'td') $s .= ' valign="middle" width="14"';
$s.= '>'.$img.'</'.$tag.'>';
$s.= '>'.$textfordialog.$img.'</'.$tag.'>';
}
if (empty($notabs)) $s.='</tr></table>';
elseif ($notabs == 2) $s.='</div>';
@ -468,9 +487,10 @@ class Form
* @param string $extracss Add a CSS style to td, div or span tag
* @param int $noencodehtmltext Do not encode into html entity the htmltext
* @param int $notabs 0=Include table and tr tags, 1=Do not include table and tr tags, 2=use div, 3=use span
* @param int $tooltiptrigger ''=Tooltip on hover, 'abc'=Tooltip on click (abc is a unique key)
* @return string HTML code of text, picto, tooltip
*/
function textwithpicto($text, $htmltext, $direction = 1, $type = 'help', $extracss = '', $noencodehtmltext = 0, $notabs = 2)
function textwithpicto($text, $htmltext, $direction = 1, $type = 'help', $extracss = '', $noencodehtmltext = 0, $notabs = 2, $tooltiptrigger='')
{
global $conf;
@ -498,13 +518,13 @@ class Form
}
if ($type == 'info') $img = img_help(0, $alt);
elseif ($type == 'help') $img = img_help(1, $alt);
elseif ($type == 'help') $img = img_help(($tooltiptrigger != '' ? 2 : 1), $alt);
elseif ($type == 'superadmin') $img = img_picto($alt, 'redstar');
elseif ($type == 'admin') $img = img_picto($alt, 'star');
elseif ($type == 'warning') $img = img_warning($alt);
else $img = img_picto($alt, $type);
return $this->textwithtooltip($text, $htmltext, 2, $direction, $img, $extracss, $notabs, '', $noencodehtmltext);
return $this->textwithtooltip($text, $htmltext, 2, $direction, $img, $extracss, $notabs, '', $noencodehtmltext, $tooltiptrigger);
}
/**

View File

@ -2566,7 +2566,7 @@ function img_printer($titlealt = "default", $other='')
/**
* Show help logo with cursor "?"
*
* @param int $usehelpcursor Use help cursor
* @param int $usehelpcursor 1=Use help cursor, 2=Use click pointer cursor, 0=No specific cursor
* @param int|string $usealttitle Text to use as alt title
* @return string Return tag img
*/
@ -2580,7 +2580,7 @@ function img_help($usehelpcursor = 1, $usealttitle = 1)
else $usealttitle = $langs->trans('Info');
}
return img_picto($usealttitle, 'info.png', ($usehelpcursor ? 'style="vertical-align: middle; cursor: help"' : 'style="vertical-align: middle;"'));
return img_picto($usealttitle, 'info.png', 'style="vertical-align: middle;'.($usehelpcursor == 1 ? ' cursor: help': ($usehelpcursor == 2 ? ' cursor: pointer':'')).'"');
}
/**

View File

@ -421,7 +421,7 @@ ModuleCompanyCodeDigitaria=Accountancy code depends on third party code. The cod
Use3StepsApproval=By default, Purchase Orders need to be created and approved by 2 different users (one step/user to create and one step/user to approve. Note that if user has both permission to create and approve, one step/user will be enough). You can ask with this option to introduce a third step/user approval, if amount is higher than a dedicated value (so 3 steps will be necessary: 1=validation, 2=first approval and 3=second approval if amount is enough).<br>Set this to empty if one approval (2 steps) is enough, set it to a very low value (0.1) if a second approval (3 steps) is always required.
UseDoubleApproval=Use a 3 steps approval when amount (without tax) is higher than...
WarningPHPMail=WARNING: Some email providers (like Yahoo) does not allow you to send an email from another server than the Yahoo server if the email address used as a sender is your Yahoo email (like myemail@yahoo.com, myemail@yahoo.fr, ...). Your current setup use the server of the application to send email, so some recipients (the one compatible with the restrictive DMARC protocol), will ask Yahoo if they can accept your email and Yahoo will respond "no" because the server is not a server owned by Yahoo, so few of your sent Emails may not be accepted.<br>If your Email provider (like Yahoo) has this restriction, you must change Email setup to choose the other method "SMTP server" and enter the SMTP server and credentials provided by your Email provider (ask your EMail provider to get SMTP credentials for your account).
ClickToShowDescription=Click to show description
# Modules
Module0Name=Users & groups
Module0Desc=Users / Employees and Groups management
@ -1171,10 +1171,6 @@ FreeLegalTextOnOrders=Free text on orders
WatermarkOnDraftOrders=Watermark on draft orders (none if empty)
ShippableOrderIconInList=Add an icon in Orders list which indicate if order is shippable
BANK_ASK_PAYMENT_BANK_DURING_ORDER=Ask for bank account destination of order
##### Clicktodial #####
ClickToDialSetup=Click To Dial module setup
ClickToDialUrlDesc=Url called when a click on phone picto is done. In URL, you can use tags<br><b>__PHONETO__</b> that will be replaced with the phone number of person to call<br><b>__PHONEFROM__</b> that will be replaced with phone number of calling person (yours)<br><b>__LOGIN__</b> that will be replaced with your clicktodial login (defined on your user card)<br><b>__PASS__</b> that will be replaced with your clicktodial password (defined on your user card).
##### Bookmark4u #####
##### Interventions #####
InterventionsSetup=Interventions module setup
FreeLegalTextOnInterventions=Free text on intervention documents
@ -1483,7 +1479,9 @@ AGENDA_DEFAULT_FILTER_STATUS=Set automatically this status for events into searc
AGENDA_DEFAULT_VIEW=Which tab do you want to open by default when selecting menu Agenda
AGENDA_NOTIFICATION=Enable event notification on user browsers when event date is reached (each user is able to refuse this from the browser confirmation question)
AGENDA_NOTIFICATION_SOUND=Enable sound notification
##### ClickToDial #####
##### Clicktodial #####
ClickToDialSetup=Click To Dial module setup
ClickToDialUrlDesc=Url called when a click on phone picto is done. In URL, you can use tags<br><b>__PHONETO__</b> that will be replaced with the phone number of person to call<br><b>__PHONEFROM__</b> that will be replaced with phone number of calling person (yours)<br><b>__LOGIN__</b> that will be replaced with your clicktodial login (defined on your user card)<br><b>__PASS__</b> that will be replaced with your clicktodial password (defined on your user card).
ClickToDialDesc=This module allows to make phone numbers clickable. A click on this icon will call make your phone to call the phone number. This can be used to call a call center system from Dolibarr that can call the phone number on a SIP system for example.
ClickToDialUseTelLink=Use just a link "tel:" on phone numbers
ClickToDialUseTelLinkDesc=Use this method if your users have a softphone or a software interface installed on same computer than the browser, and called when you click on a link in your browser that start with "tel:". If you need a full server solution (no need of local software installation), you must set this to "No" and fill next field.

View File

@ -1926,7 +1926,16 @@ if (! function_exists("llxFooter"))
print '<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(".classfortooltip").tipTip({maxWidth: "'.dol_size(($conf->browser->layout == 'phone' ? 400 : 700),'width').'px", edgeOffset: 10, delay: 50, fadeIn: 50, fadeOut: 50});
});
jQuery(".classfortooltiponclicktext").dialog({ width: 500, autoOpen: false });
jQuery(".classfortooltiponclick").click(function () {
console.log("We click on tooltip for element with dolid="+$(this).attr(\'dolid\'));
if ($(this).attr(\'dolid\'))
{
obj=$("#idfortooltiponclick_"+$(this).attr(\'dolid\'));
obj.dialog("open");
}
});
});
</script>' . "\n";
}