Wavyzz/dolibarr
2
0
Fork 1
mirror of https://github.com/Dolibarr/dolibarr.git synced 2026-01-04 08:02:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

NEW Enhance popup for image preview (show size in title, can restore

Browse Source 
small view, always show the Rotate button).
This commit is contained in:
ldestailleur
2025-07-23 14:43:51 +02:00
parent 8f3b65976a
commit 3844c65e89
4 changed files with 49 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
htdocs/core/ajax/ajaxdirpreview.php
View File

@@ -496,15 +496,20 @@ if ($useajax) {
print '<script nonce="'.getNonce().'" type="text/javascript">'; print '<script nonce="'.getNonce().'" type="text/javascript">';
// Enable jquery handlers on new generated HTML objects (same code than into lib_footer.js.php) // Enable jquery handlers on new generated HTML objects (same code than into lib_footer.js.php)
// Because the content is reloaded by ajax call, we must also reenable some jquery hooks // Because the content is reloaded by ajax call, we must also redefine/reenable some jquery hooks.
// Wrapper to manage document_preview
// Handler to manage document_preview on click on a .documentpreview css class.
if ($conf->browser->layout != 'phone') { if ($conf->browser->layout != 'phone') {
print "\n/* JS CODE TO ENABLE document_preview */\n"; print "\n/* JS CODE TO ENABLE document_preview */\n";
print ' print '
jQuery(document).ready(function () { jQuery(document).ready(function () {
jQuery(".documentpreview").click(function () { jQuery(".documentpreview").click(function () {
console.log("We click on preview for element with href="+$(this).attr(\'href\')+" mime="+$(this).attr(\'mime\')); console.log("We click on preview for element with href="+$(this).attr(\'href\')+" mime="+$(this).attr(\'mime\'));
document_preview($(this).attr(\'href\'), $(this).attr(\'mime\'), \''.dol_escape_js($langs->transnoentities("Preview")).'\'); var titledocpreview = $(this).attr(\'data-title\');
if (titledocpreview == undefined || titledocpreview == "") {
titledocpreview = \''.dol_escape_js($langs->transnoentities("Preview")).'\'
}
document_preview($(this).attr(\'href\'), $(this).attr(\'mime\'), titledocpreview);
return false; return false;
}); });
}); });

6
htdocs/core/js/lib_foot.js.php
View File

@@ -233,7 +233,11 @@ if ($conf->browser->layout != 'phone') {
// Click on the preview picto // Click on the preview picto
jQuery(".documentpreview").click(function () { jQuery(".documentpreview").click(function () {
console.log("We click on preview for element with href="+$(this).attr(\'href\')+" mime="+$(this).attr(\'mime\')); console.log("We click on preview for element with href="+$(this).attr(\'href\')+" mime="+$(this).attr(\'mime\'));
document_preview($(this).attr(\'href\'), $(this).attr(\'mime\'), \''.dol_escape_js($langs->transnoentities("Preview")).'\'); var titledocpreview = $(this).attr(\'data-title\');
if (titledocpreview == undefined || titledocpreview == "") {
titledocpreview = \''.dol_escape_js($langs->transnoentities("Preview")).'\'
}
document_preview($(this).attr(\'href\'), $(this).attr(\'mime\'), titledocpreview);
return false; return false;
}); });
});'."\n"; });'."\n";

63
htdocs/core/js/lib_head.js.php
View File

@@ -1054,61 +1054,67 @@ function document_preview(file, type, title)
if ($.inArray(type, ValidImageTypes) < 0) { if ($.inArray(type, ValidImageTypes) < 0) {
/* Not an image */ /* Not an image */
var width='85%'; var width = '85%';
var object_width='100%'; var object_width = '100%';
var height = ($( window ).height() - 60) * 0.90; var height = ($( window ).height() - 60) * 0.90;
var object_height='98%'; var object_height = '98%';
show_preview('notimage'); show_preview('notimage');
} else { } else {
/* This is an image */ /* This is an image */
var object_width=0; var object_width = 0;
var object_height=0; var object_height = 0;
var img = new Image(); var img = new Image();
img.src = file;
img.onload = function() { img.onload = function() {
object_width = this.width; object_width = this.width; /* the real width of image */
object_height = this.height; object_height = this.height; /* the real height of image */
width = $( window ).width()*0.90; /* Complete title with size of image */
console.log("object_width="+object_width+" window width="+width); title = title + ' (' + object_width + ' x ' + object_height + ')';
if(object_width < width){
popupWidth = $( window ).width() * 0.9 - 50;
console.log("object_width="+object_width+" popup window width="+popupWidth);
if (object_width < popupWidth) {
console.log("Object width is small, we set width of popup according to image width."); console.log("Object width is small, we set width of popup according to image width.");
width = object_width + 30 popupWidth = object_width + 50
} }
height = $( window ).height()*0.85; popupHeight = $( window ).height() * 0.85 - 100;
console.log("object_height="+object_height+" window height="+height); console.log("object_height="+object_height+" popup window height="+popupHeight);
if(object_height < height){ if (object_height < (popupHeight - 100)) {
console.log("Object height is small, we set height of popup according to image height."); console.log("Object height is small, we set height of popup according to image height.");
height = object_height + 100 popupHeight = object_height + 100
} } else {
else
{
showOriginalSizeButton = true; showOriginalSizeButton = true;
} }
show_preview('image'); show_preview('image');
}; };
img.src = file;
} }
/* This function is local to document_preview. Variables like file, type, title, object_width and object_height are global inside this function */ /* This function is local to document_preview. Variables like file, type, title, object_width and object_height are global inside this function */
function show_preview(mode) { function show_preview(mode) {
/* console.log("mode="+mode+" file="+file+" type="+type+" title=title+" width="+width+" height="+height); */ /* console.log("mode="+mode+" file="+file+" type="+type+" title=title+" width="+popupWidth+" height="+popupHeight); */
var newElem = '<object name="objectpreview" data="'+file+'" type="'+type+'" width="'+object_width+'" height="'+object_height+'" param="noparam"></object>'; var newElem = '<object name="objectpreview" data="'+file+'" type="'+type+'" width="'+object_width+'" height="'+object_height+'" param="noparam"></object>';
optionsbuttons = {} optionsbuttons = {}
if (mode == 'image' && showOriginalSizeButton) if (mode == 'image') {
{
var curRot = 0; var curRot = 0;
var savMaxHeight = 0;
optionsbuttons = { optionsbuttons = {
"<?php echo dol_escape_js($langs->transnoentitiesnoconv("OriginalSize")); ?>": function() { console.log("Click on original size"); jQuery(".ui-dialog-content.ui-widget-content > object").css({ "max-height": "none" }); }, '<?php echo dol_escape_js($langs->transnoentitiesnoconv("RotateImage")); ?>': function() { curRot += 90; jQuery(".ui-dialog-content.ui-widget-content > object").css("transform","rotate(" + curRot + "deg)"); },
"<?php echo dol_escape_js($langs->transnoentitiesnoconv("RotateImage")); ?>": function() { curRot += 90; jQuery(".ui-dialog-content.ui-widget-content > object").css("transform","rotate(" + curRot + "deg)"); }, '<?php echo dol_escape_js($langs->transnoentitiesnoconv("CloseWindow")); ?>': function() { $( this ).dialog( "close" ); }
"<?php echo dol_escape_js($langs->transnoentitiesnoconv("CloseWindow")); ?>": function() { $( this ).dialog( "close" ); }
}; };
if (showOriginalSizeButton) {
optionsbuttons = {
'<?php echo dol_escape_js($langs->transnoentitiesnoconv("OriginalSize")); ?>': function() { console.log("Click on original size button"); savMaxHeight = jQuery(".ui-dialog-content.ui-widget-content > object").css("max-height"); console.log("savMaxHeight="+savMaxHeight); jQuery(".ui-dialog-content.ui-widget-content > object").css({ "max-height": (savMaxHeight == "none" ? "100%" : "none") }); },
...optionsbuttons
};
}
} }
$("#dialogforpopup").addClass("center"); $("#dialogforpopup").addClass("center");
@@ -1117,15 +1123,14 @@ function document_preview(file, type, title)
$("#dialogforpopup").dialog({ $("#dialogforpopup").dialog({
closeOnEscape: true, closeOnEscape: true,
resizable: true, resizable: true,
width: width, width: popupWidth,
height: height, height: popupHeight,
modal: true, modal: true,
title: title, title: title,
buttons: optionsbuttons buttons: optionsbuttons
}); });
if (showOriginalSizeButton) if (showOriginalSizeButton) {
{
jQuery(".ui-dialog-content.ui-widget-content > object").css({ "max-height": "100%", "width": "auto", "margin-left": "auto", "margin-right": "auto", "display": "block" }); jQuery(".ui-dialog-content.ui-widget-content > object").css({ "max-height": "100%", "width": "auto", "margin-left": "auto", "margin-right": "auto", "display": "block" });
} }
} }

4
htdocs/core/photos_resize.php
View File

@@ -518,8 +518,8 @@ print '<input type="hidden" name="backtourl" value="'.$backtourl.'">';
print '<fieldset id="redim_file">'; print '<fieldset id="redim_file">';
print '<legend>'.$langs->trans("Resize").'</legend>'; print '<legend>'.$langs->trans("Resize").'</legend>';
print $langs->trans("ResizeDesc").'<br>'; print $langs->trans("ResizeDesc").'<br>';
print $langs->trans("NewLength").': <input name="sizex" type="number" class="flat maxwidth50 right"> px &nbsp; <span class="opacitymedium">'.$langs->trans("or").'</span> &nbsp; '; print $langs->trans("NewLength").': <input name="sizex" type="number" class="flat maxwidth75 right"> px &nbsp; <span class="opacitymedium">'.$langs->trans("or").'</span> &nbsp; ';
print $langs->trans("NewHeight").': <input name="sizey" type="number" class="flat maxwidth50 right"> px &nbsp; <br>'; print $langs->trans("NewHeight").': <input name="sizey" type="number" class="flat maxwidth75 right"> px &nbsp; <br>';
print '<input type="hidden" name="file" value="'.dol_escape_htmltag($file).'" />'; print '<input type="hidden" name="file" value="'.dol_escape_htmltag($file).'" />';
print '<input type="hidden" name="action" value="confirm_resize" />'; print '<input type="hidden" name="action" value="confirm_resize" />';