Image attribute: Add upload button

This commit is contained in:
Molkobain
2021-02-22 16:23:45 +01:00
parent 0b60079c07
commit 9c0966ff42
4 changed files with 16 additions and 9 deletions

View File

@@ -1784,13 +1784,12 @@ HTML
if (!$oAttDef->IsExternalField())
{
$bMandatory = 'false';
if ((!$oAttDef->IsNullAllowed()) || ($iFlags & OPT_ATT_MANDATORY))
{
if ((!$oAttDef->IsNullAllowed()) || ($iFlags & OPT_ATT_MANDATORY)) {
$bMandatory = 'true';
}
$sValidationSpan = "<span class=\"form_validation ibo-field-validation\" id=\"v_{$iId}\"></span>";
$sReloadSpan = "<span class=\"field_status\" id=\"fstatus_{$iId}\"></span>";
$sHelpText = htmlentities($oAttDef->GetHelpOnEdition(), ENT_QUOTES, 'UTF-8');
$sHelpText = utils::EscapeHtml($oAttDef->GetHelpOnEdition());
// mandatory field control vars
$aEventsList = array(); // contains any native event (like change), plus 'validate' for the form submission
@@ -2116,9 +2115,9 @@ EOF
'current_image_url' => $sUrl,
'default_image_url' => $sDefaultUrl,
'labels' => array(
'reset_button' => htmlentities(Dict::S('UI:Button:ResetImage'), ENT_QUOTES, 'UTF-8'),
'remove_button' => htmlentities(Dict::S('UI:Button:RemoveImage'), ENT_QUOTES, 'UTF-8'),
'upload_button' => $sHelpText,
'reset_button' => utils::EscapeHtml(Dict::S('UI:Button:ResetImage')),
'remove_button' => utils::EscapeHtml(Dict::S('UI:Button:RemoveImage')),
'upload_button' => !empty($sHelpText) ? $sHelpText : utils::EscapeHtml(Dict::S('UI:Button:UploadImage')),
),
);
$sEditImageOptions = json_encode($aEditImage);

View File

@@ -34,6 +34,7 @@ $ibo-input-image--edit-buttons--elements-spacing: $ibo-input-image--edit-buttons
bottom: 0;
left: 0;
right: 0;
width: 100%;
opacity: 0;
}
}

View File

@@ -1455,6 +1455,7 @@ When associated with a trigger, each action is given an "order" number, specifyi
'UI:ToggleFullScreen' => 'Toggle Maximize / Minimize',
'UI:Button:ResetImage' => 'Recover the previous image',
'UI:Button:RemoveImage' => 'Remove the image',
'UI:Button:UploadImage' => 'Upload an image from the disk',
'UI:UploadNotSupportedInThisMode' => 'The modification of images or files is not supported in this mode.',
'UI:Button:RemoveDocument' => 'Remove the document',

View File

@@ -21,7 +21,7 @@ $(function()
labels: {
reset_button: 'Reset',
remove_button: 'Remove',
upload_button: 'Upload'
upload_button: 'Upload',
}
},
@@ -56,7 +56,6 @@ $(function()
const sDisabled = this.bLoadedEmpty ? 'disabled' : '';
const sLoadedDisabled = this.bLoadedEmpty ? 'yes' : 'no';
const sUploadButtonTooltipAttribute = this.options.labels.upload_button !== '' ? 'data-tooltip-content="'+this.options.labels.upload_button+'"' : '';
let sCssClasses = "ibo-input-image--image-view attribute-image";
let sCssClassToAdd, sImageUrl;
@@ -73,9 +72,12 @@ $(function()
<input type="hidden" id="do_remove_${this.options.input_name}" name="${this.options.input_name}[remove]" value="0"/>
<div id="preview_${this.options.input_name}" class="${sCssClasses}" data-role="ibo-input-image--image-view" style="width: ${this.options.max_width_px}px; min-width: ${this.options.max_width_px}px; height: ${this.options.max_height_px}px;" min-height: ${this.options.max_height_px}px;">
<img src="${sImageUrl}" data-original-src="${sImageUrl}" data-default-src="${this.options.default_image_url}" style="max-width: ${this.options.max_width_px}px; max-height: ${this.options.max_height_px}px">
<input id="file_${this.options.input_name}" name="${this.options.input_name}[fcontents]" type="file" ${sUploadButtonTooltipAttribute} />
<input id="file_${this.options.input_name}" name="${this.options.input_name}[fcontents]" type="file" />
</div>
<div id="buttons_${this.options.input_name}" class="ibo-input-image--edit-buttons" data-role="ibo-input-image--edit-buttons">
<button id="upload_${this.options.input_name}" class="ibo-button ibo-is-alternative ibo-is-neutral" data-role="ibo-button" type="button" data-tooltip-content="${this.options.labels.upload_button}" data-tooltip-placement="right">
<span class="fas fa-cloud-upload-alt"></span>
</button>
<button id="reset_${this.options.input_name}" class="ibo-button ibo-is-alternative ibo-is-neutral" data-role="ibo-button" type="button" data-tooltip-content="${this.options.labels.reset_button}" data-tooltip-placement="right" disabled>
<span class="fas fa-undo-alt"></span>
</button>
@@ -105,6 +107,10 @@ $(function()
$('#remove_'+me.options.input_name).prop('disabled', false);
});
$('#upload_'+me.options.input_name).on('click', function () {
$('#file_'+me.options.input_name).trigger('click');
});
$('#reset_'+me.options.input_name).click(function () {
if ($(this).prop('disabled')) {
return;