Skip to content

Commit bb87dce

Browse files
guz-antonguz-anton
committed
MAGETWO-32485: Merge initialization of all components on body element to one initialization file
 - Merged js-plugins for PageCache module
1 parent a1ab120 commit bb87dce

File tree

3 files changed

+214
-51
lines changed

3 files changed

+214
-51
lines changed

‎app/code/Magento/PageCache/view/frontend/requirejs-config.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,7 @@
55
var config = {
66
map: {
77
'*': {
8-
formKey: 'Magento_PageCache/js/form-key',
98
pageCache: 'Magento_PageCache/js/page-cache'
109
}
11-
},
12-
deps: [
13-
'Magento_PageCache/js/form-key',
14-
'Magento_PageCache/js/msg-box'
15-
]
16-
};
10+
}
11+
};

‎app/code/Magento/PageCache/view/frontend/templates/javascript.phtml

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,12 @@
66
<?php /** @var \Magento\PageCache\Block\Javascript $this */ ?>
77
<script type="text/javascript">
88
require([
9-
"jquery",
10-
"mage/mage"
11-
], function(jQuery){
12-
13-
//<![CDATA[
14-
jQuery(function () {
15-
jQuery('body').mage('pageCache', <?php echo $this->getScriptOptions(); ?>);
16-
});
17-
//]]>
9+
'jquery',
10+
'pageCache',
11+
'domReady!'
12+
], function($){
13+
'use strict';
1814

15+
$('body').pageCache(<?php echo $this->getScriptOptions(); ?>);
1916
});
2017
</script>

‎app/code/Magento/PageCache/view/frontend/web/js/page-cache.js

Lines changed: 206 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,105 @@
33
*
44
* @copyright Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
55
*/
6-
/*jshint browser:true jquery:true expr:true*/
6+
77
define([
8-
"jquery",
9-
"jquery/ui",
10-
"mage/cookies",
11-
"Magento_PageCache/js/comments"
12-
], function($){
13-
"use strict";
14-
8+
'jquery',
9+
'domReady',
10+
'jquery/ui',
11+
'mage/cookies'
12+
], function ($, domReady) {
13+
'use strict';
14+
15+
/**
16+
* Nodes tree to flat list converter
17+
* @returns {Array}
18+
*/
19+
$.fn.comments = function () {
20+
var elements = [];
21+
22+
/**
23+
* @param {jQuery} element - Comment holder
24+
*/
25+
(function lookup(element) {
26+
if (element.is('iframe')) {
27+
var hostName = window.location.hostname,
28+
iFrameHostName = $('<a>').prop('href', element.prop('src')).prop('hostname');
29+
30+
if (hostName != iFrameHostName) {
31+
return;
32+
}
33+
}
34+
element.contents().each(function (i, el) {
35+
if (el.nodeType == 8) {
36+
elements.push(el);
37+
} else if (el.nodeType == 1) {
38+
lookup($(el));
39+
}
40+
});
41+
})(this);
42+
43+
return elements;
44+
};
45+
46+
/**
47+
* MsgBox Widget checks if message box is displayed and sets cookie
48+
*/
49+
$.widget('mage.msgBox', {
50+
options: {
51+
msgBoxCookieName: 'message_box_display',
52+
msgBoxSelector: '.main div.messages'
53+
},
54+
55+
/**
56+
* Creates widget 'mage.msgBox'
57+
* @private
58+
*/
59+
_create: function () {
60+
if ($.mage.cookies.get(this.options.msgBoxCookieName)) {
61+
$.mage.cookies.set(this.options.msgBoxCookieName, null, {
62+
expires: new Date(),
63+
path: '/'
64+
});
65+
} else {
66+
$(this.options.msgBoxSelector).hide();
67+
}
68+
}
69+
});
70+
71+
/**
72+
* FormKey Widget - this widget is generating from key, saves it to cookie and
73+
*/
74+
$.widget('mage.formKey', {
75+
options: {
76+
inputSelector: 'input[name="form_key"]',
77+
allowedCharacters: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
78+
length: 16
79+
},
80+
81+
/**
82+
* Creates widget 'mage.formKey'
83+
* @private
84+
*/
85+
_create: function () {
86+
var date,
87+
formKey = $.mage.cookies.get('form_key');
88+
89+
if (!formKey) {
90+
formKey = generateRandomString(this.options.allowedCharacters, this.options.length);
91+
date = new Date();
92+
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
93+
$.mage.cookies.set('form_key', formKey, {
94+
expires: date,
95+
path: '/'
96+
});
97+
}
98+
$(this.options.inputSelector).val(formKey);
99+
}
100+
});
101+
102+
/**
103+
* PageCache Widget
104+
*/
15105
$.widget('mage.pageCache', {
16106
options: {
17107
url: '/',
@@ -20,26 +110,45 @@ define([
20110
versionCookieName: 'private_content_version',
21111
handles: []
22112
},
113+
114+
/**
115+
* Creates widget 'mage.pageCache'
116+
* @private
117+
*/
23118
_create: function () {
24-
var version = $.mage.cookies.get(this.options.versionCookieName);
119+
var placeholders,
120+
version = $.mage.cookies.get(this.options.versionCookieName);
121+
25122
if (!version) {
26-
return ;
123+
return;
27124
}
28-
var placeholders = this._searchPlaceholders(this.element.comments());
125+
placeholders = this._searchPlaceholders(this.element.comments());
126+
29127
if (placeholders.length) {
30128
this._ajax(placeholders, version);
31129
}
32130
},
131+
132+
/**
133+
* Parse page for placeholders.
134+
* @param {Array} elements
135+
* @returns {Array}
136+
* @private
137+
*/
33138
_searchPlaceholders: function (elements) {
34139
var placeholders = [],
35-
tmp = {};
140+
tmp = {},
141+
ii,
142+
el, matches, name;
143+
36144
if (!elements.length) {
37145
return placeholders;
38146
}
39-
for (var i = 0; i < elements.length; i++) {
40-
var el = elements[i],
41-
matches = this.options.patternPlaceholderOpen.exec(el.nodeValue),
42-
name = null;
147+
148+
for (ii = 0; ii < elements.length; ii++) {
149+
el = elements[ii];
150+
matches = this.options.patternPlaceholderOpen.exec(el.nodeValue);
151+
name = null;
43152

44153
if (matches) {
45154
name = matches[1];
@@ -49,8 +158,10 @@ define([
49158
};
50159
} else {
51160
matches = this.options.patternPlaceholderClose.exec(el.nodeValue);
161+
52162
if (matches) {
53163
name = matches[1];
164+
54165
if (tmp[name]) {
55166
tmp[name].closeElement = el;
56167
placeholders.push(tmp[name]);
@@ -59,44 +170,69 @@ define([
59170
}
60171
}
61172
}
173+
62174
return placeholders;
63175
},
64-
_replacePlaceholder: function(placeholder, html) {
176+
177+
/**
178+
* Parse for page and replace placeholders
179+
* @param {Object} placeholder
180+
* @param {Object} html
181+
* @protected
182+
*/
183+
_replacePlaceholder: function (placeholder, html) {
65184
var parent = $(placeholder.openElement).parent(),
66185
contents = parent.contents(),
67186
startReplacing = false,
68-
prevSibling = null;
69-
for (var y = 0; y < contents.length; y++) {
70-
var element = contents[y];
187+
prevSibling = null,
188+
yy,
189+
element;
190+
191+
for (yy = 0; yy < contents.length; yy++) {
192+
element = contents[yy];
193+
71194
if (element == placeholder.openElement) {
72195
startReplacing = true;
73196
}
197+
74198
if (startReplacing) {
75199
$(element).remove();
76200
} else if (element.nodeType != 8) {
77201
//due to comment tag doesn't have siblings we try to find it manually
78202
prevSibling = element;
79203
}
204+
80205
if (element == placeholder.closeElement) {
81206
break;
82207
}
83208
}
209+
84210
if (prevSibling) {
85211
$(prevSibling).after(html);
86212
} else {
87213
$(parent).prepend(html);
88214
}
215+
89216
// trigger event to use mage-data-init attribute
90217
$(parent).trigger('contentUpdated');
91218
},
219+
220+
/**
221+
* AJAX helper
222+
* @param {Object} placeholders
223+
* @param {String} version
224+
* @private
225+
*/
92226
_ajax: function (placeholders, version) {
93-
var data = {
94-
blocks: [],
95-
handles: this.options.handles,
96-
version: version
97-
};
98-
for (var i = 0; i < placeholders.length; i++) {
99-
data.blocks.push(placeholders[i].name);
227+
var ii,
228+
data = {
229+
blocks: [],
230+
handles: this.options.handles,
231+
version: version
232+
};
233+
234+
for (ii = 0; ii < placeholders.length; ii++) {
235+
data.blocks.push(placeholders[ii].name);
100236
}
101237
data.blocks = JSON.stringify(data.blocks.sort());
102238
data.handles = JSON.stringify(data.handles);
@@ -107,18 +243,53 @@ define([
107243
cache: true,
108244
dataType: 'json',
109245
context: this,
246+
247+
/**
248+
* Response handler
249+
* @param {Object} response
250+
*/
110251
success: function (response) {
111-
for (var i = 0; i < placeholders.length; i++) {
112-
var placeholder = placeholders[i];
113-
if (!response.hasOwnProperty(placeholder.name)) {
114-
continue;
252+
var placeholder, i;
253+
254+
for (i = 0; i < placeholders.length; i++) {
255+
placeholder = placeholders[i];
256+
257+
if (response.hasOwnProperty(placeholder.name)) {
258+
this._replacePlaceholder(placeholder, response[placeholder.name]);
115259
}
116-
this._replacePlaceholder(placeholder, response[placeholder.name]);
117260
}
118261
}
119262
});
120263
}
121264
});
122-
123-
return $.mage.pageCache;
124-
});
265+
266+
domReady(function () {
267+
$('body')
268+
.pageCache()
269+
.msgBox()
270+
.formKey();
271+
});
272+
273+
return {
274+
'pageCache': $.mage.pageCache,
275+
'formKey': $.mage.formKey,
276+
'msgBox': $.mage.msgBox
277+
};
278+
279+
/**
280+
* Helper. Generate random string
281+
* TODO: Merge with mage/utils
282+
* @param {String} chars - list of symbols
283+
* @param {Number} length - length for need string
284+
* @returns {String}
285+
*/
286+
function generateRandomString(chars, length) {
287+
var result = '';
288+
289+
while (length--) {
290+
result += chars[Math.round(Math.random() * (chars.length - 1))];
291+
}
292+
293+
return result;
294+
}
295+
});

0 commit comments

Comments
 (0)