Skip to content

Commit 9a3e2c1

Browse files
authored
Merge pull request #2279 from IgniteUI/templating-split
feat(*): separating block templating from regular one
2 parents d2229a7 + 5aed0d1 commit 9a3e2c1

File tree

8 files changed

+314
-243
lines changed

8 files changed

+314
-243
lines changed
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
}
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/infragistics.loader.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ $.ig.loaderClass.locale.descriptions = {
3737
validatorDescription: "Component that offers validation options for variety of page elements.",
3838
videoPlayerDescription: "Component that displays HTML 5 videos.",
3939
templatingDescription: "A JavaScript library used to apply a content template to HTML elements.",
40+
advancedTemplatingDescription: "An extension of igTemplating that provides advanced templating features such as conditional rendering and iteration.",
4041
gridDescription: "Component used for displaying tabular data.",
4142
gridColumnMovingDescription: "Allows moving columns to change their order.",
4243
dataSourceDescription: "Component used for binding to various kinds of data.",
@@ -229,6 +230,15 @@ $.ig.dependencies = [
229230
css: [ ],
230231
description: $.ig.loaderClass.locale.descriptions.templatingDescription
231232
},
233+
{
234+
widget: "igAdvancedTemplating",
235+
dependency: [ { name: "igTemplating" } ],
236+
scripts: [ "$path$/modules/infragistics.templating.advanced.js" ],
237+
locale: [ ],
238+
group: $.ig.loaderClass.locale.miscGroup,
239+
css: [ ],
240+
description: $.ig.loaderClass.locale.descriptions.advancedTemplatingDescription
241+
},
232242
{
233243
widget: "igScroll",
234244
dependency: [ { name: "igWidget" } ],

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;
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[" + $.ig.i++ + "];";
54+
}
55+
}
56+
tmpl += $.ig._handleCompleteBlock(tokens);
57+
if (temp && temp.length > 0 && temp[ 1 ].length > 0) {
58+
$.ig.args.push(temp[ 1 ]);
59+
tmpl += "result += args[" + $.ig.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 += $.ig._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 += $.ig._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 ], $.ig._handleCompleteBlock(inner));
145+
}
146+
147+
// Parse the contents of the block
148+
htmlStrings = tokens[ 2 ].split($.ig.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)