Skip to content

Commit

Permalink
Merge pull request #519 from magento-vanilla/MAGETWO-34004
Browse files Browse the repository at this point in the history
[Sky EPAM]  Inline JS Elimination from Storefront
  • Loading branch information
guz-anton committed Aug 19, 2015
2 parents 59cdd47 + b6dc285 commit a279c15
Show file tree
Hide file tree
Showing 16 changed files with 422 additions and 286 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,92 +32,68 @@
data-mage-init='{"loader": {"icon": "<?php echo $block->getViewFileUrl('images/ajax-loader-tr.gif', ['area' => \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE]) ?>"}}'>
</div>

<script type="text/x-magento-init">
{
"body": {
"Magento_DesignEditor/add-class": {
"config": <?php echo $block->getTranslateMode() | 'null'; ?>
"class": <?php echo 'trnslate-inline-' . $block->getTranslateMode() . '-area' ?>
}
},
"#translate-dialog": {
"translateInlineDialogVde": {
"ajaxUrl": '<?php echo $block->getAjaxUrl() ?>',
"area": '<?php echo $block->getArea() ?>',
"translateMode": '<?php echo $block->getTranslateMode() ?>',
"textTranslations": "[data-translate-mode='text']",
"imageTranslations": "[data-translate-mode='alt']",
"scriptTranslations": "[data-translate-mode='script']"
}
},
"[data-translate-mode='text']": {
"translateInlineVde": {
"translation": "translateInlineVde"
}
},
"[data-translate-mode='alt']": {
"translateInlineImageVde": {
"translation": "translateInlineImageVde"
}
},
"[data-translate-mode='script']": {
"translateInlineScriptVde": {
"translation": "translateInlineScriptVde"
}
},
"[data-translate-mode='text'], [data-translate-mode='alt'], [data-translate-mode='script']": {
"translateInlineVde": {
"img": '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
"imgHover": '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
"translateMode": '<?php echo $block->getTranslateMode() ?>',
"mixins": ["Magento_DesignEditor/translations-click"]
}
}
}
</script>
<script>
require([
"jquery",
"mage/translate",
"mage/loader_old",
"mage/bootstrap",
"mage/edit-trigger",
"mage/translate-inline",
"mage/translate-inline-vde"
], function($){
require([
"jquery",
"mage/translate",
"mage/loader_old",
"mage/bootstrap",
"mage/edit-trigger",
"mage/translate-inline",
"mage/translate-inline-vde"
], function($){
$(window).load(function() {
var $body = $('body');
var $textTranslations = $('[data-translate-mode="text"]');
var $imageTranslations = $('[data-translate-mode="alt"]');
var $scriptTranslations = $('[data-translate-mode="script"]');

<?php if ($block->getTranslateMode()): ?>
$body.addClass('<?php echo 'trnslate-inline-' . $block->getTranslateMode() . '-area' ?>');
<?php endif; ?>

/** @todo temporary fix to add data- attribute to body. */
$body.attr("data-container", "body");

$('#translate-dialog').translateInlineDialogVde({
ajaxUrl: '<?php echo $block->getAjaxUrl() ?>',
area: '<?php echo $block->getArea() ?>',
translateMode: '<?php echo $block->getTranslateMode() ?>',
textTranslations: $textTranslations,
imageTranslations: $imageTranslations,
scriptTranslations: $scriptTranslations
});
var dialogVde = $('#translate-dialog');

$textTranslations.translateInlineVde({
img: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
imgHover: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
translateMode: '<?php echo $block->getTranslateMode() ?>',
onClick: function(e, widget) {
$body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
$textTranslations.translateInlineVde('hide');
dialogVde.translateInlineDialogVde(
'openWithWidget',
e,
widget,
$.proxy(widget.replaceText, widget)
);
}
});

$imageTranslations.translateInlineImageVde({
img: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
imgHover: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
translateMode: '<?php echo $block->getTranslateMode() ?>',
onClick: function(e, widget) {
$body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
$imageTranslations.translateInlineImageVde('hide');
dialogVde.translateInlineDialogVde(
'openWithWidget',
e,
widget,
$.proxy(widget.replaceText, widget)
);
}
});

$scriptTranslations.translateInlineScriptVde({
img: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon.png') ?>',
imgHover: '<?php echo $block->getViewFileUrl('Magento_Translation::translate_edit_icon_hover.png') ?>',
translateMode: '<?php echo $block->getTranslateMode() ?>',
onClick: function(e, widget) {
$body.removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
$scriptTranslations.translateInlineScriptVde('hide');
dialogVde.translateInlineDialogVde(
'openWithWidget',
e,
widget,
$.proxy(widget.replaceText, widget)
);
}
});

parent.jQuery('[data-translate-container]').translateInlineToggle({
frameUrl: '<?php echo $block->getFrameUrl() ?>',
refreshVdeCanvas: <?php if ($block->getRefreshCanvas()): ?>false<?php else: ?>true<?php endif; ?>,
dialogWidgetElement: dialogVde
});
});
});
});
</script>
16 changes: 16 additions & 0 deletions app/code/Magento/DesignEditor/view/frontend/web/add-class.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define(['jquery'], function ($) {
'use strict';

return function (config, element) {

if (config.config) {
$(element).addClass(config.class);
}

$('body').attr('data-container', 'body');
};
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mageUtils',
'mage/translate-inline',
'mage/translate-inline-vde'
], function ($, utils) {
'use strict';

return function (config, element) {

return utils.extend(config, {

/**
* Extended handler for
* @param {jQuery.Event} event
* @param {Object} widget
*/
onClick: function (event, widget) {
$('body').removeClass('trnslate-inline-' + widget.options.translateMode + '-area');
$(element)[config.translation]('hide');
$('#translate-dialog').translateInlineDialogVde(
'openWithWidget',
event,
widget,
$.proxy(widget.replaceText, widget)
);
}
});
};
});
21 changes: 3 additions & 18 deletions app/code/Magento/Review/view/frontend/templates/form.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -81,28 +81,13 @@
</div>
</div>
</form>
<script>
require([
"jquery",
"mage/mage"
], function($){

$('#review-form').mage('validation', {
errorPlacement: function (error, element) {
if (element.parents('#product-review-table').length) {
$('#product-review-table').siblings(this.errorElement + '.' + this.errorClass).remove();
$('#product-review-table').after(error);
} else {
element.after(error);
}
}
});
});
</script>
<script type="text/x-magento-init">
{
"[data-role=product-review-form]": {
"Magento_Ui/js/core/app": <?php echo $block->getJsLayout();?>
},
"#review-form": {
"Magento_Review/js/error-placement": {}
}
}
</script>
Expand Down
52 changes: 8 additions & 44 deletions app/code/Magento/Review/view/frontend/templates/review.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -8,48 +8,12 @@
<div id="product-review-container" data-role="product-review"></div>
<?php echo $block->getChildHtml(); ?>

<script>
require([
'jquery'
], function ($) {

function processReviews(url, fromPages) {
$.ajax({
url: url,
dataType: 'html'
}).done(function (data) {
$('#product-review-container').html(data);
$('[data-role="product-review"] .pages a').each(function (index, element) {
$(element).click(function (event) {
processReviews($(element).attr('href'), true);
event.preventDefault();
});
});
}).complete(function () {
if (fromPages == true) {
$('html, body').animate({
scrollTop: $('#reviews').offset().top - 50
}, 300);
}
});
<script type="text/x-magento-init">
{
"*": {
"Magento_Review/js/process-reviews": {
"productReviewUrl": "<?php echo $block->getProductReviewUrl();?>"
}
}

processReviews('<?php echo $block->getProductReviewUrl();?>');

$(function () {
$('.product-info-main .reviews-actions a').click(function (event) {
event.preventDefault();
var acnchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
$(".product.data.items [data-role='content']").each(function(index){
if (this.id == 'reviews') {
$('.product.data.items').tabs('activate', index);
$('html, body').animate({
scrollTop: $('#' + acnchor).offset().top - 50
}, 300);
}
});
});
});

});
</script>
}
</script>
24 changes: 24 additions & 0 deletions app/code/Magento/Review/view/frontend/web/js/error-placement.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mage/mage'
], function ($, mage) {
'use strict';

return function (config, element) {
$(element).mage('validation', {
errorPlacement: function (error, element) {

if (element.parents('#product-review-table').length) {
$('#product-review-table').siblings(this.errorElement + '.' + this.errorClass).remove();
$('#product-review-table').after(error);
} else {
element.after(error);
}
}
});
};
});
48 changes: 48 additions & 0 deletions app/code/Magento/Review/view/frontend/web/js/process-reviews.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery'
], function ($) {
'use strict';

function processReviews(url, fromPages) {
$.ajax({
url: url,
dataType: 'html'
}).done(function (data) {
$('#product-review-container').html(data);
$('[data-role="product-review"] .pages a').each(function (index, element) {
$(element).click(function (event) {
processReviews($(element).attr('href'), true);
event.preventDefault();
});
});
}).complete(function () {
if (fromPages == true) {
$('html, body').animate({
scrollTop: $('#reviews').offset().top - 50
}, 300);
}
});
}

return function (config, element) {
processReviews(config.productReviewUrl);
$(function () {
$('.product-info-main .reviews-actions a').click(function (event) {
event.preventDefault();
var acnchor = $(this).attr('href').replace(/^.*?(#|$)/, '');
$(".product.data.items [data-role='content']").each(function(index){
if (this.id == 'reviews') {
$('.product.data.items').tabs('activate', index);
$('html, body').animate({
scrollTop: $('#' + acnchor).offset().top - 50
}, 300);
}
});
});
});
};
});
13 changes: 6 additions & 7 deletions app/code/Magento/SendFriend/view/frontend/templates/send.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,11 @@
</div>
</div>
</form>
<script>
require(['jquery'], function(jQuery){

//<![CDATA[
jQuery('a[role="back"]').on('click', function() { history.back(); return false; });
//]]>

});
<script type="text/x-magento-init">
{
"a[role='back']": {
"Magento_SendFriend/back-event": {}
}
}
</script>
16 changes: 16 additions & 0 deletions app/code/Magento/SendFriend/view/frontend/web/back-event.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery'
], function ($) {
'use strict';

return function (config, element) {
$(element).on('click', function() {
history.back();
return false;
});
};
});
Loading

0 comments on commit a279c15

Please sign in to comment.