@progress/kendo-common-tasks 8.0.7-dev.0 → 8.0.7-dev.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -3
- package/index.js +5 -50
- package/package.json +13 -52
- package/docs-layout.hbs +0 -51
- package/docs-public/bootstrap.css +0 -6759
- package/docs-public/bootstrap.min.js +0 -7
- package/docs-public/codemirror/clike.min.js +0 -1
- package/docs-public/codemirror/codemirror.min.js +0 -5
- package/docs-public/codemirror/css.min.js +0 -1
- package/docs-public/codemirror/htmlmixed.min.js +0 -1
- package/docs-public/codemirror/javascript.min.js +0 -1
- package/docs-public/codemirror/jsx.min.js +0 -1
- package/docs-public/codemirror/php.min.js +0 -1
- package/docs-public/codemirror/runmode.min.js +0 -1
- package/docs-public/codemirror/xml.min.js +0 -1
- package/docs-public/docs.css +0 -208
- package/docs-public/docs.scss +0 -253
- package/docs-public/editor/angular/app/app.component.ts +0 -3
- package/docs-public/editor/angular/app/app.module.ts +0 -14
- package/docs-public/editor/angular/index.html +0 -32
- package/docs-public/editor/angular/main.ts +0 -15
- package/docs-public/editor/angular/polyfills.ts +0 -73
- package/docs-public/editor/angular/styles.css +0 -13
- package/docs-public/editor/builder/app/app.component.html +0 -1
- package/docs-public/editor/builder/app/app.component.ts +0 -17
- package/docs-public/editor/builder/app/app.css +0 -449
- package/docs-public/editor/builder/app/app.module.ts +0 -53
- package/docs-public/editor/builder/app/core/core.module.ts +0 -19
- package/docs-public/editor/builder/app/core/data/data-services.exports.ts +0 -71
- package/docs-public/editor/builder/app/core/data/data.service.ts +0 -183
- package/docs-public/editor/builder/app/core/data/odata-service-factory.ts +0 -23
- package/docs-public/editor/builder/app/core/data/odata.service.ts +0 -88
- package/docs-public/editor/builder/app/core/module.config.ts +0 -19
- package/docs-public/editor/builder/app/data/odata-provider/customer.config.ts +0 -17
- package/docs-public/editor/builder/app/data/odata-provider/customer.model.ts +0 -17
- package/docs-public/editor/builder/app/grid-demo.base.component.ts +0 -107
- package/docs-public/editor/builder/app/grid-demo.component.html +0 -37
- package/docs-public/editor/builder/app/grid-demo.component.ts +0 -1
- package/docs-public/editor/builder/app/shared/components/grid/grid.component.html +0 -5
- package/docs-public/editor/builder/app/shared/components/grid/grid.component.ts +0 -243
- package/docs-public/editor/builder/app/shared/services/grid-incell-editing.service.ts +0 -120
- package/docs-public/editor/builder/app/topSection.html +0 -12
- package/docs-public/editor/builder/app/topSection.ts +0 -25
- package/docs-public/editor/builder/assets/themes/metro.css +0 -18877
- package/docs-public/editor/builder/index.html +0 -14
- package/docs-public/editor/builder/main.ts +0 -14
- package/docs-public/editor/builder/polyfills.ts +0 -67
- package/docs-public/editor/builder/styles.css +0 -1
- package/docs-public/editor/builder/tsconfig.app.json +0 -13
- package/docs-public/editor/builder/typings.d.ts +0 -5
- package/docs-public/editor/react/app/main.jsx +0 -6
- package/docs-public/editor/react/index.html +0 -32
- package/docs-public/editor/vue/app/main.js +0 -5
- package/docs-public/editor/vue/index.html +0 -29
- package/docs-public/example-runner.js +0 -802
- package/docs-public/github.css +0 -99
- package/docs-public/snippets.js +0 -1722
- package/docs-public/tomorrow-night.css +0 -75
- package/docs-server.js +0 -152
- package/lint-slugs.js +0 -25
- package/markdown-serve/index.js +0 -10
- package/markdown-serve/parser.js +0 -234
- package/markdown-serve/resolver.js +0 -86
- package/markdown-serve/server.js +0 -370
- package/test/jest-setup.js +0 -2
- package/test/snippets.test.js +0 -373
package/docs-public/snippets.js
DELETED
|
@@ -1,1722 +0,0 @@
|
|
|
1
|
-
/* eslint no-var: 0 */
|
|
2
|
-
/* eslint no-invalid-this: 0 */
|
|
3
|
-
/* eslint consistent-this: 0 */
|
|
4
|
-
/* eslint no-console: 0 */
|
|
5
|
-
/* eslint-env browser, jquery */
|
|
6
|
-
/* global kendo */
|
|
7
|
-
|
|
8
|
-
function debounce(func, wait, immediate) {
|
|
9
|
-
var timeout;
|
|
10
|
-
return function() {
|
|
11
|
-
var context = this;
|
|
12
|
-
var args = arguments;
|
|
13
|
-
var later = function() {
|
|
14
|
-
timeout = null;
|
|
15
|
-
if (!immediate) {
|
|
16
|
-
func.apply(context, args);
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
var callNow = immediate && !timeout;
|
|
20
|
-
clearTimeout(timeout);
|
|
21
|
-
timeout = setTimeout(later, wait);
|
|
22
|
-
if (callNow) {
|
|
23
|
-
func.apply(context, args);
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
var previewTemplate = kendo.template(
|
|
29
|
-
"<ul class='docs-tabstrip nav' >" +
|
|
30
|
-
"<li class='active'><a class='active' href='\\#preview-#= index #' data-toggle='tab'>Example</a></li>" +
|
|
31
|
-
"<li><a href='\\#code-#= index #' data-toggle='tab'>View Source</a></li>" +
|
|
32
|
-
"<li class='editor-container'>" +
|
|
33
|
-
"#= editButtonTemplate #" +
|
|
34
|
-
"</li>" +
|
|
35
|
-
"</ul>" +
|
|
36
|
-
"<div class='tab-content'>" +
|
|
37
|
-
"<div class='tab-pane active tab-preview' id='preview-#= index #'></div>" +
|
|
38
|
-
"<div class='tab-pane tab-code' id='code-#= index #'></div>" +
|
|
39
|
-
"</div>");
|
|
40
|
-
|
|
41
|
-
var fileListTemplate = kendo.template(
|
|
42
|
-
"<div class='file-list'>" +
|
|
43
|
-
"<ul class='docs-tabstrip nav'>" +
|
|
44
|
-
"# for (var i = 0; i < files.length; i++) { #" +
|
|
45
|
-
"#var filename = files[i].getAttribute('data-file')#" +
|
|
46
|
-
"#if(i === 0){# <li class='active'> #}else{# <li> #}#" +
|
|
47
|
-
"<a href='\\#filename#=i#-#=index#' data-toggle='tab'>#=filename#</a>" +
|
|
48
|
-
"</li>" +
|
|
49
|
-
"# } #" +
|
|
50
|
-
"</ul>" +
|
|
51
|
-
"<div class='tab-content'></div>" +
|
|
52
|
-
"</div>"
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
var editorTemplate = kendo.template(
|
|
56
|
-
"<div class='dialog-overlay'>" +
|
|
57
|
-
"<div class='editor dialog dialog-enter'>" +
|
|
58
|
-
"<h3>Sandbox</h3>" +
|
|
59
|
-
"<button class='button-close'><span>X</span></button>" +
|
|
60
|
-
"<div class='editor-container'>" +
|
|
61
|
-
"#= editButtonTemplate #" +
|
|
62
|
-
"</div>" +
|
|
63
|
-
"<div class='edit-area clearfix'>" +
|
|
64
|
-
"<div class='col-xs-6 col-md-6 col-lg-6'>" +
|
|
65
|
-
"# for (var i = 0; i < block.types.length; i++) { #" +
|
|
66
|
-
"<div class='pane pane-#: block.types[i].language #' data-code-language='#: block.types[i].label #' />" +
|
|
67
|
-
"# } #" +
|
|
68
|
-
"</div>" +
|
|
69
|
-
"<div class='col-xs-6 col-md-6 col-lg-6'>" +
|
|
70
|
-
"<div class='pane-preview' data-code-language='Preview' />" +
|
|
71
|
-
"</div>" +
|
|
72
|
-
"</div>" +
|
|
73
|
-
"</div>" +
|
|
74
|
-
"</div>"
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
var htmlTemplate = kendo.template(
|
|
78
|
-
'<!doctype html>\n\
|
|
79
|
-
<html>\n\
|
|
80
|
-
<head>\n\
|
|
81
|
-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\n\
|
|
82
|
-
<link rel="stylesheet" href="#: data.npmUrl #/@progress/kendo-theme-#: data.theme || "default" #/dist/all.css" />\n\
|
|
83
|
-
<style>\n\
|
|
84
|
-
body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }\n\
|
|
85
|
-
</style>\n\
|
|
86
|
-
</head>\n\
|
|
87
|
-
<body>\n\
|
|
88
|
-
#= data.html #\n\
|
|
89
|
-
</body>\n\
|
|
90
|
-
</html>\
|
|
91
|
-
', { useWithBlock: false });
|
|
92
|
-
|
|
93
|
-
var plunkerTemplate = kendo.template(
|
|
94
|
-
'<!doctype html>\
|
|
95
|
-
<html>\
|
|
96
|
-
<head>\
|
|
97
|
-
# if (data.platform === \'builder\') { # <base href="#= window.editorTemplatesPath + window.k2platform + "/" #" /> #}# \
|
|
98
|
-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\
|
|
99
|
-
<link rel="stylesheet" href="#: data.npmUrl #/@progress/kendo-theme-#: data.theme || "default" #/dist/all.css" />\
|
|
100
|
-
<style>\
|
|
101
|
-
body { font-family: "RobotoRegular",Helvetica,Arial,sans-serif; font-size: 14px; margin: 0; }\
|
|
102
|
-
my-app, \\#vueapp { display: block; width: 100%; overflow: hidden; min-height: 80px; box-sizing: border-box; padding: 30px; }\
|
|
103
|
-
my-app > .k-icon.k-i-loading, \\#vueapp > .k-icon.k-i-loading { font-size: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }\
|
|
104
|
-
.example-wrapper { min-height: 280px; align-content: flex-start; }\
|
|
105
|
-
.example-wrapper p, .example-col p { margin: 20px 0 10px; }\
|
|
106
|
-
.example-wrapper p:first-child, .example-col p:first-child { margin-top: 0; }\
|
|
107
|
-
.example-col { display: inline-block; vertical-align: top; padding-right: 20px; padding-bottom: 20px; }\
|
|
108
|
-
.example-config { margin: 0 0 20px; padding: 20px; background-color: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); }\
|
|
109
|
-
.event-log { margin: 0; padding: 0; max-height: 100px; overflow-y: auto; list-style-type: none; border: 1px solid rgba(0,0,0,.08); background-color: \\#fff; }\
|
|
110
|
-
.event-log li {margin: 0; padding: .3em; line-height: 1.2em; border-bottom: 1px solid rgba(0,0,0,.08); }\
|
|
111
|
-
.event-log li:last-child { margin-bottom: -1px;}\
|
|
112
|
-
\\#vueapp:not([v-cloak]) > .k-icon.k-i-loading {display: none }\
|
|
113
|
-
\\#vueapp[v-cloak] :not(.k-i-loading) { display: none; } \
|
|
114
|
-
</style>\
|
|
115
|
-
#for (var i = 0; i < data.styles.length; i++){ #\
|
|
116
|
-
<style>\
|
|
117
|
-
#= data.styles[i].html #\
|
|
118
|
-
</style\
|
|
119
|
-
# } # \
|
|
120
|
-
<script src="https://unpkg.com/core-js@2.5.7/client/shim.min.js"></script>\
|
|
121
|
-
# if (data.platform === \'builder\') { # <script src="https://unpkg.com/zone.js"></script> #}#\
|
|
122
|
-
#= data.cdnResources #\
|
|
123
|
-
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.js"></script>\
|
|
124
|
-
<script src="#: data.exampleRunner #"></script>\
|
|
125
|
-
<script>\
|
|
126
|
-
var runner = new ExampleRunner("#= data.platform #");\
|
|
127
|
-
runner.configure(System, { npmUrl: "#: data.npmUrl #", modules: ' + JSON.stringify(moduleDirectives) + ', language: "#: data.language #", trackjs: #= data.track # });\
|
|
128
|
-
# for (var i = 0; i < data.scripts.length; i++) { #\
|
|
129
|
-
runner.register("app/", "#= data.scripts[i].name #", "#= data.scripts[i].content #");\
|
|
130
|
-
# } #\
|
|
131
|
-
# for (var i = 0; i < data.styles.length; i++) { #\
|
|
132
|
-
runner.register("app/", "#= data.styles[i].name #", "");\
|
|
133
|
-
# } #\
|
|
134
|
-
runner.start(System);\
|
|
135
|
-
</script>\
|
|
136
|
-
</head>\
|
|
137
|
-
<body>\
|
|
138
|
-
#= data.html #\
|
|
139
|
-
# if (data.platform !== "vue") { #\
|
|
140
|
-
<my-app>\
|
|
141
|
-
<span class="k-icon k-i-loading" style="color: #: data.themeAccent || "\\#ff6358" #"></span>\
|
|
142
|
-
</my-app>\
|
|
143
|
-
# } else {#\
|
|
144
|
-
<script>\
|
|
145
|
-
document.addEventListener("DOMContentLoaded", function(){\
|
|
146
|
-
var loadingIcon = document.createElement("span");\
|
|
147
|
-
loadingIcon.className = "k-icon k-i-loading";\
|
|
148
|
-
loadingIcon.style.color = "#: data.themeAccent || "\\#ff6358" #";\
|
|
149
|
-
var vueapp = document.getElementById("vueapp");\
|
|
150
|
-
if (vueapp) {\
|
|
151
|
-
vueapp.appendChild(loadingIcon);\
|
|
152
|
-
vueapp.setAttribute("v-cloak", null);\
|
|
153
|
-
}\
|
|
154
|
-
}, false);\
|
|
155
|
-
</script>\
|
|
156
|
-
# }#\
|
|
157
|
-
</body>\
|
|
158
|
-
</html>\
|
|
159
|
-
', { useWithBlock: false });
|
|
160
|
-
|
|
161
|
-
var stackBlitzDependencies = {
|
|
162
|
-
'angular': function(channel) {
|
|
163
|
-
var ngVer = '8.2.14';
|
|
164
|
-
return {
|
|
165
|
-
'core-js': '2.6.11',
|
|
166
|
-
'hammerjs': '2.0.8',
|
|
167
|
-
'rxjs': '6.5.3',
|
|
168
|
-
'web-animations-js': '2.3.1',
|
|
169
|
-
'zone.js': '0.9.1',
|
|
170
|
-
'@angular/animations': ngVer,
|
|
171
|
-
'@angular/core': ngVer,
|
|
172
|
-
'@angular/common': ngVer,
|
|
173
|
-
'@angular/compiler': ngVer,
|
|
174
|
-
'@angular/platform-browser': ngVer,
|
|
175
|
-
'@angular/platform-browser-dynamic': ngVer,
|
|
176
|
-
'@angular/router': ngVer,
|
|
177
|
-
'@angular/forms': ngVer,
|
|
178
|
-
'@progress/kendo-intl': channel,
|
|
179
|
-
'@progress/kendo-draggable': channel,
|
|
180
|
-
'@progress/kendo-date-math': channel,
|
|
181
|
-
'@progress/kendo-drawing': channel,
|
|
182
|
-
'@progress/kendo-data-query': channel,
|
|
183
|
-
'@progress/kendo-file-saver': channel,
|
|
184
|
-
'@progress/kendo-charts': channel,
|
|
185
|
-
'@progress/kendo-recurrence': channel,
|
|
186
|
-
'@progress/kendo-angular-buttons': channel,
|
|
187
|
-
'@progress/kendo-angular-common': channel,
|
|
188
|
-
'@progress/kendo-angular-charts': channel,
|
|
189
|
-
'@progress/kendo-angular-conversational-ui': channel,
|
|
190
|
-
'@progress/kendo-angular-dateinputs': channel,
|
|
191
|
-
'@progress/kendo-angular-dialog': channel,
|
|
192
|
-
'@progress/kendo-angular-dropdowns': channel,
|
|
193
|
-
'@progress/kendo-angular-editor': channel,
|
|
194
|
-
'@progress/kendo-angular-excel-export': channel,
|
|
195
|
-
'@progress/kendo-angular-gauges': channel,
|
|
196
|
-
'@progress/kendo-angular-grid': channel,
|
|
197
|
-
'@progress/kendo-angular-inputs': channel,
|
|
198
|
-
'@progress/kendo-angular-intl': channel,
|
|
199
|
-
'@progress/kendo-angular-l10n': channel,
|
|
200
|
-
'@progress/kendo-angular-label': channel,
|
|
201
|
-
'@progress/kendo-angular-layout': channel,
|
|
202
|
-
'@progress/kendo-angular-menu': channel,
|
|
203
|
-
'@progress/kendo-angular-notification': channel,
|
|
204
|
-
'@progress/kendo-angular-pager': channel,
|
|
205
|
-
'@progress/kendo-angular-pdf-export': channel,
|
|
206
|
-
'@progress/kendo-angular-popup': channel,
|
|
207
|
-
'@progress/kendo-angular-progressbar': channel,
|
|
208
|
-
'@progress/kendo-angular-ripple': channel,
|
|
209
|
-
'@progress/kendo-angular-scheduler': channel,
|
|
210
|
-
'@progress/kendo-angular-scrollview': channel,
|
|
211
|
-
'@progress/kendo-angular-sortable': channel,
|
|
212
|
-
'@progress/kendo-angular-toolbar': channel,
|
|
213
|
-
'@progress/kendo-angular-tooltip': channel,
|
|
214
|
-
'@progress/kendo-angular-treeview': channel,
|
|
215
|
-
'@progress/kendo-angular-treelist': channel,
|
|
216
|
-
'@progress/kendo-angular-listview': channel,
|
|
217
|
-
'@progress/kendo-angular-indicators': channel,
|
|
218
|
-
'@progress/kendo-angular-icons': channel,
|
|
219
|
-
'@progress/kendo-angular-navigation': channel,
|
|
220
|
-
'@progress/kendo-angular-upload': channel
|
|
221
|
-
};
|
|
222
|
-
},
|
|
223
|
-
'builder': function() {
|
|
224
|
-
return {
|
|
225
|
-
"@angular/animations": "^5.2.10",
|
|
226
|
-
"@angular/common": "^5.2.10",
|
|
227
|
-
"@angular/compiler": "^5.2.10",
|
|
228
|
-
"@angular/core": "^5.2.10",
|
|
229
|
-
"@angular/forms": "^5.2.10",
|
|
230
|
-
"@angular/http": "^5.2.10",
|
|
231
|
-
"@angular/platform-browser": "^5.2.10",
|
|
232
|
-
"@angular/platform-browser-dynamic": "^5.2.10",
|
|
233
|
-
"@angular/router": "^5.2.10",
|
|
234
|
-
"@progress/kendo-angular-buttons": "^2.0.0",
|
|
235
|
-
"@progress/kendo-angular-charts": "^1.4.0",
|
|
236
|
-
"@progress/kendo-angular-dateinputs": "^1.4.3",
|
|
237
|
-
"@progress/kendo-angular-dialog": "^3.1.2",
|
|
238
|
-
"@progress/kendo-angular-dropdowns": "^2.1.0",
|
|
239
|
-
"@progress/kendo-angular-excel-export": "^1.0.5",
|
|
240
|
-
"@progress/kendo-angular-grid": "^1.7.1",
|
|
241
|
-
"@progress/kendo-angular-inputs": "^1.4.2",
|
|
242
|
-
"@progress/kendo-angular-intl": "^1.3.0",
|
|
243
|
-
"@progress/kendo-angular-l10n": "^1.0.5",
|
|
244
|
-
"@progress/kendo-angular-label": "1.0.5",
|
|
245
|
-
"@progress/kendo-angular-layout": "^2.2.0",
|
|
246
|
-
"@progress/kendo-angular-popup": "^1.3.2",
|
|
247
|
-
"@progress/kendo-data-query": "^1.1.2",
|
|
248
|
-
"@progress/kendo-drawing": "^1.4.1",
|
|
249
|
-
"@progress/kendo-theme-bootstrap": "^2.11.11",
|
|
250
|
-
"@progress/kendo-theme-default": "^2.50.0",
|
|
251
|
-
"@progress/kendo-theme-material": "^0.3.0",
|
|
252
|
-
"bootstrap": "4.0.0-beta.2",
|
|
253
|
-
"font-awesome": "^4.7.0",
|
|
254
|
-
"rxjs": "^5.5.6",
|
|
255
|
-
"zone.js": "^0.8.26"
|
|
256
|
-
};
|
|
257
|
-
},
|
|
258
|
-
'vue': function(channel) {
|
|
259
|
-
return {
|
|
260
|
-
"@progress/kendo-vue-grid": channel,
|
|
261
|
-
"@progress/kendo-vue-data-tools": channel,
|
|
262
|
-
"@progress/kendo-vue-dropdowns": channel,
|
|
263
|
-
"@progress/kendo-vue-dateinputs": channel,
|
|
264
|
-
"@progress/kendo-vue-dialogs": channel,
|
|
265
|
-
"@progress/kendo-vue-inputs": channel,
|
|
266
|
-
"@progress/kendo-drawing": channel,
|
|
267
|
-
"@progress/kendo-vue-intl": channel,
|
|
268
|
-
"@progress/kendo-data-query": channel,
|
|
269
|
-
"@progress/kendo-vue-excel-export": channel,
|
|
270
|
-
"@progress/kendo-vue-pdf": channel,
|
|
271
|
-
"@progress/kendo-vue-animation": channel,
|
|
272
|
-
"@progress/kendo-vue-popup": channel,
|
|
273
|
-
"vue": "^2.6.11"
|
|
274
|
-
};
|
|
275
|
-
},
|
|
276
|
-
'react': function(channel) {
|
|
277
|
-
return {
|
|
278
|
-
"@progress/kendo-data-query": channel,
|
|
279
|
-
"@progress/kendo-date-math": channel,
|
|
280
|
-
"@progress/kendo-drawing": channel,
|
|
281
|
-
"@progress/kendo-file-saver": channel,
|
|
282
|
-
"@progress/kendo-react-animation": channel,
|
|
283
|
-
"@progress/kendo-react-buttons": channel,
|
|
284
|
-
"@progress/kendo-react-charts": channel,
|
|
285
|
-
"@progress/kendo-react-conversational-ui": channel,
|
|
286
|
-
"@progress/kendo-react-dateinputs": channel,
|
|
287
|
-
"@progress/kendo-react-dialogs": channel,
|
|
288
|
-
"@progress/kendo-react-dropdowns": channel,
|
|
289
|
-
"@progress/kendo-react-editor": channel,
|
|
290
|
-
"@progress/kendo-react-excel-export": channel,
|
|
291
|
-
"@progress/kendo-react-gauges": channel,
|
|
292
|
-
"@progress/kendo-react-grid": channel,
|
|
293
|
-
"@progress/kendo-react-inputs": channel,
|
|
294
|
-
"@progress/kendo-react-intl": channel,
|
|
295
|
-
"@progress/kendo-react-layout": channel,
|
|
296
|
-
"@progress/kendo-react-pdf": channel,
|
|
297
|
-
"@progress/kendo-react-popup": channel,
|
|
298
|
-
"@progress/kendo-react-ripple": channel,
|
|
299
|
-
"@progress/kendo-react-tooltip": channel,
|
|
300
|
-
"@progress/kendo-react-treeview": channel,
|
|
301
|
-
"@progress/kendo-react-upload": channel,
|
|
302
|
-
"cldr-core": "^33.0.0",
|
|
303
|
-
"cldr-dates-full": "^33.0.0",
|
|
304
|
-
"cldr-numbers-full": "^33.0.0",
|
|
305
|
-
"hammerjs": "~2.0.8",
|
|
306
|
-
"object-assign": "^4.0.1",
|
|
307
|
-
"prop-types": "^15.6.0",
|
|
308
|
-
"react": "^16.8.2",
|
|
309
|
-
"react-dom": "^16.8.2",
|
|
310
|
-
"redux": "3.7.2",
|
|
311
|
-
"react-redux": "5.0.6",
|
|
312
|
-
"react-router": "4.2.0",
|
|
313
|
-
"react-router-dom": "4.2.2",
|
|
314
|
-
"react-transition-group": "^2.2.1",
|
|
315
|
-
"rxjs": "^5.5.10"
|
|
316
|
-
};
|
|
317
|
-
},
|
|
318
|
-
'vue-wrappers': function(channel) {
|
|
319
|
-
return {
|
|
320
|
-
"@progress/kendo-barcodes-vue-wrapper": channel,
|
|
321
|
-
"@progress/kendo-buttons-vue-wrapper": channel,
|
|
322
|
-
"@progress/kendo-charts-vue-wrapper": channel,
|
|
323
|
-
"@progress/kendo-chat-vue-wrapper": channel,
|
|
324
|
-
"@progress/kendo-datasource-vue-wrapper": channel,
|
|
325
|
-
"@progress/kendo-dateinputs-vue-wrapper": channel,
|
|
326
|
-
"@progress/kendo-diagram-vue-wrapper": channel,
|
|
327
|
-
"@progress/kendo-dialog-vue-wrapper": channel,
|
|
328
|
-
"@progress/kendo-dropdowns-vue-wrapper": channel,
|
|
329
|
-
"@progress/kendo-dropdowntree-vue-wrapper": channel,
|
|
330
|
-
"@progress/kendo-gantt-vue-wrapper": channel,
|
|
331
|
-
"@progress/kendo-gauges-vue-wrapper": channel,
|
|
332
|
-
"@progress/kendo-grid-vue-wrapper": channel,
|
|
333
|
-
"@progress/kendo-editor-vue-wrapper": channel,
|
|
334
|
-
"@progress/kendo-inputs-vue-wrapper": channel,
|
|
335
|
-
"@progress/kendo-layout-vue-wrapper": channel,
|
|
336
|
-
"@progress/kendo-listbox-vue-wrapper": channel,
|
|
337
|
-
"@progress/kendo-listview-vue-wrapper": channel,
|
|
338
|
-
"@progress/kendo-map-vue-wrapper": channel,
|
|
339
|
-
"@progress/kendo-mediaplayer-vue-wrapper": channel,
|
|
340
|
-
"@progress/kendo-pivotgrid-vue-wrapper": channel,
|
|
341
|
-
"@progress/kendo-popups-vue-wrapper": channel,
|
|
342
|
-
"@progress/kendo-scheduler-vue-wrapper": channel,
|
|
343
|
-
"@progress/kendo-spreadsheet-vue-wrapper": channel,
|
|
344
|
-
"@progress/kendo-treelist-vue-wrapper": channel,
|
|
345
|
-
"@progress/kendo-treemap-vue-wrapper": channel,
|
|
346
|
-
"@progress/kendo-treeview-vue-wrapper": channel,
|
|
347
|
-
"@progress/kendo-upload-vue-wrapper": channel,
|
|
348
|
-
"@progress/kendo-validator-vue-wrapper": channel,
|
|
349
|
-
"@progress/kendo-window-vue-wrapper": channel,
|
|
350
|
-
"@progress/kendo-ui": "*",
|
|
351
|
-
"vue": "^2.6.11",
|
|
352
|
-
"jszip": "2.4.0"
|
|
353
|
-
};
|
|
354
|
-
},
|
|
355
|
-
'react-wrappers': function() {
|
|
356
|
-
return {
|
|
357
|
-
"@progress/kendo-ui": '*',
|
|
358
|
-
"@progress/kendo-data-query": "*",
|
|
359
|
-
"@progress/kendo-date-math": "*",
|
|
360
|
-
"@progress/kendo-drawing": "*",
|
|
361
|
-
"@progress/kendo-file-saver": "*",
|
|
362
|
-
"@progress/kendo-barcodes-react-wrapper": "*",
|
|
363
|
-
"@progress/kendo-buttons-react-wrapper": "*",
|
|
364
|
-
"@progress/kendo-dateinputs-react-wrapper": "*",
|
|
365
|
-
"@progress/kendo-dropdowns-react-wrapper": "*",
|
|
366
|
-
"@progress/kendo-editor-react-wrapper": "*",
|
|
367
|
-
"@progress/kendo-gantt-react-wrapper": "*",
|
|
368
|
-
"@progress/kendo-gauges-react-wrapper": "*",
|
|
369
|
-
"@progress/kendo-grid-react-wrapper": "*",
|
|
370
|
-
"@progress/kendo-inputs-react-wrapper": "*",
|
|
371
|
-
"@progress/kendo-layout-react-wrapper": "*",
|
|
372
|
-
"@progress/kendo-pivotgrid-react-wrapper": "*",
|
|
373
|
-
"@progress/kendo-popups-react-wrapper": "*",
|
|
374
|
-
"@progress/kendo-scheduler-react-wrapper": "*",
|
|
375
|
-
"@progress/kendo-spreadsheet-react-wrapper": "*",
|
|
376
|
-
"@progress/kendo-treelist-react-wrapper": "*",
|
|
377
|
-
"@progress/kendo-treeview-react-wrapper": "*",
|
|
378
|
-
"@progress/kendo-upload-react-wrapper": "*",
|
|
379
|
-
"@progress/kendo-validator-react-wrapper": "*",
|
|
380
|
-
"jquery": "*",
|
|
381
|
-
"hammerjs": "~2.0.8",
|
|
382
|
-
"object-assign": "^4.0.1",
|
|
383
|
-
"prop-types": "^15.6.0",
|
|
384
|
-
"react": "^16.8.2",
|
|
385
|
-
"react-dom": "^16.8.2",
|
|
386
|
-
"redux": "3.7.2",
|
|
387
|
-
"react-redux": "5.0.6",
|
|
388
|
-
"react-router": "4.2.0",
|
|
389
|
-
"react-router-dom": "4.2.2"
|
|
390
|
-
};
|
|
391
|
-
}
|
|
392
|
-
};
|
|
393
|
-
|
|
394
|
-
var stackblitzMainFile = {
|
|
395
|
-
'react': 'app%2Fmain.js'
|
|
396
|
-
};
|
|
397
|
-
|
|
398
|
-
function SnippetRunner(container) {
|
|
399
|
-
this.container = container;
|
|
400
|
-
this.iframe = $();
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
SnippetRunner.prototype = {
|
|
404
|
-
resizeFrame: function() {
|
|
405
|
-
var RESIZE_THRESHOLD = 5;
|
|
406
|
-
var iframe, body;
|
|
407
|
-
|
|
408
|
-
if ($(this.iframe).closest("[data-height]").length) {
|
|
409
|
-
// height is set through {% meta %}
|
|
410
|
-
return;
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
try {
|
|
414
|
-
iframe = this.iframe;
|
|
415
|
-
body = iframe.contents().find("body")[0];
|
|
416
|
-
} catch (e) {
|
|
417
|
-
// iframe may not be available
|
|
418
|
-
return;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
if (!iframe || !body) {
|
|
422
|
-
return;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
var height = body.offsetHeight;
|
|
426
|
-
if (Math.abs(height - iframe.height()) > RESIZE_THRESHOLD) {
|
|
427
|
-
iframe.height(height);
|
|
428
|
-
}
|
|
429
|
-
},
|
|
430
|
-
|
|
431
|
-
call: function(name) {
|
|
432
|
-
var iframe = this.iframe[0];
|
|
433
|
-
var iframeWnd = iframe.contentWindow || iframe;
|
|
434
|
-
var method = iframeWnd[name] || $.noop;
|
|
435
|
-
|
|
436
|
-
method.apply(iframeWnd, Array.prototype.slice.call(arguments, 1));
|
|
437
|
-
},
|
|
438
|
-
|
|
439
|
-
_closestHeader: function(element) {
|
|
440
|
-
return element.closest('article > *').prevAll('h1,h2,h3,h4,h5,h6').first();
|
|
441
|
-
},
|
|
442
|
-
|
|
443
|
-
_idFromText: function(text) {
|
|
444
|
-
return $.trim(text.toLowerCase()).replace(/\s+/g, '-');
|
|
445
|
-
},
|
|
446
|
-
|
|
447
|
-
update: function(content) {
|
|
448
|
-
this.container.empty();
|
|
449
|
-
|
|
450
|
-
var attributes = { src: 'javascript:void(0)' };
|
|
451
|
-
|
|
452
|
-
var metaContainer = $(this.container).closest("[data-height]");
|
|
453
|
-
var height = metaContainer.attr("data-height") || 340;
|
|
454
|
-
attributes.style = 'height:' + height + 'px';
|
|
455
|
-
|
|
456
|
-
var id = metaContainer.attr("data-id") || this._idFromText(this._closestHeader(this.container).text());
|
|
457
|
-
attributes.id = 'example-' + id;
|
|
458
|
-
|
|
459
|
-
this.iframe =
|
|
460
|
-
$('<iframe class="snippet-runner">')
|
|
461
|
-
.attr(attributes)
|
|
462
|
-
.show()
|
|
463
|
-
.appendTo(this.container);
|
|
464
|
-
|
|
465
|
-
metaContainer.height("");
|
|
466
|
-
|
|
467
|
-
var contents = this.iframe.contents();
|
|
468
|
-
contents[0].open();
|
|
469
|
-
contents[0].write(content);
|
|
470
|
-
contents[0].close();
|
|
471
|
-
|
|
472
|
-
var iframe = this.iframe[0];
|
|
473
|
-
var iframeWnd = iframe.contentWindow || iframe;
|
|
474
|
-
iframeWnd._runnerInit = this.resizeFrame.bind(this);
|
|
475
|
-
}
|
|
476
|
-
};
|
|
477
|
-
|
|
478
|
-
var CDNResources = {
|
|
479
|
-
angular: [
|
|
480
|
-
"https://unpkg.com/zone.js@0.8.12/dist/zone.js",
|
|
481
|
-
"https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"
|
|
482
|
-
],
|
|
483
|
-
react: [
|
|
484
|
-
],
|
|
485
|
-
vue: [
|
|
486
|
-
]
|
|
487
|
-
|
|
488
|
-
};
|
|
489
|
-
|
|
490
|
-
function resourceLinks(resources) {
|
|
491
|
-
return $.map(resources, function(resource) {
|
|
492
|
-
return resource.match(/\.css$/) ? "<link rel='stylesheet' href='" + resource + "'>" :
|
|
493
|
-
"<script src='" + resource + "'></script>";
|
|
494
|
-
}).join("");
|
|
495
|
-
}
|
|
496
|
-
|
|
497
|
-
var groupExtractor = /^\((.*?)\)$/g;
|
|
498
|
-
function extractRules(value) {
|
|
499
|
-
var result = (value || "").match(groupExtractor);
|
|
500
|
-
|
|
501
|
-
if (!result) {
|
|
502
|
-
return value ? [ value ] : [];
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
return result
|
|
506
|
-
.map(function(m) {
|
|
507
|
-
var result = groupExtractor.exec(m);
|
|
508
|
-
return result ? result[1] : "";
|
|
509
|
-
});
|
|
510
|
-
}
|
|
511
|
-
|
|
512
|
-
function concatMatchers(current, additional) {
|
|
513
|
-
var currentRules = extractRules(current);
|
|
514
|
-
var additionalRules = extractRules(additional);
|
|
515
|
-
|
|
516
|
-
return '(' + currentRules.concat(additionalRules).join('|') + ')';
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
function registerDirectives(moduleDirectives) {
|
|
520
|
-
var directives = [];
|
|
521
|
-
|
|
522
|
-
moduleDirectives.forEach(function(current) {
|
|
523
|
-
var filtered = false;
|
|
524
|
-
|
|
525
|
-
directives.forEach(function(uniqueDirective) {
|
|
526
|
-
if (current.module === uniqueDirective.module) {
|
|
527
|
-
uniqueDirective.import = uniqueDirective.import || current.import;
|
|
528
|
-
|
|
529
|
-
if (current.match) {
|
|
530
|
-
uniqueDirective.match = concatMatchers(uniqueDirective.match, current.match);
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
filtered = true;
|
|
534
|
-
}
|
|
535
|
-
});
|
|
536
|
-
|
|
537
|
-
if (!filtered) {
|
|
538
|
-
directives.push(current);
|
|
539
|
-
}
|
|
540
|
-
});
|
|
541
|
-
|
|
542
|
-
return directives;
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
var moduleDirectives = registerDirectives(window.moduleDirectives || []);
|
|
546
|
-
|
|
547
|
-
function wrapAngularTemplate(template) {
|
|
548
|
-
if (!/^\s*</.test(template)) {
|
|
549
|
-
// not a template
|
|
550
|
-
return template;
|
|
551
|
-
}
|
|
552
|
-
// template-only code, wrap in component
|
|
553
|
-
return [
|
|
554
|
-
"@Component({",
|
|
555
|
-
" selector: 'my-app',",
|
|
556
|
-
" template: `" + template + "`",
|
|
557
|
-
"})",
|
|
558
|
-
"class AppComponent {}"
|
|
559
|
-
].join("\n");
|
|
560
|
-
}
|
|
561
|
-
|
|
562
|
-
var directivesByModule = {
|
|
563
|
-
angular: [
|
|
564
|
-
{ module: '@angular/core', match: '@(Component)', import: "Component" },
|
|
565
|
-
{ module: '@angular/forms', match: 'ngModel', import: "FormsModule" },
|
|
566
|
-
{ module: '@angular/platform-browser', match: '.', import: "BrowserModule" },
|
|
567
|
-
{ module: '@angular/platform-browser/animations', match: '.', import: "BrowserAnimationsModule" }
|
|
568
|
-
].concat(moduleDirectives),
|
|
569
|
-
react: [].concat(moduleDirectives),
|
|
570
|
-
vue: [].concat(moduleDirectives),
|
|
571
|
-
builder: [].concat(moduleDirectives)
|
|
572
|
-
};
|
|
573
|
-
|
|
574
|
-
/* The following method replaces code characters to allow embedding in a js double-quote string ("") */
|
|
575
|
-
function codeToString(code) {
|
|
576
|
-
return code.replace(/"/g, '\\"') // escape nested quotes
|
|
577
|
-
.replace(/\n/g, '\\n'); // escape line endings
|
|
578
|
-
}
|
|
579
|
-
|
|
580
|
-
function getFullContent(options) {
|
|
581
|
-
var listing = options.listing;
|
|
582
|
-
var platform = options.platform;
|
|
583
|
-
|
|
584
|
-
if (listing['ts-multiple']) {
|
|
585
|
-
var fullContent = "";
|
|
586
|
-
listing['multifile-listing'].forEach(function(file) {
|
|
587
|
-
fullContent = fullContent.concat(file.content);
|
|
588
|
-
});
|
|
589
|
-
|
|
590
|
-
return fullContent;
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
if (listing['html'] && platform === 'vue') {
|
|
594
|
-
return listing['html'];
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
return listing['ts'] || listing['jsx'] || listing['js'];
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
/* The following block deals with the imports from the kendo-*-packages(s) */
|
|
601
|
-
|
|
602
|
-
function usedModules(code) {
|
|
603
|
-
return directivesByModule[window.k2platform].filter(function(directive) {
|
|
604
|
-
return (new RegExp(directive.match)).test(code);
|
|
605
|
-
}).filter(Boolean);
|
|
606
|
-
}
|
|
607
|
-
|
|
608
|
-
function toModuleImport(directive) {
|
|
609
|
-
var exportStatement = " from '" + directive.module + "';";
|
|
610
|
-
|
|
611
|
-
/* needed for Vue examples */
|
|
612
|
-
if (directive.module === "@progress/kendo-ui") {
|
|
613
|
-
return "import '" + directive.module + "';";
|
|
614
|
-
}
|
|
615
|
-
|
|
616
|
-
if (directive.defaultExport) {
|
|
617
|
-
exportStatement = "import " + directive.import + exportStatement;
|
|
618
|
-
} else {
|
|
619
|
-
exportStatement = "import { " + directive.import + " }" + exportStatement;
|
|
620
|
-
}
|
|
621
|
-
|
|
622
|
-
return exportStatement;
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
function moduleImports(code, directives) {
|
|
626
|
-
var imports = [];
|
|
627
|
-
|
|
628
|
-
directives.forEach(function(directive) {
|
|
629
|
-
// test if directive is imported
|
|
630
|
-
var imported = new RegExp("^\\s*import .* from\\s+[\"']" + directive.module + "[\"'];");
|
|
631
|
-
|
|
632
|
-
if (directive.import && !imported.test(code)) {
|
|
633
|
-
imports.push(toModuleImport(directive));
|
|
634
|
-
}
|
|
635
|
-
});
|
|
636
|
-
|
|
637
|
-
return imports;
|
|
638
|
-
}
|
|
639
|
-
|
|
640
|
-
/* This code is used only in the angular version to extract the modules defined in the "imports" section */
|
|
641
|
-
function angularAppModuleImports(directives) {
|
|
642
|
-
return directives
|
|
643
|
-
.filter(function(directive) { return /Module$/.test(directive.import); })
|
|
644
|
-
.map(function(dir) { return dir.import; })
|
|
645
|
-
.join(", ");
|
|
646
|
-
}
|
|
647
|
-
|
|
648
|
-
/* end */
|
|
649
|
-
|
|
650
|
-
function jsTrackingCode() {
|
|
651
|
-
return [
|
|
652
|
-
"import Raven from 'raven-js';",
|
|
653
|
-
"import { ErrorHandler } from '@angular/core';",
|
|
654
|
-
"Raven.config('https://e7cc5054385e4b4cb97bd7ea376c6174@sentry.io/112659').install();",
|
|
655
|
-
"class RavenErrorHandler implements ErrorHandler {",
|
|
656
|
-
"handleError(err:any) : void {",
|
|
657
|
-
"Raven.captureException(err.originalError || err);",
|
|
658
|
-
"}",
|
|
659
|
-
"}"
|
|
660
|
-
].join("\n");
|
|
661
|
-
}
|
|
662
|
-
|
|
663
|
-
function bootstrapReact(options) {
|
|
664
|
-
var code = options.example.code;
|
|
665
|
-
var directives = usedModules(code);
|
|
666
|
-
var imports = moduleImports(code, directives);
|
|
667
|
-
return [].concat([
|
|
668
|
-
"import React from 'react';",
|
|
669
|
-
"import ReactDOM from 'react-dom';"
|
|
670
|
-
])
|
|
671
|
-
.concat(imports)
|
|
672
|
-
.concat(code)
|
|
673
|
-
.filter(Boolean)
|
|
674
|
-
.join('\n');
|
|
675
|
-
}
|
|
676
|
-
|
|
677
|
-
function bootstrapVue(options) {
|
|
678
|
-
// in vue we extract the imports from html
|
|
679
|
-
var code = options.example.code;
|
|
680
|
-
var html = options.example.html;
|
|
681
|
-
var directives = usedModules(html);
|
|
682
|
-
var imports = moduleImports(html, directives.filter(function(item) { return !/react|angular/gi.test(item.module); }));
|
|
683
|
-
return [].concat([
|
|
684
|
-
"import Vue from 'vue';"
|
|
685
|
-
])
|
|
686
|
-
.concat(imports)
|
|
687
|
-
.concat(code)
|
|
688
|
-
.filter(Boolean)
|
|
689
|
-
.join('\n');
|
|
690
|
-
}
|
|
691
|
-
|
|
692
|
-
function bootstrapBuilder(options) {
|
|
693
|
-
var code = options.example.code + '\n';
|
|
694
|
-
return code;
|
|
695
|
-
}
|
|
696
|
-
|
|
697
|
-
function bootstrapAngular(options) {
|
|
698
|
-
var source = options.example.code;
|
|
699
|
-
var code = wrapAngularTemplate(source);
|
|
700
|
-
var jsTracking = jsTrackingCode();
|
|
701
|
-
|
|
702
|
-
var directives = usedModules(code);
|
|
703
|
-
var imports = moduleImports(code, directives);
|
|
704
|
-
var appModuleImports = angularAppModuleImports(directives);
|
|
705
|
-
|
|
706
|
-
return (imports.concat([
|
|
707
|
-
code,
|
|
708
|
-
"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';",
|
|
709
|
-
"import { NgModule, enableProdMode } from '@angular/core';",
|
|
710
|
-
"import 'hammerjs';",
|
|
711
|
-
options.track ? jsTracking : "",
|
|
712
|
-
"@NgModule({",
|
|
713
|
-
"declarations: [AppComponent],",
|
|
714
|
-
"imports: [ " + appModuleImports + " ],",
|
|
715
|
-
options.track ? "providers: [ { provide: ErrorHandler, useClass: RavenErrorHandler } ]," : "",
|
|
716
|
-
"bootstrap: [AppComponent]",
|
|
717
|
-
"})",
|
|
718
|
-
"class AppModule {}",
|
|
719
|
-
window.location.hostname === "localhost" ? "" : "enableProdMode();",
|
|
720
|
-
"platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true })",
|
|
721
|
-
(options.resize ? "\t.then(_runnerInit)" : ""),
|
|
722
|
-
"\t.catch(err => console.error(err));"
|
|
723
|
-
]).filter(Boolean).join("\n"));
|
|
724
|
-
}
|
|
725
|
-
|
|
726
|
-
function plunkerPage(opts) {
|
|
727
|
-
var bootstrap = opts.bootstrap;
|
|
728
|
-
var options = $.extend({
|
|
729
|
-
npmUrl: window.npmUrl,
|
|
730
|
-
npmChannel: window.env === 'production' ? "latest" : "dev",
|
|
731
|
-
cdnResources: resourceLinks(CDNResources[window.k2platform]),
|
|
732
|
-
platform: window.k2platform,
|
|
733
|
-
exampleRunner: window.runnerScript,
|
|
734
|
-
theme: 'default',
|
|
735
|
-
language: opts.language,
|
|
736
|
-
themeAccent: themeColors.default,
|
|
737
|
-
html: '',
|
|
738
|
-
track: false
|
|
739
|
-
}, opts);
|
|
740
|
-
|
|
741
|
-
if (!options.code) {
|
|
742
|
-
return htmlTemplate(options);
|
|
743
|
-
}
|
|
744
|
-
|
|
745
|
-
var codeContent = codeToString(bootstrap.call(this, {
|
|
746
|
-
example: options,
|
|
747
|
-
resize: true,
|
|
748
|
-
track: options.track
|
|
749
|
-
}));
|
|
750
|
-
|
|
751
|
-
// TODO: the hard-coded path can be a property of the embed_file tag
|
|
752
|
-
var demoFileName = window.k2platform === 'builder' ? 'grid-demo.component.ts' : 'main.' + opts.language;
|
|
753
|
-
|
|
754
|
-
options.files = [ { name: demoFileName, content: codeContent } ];
|
|
755
|
-
|
|
756
|
-
return plunkerTemplate(options);
|
|
757
|
-
}
|
|
758
|
-
|
|
759
|
-
// types of code snippets
|
|
760
|
-
var blockTypes = {
|
|
761
|
-
'generic': {
|
|
762
|
-
// snippet without type
|
|
763
|
-
// consider changing it by adding type in docs via ```some-type
|
|
764
|
-
label: 'Generic listing, set code type in docs!',
|
|
765
|
-
highlight: 'htmlmixed'
|
|
766
|
-
},
|
|
767
|
-
'cs': {
|
|
768
|
-
label: 'C#',
|
|
769
|
-
highlight: 'text/x-csharp'
|
|
770
|
-
},
|
|
771
|
-
'html': {
|
|
772
|
-
label: 'HTML',
|
|
773
|
-
highlight: 'htmlmixed'
|
|
774
|
-
},
|
|
775
|
-
'java': {
|
|
776
|
-
label: 'Java',
|
|
777
|
-
highlight: 'text/x-java'
|
|
778
|
-
},
|
|
779
|
-
'json': {
|
|
780
|
-
label: 'JSON',
|
|
781
|
-
highlight: 'application/json'
|
|
782
|
-
},
|
|
783
|
-
'jsx': {
|
|
784
|
-
label: 'JSX',
|
|
785
|
-
highlight: 'jsx'
|
|
786
|
-
},
|
|
787
|
-
'php': {
|
|
788
|
-
label: 'PHP',
|
|
789
|
-
highlight: 'php'
|
|
790
|
-
},
|
|
791
|
-
'bash': {
|
|
792
|
-
label: 'Shell',
|
|
793
|
-
highlight: 'bash',
|
|
794
|
-
noRun: true
|
|
795
|
-
},
|
|
796
|
-
'sh': {
|
|
797
|
-
label: 'Shell',
|
|
798
|
-
highlight: 'bash',
|
|
799
|
-
noRun: true
|
|
800
|
-
},
|
|
801
|
-
'js': {
|
|
802
|
-
label: 'JavaScript',
|
|
803
|
-
highlight: 'javascript'
|
|
804
|
-
},
|
|
805
|
-
'scss': {
|
|
806
|
-
label: 'SCSS',
|
|
807
|
-
highlight: 'css',
|
|
808
|
-
noRun: true
|
|
809
|
-
},
|
|
810
|
-
'ng-template': {
|
|
811
|
-
label: 'Angular template',
|
|
812
|
-
highlight: 'htmlmixed'
|
|
813
|
-
},
|
|
814
|
-
'ts': {
|
|
815
|
-
label: 'TypeScript',
|
|
816
|
-
highlight: 'text/typescript'
|
|
817
|
-
},
|
|
818
|
-
'xml': {
|
|
819
|
-
label: 'XML',
|
|
820
|
-
highlight: 'application/xml'
|
|
821
|
-
}
|
|
822
|
-
};
|
|
823
|
-
|
|
824
|
-
// denotes group of several code snippets
|
|
825
|
-
function CodeListing(elements) {
|
|
826
|
-
var that = this;
|
|
827
|
-
this.elements = elements;
|
|
828
|
-
|
|
829
|
-
/**
|
|
830
|
-
Search for the "main" file and infer language by its extension.
|
|
831
|
-
This covers the case with embed_file content inclusion.
|
|
832
|
-
*/
|
|
833
|
-
for (var i = 0; i < elements.length; i++) {
|
|
834
|
-
var lang = /main?.(jsx|js|ts)/.exec(elements.eq(i).attr('data-file'));
|
|
835
|
-
if (lang) {
|
|
836
|
-
this.runtimeLanguage = lang[1];
|
|
837
|
-
break;
|
|
838
|
-
}
|
|
839
|
-
}
|
|
840
|
-
|
|
841
|
-
this.types = $.map(this.elements.find("code"), function(element) {
|
|
842
|
-
var preview = false;
|
|
843
|
-
var noRun = false;
|
|
844
|
-
var multiple = false;
|
|
845
|
-
var language = /lang(uage)?-([^\s]+)/.exec(element.className);
|
|
846
|
-
var hideTabs = element.className.match(/hide-tabs/);
|
|
847
|
-
var fileName = $(element).parent().attr("data-file");
|
|
848
|
-
|
|
849
|
-
that.extendBlueprint = that.extendBlueprint || $(element).parent().attr("data-extend-blueprint") === 'true';
|
|
850
|
-
|
|
851
|
-
language = language ? language[2] : "generic";
|
|
852
|
-
|
|
853
|
-
if (/-preview/.test(language)) {
|
|
854
|
-
language = language.replace(/-preview/, "");
|
|
855
|
-
preview = true;
|
|
856
|
-
} else if (/-no-run/.test(language)) {
|
|
857
|
-
language = language.replace(/-no-run/, "");
|
|
858
|
-
noRun = true;
|
|
859
|
-
}
|
|
860
|
-
|
|
861
|
-
if (/-multiple/.test(language)) {
|
|
862
|
-
language = language.replace(/-multiple/, "");
|
|
863
|
-
multiple = true;
|
|
864
|
-
}
|
|
865
|
-
|
|
866
|
-
if (multiple) {
|
|
867
|
-
var elems = that["multifile-listing"] || [];
|
|
868
|
-
|
|
869
|
-
elems.push({
|
|
870
|
-
name: fileName,
|
|
871
|
-
content: $(element).text()
|
|
872
|
-
});
|
|
873
|
-
|
|
874
|
-
that["multifile-listing"] = elems;
|
|
875
|
-
}
|
|
876
|
-
|
|
877
|
-
if (typeof(that[language]) === 'undefined') {
|
|
878
|
-
that[language] = $(element).text();
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
return $.extend({
|
|
882
|
-
language: language,
|
|
883
|
-
noRun: noRun,
|
|
884
|
-
multiple: multiple,
|
|
885
|
-
hideTabs: hideTabs,
|
|
886
|
-
preview: preview
|
|
887
|
-
}, blockTypes[language]);
|
|
888
|
-
});
|
|
889
|
-
|
|
890
|
-
/**
|
|
891
|
-
If no runtimeLanguage is set assume we are dealing with inline content.
|
|
892
|
-
Infer the language from the object instance.
|
|
893
|
-
*/
|
|
894
|
-
if (this.runtimeLanguage === undefined) {
|
|
895
|
-
if (Object.prototype.hasOwnProperty.call(this, 'js')) {
|
|
896
|
-
this.runtimeLanguage = 'js';
|
|
897
|
-
} else if (Object.prototype.hasOwnProperty.call(this, 'jsx')) {
|
|
898
|
-
this.runtimeLanguage = 'jsx';
|
|
899
|
-
} else {
|
|
900
|
-
this.runtimeLanguage = 'ts';
|
|
901
|
-
}
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
|
-
|
|
905
|
-
CodeListing.prototype = {
|
|
906
|
-
updateHtml: function() {
|
|
907
|
-
var block = this;
|
|
908
|
-
|
|
909
|
-
this.elements
|
|
910
|
-
.find("code")
|
|
911
|
-
.addClass("cm-s-default")
|
|
912
|
-
.each(function(idx, elem) {
|
|
913
|
-
var code = $(elem);
|
|
914
|
-
var typeInfo = block.types[idx];
|
|
915
|
-
|
|
916
|
-
if (typeInfo.preview) {
|
|
917
|
-
block.preview = true;
|
|
918
|
-
} else if (typeInfo.noRun) {
|
|
919
|
-
block.noRun = true;
|
|
920
|
-
}
|
|
921
|
-
|
|
922
|
-
if (typeInfo.multiple) {
|
|
923
|
-
block.multiple = true;
|
|
924
|
-
}
|
|
925
|
-
|
|
926
|
-
code.parent().attr("data-code-language", typeInfo.label);
|
|
927
|
-
|
|
928
|
-
// colorize code
|
|
929
|
-
window.CodeMirror.runMode(code.text(), typeInfo.highlight, code[0]);
|
|
930
|
-
});
|
|
931
|
-
},
|
|
932
|
-
hide: function() {
|
|
933
|
-
this.elements.hide();
|
|
934
|
-
},
|
|
935
|
-
show: function() {
|
|
936
|
-
this.elements.show();
|
|
937
|
-
}
|
|
938
|
-
};
|
|
939
|
-
|
|
940
|
-
var basicPlunkerFiles = [
|
|
941
|
-
'index.html'
|
|
942
|
-
];
|
|
943
|
-
|
|
944
|
-
var plunker = {
|
|
945
|
-
angular: {
|
|
946
|
-
plunkerFiles: [
|
|
947
|
-
'main.ts',
|
|
948
|
-
'app/app.component.ts',
|
|
949
|
-
'app/app.module.ts',
|
|
950
|
-
'polyfills.ts',
|
|
951
|
-
'styles.css'
|
|
952
|
-
].concat(basicPlunkerFiles)
|
|
953
|
-
},
|
|
954
|
-
react: {
|
|
955
|
-
plunkerFiles: [
|
|
956
|
-
'app/main.jsx'
|
|
957
|
-
].concat(basicPlunkerFiles)
|
|
958
|
-
},
|
|
959
|
-
vue: {
|
|
960
|
-
plunkerFiles: [
|
|
961
|
-
'app/main.js'
|
|
962
|
-
].concat(basicPlunkerFiles)
|
|
963
|
-
},
|
|
964
|
-
builder: {
|
|
965
|
-
plunkerFiles: [
|
|
966
|
-
'app/app.component.html',
|
|
967
|
-
'app/app.component.ts',
|
|
968
|
-
'app/app.css',
|
|
969
|
-
'app/app.module.ts',
|
|
970
|
-
'app/core/core.module.ts',
|
|
971
|
-
'app/core/data/data-services.exports.ts',
|
|
972
|
-
'app/core/data/data.service.ts',
|
|
973
|
-
'app/core/data/odata-service-factory.ts',
|
|
974
|
-
'app/core/data/odata.service.ts',
|
|
975
|
-
'app/core/module.config.ts',
|
|
976
|
-
'app/data/odata-provider/customer.config.ts',
|
|
977
|
-
'app/data/odata-provider/customer.model.ts',
|
|
978
|
-
'app/grid-demo.base.component.ts',
|
|
979
|
-
'app/grid-demo.component.html',
|
|
980
|
-
'app/grid-demo.component.ts',
|
|
981
|
-
'app/shared/components/grid/grid.component.html',
|
|
982
|
-
'app/shared/components/grid/grid.component.ts',
|
|
983
|
-
'app/shared/services/grid-incell-editing.service.ts',
|
|
984
|
-
'app/topSection.html',
|
|
985
|
-
'app/topSection.ts',
|
|
986
|
-
'assets/themes/metro.css',
|
|
987
|
-
'index.html',
|
|
988
|
-
'main.ts',
|
|
989
|
-
'polyfills.ts',
|
|
990
|
-
'styles.css'
|
|
991
|
-
].concat(basicPlunkerFiles)
|
|
992
|
-
}
|
|
993
|
-
};
|
|
994
|
-
|
|
995
|
-
function getBlueprintFiles(file) {
|
|
996
|
-
var path = [ window.editorTemplatesPath, window.k2platform, '/', file ];
|
|
997
|
-
return $.ajax(path.join(''), { dataType: 'text' });
|
|
998
|
-
}
|
|
999
|
-
|
|
1000
|
-
function EditorForm(action) {
|
|
1001
|
-
this.form = $('<form style="display: none;" action="' + action + '" method="post" target="_blank" />').appendTo(document.body);
|
|
1002
|
-
}
|
|
1003
|
-
|
|
1004
|
-
EditorForm.prototype.addField = function(name, value) {
|
|
1005
|
-
$('<input type=hidden />').val(value).attr("name", name).appendTo(this.form);
|
|
1006
|
-
};
|
|
1007
|
-
|
|
1008
|
-
EditorForm.prototype.submit = function() {
|
|
1009
|
-
this.form[0].submit();
|
|
1010
|
-
this.form.remove();
|
|
1011
|
-
this.form = null;
|
|
1012
|
-
};
|
|
1013
|
-
|
|
1014
|
-
function prefixStyleUrls(content, prefix) {
|
|
1015
|
-
// prefix styleUrl paths with the given string
|
|
1016
|
-
return content.replace(
|
|
1017
|
-
/("|')([a-z0-9\.-]+\.css)\1/g,
|
|
1018
|
-
"$1" + prefix + "$2$1"
|
|
1019
|
-
);
|
|
1020
|
-
}
|
|
1021
|
-
|
|
1022
|
-
function capitalize(str) {
|
|
1023
|
-
return str[0].toUpperCase() + str.substring(1);
|
|
1024
|
-
}
|
|
1025
|
-
|
|
1026
|
-
function getStackBlitzTemplate(listing) {
|
|
1027
|
-
if (listing['jsx']) {
|
|
1028
|
-
return 'create-react-app';
|
|
1029
|
-
}
|
|
1030
|
-
|
|
1031
|
-
if (listing['js']) {
|
|
1032
|
-
return 'javascript';
|
|
1033
|
-
}
|
|
1034
|
-
|
|
1035
|
-
if (listing['html']) {
|
|
1036
|
-
return 'javascript';
|
|
1037
|
-
}
|
|
1038
|
-
|
|
1039
|
-
var files = listing['multifile-listing'];
|
|
1040
|
-
var hasMainJs = function(file) { return file.name === "main.js"; };
|
|
1041
|
-
if (files && files.filter(hasMainJs).length) {
|
|
1042
|
-
return 'javascript';
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
return 'angular-cli';
|
|
1046
|
-
}
|
|
1047
|
-
|
|
1048
|
-
function buildExampleEditorForm(exampleTemplate, platform, dependencies) {
|
|
1049
|
-
var mainFile = stackblitzMainFile[platform];
|
|
1050
|
-
var actionURL = 'https://stackblitz.com/run/';
|
|
1051
|
-
var form = new EditorForm(mainFile ? actionURL + '?file=' + mainFile : actionURL);
|
|
1052
|
-
var link = (/localhost/).test(window.location.href) ? '' : '\nSee ' + window.location.href;
|
|
1053
|
-
|
|
1054
|
-
form.addField('project[template]', exampleTemplate);
|
|
1055
|
-
form.addField('project[tags][0]', capitalize(platform));
|
|
1056
|
-
form.addField('project[tags][1]', 'Kendo UI');
|
|
1057
|
-
form.addField('project[description]', 'Example usage of Kendo UI for ' + capitalize(platform) + link);
|
|
1058
|
-
form.addField('project[dependencies]', JSON.stringify(dependencies));
|
|
1059
|
-
|
|
1060
|
-
return form;
|
|
1061
|
-
}
|
|
1062
|
-
|
|
1063
|
-
function buildExampleDependencies(platform, imports) {
|
|
1064
|
-
var channel = window.env === 'production' ? "latest" : "dev";
|
|
1065
|
-
var dependencies = platform;
|
|
1066
|
-
if (window.wrappers === 'vue-wrappers') {
|
|
1067
|
-
dependencies = 'vue-wrappers';
|
|
1068
|
-
} else if (window.wrappers) {
|
|
1069
|
-
dependencies = 'react-wrappers';
|
|
1070
|
-
}
|
|
1071
|
-
|
|
1072
|
-
var platformDependencies = stackBlitzDependencies[dependencies](channel);
|
|
1073
|
-
|
|
1074
|
-
return $.extend({}, imports, platformDependencies);
|
|
1075
|
-
}
|
|
1076
|
-
|
|
1077
|
-
function getPackageName(importStatement) {
|
|
1078
|
-
var sections = importStatement.split('/');
|
|
1079
|
-
|
|
1080
|
-
return sections[0].indexOf('@') === 0
|
|
1081
|
-
? sections[0] + '/' + sections[1]
|
|
1082
|
-
: sections[0];
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
|
-
function getExampleImports(files) {
|
|
1086
|
-
// Matches all package import statements
|
|
1087
|
-
// which are not from the @progress/@telerik scope.
|
|
1088
|
-
// The ones starting with . or / are ignored,
|
|
1089
|
-
// since we assume they are local module imports.
|
|
1090
|
-
var dependencyMatcher = /import.*from\s*['|"]([^.|^\/].*)['|"]/g;
|
|
1091
|
-
|
|
1092
|
-
return Object.keys(files).reduce(function(imports, fileName) {
|
|
1093
|
-
var found;
|
|
1094
|
-
while ((found = dependencyMatcher.exec(files[fileName]))) {
|
|
1095
|
-
var importedPackage = getPackageName(found[1]);
|
|
1096
|
-
|
|
1097
|
-
if (!/@progress|@telerik/.test(importedPackage)) {
|
|
1098
|
-
imports[importedPackage] = "*";
|
|
1099
|
-
}
|
|
1100
|
-
}
|
|
1101
|
-
return imports;
|
|
1102
|
-
}, {});
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
function platformSpecificTheme() {
|
|
1106
|
-
var defaultTheme = 'material';
|
|
1107
|
-
|
|
1108
|
-
var platform = window.k2platform;
|
|
1109
|
-
if (platform === 'angular') {
|
|
1110
|
-
defaultTheme = 'default';
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
var stored = window.localStorage.getItem("theme-" + platform);
|
|
1114
|
-
return stored || defaultTheme;
|
|
1115
|
-
|
|
1116
|
-
}
|
|
1117
|
-
|
|
1118
|
-
// fetch plunker templates for platform
|
|
1119
|
-
// this must be cached before the button is clicked,
|
|
1120
|
-
// otherwise the popup blocker blocks the new tab
|
|
1121
|
-
var plunkerRequests = [];
|
|
1122
|
-
|
|
1123
|
-
if (plunker[window.k2platform]) {
|
|
1124
|
-
plunkerRequests = $.map(plunker[window.k2platform].plunkerFiles, getBlueprintFiles);
|
|
1125
|
-
}
|
|
1126
|
-
|
|
1127
|
-
// prepares code listing for editing
|
|
1128
|
-
// async, since it needs to wait for the current platform edit templates
|
|
1129
|
-
function prepareSnippet(site, listing, templateFiles) {
|
|
1130
|
-
var files = templateFiles || {};
|
|
1131
|
-
|
|
1132
|
-
var listingFiles = listing['multifile-listing'];
|
|
1133
|
-
if (listingFiles) {
|
|
1134
|
-
for (var i = 0; i < listingFiles.length; i++) {
|
|
1135
|
-
var filename = listingFiles[i].name;
|
|
1136
|
-
// replace jsx with js is required as long as stackblitz has no jsx file support
|
|
1137
|
-
// see https://github.com/stackblitz/core/issues/370#issuecomment-379365823
|
|
1138
|
-
filename = 'app/' + filename.replace(/\.jsx$/, ".js");
|
|
1139
|
-
var content = listingFiles[i].content.replace(/\.jsx\b/g, "");
|
|
1140
|
-
files[filename] = content;
|
|
1141
|
-
}
|
|
1142
|
-
}
|
|
1143
|
-
|
|
1144
|
-
var exampleTemplate = getStackBlitzTemplate(listing || {});
|
|
1145
|
-
if (exampleTemplate === "angular-cli") {
|
|
1146
|
-
delete files['app/main.ts'];
|
|
1147
|
-
|
|
1148
|
-
files['.angular-cli.json'] = JSON.stringify({
|
|
1149
|
-
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
|
1150
|
-
"apps": [ {
|
|
1151
|
-
"assets": [
|
|
1152
|
-
"assets",
|
|
1153
|
-
"favicon.ico"
|
|
1154
|
-
],
|
|
1155
|
-
"index": "index.html",
|
|
1156
|
-
"main": "main.ts",
|
|
1157
|
-
"polyfills": "polyfills.ts",
|
|
1158
|
-
"prefix": "app",
|
|
1159
|
-
"styles": [
|
|
1160
|
-
"styles.css"
|
|
1161
|
-
]
|
|
1162
|
-
} ]
|
|
1163
|
-
}, null, 2);
|
|
1164
|
-
} else if (exampleTemplate === 'javascript') {
|
|
1165
|
-
if (!files['index.html']) {
|
|
1166
|
-
files['index.html'] = htmlTemplate($.extend({
|
|
1167
|
-
html: '',
|
|
1168
|
-
npmChannel: window.env === 'production' ? "latest" : "dev"
|
|
1169
|
-
}, site, listing));
|
|
1170
|
-
}
|
|
1171
|
-
|
|
1172
|
-
if (listing.html && !listing.js) {
|
|
1173
|
-
// HTML-only snippet
|
|
1174
|
-
files['index.js'] = '';
|
|
1175
|
-
} else if (files['app/main.es']) {
|
|
1176
|
-
files['index.js'] = 'import "./app/main";';
|
|
1177
|
-
files['app/main.js'] = files['app/main.es'];
|
|
1178
|
-
delete files['app/main.es'];
|
|
1179
|
-
} else {
|
|
1180
|
-
files['index.js'] = files['app/main.js'];
|
|
1181
|
-
if (window.k2platform === 'vue') {
|
|
1182
|
-
delete files['app/main.html'];
|
|
1183
|
-
}
|
|
1184
|
-
delete files['app/main.js'];
|
|
1185
|
-
}
|
|
1186
|
-
} else if (exampleTemplate === "create-react-app") {
|
|
1187
|
-
files['index.js'] = 'import "./app/main";';
|
|
1188
|
-
|
|
1189
|
-
if (!listingFiles) {
|
|
1190
|
-
files['app/main.js'] = files['app/main.jsx'];
|
|
1191
|
-
delete files['app/main.jsx'];
|
|
1192
|
-
}
|
|
1193
|
-
}
|
|
1194
|
-
|
|
1195
|
-
var deferred = $.Deferred();
|
|
1196
|
-
deferred.resolve(files);
|
|
1197
|
-
return deferred.promise();
|
|
1198
|
-
}
|
|
1199
|
-
|
|
1200
|
-
// preprocesses code listing, creates form and posts to online editor
|
|
1201
|
-
function openInEditor(listing) {
|
|
1202
|
-
var code = listing['ts'] || listing['jsx'] || listing['js'];
|
|
1203
|
-
var template = listing['ng-template'];
|
|
1204
|
-
var html = listing['html'] || '';
|
|
1205
|
-
var theme = listing.theme || platformSpecificTheme();
|
|
1206
|
-
|
|
1207
|
-
if (!code) {
|
|
1208
|
-
code = wrapAngularTemplate(template);
|
|
1209
|
-
}
|
|
1210
|
-
|
|
1211
|
-
var directives = usedModules(getFullContent({ listing: listing, platform: window.k2platform }));
|
|
1212
|
-
var imports = moduleImports(code, directives);
|
|
1213
|
-
|
|
1214
|
-
var editorContext = {
|
|
1215
|
-
common: {
|
|
1216
|
-
appComponentContent: code || '',
|
|
1217
|
-
appImports: imports.join('\n'),
|
|
1218
|
-
npmUrl: 'https://unpkg.com',
|
|
1219
|
-
npmChannel: window.env === 'production' ? "latest" : "dev",
|
|
1220
|
-
htmlContent: html,
|
|
1221
|
-
theme: theme,
|
|
1222
|
-
themeAccent: themeColors[theme]
|
|
1223
|
-
},
|
|
1224
|
-
angular: {
|
|
1225
|
-
appModuleImports: angularAppModuleImports(directives)
|
|
1226
|
-
}
|
|
1227
|
-
};
|
|
1228
|
-
|
|
1229
|
-
var exampleTemplate = getStackBlitzTemplate(listing);
|
|
1230
|
-
var files = {};
|
|
1231
|
-
|
|
1232
|
-
if (exampleTemplate === 'angular-cli') {
|
|
1233
|
-
if (listing.multiple && listing['multifile-listing']) {
|
|
1234
|
-
// prepend 'app/' to filenames
|
|
1235
|
-
$.each(listing['multifile-listing'], function(_, file) {
|
|
1236
|
-
// main.ts to be on the root level, get from template
|
|
1237
|
-
if (!/main\./.test(file.name)) {
|
|
1238
|
-
files['app/' + file.name] = file.content;
|
|
1239
|
-
}
|
|
1240
|
-
});
|
|
1241
|
-
}
|
|
1242
|
-
}
|
|
1243
|
-
|
|
1244
|
-
$.when.apply($, plunkerRequests).then(function() {
|
|
1245
|
-
var plunkerTemplates = Array.prototype.slice.call(arguments).map(function(promise) { return promise[0]; });
|
|
1246
|
-
|
|
1247
|
-
plunkerTemplates.forEach(function(fileContent, index) {
|
|
1248
|
-
var plunkerFiles = plunker[window.k2platform].plunkerFiles;
|
|
1249
|
-
var context = $.extend({}, editorContext.common, editorContext[window.k2platform]);
|
|
1250
|
-
var filename = plunkerFiles[index];
|
|
1251
|
-
|
|
1252
|
-
var shouldIncludeFile = false;
|
|
1253
|
-
|
|
1254
|
-
if (exampleTemplate === 'angular-cli') {
|
|
1255
|
-
var alwaysInclude = [
|
|
1256
|
-
'styles.css',
|
|
1257
|
-
'main.ts',
|
|
1258
|
-
'polyfills.ts'
|
|
1259
|
-
];
|
|
1260
|
-
shouldIncludeFile = alwaysInclude.indexOf(filename) > -1;
|
|
1261
|
-
}
|
|
1262
|
-
|
|
1263
|
-
if (exampleTemplate !== 'javascript' || window.k2platform === 'vue') {
|
|
1264
|
-
shouldIncludeFile =
|
|
1265
|
-
shouldIncludeFile
|
|
1266
|
-
|| listing.extendBlueprint
|
|
1267
|
-
|| !listing.multiple
|
|
1268
|
-
|| filename === 'index.html';
|
|
1269
|
-
}
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
if (shouldIncludeFile) {
|
|
1273
|
-
var content = fileContent;
|
|
1274
|
-
|
|
1275
|
-
/* don't apply kendo template to files with angular template inside */
|
|
1276
|
-
if (!content.match(/\$\{.+\}/) && !/\.css$/.test(filename)) {
|
|
1277
|
-
// don't sanitize if kendo template is present inside
|
|
1278
|
-
if (!/#(=|:).*#/g.test(content)) {
|
|
1279
|
-
content = content.replace(/#/g, "\\#");
|
|
1280
|
-
}
|
|
1281
|
-
content = kendo.template(content)(context);
|
|
1282
|
-
}
|
|
1283
|
-
|
|
1284
|
-
files[filename] = content;
|
|
1285
|
-
}
|
|
1286
|
-
});
|
|
1287
|
-
|
|
1288
|
-
return files;
|
|
1289
|
-
})
|
|
1290
|
-
.then(function(files) {
|
|
1291
|
-
return prepareSnippet({
|
|
1292
|
-
npmUrl: 'https://unpkg.com',
|
|
1293
|
-
platform: window.k2platform
|
|
1294
|
-
}, listing, files);
|
|
1295
|
-
})
|
|
1296
|
-
.then(function(files) {
|
|
1297
|
-
var platform = window.k2platform;
|
|
1298
|
-
var imports = getExampleImports(files);
|
|
1299
|
-
var dependencies = buildExampleDependencies(platform, imports);
|
|
1300
|
-
var form = buildExampleEditorForm(exampleTemplate, platform, dependencies);
|
|
1301
|
-
|
|
1302
|
-
for (var filename in files) {
|
|
1303
|
-
if (files.hasOwnProperty(filename)) {
|
|
1304
|
-
form.addField('project[files][' + filename + ']', files[filename]);
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
|
|
1308
|
-
form.submit();
|
|
1309
|
-
})
|
|
1310
|
-
.fail(function() {
|
|
1311
|
-
console.log("Snippet posting failed, probably due to template fetching network errors.");
|
|
1312
|
-
});
|
|
1313
|
-
|
|
1314
|
-
return false;
|
|
1315
|
-
}
|
|
1316
|
-
|
|
1317
|
-
var themeColors = {
|
|
1318
|
-
default: "#ff6358",
|
|
1319
|
-
bootstrap: "#0275d8",
|
|
1320
|
-
material: "#3f51b5"
|
|
1321
|
-
};
|
|
1322
|
-
|
|
1323
|
-
/* Transform code listings (pre tags) into runnable examples */
|
|
1324
|
-
$(function() {
|
|
1325
|
-
var framework = $.extend({
|
|
1326
|
-
editor: 'plunkr',
|
|
1327
|
-
editButtonTemplate: '<a href="#" class="edit-online plunkr">Open in StackBlitz</a>'
|
|
1328
|
-
}, {
|
|
1329
|
-
builder: {
|
|
1330
|
-
runnerContent: function(options) {
|
|
1331
|
-
var listing = options.listing;
|
|
1332
|
-
var theme = options.theme || platformSpecificTheme();
|
|
1333
|
-
|
|
1334
|
-
return plunkerPage({
|
|
1335
|
-
bootstrap: bootstrapBuilder,
|
|
1336
|
-
code: listing['ts'] || listing['ng-template'],
|
|
1337
|
-
html: listing['html'],
|
|
1338
|
-
language: listing.runtimeLanguage,
|
|
1339
|
-
theme: theme,
|
|
1340
|
-
themeAccent: themeColors[theme],
|
|
1341
|
-
track: options.track
|
|
1342
|
-
});
|
|
1343
|
-
}
|
|
1344
|
-
},
|
|
1345
|
-
angular: {
|
|
1346
|
-
runnerContent: function(options) {
|
|
1347
|
-
var listing = options.listing;
|
|
1348
|
-
var theme = options.theme || platformSpecificTheme();
|
|
1349
|
-
|
|
1350
|
-
return plunkerPage({
|
|
1351
|
-
bootstrap: bootstrapAngular,
|
|
1352
|
-
code: listing['ts'] || listing['ng-template'],
|
|
1353
|
-
html: listing['html'],
|
|
1354
|
-
language: listing.runtimeLanguage,
|
|
1355
|
-
theme: theme,
|
|
1356
|
-
themeAccent: themeColors[theme],
|
|
1357
|
-
track: options.track
|
|
1358
|
-
});
|
|
1359
|
-
}
|
|
1360
|
-
},
|
|
1361
|
-
react: {
|
|
1362
|
-
runnerContent: function(options) {
|
|
1363
|
-
var listing = options.listing;
|
|
1364
|
-
var theme = options.theme || platformSpecificTheme();
|
|
1365
|
-
|
|
1366
|
-
return plunkerPage({
|
|
1367
|
-
bootstrap: bootstrapReact,
|
|
1368
|
-
code: listing['jsx'] || listing['js'] || listing['ts'],
|
|
1369
|
-
language: listing.runtimeLanguage,
|
|
1370
|
-
html: listing['html'],
|
|
1371
|
-
theme: theme,
|
|
1372
|
-
themeAccent: themeColors[theme],
|
|
1373
|
-
track: options.track
|
|
1374
|
-
});
|
|
1375
|
-
}
|
|
1376
|
-
},
|
|
1377
|
-
vue: {
|
|
1378
|
-
runnerContent: function(options) {
|
|
1379
|
-
var listing = options.listing;
|
|
1380
|
-
var theme = options.theme || platformSpecificTheme();
|
|
1381
|
-
|
|
1382
|
-
return plunkerPage({
|
|
1383
|
-
bootstrap: bootstrapVue,
|
|
1384
|
-
code: listing['js'],
|
|
1385
|
-
language: listing.runtimeLanguage,
|
|
1386
|
-
html: listing['html'],
|
|
1387
|
-
theme: theme,
|
|
1388
|
-
themeAccent: themeColors[theme],
|
|
1389
|
-
track: options.track
|
|
1390
|
-
});
|
|
1391
|
-
}
|
|
1392
|
-
}
|
|
1393
|
-
}[window.k2platform]);
|
|
1394
|
-
|
|
1395
|
-
function toCodeListings(tags) {
|
|
1396
|
-
var blocks = [];
|
|
1397
|
-
|
|
1398
|
-
for (var i = 0; i < tags.length;) {
|
|
1399
|
-
var tag = tags.eq(i);
|
|
1400
|
-
var siblingTags = tag.nextUntil(":not(pre)").addBack();
|
|
1401
|
-
if (!tag.data("codeListing")) {
|
|
1402
|
-
tag.data("codeListing", true);
|
|
1403
|
-
blocks.push(new CodeListing(siblingTags));
|
|
1404
|
-
}
|
|
1405
|
-
i += siblingTags.length;
|
|
1406
|
-
}
|
|
1407
|
-
return blocks;
|
|
1408
|
-
}
|
|
1409
|
-
|
|
1410
|
-
function usesClipboardJs() {
|
|
1411
|
-
return window.Clipboard && !/\[native code\]/.test(window.Clipboard.toString());
|
|
1412
|
-
}
|
|
1413
|
-
|
|
1414
|
-
toCodeListings($("pre")).forEach(function(block, idx) {
|
|
1415
|
-
var fileListElement;
|
|
1416
|
-
var demoEmbed = $(block.elements).closest(".demo-embed");
|
|
1417
|
-
if (demoEmbed.length) {
|
|
1418
|
-
// fully-embedded demo, skip chrome rendering
|
|
1419
|
-
return;
|
|
1420
|
-
}
|
|
1421
|
-
|
|
1422
|
-
block.updateHtml();
|
|
1423
|
-
block.theme = block.elements.closest("[data-theme]").attr("data-theme") || 'default';
|
|
1424
|
-
|
|
1425
|
-
if (block.multiple) {
|
|
1426
|
-
//list of files contained in the snippet
|
|
1427
|
-
fileListElement = $(fileListTemplate({
|
|
1428
|
-
files: block.elements.not("[data-hidden]"),
|
|
1429
|
-
index: idx
|
|
1430
|
-
})).insertBefore(block.elements[0]);
|
|
1431
|
-
|
|
1432
|
-
var elements = processMultiFileSourceBlocks(block.elements, idx);
|
|
1433
|
-
elements.appendTo(fileListElement.find('.tab-content'));
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1436
|
-
if (block.preview) {
|
|
1437
|
-
// preview snippets - start with example, allow view source
|
|
1438
|
-
var previewElement = $(previewTemplate({
|
|
1439
|
-
editButtonTemplate: framework.editButtonTemplate,
|
|
1440
|
-
index: idx
|
|
1441
|
-
}));
|
|
1442
|
-
|
|
1443
|
-
previewElement.insertBefore(block.multiple ? fileListElement : block.elements[0]);
|
|
1444
|
-
|
|
1445
|
-
// preview snippets with multiple files should display the file list
|
|
1446
|
-
var codeTab = previewElement.find('.tab-code');
|
|
1447
|
-
codeTab.append(block.multiple ? fileListElement : block.elements);
|
|
1448
|
-
|
|
1449
|
-
if (block.types[0].hideTabs) {
|
|
1450
|
-
$(previewElement[0]).hide(); // hide the tabstrip
|
|
1451
|
-
}
|
|
1452
|
-
|
|
1453
|
-
previewElement.find('.edit-online').click(
|
|
1454
|
-
openInEditor.bind(null, block)
|
|
1455
|
-
);
|
|
1456
|
-
var content;
|
|
1457
|
-
if (block.multiple) {
|
|
1458
|
-
content = loadMultiFileRunnerContent(codeTab);
|
|
1459
|
-
} else {
|
|
1460
|
-
content = framework.runnerContent({
|
|
1461
|
-
listing: block,
|
|
1462
|
-
track: window.trackjs
|
|
1463
|
-
});
|
|
1464
|
-
}
|
|
1465
|
-
|
|
1466
|
-
var preview = new SnippetRunner(previewElement.find('.tab-preview'));
|
|
1467
|
-
|
|
1468
|
-
$(document).on("theme-change", function(_, theme) {
|
|
1469
|
-
var updatedContent = block.multiple
|
|
1470
|
-
? loadMultiFileRunnerContent(codeTab, theme || 'default')
|
|
1471
|
-
: framework.runnerContent({
|
|
1472
|
-
listing: block,
|
|
1473
|
-
track: window.trackjs,
|
|
1474
|
-
theme: theme
|
|
1475
|
-
});
|
|
1476
|
-
|
|
1477
|
-
preview.update(updatedContent);
|
|
1478
|
-
});
|
|
1479
|
-
|
|
1480
|
-
preview.update(content);
|
|
1481
|
-
} else if (!block.noRun) {
|
|
1482
|
-
var title = $("<h5 class='code-sample-header' >Code Sample</h5>");
|
|
1483
|
-
title.insertBefore(block.multiple ? fileListElement : block.elements[0]);
|
|
1484
|
-
|
|
1485
|
-
var run = $("<button class='button secondary'></button>");
|
|
1486
|
-
|
|
1487
|
-
if (block.multiple) {
|
|
1488
|
-
run.text("Open in StackBlitz");
|
|
1489
|
-
run.insertAfter(fileListElement);
|
|
1490
|
-
run.wrap("<p class='run-code run-external code-sample-footer'></p>");
|
|
1491
|
-
run.click(openInEditor.bind(null, block));
|
|
1492
|
-
} else {
|
|
1493
|
-
run.text("Run Code");
|
|
1494
|
-
run.insertAfter(block.elements.last());
|
|
1495
|
-
run.wrap("<p class='run-code run-internal code-sample-footer'></p>");
|
|
1496
|
-
|
|
1497
|
-
// TODO: delegate run handler instead
|
|
1498
|
-
run.click(function() {
|
|
1499
|
-
$(document.body).css("overflow", "hidden");
|
|
1500
|
-
run.hide();
|
|
1501
|
-
title.hide();
|
|
1502
|
-
|
|
1503
|
-
var editor = $(editorTemplate({
|
|
1504
|
-
editButtonTemplate: framework.editButtonTemplate,
|
|
1505
|
-
block: block
|
|
1506
|
-
})).insertAfter(block.elements[0]).show();
|
|
1507
|
-
|
|
1508
|
-
var close = function() {
|
|
1509
|
-
$(document.body).css("overflow", "");
|
|
1510
|
-
run.show();
|
|
1511
|
-
title.show();
|
|
1512
|
-
editor.remove();
|
|
1513
|
-
};
|
|
1514
|
-
|
|
1515
|
-
editor.find('.button-close').click(close);
|
|
1516
|
-
|
|
1517
|
-
editor.on("keyup", function(e) {
|
|
1518
|
-
if (e.keyCode === 27) {
|
|
1519
|
-
close();
|
|
1520
|
-
}
|
|
1521
|
-
});
|
|
1522
|
-
|
|
1523
|
-
var codeMirrors = block.types.map(function(typeInfo, index) {
|
|
1524
|
-
var value = block[typeInfo.language];
|
|
1525
|
-
|
|
1526
|
-
return window.CodeMirror(function(elt) {
|
|
1527
|
-
editor.find('.pane').eq(index).append(elt);
|
|
1528
|
-
}, {
|
|
1529
|
-
value: value,
|
|
1530
|
-
language: typeInfo.language,
|
|
1531
|
-
mode: typeInfo.highlight,
|
|
1532
|
-
lineWrapping: true,
|
|
1533
|
-
lineNumbers: true
|
|
1534
|
-
});
|
|
1535
|
-
});
|
|
1536
|
-
|
|
1537
|
-
function listing() {
|
|
1538
|
-
return codeMirrors.reduce(function(acc, instance) {
|
|
1539
|
-
acc[instance.options.language] = instance.getValue();
|
|
1540
|
-
|
|
1541
|
-
return acc;
|
|
1542
|
-
}, { runtimeLanguage: block.runtimeLanguage });
|
|
1543
|
-
}
|
|
1544
|
-
|
|
1545
|
-
editor.find('.edit-online').click(function() {
|
|
1546
|
-
return openInEditor(listing());
|
|
1547
|
-
});
|
|
1548
|
-
|
|
1549
|
-
kendo.animationFrame(function() {
|
|
1550
|
-
editor.find(".dialog").removeClass("dialog-enter");
|
|
1551
|
-
codeMirrors[0].focus();
|
|
1552
|
-
});
|
|
1553
|
-
|
|
1554
|
-
var preview = new SnippetRunner(editor.find('.pane-preview'));
|
|
1555
|
-
|
|
1556
|
-
var onChange = debounce(function() {
|
|
1557
|
-
var content = framework.runnerContent({
|
|
1558
|
-
listing: listing(),
|
|
1559
|
-
track: false
|
|
1560
|
-
});
|
|
1561
|
-
|
|
1562
|
-
preview.update(content);
|
|
1563
|
-
}, 500);
|
|
1564
|
-
|
|
1565
|
-
setTimeout(function() {
|
|
1566
|
-
codeMirrors.forEach(function(instance) {
|
|
1567
|
-
instance.refresh();
|
|
1568
|
-
instance.on('changes', onChange);
|
|
1569
|
-
});
|
|
1570
|
-
}, 400);
|
|
1571
|
-
|
|
1572
|
-
onChange();
|
|
1573
|
-
});
|
|
1574
|
-
}
|
|
1575
|
-
}
|
|
1576
|
-
|
|
1577
|
-
if (usesClipboardJs()) {
|
|
1578
|
-
$(block.elements).prepend('<button class="btn copy-btn">Copy Code</button>');
|
|
1579
|
-
}
|
|
1580
|
-
});
|
|
1581
|
-
|
|
1582
|
-
if (usesClipboardJs()) {
|
|
1583
|
-
var setTooltip = function(btn, message) {
|
|
1584
|
-
$(btn).tooltip('hide')
|
|
1585
|
-
.attr('data-original-title', message)
|
|
1586
|
-
.tooltip('show');
|
|
1587
|
-
};
|
|
1588
|
-
|
|
1589
|
-
var hideTooltip = function(btn) {
|
|
1590
|
-
setTimeout(function() {
|
|
1591
|
-
$(btn).tooltip('hide');
|
|
1592
|
-
}, 1000);
|
|
1593
|
-
};
|
|
1594
|
-
|
|
1595
|
-
var clipboard = new window.Clipboard('.copy-btn', {
|
|
1596
|
-
text: function(trigger) {
|
|
1597
|
-
return $(trigger).next('code').text();
|
|
1598
|
-
}
|
|
1599
|
-
});
|
|
1600
|
-
|
|
1601
|
-
clipboard.on('success', function(e) {
|
|
1602
|
-
setTooltip(e.trigger, 'Copied!');
|
|
1603
|
-
hideTooltip(e.trigger);
|
|
1604
|
-
});
|
|
1605
|
-
|
|
1606
|
-
$('.copy-btn').tooltip({
|
|
1607
|
-
container: 'body',
|
|
1608
|
-
trigger: 'click',
|
|
1609
|
-
placement: 'bottom'
|
|
1610
|
-
});
|
|
1611
|
-
}
|
|
1612
|
-
|
|
1613
|
-
function removeJsTrackingMarks(text) {
|
|
1614
|
-
var sanitizedText;
|
|
1615
|
-
|
|
1616
|
-
if (window.trackjs) {
|
|
1617
|
-
sanitizedText = text.replace(/\/\/trackjs.*/, "").replace(/\/\/sjkcart.*/, "");
|
|
1618
|
-
sanitizedText = text.replace(/\/\*trackjs\*\//, "");
|
|
1619
|
-
} else {
|
|
1620
|
-
sanitizedText = text.replace(/\/\*trackjs\*\/.*/g, "");
|
|
1621
|
-
sanitizedText = text.replace(/\/\/trackjs[\s\S]*\/\/sjkcart/gm, "");
|
|
1622
|
-
}
|
|
1623
|
-
|
|
1624
|
-
return sanitizedText;
|
|
1625
|
-
}
|
|
1626
|
-
|
|
1627
|
-
function loadMultiFileRunnerContent(element, themeVar) {
|
|
1628
|
-
var filesContent = "";
|
|
1629
|
-
var files = $.map(element.find("pre"), function(item) {
|
|
1630
|
-
var pre = $(item);
|
|
1631
|
-
var codeElem = pre.find("code");
|
|
1632
|
-
var code = codeElem.length > 0 ? codeElem.text() : pre.text();
|
|
1633
|
-
filesContent = filesContent.concat(code);
|
|
1634
|
-
|
|
1635
|
-
code = prefixStyleUrls(code, "examples/");
|
|
1636
|
-
|
|
1637
|
-
return {
|
|
1638
|
-
name: pre.attr("data-file"),
|
|
1639
|
-
html: removeJsTrackingMarks(code),
|
|
1640
|
-
content: codeToString(removeJsTrackingMarks(code))
|
|
1641
|
-
};
|
|
1642
|
-
});
|
|
1643
|
-
/* If this is multifile runnable example there must be a main file, locate it and infer the runtime language from it */
|
|
1644
|
-
var mainFile = files.filter(function(file) { return file.name.indexOf('main.') >= 0; }).pop();
|
|
1645
|
-
var runtimeLanguage = mainFile.name.split('.').pop();
|
|
1646
|
-
var scripts = files.filter(f => !f.name.match(/\.css/g));
|
|
1647
|
-
var styles = files.filter(f => f.name.match(/\.css/g));
|
|
1648
|
-
|
|
1649
|
-
var theme = themeVar
|
|
1650
|
-
|| element.closest("[data-theme]").attr("data-theme")
|
|
1651
|
-
|| platformSpecificTheme();
|
|
1652
|
-
|
|
1653
|
-
var content = plunkerTemplate({
|
|
1654
|
-
npmUrl: window.npmUrl,
|
|
1655
|
-
npmChannel: window.env === 'production' ? "latest" : "dev",
|
|
1656
|
-
platform: window.k2platform,
|
|
1657
|
-
cdnResources: resourceLinks(CDNResources[window.k2platform]),
|
|
1658
|
-
exampleRunner: window.runnerScript,
|
|
1659
|
-
html: "",
|
|
1660
|
-
theme: theme,
|
|
1661
|
-
language: runtimeLanguage,
|
|
1662
|
-
themeAccent: themeColors[theme],
|
|
1663
|
-
scripts,
|
|
1664
|
-
styles,
|
|
1665
|
-
track: window.trackjs
|
|
1666
|
-
});
|
|
1667
|
-
|
|
1668
|
-
if (window.k2platform === 'vue') {
|
|
1669
|
-
var htmlFile = files.filter(function(file) {
|
|
1670
|
-
return file.name.indexOf('.html') >= 0;
|
|
1671
|
-
}).pop();
|
|
1672
|
-
if (htmlFile && htmlFile.html) {
|
|
1673
|
-
content = content + htmlFile.html;
|
|
1674
|
-
}
|
|
1675
|
-
}
|
|
1676
|
-
|
|
1677
|
-
return content;
|
|
1678
|
-
}
|
|
1679
|
-
|
|
1680
|
-
function processMultiFileSourceBlocks(blockElements, blockId) {
|
|
1681
|
-
var elements = blockElements.wrap("<div class='tab-pane'></div>").parent();
|
|
1682
|
-
var elemIndex = 0;
|
|
1683
|
-
elements.each(function(i, elem) {
|
|
1684
|
-
var codeBlock = $(elem).find("pre");
|
|
1685
|
-
|
|
1686
|
-
if (codeBlock.length > 0 && !codeBlock.is("[data-hidden]")) {
|
|
1687
|
-
var elemId = "filename" + elemIndex + "-" + blockId;
|
|
1688
|
-
if (elemIndex === 0) { $(elem).addClass("active"); }
|
|
1689
|
-
elemIndex += 1;
|
|
1690
|
-
$(elem).attr("id", elemId);
|
|
1691
|
-
}
|
|
1692
|
-
});
|
|
1693
|
-
|
|
1694
|
-
return elements;
|
|
1695
|
-
}
|
|
1696
|
-
|
|
1697
|
-
$(function() {
|
|
1698
|
-
$(".demo-embed").each(function(index, elem) {
|
|
1699
|
-
var embeddedDemo = $(elem);
|
|
1700
|
-
var content = loadMultiFileRunnerContent(embeddedDemo);
|
|
1701
|
-
|
|
1702
|
-
var runnerElement = embeddedDemo.find('.runner');
|
|
1703
|
-
var runner = new SnippetRunner(runnerElement);
|
|
1704
|
-
runner.update(content);
|
|
1705
|
-
runnerElement.data("runner", runner);
|
|
1706
|
-
});
|
|
1707
|
-
});
|
|
1708
|
-
});
|
|
1709
|
-
|
|
1710
|
-
if (typeof module !== 'undefined') {
|
|
1711
|
-
// export functions for test suite
|
|
1712
|
-
module.exports = {
|
|
1713
|
-
getStackBlitzTemplate: getStackBlitzTemplate,
|
|
1714
|
-
prepareSnippet: prepareSnippet,
|
|
1715
|
-
toModuleImport: toModuleImport,
|
|
1716
|
-
buildExampleDependencies: buildExampleDependencies,
|
|
1717
|
-
getExampleImports: getExampleImports,
|
|
1718
|
-
stackBlitzDependencies: stackBlitzDependencies,
|
|
1719
|
-
getPackageName: getPackageName
|
|
1720
|
-
};
|
|
1721
|
-
}
|
|
1722
|
-
|