Skip to content

Commit 473ac9d

Browse files
author
pipeline
committed
v20.1.47 is released
1 parent 192b37b commit 473ac9d

File tree

537 files changed

+64384
-7729
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

537 files changed

+64384
-7729
lines changed

‎config.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
"validation",
102102
"editing",
103103
"timeline",
104-
"progressbar"
104+
"progressbar",
105+
null
105106
]
106107
}

‎index.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,14 @@
228228
</div>
229229
<div id='theme-switcher-popup' class='sb-theme-popup'>
230230
<ul id="themelist" class="options" role="list">
231+
<li class="e-list" id="fluent" role="listitem">
232+
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
233+
<span class="switch-text">Fluent</span>
234+
</li>
235+
<li class="e-list" id="fluent-dark" role="listitem">
236+
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
237+
<span class="switch-text">Fluent Dark</span>
238+
</li>
231239
<li class="e-list" id="bootstrap5" role="listitem">
232240
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
233241
<span class="switch-text">Bootstrap v5</span>
@@ -292,6 +300,8 @@
292300
</div>
293301
<div class='setting-content setting-theme-change'>
294302
<select id='sb-setting-theme' class='sb-setting-theme-select'>
303+
<option value="fluent">Fluent</option>
304+
<option value="fluent-dark">Fluent Dark</option>
295305
<option value="bootstrap5">Bootstrap v5</option>
296306
<option value="bootstrap5-dark">Bootstrap v5 Dark</option>
297307
<option value="tailwind">Tailwind CSS</option>
@@ -451,7 +461,7 @@ <h1 class='sb-sample-text'>Chart</h1>
451461
<div class="row">
452462
<div class="col-sm-12">
453463
<div class="col-sm-12">
454-
<div id="ad-banner-head" class="ad-header">Transform your Javascript ES5 web
464+
<div id="ad-banner-head" class="ad-header">Transform your JavaScript ES5 web
455465
apps today with Syncfusion Javascript ES5 controls</div>
456466
</div>
457467
<div class="col-sm-12 cnt-area">

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@syncfusion/ej2-javascript-samples",
3-
"version": "19.4.38",
3+
"version": "20.1.47",
44
"description": "Examples of JavaScript (ES5) UI Controls",
55
"author": "Syncfusion Inc.",
66
"license": "SEE LICENSE IN license",
@@ -9,8 +9,7 @@
99
"crossroads": "^0.12.2",
1010
"hasher": "^1.2.0",
1111
"fuse.js": "3.2.0",
12-
"tributejs": "^3.7.3",
13-
"shelljs": "^0.8.5"
12+
"tributejs": "^3.7.3"
1413
},
1514
"devDependencies": {
1615
"elasticlunr": "0.9.5",

‎src/accordion/keyboard-interaction-stack.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/accordion/keyboard-interaction/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"control-section\">\n <div class=\"control_wrapper accordion-control-section\">\n <div id=\"Accordion_keyboard_interaction\"></div>\n </div>\n</div>\n\n\n","index.js":"{{ripple}}/**\n * Accordion Keyboard Interaction Sample\n */\n\n //Initialize Accordion component\n var accordion = new ej.navigations.Accordion({\n items: [\n { header: 'ASP.NET', expanded: true, content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance and enables the separation of application logic and user interface.' },\n { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.' },\n { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.' }\n ]\n });\n //Render initialized Accordion component\n accordion.appendTo('#Accordion_keyboard_interaction');\n"}

‎src/accordion/keyboard-interaction.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<div class="control-section">
2+
<div class="control_wrapper accordion-control-section">
3+
<div id="Accordion_keyboard_interaction"></div>
4+
</div>
5+
</div>
6+
<div id="action-description">
7+
<p>
8+
This demo showcases the keyboard shortcuts applicable on <code>Accordion</code>.
9+
</p>
10+
</div>
11+
<div id="description">
12+
<i>Below key combinations can be used in Accordion to initiate various actions.</i>
13+
<ul>
14+
<li>
15+
<b>Focus</b>
16+
<ul>
17+
<li>
18+
<span class="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
19+
<span> - Focuses on the first component of the demo.</span>
20+
</li>
21+
<li>
22+
<span class="key-class"><kbd>Home</kbd></span>
23+
<span> - Focus the first Accordion header.</span>
24+
</li>
25+
<li>
26+
<span class="key-class"><kbd>End</kbd></span>
27+
<span> - Focus the last Accordion header.</span>
28+
</li>
29+
<li>
30+
<span class="key-class"><kbd>Down arrow</kbd></span>
31+
<span> - Focus the next Accordion header.</span>
32+
</li>
33+
<li>
34+
<span class="key-class"><kbd>Up arrow</kbd></span>
35+
<span> - Focus the previous Accordion header.</span>
36+
</li>
37+
</ul>
38+
</li>
39+
<li>
40+
<b>Expand and Collapse</b>
41+
<ul>
42+
<li>
43+
<span class="key-class"><kbd>Enter</kbd> or <kbd>Space</kbd></span>
44+
<span> - Expand and collapse when the focus is on the Accordion header.</span>
45+
</li>
46+
</ul>
47+
</li>
48+
</ul>
49+
</div>
50+
<!-- custom code start -->
51+
<style>
52+
.accordion-control-section {
53+
margin: 0 10% 0 10%;
54+
}
55+
56+
@media screen and (max-width: 768px) {
57+
.accordion-control-section {
58+
margin: 0;
59+
}
60+
}
61+
62+
.key-class {
63+
display: inline-block;
64+
width: 130px;
65+
}
66+
</style>
67+
<!-- custom code end-->

‎src/accordion/keyboard-interaction.js

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/accordion/sample.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,13 @@
2525
"category": "Accordion",
2626
"description":"The sample demonstrates how to represent pane headers with an icon in Accordion control which populates from items collection in JavaScript platform.",
2727
"api": {"AccordionItem": ["iconCss"] }
28+
},
29+
{
30+
"url": "keyboard-interaction",
31+
"name": "Keyboard Interaction",
32+
"category": "Accordion",
33+
"description":"The sample showcases the keyboard shortcuts applicable on Accordion component in JavaScript platform.",
34+
"api": {"AccordionItem": ["header", "content", "expanded"], "Accordion":["items"] }
2835
}
2936
]
3037
}

‎src/auto-complete/custom-filtering-stack.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/development/demos/auto-complete/custom-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"books\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n if (popupElement)\n {\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '<span class=\"e-highlight\">' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"}
1+
{"index.html":"<html><head><script src=\"//ej2.syncfusion.com/javascript/demos/auto-complete/custom-filtering/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\" style=\"height: 400px;\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" tabindex=\"1\" id=\"books\">\n </div>\n </div>\n</div>\n\n\n\n\n","index.js":"{{ripple}}\n // define the JSON of data\n \n // initialize AutoComplete component\n var atcObj = new ej.dropdowns.AutoComplete({\n // set the data to dataSource property\n dataSource: window.booksData,\n // maps the appropriate column to fields property\n fields: { value: 'BookName' },\n // set placeholder to AutoComplete input element\n placeholder: 'e.g. Node.js Succinctly',\n // Bind the filter event\n filtering: function (e) {\n var options = {\n keys: ['BookName'],\n includeMatches: true,\n findAllMatches: true\n };\n // create object from Fuse constructor\n var fuse = new Fuse(window.booksData, options);\n // store the search result data based on typed characters\n var result = fuse.search(e.text);\n var data = [];\n for (var i = 0; i < result.length; i++) {\n data.push(result[i].item);\n }\n // pass the filter data source to updateData method.\n e.updateData(data, null);\n var popupElement = document.getElementById('books_popup');\n if (popupElement)\n {\n var lists = popupElement.querySelectorAll('.e-list-item');\n // For highlight the typed characters, pass the result data and list items to highlightSearch method.\n highlightSearch(lists, result);\n }\n }\n });\n atcObj.appendTo('#books');\n loadExternalFile();\n // Dynamically load the fuse.js file\n function loadExternalFile() {\n var script = document.createElement('script');\n script.src = 'dist/fuse.min.js';\n document.getElementsByTagName('head')[0].appendChild(script);\n }\n\n function highlightSearch(listItems, result) {\n if (result.length > 0) {\n for (var i = 0; i < listItems.length; i++) {\n var innerHTML = listItems[i].innerHTML;\n for (var j = result[i].matches[0].indices.length - 1; j >= 0; j--) {\n var indexes = result[i].matches[0].indices[j];\n innerHTML = innerHTML.substring(0, indexes[0]) + '<span class=\"e-highlight\">' +\n innerHTML.substring(indexes[0], (indexes[1] + 1)) + '</span>' + innerHTML.substring(indexes[1] + 1);\n listItems[i].innerHTML = innerHTML;\n }\n }\n }\n }\n"}

0 commit comments

Comments
 (0)