EJ2 3584 Master Theme Switcher

Author: pipeline

index.html

@@ -10,7 +10,7 @@
     <link rel="shortcut icon" href="favicon.ico" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
     <link href="src/common/lib/highlightjs/styles/default.css" rel="stylesheet" />
-    <link href="styles/material.css" rel="stylesheet" />
+    <link href="styles/material.css" rel="stylesheet" id="themelink" />
     <link href="styles/index.css" rel="stylesheet" />
     <script src="src/common.min.js" type="text/javascript"></script>
 </head>
@@ -28,7 +28,16 @@
                     <div class="sb-logo" title="Essential JS 2 (Preview)"></div>
                 </a>
             </div>
-            <div class="header-right"></div>
+            <div class="header-right">
+                <div id="themeswitcher" class="themeicon"><img id="themeswitcher-icon" src='styles/images/sb_icons/SB_Switcher_icon_material.png'></div>
+                <div id="selectdiv" class='e-hidden'>                
+                    <ul id="themelist" class="options">
+                        <li class="e-list" id="material"><span class='switch-text'>Material</span><span class='switch-icon material'></span></a></li>
+                        <li class="e-list" id="fabric"><span class='switch-text'>Fabric</span><span class='switch-icon fabric'></span></a></li>                          
+                    </ul>
+
+                </div>
+            </div>
         </div>
         <div class="sb-content" role="main">
             <div id="left-panel" class="left-panel">

spec/samplebrowser.spec.ts

@@ -51,7 +51,7 @@ describe('sample browser', (): void => {
                             expect(window.customError).not.toHaveBeenCalled();
                             done();
                         };
-                        window.location.href = '#' + control.directory + '/' + element.url + '.html';
+                        window.location.href = '#/material/' + control.directory + '/' + element.url + '.html';
                     });
                 });
             }

src/common/index.ts

@@ -3,7 +3,7 @@
  * default script manupulation for sample browser
  */
 import '../../node_modules/es6-promise/dist/es6-promise';
-import { Ajax, Browser, extend, detach, select, addClass, isVisible, createElement, selectAll } from '@syncfusion/ej2-base';
+import { Ajax, Browser, enableRipple, extend, detach, select, addClass, isVisible, createElement, selectAll } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { SelectEventArgs, ListView } from '@syncfusion/ej2-lists';
@@ -16,6 +16,9 @@ declare let require: (url: string) => Object;
 const tabList: string[] = ['htab', 'ttab'];
 const urlSplit: RegExp = /\b(?!html)\b([A-Za-z-]+)/g;
 let execFunction: { [key: string]: Object } = {};
+let selectedTheme: string = location.hash.split('/')[1];
+let availableThemes: string[] = ['material', 'fabric'];
+let isHashChanged: boolean = true;
 
 interface DestroyMethod extends HTMLElement {
     destroy: Function;
@@ -139,6 +142,16 @@ function getSampleList(): Controls[] | { [key: string]: Object }[] {
     return samplesJSON.samplesList;
 }
 function loadJSON(): void {
+    //material is default theme.    
+    if (availableThemes.indexOf(selectedTheme) === -1) {
+        selectedTheme = 'material';
+    }
+    loadTheme(selectedTheme);
+    if (selectedTheme === 'fabric') {
+        enableRipple(false);
+    } else {
+        enableRipple(true);
+    }
     overlay();
     routeDefault();
     showBackButton();
@@ -201,6 +214,8 @@ function loadJSON(): void {
     }
     localStorage.removeItem('ej2-switch');
     setResponsive();
+    select('#themeswitcher').addEventListener('click', toggleTheme);
+    select('#themelist').addEventListener('click', changeTheme);
 }
 
 function loadPage(page: string): void {
@@ -231,7 +246,7 @@ function routeDefault(): void {
         // loadPage('showcase');
 
         //Redirected page until showcase page implemented
-        window.location.href = '#/chart/line.html';
+        window.location.href = '#/' + selectedTheme + '/chart/line.html';
         isInitRedirected = true;
     });
     bypassed.add((request: Object) => {
@@ -253,14 +268,25 @@ function navigateURL(arg: Controls & Samples, isInteracted: boolean): void {
     let cCtrl: string = (isInteracted ? currentListControl : currentControl);
     if (!arg.hasOwnProperty('samples')) {
         let sample: string = arg.url;
-        hasher.setHash(cCtrl + '/' + sample + '.html');
+        let targetHash: string = selectedTheme + '/' + cCtrl + '/' + sample + '.html';
+        if (location.hash === ('#/' + targetHash)) {
+            isHashChanged = false;
+        }
+        hasher.setHash(targetHash);
         if (isVisible(select('.slide-nav'))) {
             onCloseClick();
         }
     } else {
         currentListControl = arg.directory;
     }
 }
+function loadTheme(theme: string): void {
+    let doc: HTMLFormElement = <HTMLFormElement>document.getElementById('themelink');
+    selectedTheme = theme;
+    doc.href = 'styles/' + selectedTheme + '.css';
+    select('#themeswitcher-icon').setAttribute('src', 'styles/images/sb_icons/SB_Switcher_icon_' + theme + '.png');
+    document.getElementById(theme).style.background = '#DEDFE0';
+}
 function addRoutes(samplesList: Controls[]): void {
     for (let node of samplesList) {
         let dataManager: DataManager = new DataManager(node.samples);
@@ -270,12 +296,12 @@ function addRoutes(samplesList: Controls[]): void {
             let control: string = node.directory;
             let sample: string = subNode.url;
             let sampleName: string = node.name + ' / ' + subNode.name;
-            let urlString: string = '/' + control + '/' + sample + '.html';
+            let selectedTheme: string = location.hash.split('/')[1] ? location.hash.split('/')[1] : 'material';
+            let urlString: string = '/' + selectedTheme + '/' + control + '/' + sample + '.html';
             samplesAr.push('#' + urlString);
             addRoute(urlString, () => {
                 let controlID: string = node.uid;
                 let sampleID: string = subNode.uid;
-                document.getElementById('plnkr').classList.add('disabled');
                 select('#switch').classList.remove('hidden');
                 document.getElementById('source-panel').style.display = 'block';
                 let ajaxHTML: Ajax = new Ajax('src/' + control + '/' + sample + '.html', 'GET', true);
@@ -324,6 +350,7 @@ function addRoutes(samplesList: Controls[]): void {
                         toggleButtonState('prev-sample', false);
                     }
                     document.getElementById('html-tab-scroll').style.width = '';
+                    select('#control-content').classList.remove('error-content');
                     document.getElementById('control-content').innerHTML = htmlString;
                     let controlEle: Element = document.querySelector('.control-section');
                     let controlString: string = controlEle.innerHTML;
@@ -358,13 +385,14 @@ function addRoutes(samplesList: Controls[]): void {
 
 function onSampleSelect(arg: SelectEventArgs): void {
     if (arg.data.category !== 'ShowCase') {
+        isHashChanged = true;
         navigateURL(<any>arg.data, arg.isInteracted);
         // let currentItem: HTMLElement = <HTMLElement>arg.item;
         // this.element.scrollTop = currentItem.offsetTop;
         if (arg.isInteracted) {
             showBackButton();
         }
-        if (!(<Controls & { [key: string]: Object }>arg.data).samples) {
+        if (!(<Controls & { [key: string]: Object }>arg.data).samples && isHashChanged) {
             overlay();
         }
     } else {
@@ -392,6 +420,7 @@ function onOpenClick(arg: MouseEvent): void {
         slideOut();
     }
     arg.stopPropagation();
+    closeThemeSelection();
 }
 
 function dispatchResize(): void {
@@ -410,6 +439,7 @@ function onCloseClick(arg?: MouseEvent): void {
     if (isVisible(ele) && isVisible(select('.slide-nav'))) {
         slideOut();
     }
+    closeThemeSelection();
 }
 
 function onNextButtonClick(arg: MouseEvent): void {
@@ -449,7 +479,7 @@ function onPrevButtonClick(arg: MouseEvent): void {
 function checkLevel(prevhref: string, curhref: string): void {
     let prevHrefSplit: string[] = prevhref.match(urlSplit);
     let curhrefSplit: string[] = curhref.match(urlSplit);
-    if (prevHrefSplit[0] !== curhrefSplit[0]) {
+    if (prevHrefSplit[1] !== curhrefSplit[1]) {
         isSameParent = false;
         sampleTree.back();
     } else {
@@ -458,7 +488,11 @@ function checkLevel(prevhref: string, curhref: string): void {
     isExternalNavigation = true;
 }
 function parseHash(newHash: string, oldHash: string): void {
-    let control: string = newHash.split('/')[0];
+    let newTheme: string = newHash.split('/')[0];
+    let control: string = newHash.split('/')[1];
+    if (newTheme !== selectedTheme && availableThemes.indexOf(newTheme) !== -1) {
+        location.reload();
+    }
     if (newHash.length && !select('#' + control + '-common') && checkSampleLength(control)) {
         let scriptElement: HTMLScriptElement = document.createElement('script');
         scriptElement.src = 'src/' + control + '/common.js';
@@ -562,4 +596,22 @@ function plunker(results: string): void {
     document.getElementById('plnkr').addEventListener('click', () => { form.submit(); });
 }
 
+function toggleTheme(): void {
+    let target: any = document.getElementById('selectdiv');
+    target.classList.toggle('e-hidden');
+    select('#themeswitcher').classList.toggle('active');
+}
+function changeTheme(arg: MouseEvent): void {
+    let target: Element = <Element>arg.target;
+    let themeName: string = target.textContent || target.className.split(' ')[1];
+    themeName = themeName.toLowerCase();
+    let hash: string[] = location.hash.split('/');
+    hash[1] = themeName;
+    location.hash = hash.join('/');
+}
+function closeThemeSelection(): void {
+    if (!select('#selectdiv').classList.contains('e-hidden')) {
+        toggleTheme();
+    }
+}
 loadJSON();

styles/images/sb_icons/SB_Switcher_icon_fabric.png

@@ -51,6 +51,67 @@ body {
 }
 .header-right {
     float: right;
+    height: 100%;
+    padding-right: 16px;
+}
+.themeicon {
+    height: 100%;
+    width: 60px;
+    cursor: pointer;
+    margin-left: 30px;
+}
+.options li {
+    line-height: 28px;
+    padding: 10px 16px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #333333;
+    font-size: 14px;        
+}
+.options {
+    list-style: none;
+    padding-left: 0px;
+    border:1px solid #EAEAEA;
+    background: white;
+    margin-bottom: 0px;
+}
+.switch-icon {
+    display: block;
+    float: right;
+    height: 28px;
+    width: 28px;
+}
+.switch-icon.material {
+    background: url(images/sb_icons/material.png) no-repeat 100% 100%;
+}
+.switch-icon.fabric {
+    background: url(images/sb_icons/fabric.png) no-repeat 100% 100%;
+}
+#selectdiv {
+    width:230px;
+    position:absolute;
+    z-index:1000;
+    right:16px;
+    box-shadow: 0px 0px 25px -5px #9a9a9a;
+}
+.options li:hover {
+    background-color: #f1f1f1;
+    cursor: pointer;
+
+}
+#themeswitcher img{
+   padding-top: 3px;
+}
+#themeswitcher.active {
+    background: #3397DA;
+}
+#themeswitcher :hover {
+    background: #3397DA;
+}
+#themeswitcher .e-input {
+    margin-left: 5px;
+}
+#themeswitcher .e-input-group-icon.e-ddl-icon {
+    margin-right: 4px;
 }
 .list-search {
     display: none;
@@ -540,6 +601,12 @@ body {
     }
 }
 
+@media screen and (max-width: 345px) {
+    #themeswitcher {
+        margin-left: 9px;
+    }
+}
+
 @media screen and (min-width: 150px) and (max-width: 480px) {
     .nav-btn .btn-default,
     .nav-btn .btn-default:active:hover,