Skip to content

Commit 8320035

Browse files
irenelagnoirenelagno
committed
Merge pull request #443 from magento-folks/product_media
[Folks] Media Gallery on Product Page
2 parents 044bada + 6d2bcb0 commit 8320035

File tree

18 files changed

+429
-329
lines changed

18 files changed

+429
-329
lines changed

‎app/code/Magento/Backend/view/adminhtml/requirejs-config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
/*eslint no-unused-vars: 0*/
6+
var config = {
7+
map: {
8+
'*': {
9+
'mediaUploader': 'Magento_Backend/js/media-uploader'
10+
}
11+
}
12+
};

‎app/code/Magento/Backend/view/adminhtml/templates/media/uploader.phtml

Lines changed: 10 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,22 @@
99
/** @var $block \Magento\Backend\Block\Media\Uploader */
1010
?>
1111

12-
<div id="<?php echo $block->getHtmlId() ?>" class="uploader">
12+
<div id="<?php echo $block->getHtmlId() ?>" class="uploader"
13+
data-mage-init='{
14+
"Magento_Backend/js/media-uploader" : {
15+
"maxFileSize": <?php /* @escapeNotVerified */ echo $block->getFileSizeService()->getMaxFileSize() ?>,
16+
"maxWidth":<?php /* @escapeNotVerified */ echo \Magento\Framework\File\Uploader::MAX_IMAGE_WIDTH ?> ,
17+
"maxHeight": <?php /* @escapeNotVerified */ echo \Magento\Framework\File\Uploader::MAX_IMAGE_HEIGHT ?>
18+
}
19+
}'
20+
>
1321
<div class="fileinput-button form-buttons button">
1422
<span><?php /* @escapeNotVerified */ echo __('Browse Files...') ?></span>
1523
<input id="fileupload" type="file" name="<?php /* @escapeNotVerified */ echo $block->getConfig()->getFileField() ?>"
1624
data-url="<?php /* @escapeNotVerified */ echo $block->getConfig()->getUrl() ?>" multiple="multiple" />
1725
</div>
1826
<div class="clear"></div>
19-
<script id="<?php echo $block->getHtmlId() ?>-template" type="text/x-magento-template">
27+
<script id="<?php echo $block->getHtmlId() ?>-template" type="text/x-magento-template" data-template="uploader">
2028
<div id="<%- data.id %>" class="file-row">
2129
<span class="file-info"><%- data.name %> (<%- data.size %>)</span>
2230
<div class="progressbar-container">
@@ -27,88 +35,3 @@
2735
</script>
2836
</div>
2937

30-
<script>
31-
require([
32-
"jquery",
33-
'mage/template',
34-
'Magento_Ui/js/modal/alert',
35-
"mage/translate",
36-
"jquery/file-uploader"
37-
], function ($, mageTemplate, alert) {
38-
39-
$('#fileupload').fileupload({
40-
dataType: 'json',
41-
formData: {
42-
'form_key': window.FORM_KEY
43-
},
44-
dropZone: '[data-tab-panel=image-management]',
45-
sequentialUploads: true,
46-
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
47-
maxFileSize: <?php /* @escapeNotVerified */ echo $block->getFileSizeService()->getMaxFileSize() ?> ,
48-
add: function (e, data) {
49-
var progressTmpl = mageTemplate('#<?php echo $block->getHtmlId(); ?>-template'),
50-
fileSize,
51-
tmpl;
52-
53-
$.each(data.files, function (index, file) {
54-
fileSize = typeof file.size == "undefined" ?
55-
$.mage.__('We could not detect a size.') :
56-
byteConvert(file.size);
57-
58-
data.fileId = Math.random().toString(33).substr(2, 18);
59-
60-
tmpl = progressTmpl({
61-
data: {
62-
name: file.name,
63-
size: fileSize,
64-
id: data.fileId
65-
}
66-
});
67-
68-
$(tmpl).appendTo('#<?php echo $block->getHtmlId() ?>');
69-
});
70-
71-
$(this).fileupload('process', data).done(function () {
72-
data.submit();
73-
});
74-
},
75-
done: function (e, data) {
76-
if (data.result && !data.result.error) {
77-
$('#<?php echo $block->getParentBlock()->getHtmlId() ?>').trigger('addItem', data.result);
78-
} else {
79-
$('#' + data.fileId)
80-
.delay(2000)
81-
.hide('highlight');
82-
alert({
83-
content: $.mage.__('We don\'t recognize or support this file extension type.')
84-
});
85-
}
86-
$('#' + data.fileId).remove();
87-
},
88-
progress: function (e, data) {
89-
var progress = parseInt(data.loaded / data.total * 100, 10);
90-
var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
91-
$(progressSelector).css('width', progress + '%');
92-
},
93-
fail: function (e, data) {
94-
var progressSelector = '#' + data.fileId;
95-
$(progressSelector).removeClass('upload-progress').addClass('upload-failure')
96-
.delay(2000)
97-
.hide('highlight')
98-
.remove();
99-
}
100-
});
101-
$('#fileupload').fileupload('option', {
102-
process: [{
103-
action: 'load',
104-
fileTypes: /^image\/(gif|jpeg|png)$/
105-
}, {
106-
action: 'resize',
107-
maxWidth: <?php /* @escapeNotVerified */ echo \Magento\Framework\File\Uploader::MAX_IMAGE_WIDTH ?> ,
108-
maxHeight: <?php /* @escapeNotVerified */ echo \Magento\Framework\File\Uploader::MAX_IMAGE_HEIGHT ?>
109-
}, {
110-
action: 'save'
111-
}]
112-
});
113-
});
114-
</script>

‎app/code/Magento/Backend/view/adminhtml/web/js/media-uploader.js

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/**
2+
*
3+
* Copyright © 2015 Magento. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
/*global byteConvert*/
7+
define([
8+
'jquery',
9+
'mage/template',
10+
'Magento_Ui/js/modal/alert',
11+
'mage/translate',
12+
'jquery/file-uploader'
13+
], function ($, mageTemplate, alert) {
14+
'use strict';
15+
16+
$.widget('mage.mediaUploader', {
17+
18+
/**
19+
*
20+
* @private
21+
*/
22+
_create: function () {
23+
var
24+
self = this,
25+
progressTmpl = mageTemplate('[data-template="uploader"]');
26+
27+
this.element.find('input[type=file]').fileupload({
28+
dataType: 'json',
29+
formData: {
30+
'form_key': window.FORM_KEY
31+
},
32+
dropZone: '[data-tab-panel=image-management]',
33+
sequentialUploads: true,
34+
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
35+
maxFileSize: this.options.maxFileSize,
36+
37+
/**
38+
* @param {Object} e
39+
* @param {Object} data
40+
*/
41+
add: function (e, data) {
42+
var
43+
fileSize,
44+
tmpl;
45+
46+
$.each(data.files, function (index, file) {
47+
fileSize = typeof file.size == 'undefined' ?
48+
$.mage.__('We could not detect a size.') :
49+
byteConvert(file.size);
50+
51+
data.fileId = Math.random().toString(33).substr(2, 18);
52+
53+
tmpl = progressTmpl({
54+
data: {
55+
name: file.name,
56+
size: fileSize,
57+
id: data.fileId
58+
}
59+
});
60+
61+
$(tmpl).appendTo(self.element);
62+
});
63+
64+
$(this).fileupload('process', data).done(function () {
65+
data.submit();
66+
});
67+
},
68+
69+
/**
70+
* @param {Object} e
71+
* @param {Object} data
72+
*/
73+
done: function (e, data) {
74+
if (data.result && !data.result.error) {
75+
self.element.trigger('addItem', data.result);
76+
} else {
77+
alert({
78+
content: $.mage.__('We don\'t recognize or support this file extension type.')
79+
});
80+
}
81+
self.element.find('#' + data.fileId).remove();
82+
},
83+
84+
/**
85+
* @param {Object} e
86+
* @param {Object} data
87+
*/
88+
progress: function (e, data) {
89+
var progress = parseInt(data.loaded / data.total * 100, 10),
90+
progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
91+
92+
self.element.find(progressSelector).css('width', progress + '%');
93+
},
94+
95+
/**
96+
* @param {Object} e
97+
* @param {Object} data
98+
*/
99+
fail: function (e, data) {
100+
var progressSelector = '#' + data.fileId;
101+
102+
self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
103+
.delay(2000)
104+
.hide('highlight')
105+
.remove();
106+
}
107+
});
108+
109+
this.element.find('input[type=file]').fileupload('option', {
110+
process: [{
111+
action: 'load',
112+
fileTypes: /^image\/(gif|jpeg|png)$/
113+
}, {
114+
action: 'resize',
115+
maxWidth: this.options.maxWidth,
116+
maxHeight: this.options.maxHeight
117+
}, {
118+
action: 'save'
119+
}]
120+
});
121+
}
122+
});
123+
124+
return $.mage.mediaUploader;
125+
});

‎app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Gallery.php

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,36 @@ class Gallery extends \Magento\Framework\View\Element\AbstractBlock
2222
{
2323
/**
2424
* Gallery field name suffix
25+
*
26+
* @var string
2527
*/
26-
private static $FIELD_NAME_SUFFIX = 'product';
28+
protected $fieldNameSuffix = 'product';
2729

2830
/**
2931
* Gallery html id
32+
*
33+
* @var string
3034
*/
31-
private static $HTML_ID = 'media_gallery';
35+
protected $htmlId = 'media_gallery';
3236

3337
/**
3438
* Gallery name
39+
*
40+
* @var string
3541
*/
36-
private static $NAME = 'product[media_gallery]';
42+
protected $name = 'product[media_gallery]';
3743

3844
/**
3945
* Html id for data scope
46+
*
47+
* @var string
48+
*/
49+
protected $image = 'image';
50+
51+
/**
52+
* @var string
4053
*/
41-
private static $IMAGE = 'image';
54+
protected $formName = 'product_form';
4255

4356
/**
4457
* @var \Magento\Store\Model\StoreManagerInterface
@@ -102,8 +115,9 @@ public function getImages()
102115
public function getContentHtml()
103116
{
104117
/* @var $content \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content */
105-
$content = $this->_layout->createBlock('Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content');
118+
$content = $this->getChildBlock('content');
106119
$content->setId($this->getHtmlId() . '_content')->setElement($this);
120+
$content->setFormName($this->formName);
107121
$galleryJs = $content->getJsObjectName();
108122
$content->getUploader()->getConfig()->setMegiaGallery($galleryJs);
109123
return $content->toHtml();
@@ -114,31 +128,31 @@ public function getContentHtml()
114128
*/
115129
protected function getHtmlId()
116130
{
117-
return static::$HTML_ID;
131+
return $this->htmlId;
118132
}
119133

120134
/**
121135
* @return string
122136
*/
123137
public function getName()
124138
{
125-
return static::$NAME;
139+
return $this->name;
126140
}
127141

128142
/**
129143
* @return string
130144
*/
131145
public function getFieldNameSuffix()
132146
{
133-
return static::$FIELD_NAME_SUFFIX;
147+
return $this->fieldNameSuffix;
134148
}
135149

136150
/**
137151
* @return string
138152
*/
139153
public function getDataScopeHtmlId()
140154
{
141-
return static::$IMAGE;
155+
return $this->image;
142156
}
143157

144158
/**

‎app/code/Magento/Catalog/Model/ProductRepository.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
use Magento\Framework\Exception\InputException;
1616
use Magento\Framework\Exception\NoSuchEntityException;
1717
use Magento\Framework\Exception\StateException;
18+
use Magento\Framework\Exception\ValidatorException;
19+
use Magento\Framework\Exception\CouldNotSaveException;
1820

1921
/**
2022
* @SuppressWarnings(PHPMD.CouplingBetweenObjects)
@@ -521,6 +523,8 @@ public function save(\Magento\Catalog\Api\Data\ProductInterface $product, $saveO
521523
$product->getData($exception->getAttributeCode()),
522524
$exception
523525
);
526+
} catch (ValidatorException $e) {
527+
throw new CouldNotSaveException(__($e->getMessage()));
524528
} catch (\Exception $e) {
525529
throw new \Magento\Framework\Exception\CouldNotSaveException(__('Unable to save product'));
526530
}

‎app/code/Magento/Catalog/Test/Unit/Model/ProductRepositoryTest.php

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,8 @@ protected function setUp()
177177
'getProductLinks',
178178
'setProductLinks',
179179
'validate',
180-
'save'
180+
'save',
181+
'getMediaGalleryEntries'
181182
],
182183
[],
183184
'',
@@ -1248,7 +1249,7 @@ public function testSaveExistingWithMediaGalleryEntries()
12481249
->method('setMediaAttribute')
12491250
->with($this->initializedProductMock, ['image', 'small_image'], 'filename1');
12501251
$this->initializedProductMock->expects($this->once())->method('getWebsiteIds')->willReturn([]);
1251-
1252+
$this->productMock->expects($this->any())->method('getMediaGalleryEntries')->willReturn(null);
12521253
$this->model->save($this->productMock);
12531254
$this->assertEquals($expectedResult, $this->initializedProductMock->getMediaGallery('images'));
12541255
}

‎app/code/Magento/Catalog/view/adminhtml/layout/catalog_product_form.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
<item name="componentType" xsi:type="string">fieldset</item>
2121
</argument>
2222
</arguments>
23+
<block class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
24+
<block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video"
25+
template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
26+
</block>
2327
</block>
2428
</referenceContainer>
2529
</referenceContainer>

0 commit comments

Comments
 (0)