Skip to content

Commit c6cf4fd

Browse files
Mydeen-SNMydeen-SN
authored
Merge pull request #1 from BanupriyaSelvaraj/master
Javascript-Dynamic-theme-Switch
2 parents 45a3830 + 473024e commit c6cf4fd

File tree

18 files changed

+64215
-2
lines changed

18 files changed

+64215
-2
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
src/**/*.js
2+
!src/system.config.js
3+
node_modules/

‎README.md‎

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,89 @@
1-
# EJ2-Javascript-Dynamic-theme-Switch
2-
This section describes about how to change themes dynamically in Syncfusion Javascript controls.
1+
# Themeswitcher
2+
3+
This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
4+
5+
## Create a typescript application
6+
7+
To create a typescript application, refer to [`getting started`](https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/) document.
8+
9+
## Add Different Themes for Dynamic Theme Change
10+
11+
In the `src` folder of the application, create `assets` folder.
12+
13+
Under `assets` folder, create a folder named `styles`. Then, load CSS file of the different themes in that `styles` folder.
14+
15+
## Add Style Tag
16+
17+
```typescript
18+
<!DOCTYPE html>
19+
<html lang="en">
20+
21+
<head>
22+
<title>Essential JS 2 DropDownList component</title>
23+
<meta charset="utf-8" />
24+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
25+
<meta name="description" content="Essential JS 2" />
26+
<meta name="author" content="Syncfusion" />
27+
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
28+
29+
<!--system js reference and configuration-->
30+
<script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
31+
<script src="system.config.js" type="text/javascript"></script>
32+
33+
// add style tag for dynamic theme change
34+
<style id="theme"></style>
35+
36+
</head>
37+
38+
<body>
39+
<div id='container'>
40+
<!--element which is going to render the DropDownList-->
41+
<input type="text" tabindex="1" id='ddlelement'/>
42+
<br>
43+
<br>
44+
<!--element which is going to render the Grid-->
45+
<div id='Grid'></div>
46+
</div>
47+
48+
</body>
49+
50+
</html>
51+
52+
```
53+
54+
## Dynamic theme change
55+
56+
To achieve dynamic theme change, read the stylesheet/CSS file of the selected theme and apply these styles to DOM element using AJAX.
57+
58+
Add the below code in `app.ts` file.
59+
60+
```typescript
61+
let dropDownListObject: DropDownList = new DropDownList({
62+
//set the data to dataSource property
63+
dataSource: themes,
64+
select: function(e) {
65+
if (e && e.itemData.value) {
66+
let ajax: Ajax = new Ajax('assets/styles/' + e.itemData.value + '.css', 'GET', true);
67+
ajax.send().then((result: any) => {
68+
let styleTag = document.getElementById('theme');
69+
styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
70+
});
71+
}
72+
},
73+
// set placeholder to DropDownList input element
74+
placeholder: "Select a theme"
75+
});
76+
77+
```
78+
79+
The `select` function in the dropdownlist component gets triggered, whenever the theme value is changed.
80+
81+
Whenever the `select` function is triggered, the respective CSS file of the selected theme is applied to the DOM elements.
82+
83+
## Run the Application
84+
85+
Use the following command to run the application in browser.
86+
87+
```
88+
npm run start
89+
```

‎e2e/index.spec.js‎

Whitespace-only changes.

‎e2e/protractor.conf.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
exports.config = {
2+
3+
allScriptsTimeout: 11000,
4+
5+
capabilities: {
6+
'browserName': 'chrome'
7+
},
8+
9+
framework: 'jasmine',
10+
11+
jasmineNodeOpts: {
12+
defaultTimeoutInterval: 10000
13+
},
14+
15+
onPrepare: function() {
16+
browser.waitForAngularEnabled(false);
17+
},
18+
19+
specs: ['./*.spec.js']
20+
};

‎gulpfile.js‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
'use strict';
2+
3+
var gulp = require('gulp');
4+
5+
/**
6+
* Load the sample in src/app/index
7+
*/
8+
gulp.task('start', ['compile'], function(done) {
9+
var browserSync = require('browser-sync');
10+
var bs = browserSync.create('Essential JS 2');
11+
var options = {
12+
server: {
13+
baseDir: ['./src', './']
14+
},
15+
ui: false
16+
};
17+
bs.init(options, done);
18+
19+
/**
20+
* Watching typescript file changes
21+
*/
22+
gulp.watch('src/**/*.ts', ['compile', bs.reload]).on('change', reportChanges);
23+
});
24+
25+
/**
26+
* Compile TypeScript to JS
27+
*/
28+
gulp.task('compile', function(done) {
29+
var ts = require('gulp-typescript');
30+
// Default typescript config
31+
var defaultConfig = {
32+
typescript: require('typescript')
33+
};
34+
var tsProject, tsResult;
35+
// Create the typescript project
36+
tsProject = ts.createProject('tsconfig.json', defaultConfig);
37+
// Get typescript result
38+
tsResult = gulp.src(['./src/**/*.ts'], { base: '.' })
39+
.pipe(ts(tsProject))
40+
.pipe(gulp.dest('./'))
41+
.on('error', function(e) {
42+
done(e);
43+
process.exit(1);
44+
}).on('end', function() {
45+
done();
46+
});
47+
});
48+
49+
function reportChanges(event) {
50+
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
51+
}
52+
/**
53+
* Testing spec files
54+
*/
55+
var protractor = require('gulp-protractor').protractor;
56+
var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
57+
var webdriver_update = require('gulp-protractor').webdriver_update_specific;
58+
59+
gulp.task('e2e-serve', webdriver_standalone);
60+
61+
gulp.task('e2e-webdriver-update', webdriver_update({
62+
webdriverManagerArgs: ['--ie', '--edge']
63+
}));
64+
65+
gulp.task('e2e-test', ['compile'], function(done) {
66+
var browserSync = require('browser-sync');
67+
var bs = browserSync.create('Essential JS 2');
68+
var options = {
69+
server: {
70+
baseDir: [
71+
'./src/app/',
72+
'./src/resource/',
73+
'./node_modules/@syncfusion/ej2/'
74+
],
75+
directory: true
76+
},
77+
ui: false,
78+
open: false,
79+
notify: false
80+
};
81+
bs.init(options, function() {
82+
gulp.src(['./spec/**/*.spec.js'])
83+
.pipe(protractor({
84+
configFile: 'e2e/protractor.conf.js'
85+
}))
86+
.on('error', function(e) {
87+
console.error('Error: ' + e.message);
88+
done();
89+
process.exit(1);
90+
})
91+
.on('end', function() {
92+
done();
93+
process.exit(0);
94+
});
95+
});
96+
});

‎license‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
2+
3+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
4+
5+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
6+
7+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
8+
9+
The Syncfusion license that contains the terms and conditions can be found at
10+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

‎package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "ej2-quickstart",
3+
"version": "0.0.1",
4+
"description": "Essential JS 2 typescript quick start application",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/syncfusion/ej2-quickstart.git"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2": "*"
13+
},
14+
"devDependencies": {
15+
"browser-sync": "^2.18.12",
16+
"gulp": "^3.9.1",
17+
"gulp-protractor": "^4.1.0",
18+
"gulp-typescript": "^2.13.0",
19+
"jasmine": "^2.6.0",
20+
"systemjs": "^0.20.14",
21+
"typescript": "2.3.4"
22+
},
23+
"scripts": {
24+
"start": "gulp start",
25+
"serve": "gulp e2e-serve",
26+
"test": "gulp e2e-test",
27+
"update-webdriver": "gulp e2e-webdriver-update"
28+
}
29+
}

‎src/app/app.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { DropDownList, DropDownListClassList } from '@syncfusion/ej2-dropdowns';
2+
import { Ajax } from '@syncfusion/ej2-base';
3+
import { Grid, Sort, Page } from '@syncfusion/ej2-grids';
4+
import { data } from './datasource';
5+
6+
// defined the array of data
7+
let themes: string[] = ['material', 'fabric', 'bootstrap'];
8+
Grid.Inject(Sort, Page);
9+
// initialize DropDownList component
10+
let dropDownListObject: DropDownList = new DropDownList({
11+
//set the data to dataSource property
12+
dataSource: themes,
13+
select: function(e) {
14+
debugger
15+
console.log(e);
16+
if (e && e.itemData.value) {
17+
let ajax: Ajax = new Ajax('assets/styles/' + e.itemData.value + '.css', 'GET', true);
18+
ajax.send().then((result: any) => {
19+
let styleTag = document.getElementById('theme');
20+
styleTag.innerHTML=`/*${e.itemData.value}*/` + result;
21+
});
22+
}
23+
},
24+
// set placeholder to DropDownList input element
25+
placeholder: "Select a theme"
26+
});
27+
28+
let grid: Grid = new Grid({
29+
dataSource: data,
30+
columns: [
31+
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },
32+
{ field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },
33+
{ field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },
34+
{ field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }
35+
],
36+
allowSorting: true,
37+
allowPaging: true,
38+
pageSettings: { pageSize: 7 }
39+
});
40+
41+
// render initialized DropDownList
42+
dropDownListObject.appendTo('#ddlelement');
43+
// render initialized Grid
44+
grid.appendTo('#Grid');

‎src/app/datasource.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
export let data: Object[] = [
2+
{
3+
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
4+
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
5+
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
6+
},
7+
{
8+
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
9+
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
10+
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
11+
},
12+
{
13+
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
14+
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
15+
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
16+
},
17+
{
18+
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
19+
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
20+
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
21+
},
22+
{
23+
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5),
24+
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
25+
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
26+
},
27+
{
28+
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 7, OrderDate: new Date(836937e6),
29+
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
30+
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
31+
},
32+
{
33+
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
34+
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
35+
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
36+
},
37+
{
38+
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
39+
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
40+
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
41+
},
42+
{
43+
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
44+
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
45+
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
46+
},
47+
{
48+
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
49+
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
50+
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
51+
},
52+
{
53+
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
54+
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
55+
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
56+
},
57+
{
58+
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
59+
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
60+
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
61+
},
62+
{
63+
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
64+
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
65+
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
66+
},
67+
{
68+
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
69+
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
70+
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
71+
},
72+
{
73+
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
74+
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
75+
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
76+
}];

‎src/assets/.gitkeep‎

Whitespace-only changes.

0 commit comments

Comments
 (0)