Skip to content

Commit 0c032b1

Browse files
author
kdinev
committed
feat(*): separating block templating from regular one
1 parent d2229a7 commit 0c032b1

File tree

7 files changed

+259
-198
lines changed

7 files changed

+259
-198
lines changed

‎build/config/templating/instrument.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"config": [
3-
"<%= config.modulesDir%>/infragistics.templating.js"
3+
"<%= config.modulesDir%>/infragistics.templating.js",
4+
"<%= config.modulesDir%>/infragistics.templating.advanced.js"
45
]
56
}

‎build/config/templating/jshint.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"config": [
3-
"<%= config.modulesDir%>/infragistics.templating.js"
3+
"<%= config.modulesDir%>/infragistics.templating.js",
4+
"<%= config.modulesDir%>/infragistics.templating.advanced.js"
45
]
56
}

‎build/packages/combined-files.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ function coreBundle (rootPath, locale) {
5959
`${rootPath}/js/modules/infragistics.util.jquery.js`,
6060
`${rootPath}/js/modules/infragistics.datasource.js`,
6161
`${rootPath}/js/modules/infragistics.templating.js`,
62+
`${rootPath}/js/modules/infragistics.templating.advanced.js`,
6263
`${rootPath}/js/modules/infragistics.ui.widget.js`,
6364
`${rootPath}/js/modules/infragistics.ui.shared.js`,
6465
`${rootPath}/js/modules/infragistics.ui.scroll.js`

‎src/js/modules/i18n/infragistics.templating-en.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
$.ig.Templating = $.ig.Templating || {};
2222

2323
$.ig.locale.en.Templating = {
24-
undefinedArgument: 'An error has occurred while trying to retrieve data source property: '
24+
undefinedArgument: 'An error has occurred while trying to retrieve data source property: ',
25+
noAdvancedTemplating: 'The advanced templating engine is not loaded in order to handle {{if}} or {{each}}. Please include the "infragistics.templating.advanced.js" module in order to use advanced templating features.'
2526
};
2627

2728
$.ig.Templating.locale = $.ig.Templating.locale || $.ig.locale.en.Templating;

‎src/js/modules/infragistics.templating.advanced.js‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
/*!@license
2+
* Infragistics.Web.ClientUI Templating Engine <build_number>
3+
*
4+
* Copyright (c) 2011-<year> Infragistics Inc.
5+
*
6+
* Engine used for data templating
7+
*
8+
* http://www.infragistics.com/
9+
*
10+
* Depends on:
11+
* jquery.js
12+
* infragistics.util.jquery.js
13+
*/
14+
15+
/*
16+
1. comment RegExp matches comments in the template string in the form # My comment #.
17+
Unterminated comments would not be matched
18+
2. sub (substitute) RegExp matches templated data items to be replaced in the form of ${DataItem}.
19+
3. block RegExp matches terminated block statements
20+
e.g. {{if condition}} do something {{else}} do something else {{/if}}
21+
limitation: Regular expressions are equivalent to finite automatons as described by theory of computation and more precisely the formal languages and automata computability theory. This means that they are limited to recognizing languages of the type AB^nC but noy languages of the type [AB]^n which are recognized by context-free grammars (Regular expressions are still a subset of context-free grammars). However the A^nB^n is recognized due to the fact that we can use greedy regular expressions allowing us to match the last existing token of a type. Thus nested if-statements would not be recognized without stack-tokenizing the block statement.
22+
*/
23+
"use strict";
24+
(function (factory) {
25+
if (typeof define === "function" && define.amd) {
26+
27+
// AMD. Register as an anonymous module.
28+
define( [
29+
"jquery",
30+
"./infragistics.util",
31+
"./infragistics.util.jquery",
32+
"./infragistics.templating.js"
33+
], factory );
34+
} else {
35+
36+
// Browser globals
37+
factory(jQuery);
38+
}
39+
}
40+
(function ($) {
41+
42+
$.ig = $.ig || {};
43+
44+
$.extend($.ig, {
45+
_tokenizeDirectives: function (template) {
46+
var tmpl = 'var result = "";', tokens = $.ig.regExp.block.exec(template), temp;
47+
48+
// Begin handling of directives tokenization
49+
if (template.indexOf(tokens[ 0 ]) > 0 || template.length !== tokens[ 0 ].length) {
50+
temp = template.split(tokens[ 0 ]);
51+
if (temp[ 0 ] && temp[ 0 ].length > 0) {
52+
$.ig.args.push(temp[ 0 ]);
53+
tmpl += "result += args[" + this.i++ + "];";
54+
}
55+
}
56+
tmpl += this._handleCompleteBlock(tokens);
57+
if (temp && temp.length > 0 && temp[ 1 ].length > 0) {
58+
$.ig.args.push(temp[ 1 ]);
59+
tmpl += "result += args[" + this.i++ + "];";
60+
}
61+
tmpl += "return result;";
62+
63+
// Stack population is complete
64+
return tmpl;
65+
},
66+
_handleCompleteBlock: function (tokens) {
67+
var tmpl = tokens[ 0 ], template = "", blocks = [ ], i, temp;
68+
69+
// Remove the start and end tokens of the completed block
70+
tmpl = tmpl.replace("{{" + tokens[ 1 ], $.ig._directives[ tokens[ 1 ] ].start);
71+
72+
// K.D. July 4th, 2013 Bug #146297 Adding logic to handle sequential {{each}}
73+
if (tokens[ 1 ] === "each") {
74+
blocks.push(tokens[ 0 ].split(tokens[ 3 ]));
75+
blocks.push(tokens[ 2 ].split(tokens[ 3 ]));
76+
for (i = 0; i < blocks[ 1 ].length; i++) {
77+
if (blocks[ 0 ][ i ].indexOf("{{each") > 0) {
78+
temp = blocks[ 0 ][ i ].split("{{each")[ 0 ];
79+
$.ig.args.push(temp);
80+
template += "result += args[" + $.ig.i++ + "];";
81+
blocks[ 0 ][ i ] = blocks[ 0 ][ i ].substr(blocks[ 0 ][ i ].indexOf("{{each"));
82+
temp = $.ig.regExp.blockDirective.exec(blocks[ 1 ][ i ]);
83+
blocks[ 1 ][ i ] = blocks[ 1 ][ i ].substr(blocks[ 1 ][ i ].
84+
indexOf(temp[ 0 ]) + temp[ 0 ].length);
85+
}
86+
blocks[ 0 ][ i ] = blocks[ 0 ][ i ].
87+
replace("{{" + tokens[ 1 ], $.ig._directives[ tokens[ 1 ] ].start);
88+
template += this._handleEach(blocks[ 0 ][ i ] + "{{/each}}", [
89+
blocks[ 0 ][ i ] + "{{/each}}",
90+
"each",
91+
blocks[ 1 ][ i ],
92+
"{{/each}}"
93+
]);
94+
}
95+
} else if (tokens[ 1 ] === "if") {
96+
template += this._handleIfElse(tmpl, tokens);
97+
}
98+
return template;
99+
},
100+
_handleEach: function (template, tokens) {
101+
var tmpl = template, eachVar, body, forSub, sub, expr;
102+
eachVar = $.ig.regExp.sub.exec(tmpl);
103+
tmpl = tmpl.replace(eachVar[ 0 ], "");
104+
tmpl = tmpl.replace("$data", eachVar[ 0 ]);
105+
body = tokens[ 2 ];
106+
if (/\$data/.test(body)) {
107+
body = body.replace(/\$data/g, '" + ' + eachVar[ 0 ] + '[ i ] + "');
108+
$.ig.args.push(eachVar[ 0 ]);
109+
$.ig.i++;
110+
}
111+
forSub = $.ig.regExp.forSub.exec(body);
112+
while (forSub) {
113+
body = body.replace(new RegExp("\\$\\{" + forSub[ 1 ] + "\\}", "g"), '" + ' +
114+
eachVar[ 0 ] + "[ i ]" + forSub[ 1 ].substr(forSub[ 1 ].indexOf(".")) + ' + "');
115+
forSub = $.ig.regExp.forSub.exec(body);
116+
}
117+
body = body.replace(/\$index/g, '" + i + "');
118+
tmpl = tmpl.replace(tokens[ 2 ], 'result += "' + body + '"');
119+
tmpl = tmpl.replace(/\}\}/, $.ig._directives[ tokens[ 1 ] ].close);
120+
tmpl = tmpl.replace(tokens[ 3 ], $.ig._directives[ tokens[ 1 ] ].end);
121+
122+
// Parse the contents of the block
123+
// Put all data members on the stack
124+
sub = $.ig.regExp.sub.exec(tmpl);
125+
while (sub) {
126+
expr = new RegExp("\\$\\{" + sub[ 1 ] + "\\}", "g");
127+
tmpl = tmpl.replace(expr, "args[" + $.ig.i++ + "]");
128+
$.ig.args.push(sub[ 0 ]);
129+
sub = $.ig.regExp.sub.exec(tmpl);
130+
}
131+
return tmpl;
132+
},
133+
_handleIfElse: function (template, tokens) {
134+
var tmpl = template, i = 0, htmlStrings, sub, inner, index, tmplArr = [ ];
135+
136+
// Remove the start and end tokens of the completed block
137+
tmpl = tmpl.replace(/\}\}/, $.ig._directives[ tokens[ 1 ] ].close);
138+
index = tmpl.lastIndexOf(tokens[ 3 ]);
139+
tmpl = tmpl.substr(0, index) + tmpl.slice(index + tokens[ 3 ].length - 1);
140+
141+
// Check for a nested blocks and recursively handle them
142+
if ($.ig.regExp.block.test(tmpl)) {
143+
inner = $.ig.regExp.block.exec(tmpl);
144+
tmpl = tmpl.replace(inner[ 0 ], this._handleCompleteBlock(inner));
145+
}
146+
147+
// Parse the contents of the block
148+
htmlStrings = tokens[ 2 ].split(this.regExp.blockDirective);
149+
150+
// We need to make sure that we"re not replacing a substitute inside the if condition with result +=...
151+
tmplArr.push(tmpl.slice(0, tmpl.indexOf(") {") + 3));
152+
tmplArr.push(tmpl.slice(tmpl.indexOf(") {") + 3));
153+
for (i; i < htmlStrings.length; i++) {
154+
if (htmlStrings[ i ] && htmlStrings[ i ].length && htmlStrings[ i ].length > 0) {
155+
tmplArr[ 1 ] = tmplArr[ 1 ].replace(htmlStrings[ i ], "result += args[" + $.ig.i++ + "];");
156+
$.ig.args.push(htmlStrings[ i ]);
157+
}
158+
}
159+
tmpl = tmplArr.join("");
160+
161+
// End Parse
162+
// Parse block continuations such as {{else}}
163+
tokens = $.ig.regExp.blockCont.exec(tmpl);
164+
while (tokens) {
165+
tmpl = tmpl.replace("{{" + tokens[ 1 ], $.ig._directives[ tokens[ 1 ] ].start);
166+
tmpl = tmpl.replace(/\}\}/, $.ig._directives[ tokens[ 1 ] ].close);
167+
tokens = $.ig.regExp.blockCont.exec(tmpl);
168+
}
169+
170+
// Put all data members on the stack as well
171+
sub = $.ig.regExp.sub.exec(tmpl);
172+
while (sub) {
173+
tmpl = tmpl.replace(new RegExp("\\$\\{" + sub[ 1 ] + "\\}", "g"), "args[" + $.ig.i++ + "]");
174+
$.ig.args.push(sub[ 0 ]);
175+
sub = $.ig.regExp.sub.exec(tmpl);
176+
}
177+
178+
// Stack population is complete
179+
return tmpl;
180+
},
181+
_compileTemplate: function (template, data) {
182+
var i, j, k, result = "", temp, tempArgs = [ ], arg = "", f;
183+
if ($.ig.util.getType(data) !== "array") {
184+
for (j = 0; j < $.ig.args.length; j++) {
185+
arg = $.ig.args[ j ];
186+
for (i = 0; i < $.ig.tokens.length; i++) {
187+
if (arg === $.ig.tokens[ i ][ 0 ]) {
188+
arg = $.ig._getArgumentValue(data, $.ig.tokens[ i ], arg);
189+
break;
190+
} else if (typeof arg === "string") {
191+
arg = $.ig._populateArgumentValue(data, $.ig.tokens[ i ], arg);
192+
}
193+
}
194+
if (arg === undefined) {
195+
throw new Error($.ig._getLocaleString("undefinedArgument") + $.ig.tokens[ i ][ 0 ]);
196+
}
197+
if (typeof arg === "string") {
198+
arg = arg.replace($.ig.regExp.index, 0);
199+
}
200+
tempArgs.push(arg);
201+
}
202+
template = template.replace(/\$i/g, 0);
203+
/*jshint -W054 */
204+
result = new Function("args", template).call(this, tempArgs) || "";
205+
} else {
206+
temp = template.replace($.ig.regExp.index, "args[" + $.ig.args.length + "]");
207+
f = new Function("args", temp);
208+
/*jshint +W054 */
209+
for (j = 0; j < data.length; j++) {
210+
tempArgs = [ ];
211+
for (k = 0; k < $.ig.args.length; k++) {
212+
arg = $.ig.args[ k ];
213+
for (i = 0; i < $.ig.tokens.length; i++) {
214+
if (arg === $.ig.tokens[ i ][ 0 ]) {
215+
arg = $.ig._getArgumentValue(data[ j ], $.ig.tokens[ i ], arg);
216+
break;
217+
} else if (typeof arg === "string") {
218+
arg = $.ig._populateArgumentValue(data[ j ], $.ig.tokens[ i ], arg);
219+
}
220+
}
221+
if (arg === undefined) {
222+
throw new Error($.ig._getLocaleString("undefinedArgument") + $.ig.tokens[ i ][ 0 ]);
223+
}
224+
if (typeof arg === "string") {
225+
arg = arg.replace($.ig.regExp.index, j);
226+
}
227+
tempArgs.push(arg);
228+
}
229+
tempArgs.push(j);
230+
result += f.call(this, tempArgs) || "";
231+
}
232+
}
233+
return result;
234+
}
235+
});
236+
237+
}));// REMOVE_FROM_COMBINED_FILES

0 commit comments

Comments
 (0)