11
11
*/
12
12
namespace Magento \Catalog \Block \Adminhtml \Product \Helper \Form ;
13
13
14
+ /**
15
+ * Class BaseImage
16
+ */
14
17
class BaseImage extends \Magento \Framework \Data \Form \Element \AbstractElement
15
18
{
19
+ /**
20
+ * Element output template
21
+ */
22
+ const ELEMENT_OUTPUT_TEMPLATE = 'Magento_Catalog::product/edit/base_image.phtml ' ;
23
+
16
24
/**
17
25
* Model Url instance
18
26
*
19
27
* @var \Magento\Backend\Model\UrlInterface
20
28
*/
21
- protected $ _url ;
29
+ protected $ url ;
22
30
23
31
/**
24
32
* @var \Magento\Catalog\Helper\Data
25
33
*/
26
- protected $ _catalogHelperData ;
34
+ protected $ catalogHelperData ;
27
35
28
36
/**
29
37
* @var \Magento\Framework\File\Size
30
38
*/
31
- protected $ _fileConfig ;
39
+ protected $ fileConfig ;
32
40
33
41
/**
34
42
* @var \Magento\Framework\View\Asset\Repository
35
43
*/
36
- protected $ _assetRepo ;
44
+ protected $ assetRepo ;
45
+
46
+ /**
47
+ * @var \Magento\Framework\View\LayoutInterface
48
+ */
49
+ protected $ layout ;
37
50
38
51
/**
39
52
* @param \Magento\Framework\Data\Form\Element\Factory $factoryElement
@@ -43,6 +56,7 @@ class BaseImage extends \Magento\Framework\Data\Form\Element\AbstractElement
43
56
* @param \Magento\Backend\Model\UrlFactory $backendUrlFactory
44
57
* @param \Magento\Catalog\Helper\Data $catalogData
45
58
* @param \Magento\Framework\File\Size $fileConfig
59
+ * @param \Magento\Framework\View\LayoutInterface $layout
46
60
* @param array $data
47
61
*/
48
62
public function __construct (
@@ -53,15 +67,17 @@ public function __construct(
53
67
\Magento \Backend \Model \UrlFactory $ backendUrlFactory ,
54
68
\Magento \Catalog \Helper \Data $ catalogData ,
55
69
\Magento \Framework \File \Size $ fileConfig ,
70
+ \Magento \Framework \View \LayoutInterface $ layout ,
56
71
array $ data = []
57
72
) {
58
73
parent ::__construct ($ factoryElement , $ factoryCollection , $ escaper , $ data );
59
74
60
- $ this ->_assetRepo = $ assetRepo ;
61
- $ this ->_url = $ backendUrlFactory ->create ();
62
- $ this ->_catalogHelperData = $ catalogData ;
63
- $ this ->_fileConfig = $ fileConfig ;
64
- $ this ->_maxFileSize = $ this ->_getFileMaxSize ();
75
+ $ this ->assetRepo = $ assetRepo ;
76
+ $ this ->url = $ backendUrlFactory ->create ();
77
+ $ this ->catalogHelperData = $ catalogData ;
78
+ $ this ->fileConfig = $ fileConfig ;
79
+ $ this ->maxFileSize = $ this ->getFileMaxSize ();
80
+ $ this ->layout = $ layout ;
65
81
}
66
82
67
83
/**
@@ -71,7 +87,7 @@ public function __construct(
71
87
*/
72
88
public function getLabel ()
73
89
{
74
- return __ ('Images ' );
90
+ return __ ('Images and Videos ' );
75
91
}
76
92
77
93
/**
@@ -81,66 +97,46 @@ public function getLabel()
81
97
*/
82
98
public function getElementHtml ()
83
99
{
84
- $ htmlId = $ this ->_escaper ->escapeHtml ($ this ->getHtmlId ());
85
- $ uploadUrl = $ this ->_escaper ->escapeHtml ($ this ->_getUploadUrl ());
86
- $ spacerImage = $ this ->_assetRepo ->getUrl ('images/spacer.gif ' );
87
- $ imagePlaceholderText = __ ('Click here or drag and drop to add images. ' );
88
- $ deleteImageText = __ ('Delete image ' );
89
- $ makeBaseText = __ ('Make Base ' );
90
- $ hiddenText = __ ('Hidden ' );
91
- $ imageManagementText = __ ('Image Management ' );
92
- /** @var $product \Magento\Catalog\Model\Product */
93
- $ html = <<<HTML
94
- <div id=" {$ htmlId }-container" class="images"
95
- data-mage-init='{"baseImage":{}}'
96
- data-max-file-size=" {$ this ->_getFileMaxSize ()}"
97
- >
98
- <div class="image image-placeholder">
99
- <input type="file" name="image" data-url=" {$ uploadUrl }" multiple="multiple" />
100
- <img class="spacer" src=" {$ spacerImage }"/>
101
- <p class="image-placeholder-text"> {$ imagePlaceholderText }</p>
102
- </div>
103
- <script id=" {$ htmlId }-template" data-template="image" type="text/x-magento-template">
104
- <div class="image">
105
- <img class="spacer" src=" {$ spacerImage }"/>
106
- <img
107
- class="product-image"
108
- src="<%- data.url %>"
109
- data-position="<%- data.position %>"
110
- alt="<%- data.label %>" />
111
- <div class="actions">
112
- <button type="button" class="action-delete" data-role="delete-button" title=" {$ deleteImageText }">
113
- <span> {$ deleteImageText }</span>
114
- </button>
115
- <button type="button" class="action-make-base" data-role="make-base-button" title=" {$ makeBaseText }">
116
- <span> {$ makeBaseText }</span>
117
- </button>
118
- <div class="draggable-handle"></div>
119
- </div>
120
- <div class="image-label"></div>
121
- <div class="image-fade"><span> {$ hiddenText }</span></div>
122
- </div>
123
- </script>
124
- </div>
125
- <span class="action-manage-images" data-activate-tab="image-management">
126
- <span> {$ imageManagementText }</span>
127
- </span>
128
- <script>
129
- require([
130
- 'jquery'
131
- ],function($){
132
-
133
- 'use strict';
134
-
135
- $('[data-activate-tab=image-management]')
136
- .on('click.toggleImageManagementTab', function() {
137
- $('#product_info_tabs_image-management').trigger('click');
138
- });
139
- });
140
- </script>
141
-
142
- HTML ;
143
- return $ html ;
100
+ $ block = $ this ->createElementHtmlOutputBlock ();
101
+ $ this ->assignBlockVariables ($ block );
102
+ return $ block ->toHtml ();
103
+ }
104
+
105
+ /**
106
+ * @param \Magento\Framework\View\Element\Template $block
107
+ * @return \Magento\Framework\View\Element\Template
108
+ */
109
+ public function assignBlockVariables (\Magento \Framework \View \Element \Template $ block )
110
+ {
111
+ $ block ->assign ([
112
+ 'htmlId ' => $ this ->_escaper ->escapeHtml ($ this ->getHtmlId ()),
113
+ 'fileMaxSize ' => $ this ->maxFileSize ,
114
+ 'uploadUrl ' => $ this ->_escaper ->escapeHtml ($ this ->_getUploadUrl ()),
115
+ 'spacerImage ' => $ this ->assetRepo ->getUrl ('images/spacer.gif ' ),
116
+ 'imagePlaceholderText ' => __ ('Click here or drag and drop to add images. ' ),
117
+ 'deleteImageText ' => __ ('Delete image ' ),
118
+ 'makeBaseText ' => __ ('Make Base ' ),
119
+ 'hiddenText ' => __ ('Hidden ' ),
120
+ 'imageManagementText ' => __ ('Images and Videos ' ),
121
+ ]);
122
+
123
+ return $ block ;
124
+ }
125
+
126
+
127
+ /**
128
+ * @return \Magento\Framework\View\Element\Template
129
+ */
130
+ public function createElementHtmlOutputBlock ()
131
+ {
132
+ /** @var \Magento\Framework\View\Element\Template $block */
133
+ $ block = $ this ->layout ->createBlock (
134
+ 'Magento\Framework\View\Element\Template ' ,
135
+ 'product.details.form.base.image.element '
136
+ );
137
+ $ block ->setTemplate (self ::ELEMENT_OUTPUT_TEMPLATE );
138
+
139
+ return $ block ;
144
140
}
145
141
146
142
/**
@@ -150,16 +146,16 @@ class="product-image"
150
146
*/
151
147
protected function _getUploadUrl ()
152
148
{
153
- return $ this ->_url ->getUrl ('catalog/product_gallery/upload ' );
149
+ return $ this ->url ->getUrl ('catalog/product_gallery/upload ' );
154
150
}
155
151
156
152
/**
157
153
* Get maximum file size to upload in bytes
158
154
*
159
155
* @return int
160
156
*/
161
- protected function _getFileMaxSize ()
157
+ protected function getFileMaxSize ()
162
158
{
163
- return $ this ->_fileConfig ->getMaxFileSize ();
159
+ return $ this ->fileConfig ->getMaxFileSize ();
164
160
}
165
161
}
0 commit comments