Skip to content

Commit ad1c470

Browse files
dmitriituxdmitriitux
committed
fix
1 parent 2fcb017 commit ad1c470

4 files changed

Lines changed: 63 additions & 52 deletions

File tree

‎fields/quantumuploadimage/layouts/pickimage.php‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -38,34 +38,21 @@
3838

3939
?>
4040

41-
<div class="<?php if(isset($displayData['uploadAreaHidden']) && !(int)$displayData['uploadAreaHidden']) : ?>quantumuploadimage-preview-hidden<?php endif; ?>">
42-
<div class="quantumuploadimage-preview">
43-
<?php if(empty($img)) : ?>
44-
<div class="drag-drop">
45-
<div>
46-
<div class="quantummanager-icon quantummanager-icon-upload"></div>
47-
<div><?php echo Text::_('COM_QUANTUMMANAGER_QUANTUMUPLOAD_UPLOAD_DROP') . ' ' . Text::_('COM_QUANTUMMANAGER_QUANTUMUPLOAD_UPLOAD_SELECT') ?></div>
48-
</div>
49-
</div>
50-
<?php else: ?>
41+
<div class="<?php if(isset($displayData['dropAreaHidden']) && (int)$displayData['dropAreaHidden']) : ?>quantumuploadimage-preview-hidden<?php endif; ?>">
42+
<div class="quantumuploadimage-preview <?php if(!empty($img)) : ?>quantumuploadimage-preview-active<?php endif; ?>">
43+
<?php if(!empty($img)) : ?>
5144
<img src="<?php echo $img ?>" />
5245
<?php endif; ?>
5346
</div>
5447
<div class="quantumuploadimage-actions">
5548
<input type="text" name="<?php echo $displayData['name'] ?>" id="<?php echo $displayData['id'] ?>" value="<?php echo $value ?>" class="quantumuploadimage-input">
5649
<div class="quantumuploadimage-group-buttons">
57-
<button class="btn quantumuploadimage-upload-start"><?php echo Text::_('COM_QUANTUMMANAGER_ACTION_UPLOADING') ?></button>
50+
<?php if(isset($displayData['dropAreaHidden']) && (int)$displayData['dropAreaHidden']) : ?><button class="btn quantumuploadimage-upload-start"><?php echo Text::_('COM_QUANTUMMANAGER_ACTION_UPLOADING') ?></button><?php endif; ?>
5851
<button class="btn quantumuploadimage-change"
5952
aria-hidden="true"
6053
data-source-href="index.php?<?php echo http_build_query($quantumOptions) ?>"
6154
rel="{handler: 'iframe', size: {x: 1450, y: 700}, classWindow: 'quantummanager-modal-sbox-window'}"><?php echo Text::_('COM_QUANTUMMANAGER_ACTION_SELECT') ?></button>
6255
<button class="btn quantumuploadimage-delete" aria-hidden="true"><span class="icon-remove"></span></button>
6356
</div>
6457
</div>
65-
</div>
66-
67-
<script type="text/javascript">
68-
window.QuantumuploadimageLang = {
69-
'dragdrop': '<?php echo Text::_('COM_QUANTUMMANAGER_QUANTUMUPLOAD_UPLOAD_DROP') . ' ' . Text::_('COM_QUANTUMMANAGER_QUANTUMUPLOAD_UPLOAD_SELECT') ?>'
70-
};
71-
</script>
58+
</div>

‎fields/quantumuploadimage/quantumuploadimage.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ protected function getLayoutData()
3636
$parentData = parent::getLayoutData();
3737

3838
$parentData['cssClass'] .= ' quantumuploadimage-field';
39-
if(isset($this->uploadAreaHidden) && !(int)$this->uploadAreaHidden)
39+
if(isset($this->dropAreaHidden) && (int)$this->dropAreaHidden)
4040
{
4141
$parentData['cssClass'] .= ' quantumuploadimage-field-preview-hidden';
4242
}
@@ -57,7 +57,7 @@ public function getInput()
5757
{
5858
try
5959
{
60-
$this->__set('uploadAreaHidden', $this->getAttribute('uploadAreaHidden', true));
60+
$this->__set('dropAreaHidden', $this->getAttribute('dropAreaHidden', true));
6161
return parent::getInput();
6262
}
6363
catch (Exception $e)

‎media/quantumuploadimage/css/field.css‎

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,58 @@
11
.quantumuploadimage-field {
2+
position: relative;
23
max-width: 500px;
34
height: 350px;
45
overflow: visible;
56
}
67

8+
.quantumuploadimage-field .quantumupload-module {
9+
height: 250px;
10+
padding: 5px;
11+
background: #fbfbfb;
12+
}
13+
14+
.quantumuploadimage-field .quantumupload-module .drop-area {
15+
height: calc(100% - 55px);
16+
background: #fbfbfb;
17+
}
18+
19+
.quantumuploadimage-field .quantumupload-module .drop-area .form-upload {
20+
flex-wrap: wrap;
21+
}
22+
23+
.quantumuploadimage-field .quantumupload-module progress {
24+
position: absolute;
25+
top: -5px;
26+
z-index: 3;
27+
left: 0;
28+
}
29+
730
.quantumuploadimage-field.quantumuploadimage-field-preview-hidden {
831
height: auto;
932
}
1033

34+
.quantumuploadimage-field.quantumuploadimage-field-preview-hidden .quantumupload-module {
35+
display: none;
36+
}
37+
1138
.quantumuploadimage-field .quantumuploadimage-preview {
12-
position: relative;
13-
width: calc(100% - 4px);
14-
height: 250px;
15-
display: flex;
39+
display: none;
40+
position: absolute;
41+
top: 0;
42+
width: 100%;
43+
background: #fbfbfb;
44+
height: 260px;
1645
align-items: center;
1746
align-self: center;
1847
justify-content: center;
19-
background: #fbfbfb;
20-
border: 2px dashed #ddd;
2148
text-align: center;
2249
}
2350

24-
.quantumuploadimage-field.quantumuploadimage-field-preview-hidden .quantumuploadimage-preview{
51+
.quantumuploadimage-field .quantumuploadimage-preview.quantumuploadimage-preview-active {
52+
display: flex;
53+
}
54+
55+
.quantumuploadimage-field.quantumuploadimage-field-preview-hidden .quantumuploadimage-preview {
2556
display: none;
2657
}
2758

@@ -31,20 +62,6 @@
3162
max-height: 250px;
3263
}
3364

34-
.quantumuploadimage-field .quantumuploadimage-preview .drag-drop {
35-
display: flex;
36-
flex-wrap: wrap;
37-
justify-content: center;
38-
align-items: center;
39-
align-content: center;
40-
height: 100%;
41-
}
42-
43-
.quantumuploadimage-field .quantumuploadimage-preview .drag-drop .quantummanager-icon {
44-
width: 50px;
45-
height: 50px;
46-
}
47-
4865
.quantumuploadimage-actions {
4966
display: flex;
5067
width: 100%;

‎media/quantumuploadimage/js/field.js‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
window.QuantumuploadimageInsertFieldValue = function (value, fieldid) {
22
let input = document.querySelector('#' + fieldid),
3-
wrap = input.closest('.quantumuploadimage-field');
3+
wrap = input.closest('.quantumuploadimage-field');
44
if(value.slice(0, 1) === '/') {
55
value = value.slice(1);
66
}
@@ -12,26 +12,33 @@ window.QuantumuploadimageInsertFieldValue = function (value, fieldid) {
1212
function updateImage(wrap, image) {
1313
let preview = wrap.querySelector('.quantumuploadimage-preview');
1414
if(image !== '') {
15+
preview.classList.add('quantumuploadimage-preview-active');
1516
preview.innerHTML = '<img src="/' + image + '" />';
1617
} else {
17-
preview.innerHTML = "<div class=\"drag-drop\"><div><div class=\"quantummanager-icon quantummanager-icon-upload\"></div><div>" + QuantumuploadimageLang.dragdrop + "</div></div></div>";
18+
preview.classList.remove('quantumuploadimage-preview-active');
1819
}
1920
}
2021

2122
document.addEventListener('DOMContentLoaded' ,function () {
2223
let quantumuploadimageAll = document.querySelectorAll('.quantumuploadimage-field');
2324
for(let i=0;i<quantumuploadimageAll.length;i++) {
2425
let buttonUpload = quantumuploadimageAll[i].querySelector('.quantumuploadimage-upload-start'),
25-
buttonChange = quantumuploadimageAll[i].querySelector('.quantumuploadimage-change'),
26-
buttonDelete = quantumuploadimageAll[i].querySelector('.quantumuploadimage-delete'),
27-
input = quantumuploadimageAll[i].querySelector('.quantumuploadimage-input'),
28-
quantummanager = quantumuploadimageAll[i].closest('.quantummanager'),
29-
fmIndex = parseInt(quantummanager.getAttribute('data-index'));
26+
buttonChange = quantumuploadimageAll[i].querySelector('.quantumuploadimage-change'),
27+
buttonDelete = quantumuploadimageAll[i].querySelector('.quantumuploadimage-delete'),
28+
input = quantumuploadimageAll[i].querySelector('.quantumuploadimage-input'),
29+
quantummanager = quantumuploadimageAll[i].closest('.quantummanager'),
30+
fmIndex = parseInt(quantummanager.getAttribute('data-index'));
3031

31-
buttonUpload.addEventListener('click', function (ev) {
32-
QuantummanagerLists[fmIndex].Qantumupload.selectFiles();
33-
ev.preventDefault();
34-
});
32+
if(input.value !== '') {
33+
QuantumuploadimageInsertFieldValue(input.value, input.getAttribute('id'));
34+
}
35+
36+
if(buttonUpload !== null) {
37+
buttonUpload.addEventListener('click', function (ev) {
38+
QuantummanagerLists[fmIndex].Qantumupload.selectFiles();
39+
ev.preventDefault();
40+
});
41+
}
3542

3643
buttonChange.addEventListener('click', function (ev) {
3744
let url = this.getAttribute('data-source-href');

0 commit comments

Comments
 (0)