Skip to content

Commit a279c15

Browse files
guz-antonguz-anton
committed
Merge pull request #519 from magento-vanilla/MAGETWO-34004
[Sky EPAM] Inline JS Elimination from Storefront
2 parents 59cdd47 + b6dc285 commit a279c15

File tree

16 files changed

+422
-286
lines changed

16 files changed

+422
-286
lines changed

‎app/code/Magento/DesignEditor/view/frontend/templates/translate_inline.phtml

Lines changed: 53 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -32,92 +32,68 @@
3232
data-mage-init='{"loader": {"icon": "<?php echo $block->getViewFileUrl('images/ajax-loader-tr.gif', ['area' => \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE]) ?>"}}'>
3333
</div>
3434

35+
<script type="text/x-magento-init">
36+
{
37+
"body": {
38+
"Magento_DesignEditor/add-class": {
39+
"config": <?php echo $block->getTranslateMode() | 'null'; ?>
40+
"class": <?php echo 'trnslate-inline-' . $block->getTranslateMode() . '-area' ?>
41+
}
42+
},
43+
"#translate-dialog": {
44+
"translateInlineDialogVde": {
45+
"ajaxUrl": '<?php echo $block->getAjaxUrl() ?>',
46+
"area": '<?php echo $block->getArea() ?>',
47+
"translateMode": '<?php echo $block->getTranslateMode() ?>',
48+
"textTranslations": "[data-translate-mode='text']",
49+
"imageTranslations": "[data-translate-mode='alt']",
50+
"scriptTranslations": "[data-translate-mode='script']"
51+
}
52+
},
53+
"[data-translate-mode='text']": {
54+
"translateInlineVde": {
55+
"translation": "translateInlineVde"
56+
}
57+
},
58+
"[data-translate-mode='alt']": {
59+
"translateInlineImageVde": {
60+
"translation": "translateInlineImageVde"
61+
}
62+
},
63+
"[data-translate-mode='script']": {
64+
"translateInlineScriptVde": {
65+
"translation": "translateInlineScriptVde"
66+
}
67+
},
68+
"[data-translate-mode='text'], [data-translate-mode='alt'], [data-translate-mode='script']": {
69+
"translateInlineVde": {
70+
"img": '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
71+
"imgHover": '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
72+
"translateMode": '<?php echo $block->getTranslateMode() ?>',
73+
"mixins": ["Magento_DesignEditor/translations-click"]
74+
}
75+
}
76+
}
77+
</script>
3578
<script>
36-
require([
37-
"jquery",
38-
"mage/translate",
39-
"mage/loader_old",
40-
"mage/bootstrap",
41-
"mage/edit-trigger",
42-
"mage/translate-inline",
43-
"mage/translate-inline-vde"
44-
], function($){
79+
require([
80+
"jquery",
81+
"mage/translate",
82+
"mage/loader_old",
83+
"mage/bootstrap",
84+
"mage/edit-trigger",
85+
"mage/translate-inline",
86+
"mage/translate-inline-vde"
87+
], function($){
4588
$(window).load(function() {
46-
var $body = $('body');
47-
var $textTranslations = $('[data-translate-mode="text"]');
48-
var $imageTranslations = $('[data-translate-mode="alt"]');
49-
var $scriptTranslations = $('[data-translate-mode="script"]');
50-
51-
<?php if ($block->getTranslateMode()): ?>
52-
$body.addClass('<?php echo 'trnslate-inline-' . $block->getTranslateMode() . '-area' ?>');
53-
<?php endif; ?>
54-
55-
/** @todo temporary fix to add data- attribute to body. */
56-
$body.attr("data-container", "body");
5789

58-
$('#translate-dialog').translateInlineDialogVde({
59-
ajaxUrl: '<?php echo $block->getAjaxUrl() ?>',
60-
area: '<?php echo $block->getArea() ?>',
61-
translateMode: '<?php echo $block->getTranslateMode() ?>',
62-
textTranslations: $textTranslations,
63-
imageTranslations: $imageTranslations,
64-
scriptTranslations: $scriptTranslations
65-
});
6690
var dialogVde = $('#translate-dialog');
6791

68-
$textTranslations.translateInlineVde({
69-
img: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
70-
imgHover: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
71-
translateMode: '<?php echo $block->getTranslateMode() ?>',
72-
onClick: function(e, widget) {
73-
$body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
74-
$textTranslations.translateInlineVde('hide');
75-
dialogVde.translateInlineDialogVde(
76-
'openWithWidget',
77-
e,
78-
widget,
79-
$.proxy(widget.replaceText, widget)
80-
);
81-
}
82-
});
83-
84-
$imageTranslations.translateInlineImageVde({
85-
img: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
86-
imgHover: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
87-
translateMode: '<?php echo $block->getTranslateMode() ?>',
88-
onClick: function(e, widget) {
89-
$body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
90-
$imageTranslations.translateInlineImageVde('hide');
91-
dialogVde.translateInlineDialogVde(
92-
'openWithWidget',
93-
e,
94-
widget,
95-
$.proxy(widget.replaceText, widget)
96-
);
97-
}
98-
});
99-
100-
$scriptTranslations.translateInlineScriptVde({
101-
img: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
102-
imgHover: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
103-
translateMode: '<?php echo $block->getTranslateMode() ?>',
104-
onClick: function(e, widget) {
105-
$body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
106-
$scriptTranslations.translateInlineScriptVde('hide');
107-
dialogVde.translateInlineDialogVde(
108-
'openWithWidget',
109-
e,
110-
widget,
111-
$.proxy(widget.replaceText, widget)
112-
);
113-
}
114-
});
115-
11692
parent.jQuery('[data-translate-container]').translateInlineToggle({
11793
frameUrl: '<?php echo $block->getFrameUrl() ?>',
11894
refreshVdeCanvas: <?php if ($block->getRefreshCanvas()): ?>false<?php else: ?>true<?php endif; ?>,
11995
dialogWidgetElement: dialogVde
12096
});
12197
});
122-
});
98+
});
12399
</script>

‎app/code/Magento/DesignEditor/view/frontend/web/add-class.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define(['jquery'], function ($) {
6+
'use strict';
7+
8+
return function (config, element) {
9+
10+
if (config.config) {
11+
$(element).addClass(config.class);
12+
}
13+
14+
$('body').attr('data-container', 'body');
15+
};
16+
});

‎app/code/Magento/DesignEditor/view/frontend/web/translations-click.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'jquery',
7+
'mageUtils',
8+
'mage/translate-inline',
9+
'mage/translate-inline-vde'
10+
], function ($, utils) {
11+
'use strict';
12+
13+
return function (config, element) {
14+
15+
return utils.extend(config, {
16+
17+
/**
18+
* Extended handler for
19+
* @param {jQuery.Event} event
20+
* @param {Object} widget
21+
*/
22+
onClick: function (event, widget) {
23+
$('body').removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
24+
$(element)[config.translation]('hide');
25+
$('#translate-dialog').translateInlineDialogVde(
26+
'openWithWidget',
27+
event,
28+
widget,
29+
$.proxy(widget.replaceText, widget)
30+
);
31+
}
32+
});
33+
};
34+
});

‎app/code/Magento/Review/view/frontend/templates/form.phtml

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -81,28 +81,13 @@
8181
</div>
8282
</div>
8383
</form>
84-
<script>
85-
require([
86-
"jquery",
87-
"mage/mage"
88-
], function($){
89-
90-
$('#review-form').mage('validation', {
91-
errorPlacement: function (error, element) {
92-
if (element.parents('#product-review-table').length) {
93-
$('#product-review-table').siblings(this.errorElement + '.' + this.errorClass).remove();
94-
$('#product-review-table').after(error);
95-
} else {
96-
element.after(error);
97-
}
98-
}
99-
});
100-
});
101-
</script>
10284
<script type="text/x-magento-init">
10385
{
10486
"[data-role=product-review-form]": {
10587
"Magento_Ui/js/core/app": <?php echo $block->getJsLayout();?>
88+
},
89+
"#review-form": {
90+
"Magento_Review/js/error-placement": {}
10691
}
10792
}
10893
</script>

‎app/code/Magento/Review/view/frontend/templates/review.phtml

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,48 +8,12 @@
88
<div id="product-review-container" data-role="product-review"></div>
99
<?php echo $block->getChildHtml(); ?>
1010

11-
<script>
12-
require([
13-
'jquery'
14-
], function ($) {
15-
16-
function processReviews(url, fromPages) {
17-
$.ajax({
18-
url: url,
19-
dataType: 'html'
20-
}).done(function (data) {
21-
$('#product-review-container').html(data);
22-
$('[data-role="product-review"] .pages a').each(function (index, element) {
23-
$(element).click(function (event) {
24-
processReviews($(element).attr('href'), true);
25-
event.preventDefault();
26-
});
27-
});
28-
}).complete(function () {
29-
if (fromPages == true) {
30-
$('html, body').animate({
31-
scrollTop: $('#reviews').offset().top - 50
32-
}, 300);
33-
}
34-
});
11+
<script type="text/x-magento-init">
12+
{
13+
"*": {
14+
"Magento_Review/js/process-reviews": {
15+
"productReviewUrl": "<?php echo $block->getProductReviewUrl();?>"
16+
}
3517
}
36-
37-
processReviews('<?php echo $block->getProductReviewUrl();?>');
38-
39-
$(function () {
40-
$('.product-info-main .reviews-actions a').click(function (event) {
41-
event.preventDefault();
42-
var acnchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
43-
$(".product.data.items [data-role='content']").each(function(index){
44-
if (this.id == 'reviews') {
45-
$('.product.data.items').tabs('activate', index);
46-
$('html, body').animate({
47-
scrollTop: $('#' + acnchor).offset().top - 50
48-
}, 300);
49-
}
50-
});
51-
});
52-
});
53-
54-
});
55-
</script>
18+
}
19+
</script>

‎app/code/Magento/Review/view/frontend/web/js/error-placement.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'jquery',
7+
'mage/mage'
8+
], function ($, mage) {
9+
'use strict';
10+
11+
return function (config, element) {
12+
$(element).mage('validation', {
13+
errorPlacement: function (error, element) {
14+
15+
if (element.parents('#product-review-table').length) {
16+
$('#product-review-table').siblings(this.errorElement + '.' + this.errorClass).remove();
17+
$('#product-review-table').after(error);
18+
} else {
19+
element.after(error);
20+
}
21+
}
22+
});
23+
};
24+
});

‎app/code/Magento/Review/view/frontend/web/js/process-reviews.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'jquery'
7+
], function ($) {
8+
'use strict';
9+
10+
function processReviews(url, fromPages) {
11+
$.ajax({
12+
url: url,
13+
dataType: 'html'
14+
}).done(function (data) {
15+
$('#product-review-container').html(data);
16+
$('[data-role="product-review"] .pages a').each(function (index, element) {
17+
$(element).click(function (event) {
18+
processReviews($(element).attr('href'), true);
19+
event.preventDefault();
20+
});
21+
});
22+
}).complete(function () {
23+
if (fromPages == true) {
24+
$('html, body').animate({
25+
scrollTop: $('#reviews').offset().top - 50
26+
}, 300);
27+
}
28+
});
29+
}
30+
31+
return function (config, element) {
32+
processReviews(config.productReviewUrl);
33+
$(function () {
34+
$('.product-info-main .reviews-actions a').click(function (event) {
35+
event.preventDefault();
36+
var acnchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
37+
$(".product.data.items [data-role='content']").each(function(index){
38+
if (this.id == 'reviews') {
39+
$('.product.data.items').tabs('activate', index);
40+
$('html, body').animate({
41+
scrollTop: $('#' + acnchor).offset().top - 50
42+
}, 300);
43+
}
44+
});
45+
});
46+
});
47+
};
48+
});

‎app/code/Magento/SendFriend/view/frontend/templates/send.phtml

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -116,12 +116,11 @@
116116
</div>
117117
</div>
118118
</form>
119-
<script>
120-
require(['jquery'], function(jQuery){
121119

122-
//<![CDATA[
123-
jQuery('a[role="back"]').on('click', function() { history.back(); return false; });
124-
//]]>
125-
126-
});
120+
<script type="text/x-magento-init">
121+
{
122+
"a[role='back']": {
123+
"Magento_SendFriend/back-event": {}
124+
}
125+
}
127126
</script>

‎app/code/Magento/SendFriend/view/frontend/web/back-event.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Copyright © 2015 Magento. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
define([
6+
'jquery'
7+
], function ($) {
8+
'use strict';
9+
10+
return function (config, element) {
11+
$(element).on('click', function() {
12+
history.back();
13+
return false;
14+
});
15+
};
16+
});

0 commit comments

Comments
 (0)