-
-
-
Keymap removed
-
Undo
-
×
-
-
-
-
-
-
- QWERTY keymap (QTY)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Macro1
-
-
-
-
-
-
- Move pointer by 100px leftward
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
- dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
- sit amet.
-
-
-
-
- Press letter A
-
-
-
-
-
- Press Alt+Tab
-
-
-
-
-
- Delay of 235ms
-
-
-
-
-
- Press button 1
-
-
-
-
-
- Scroll by 150px downward
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
- dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
- sit amet.
-
-
-
-
-
-
+
+
+
Keymap removed
+
Undo
+
×
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
diff --git a/keymapLegacy.html b/keymapLegacy.html
new file mode 100644
index 00000000..f47cde80
--- /dev/null
+++ b/keymapLegacy.html
@@ -0,0 +1,79 @@
+
+
+
+
+
Ultimate Hacking Keyboard Configurator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ QWERTY keymap (QTY)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/macro.js b/macro.js
index 60736f72..75caae00 100644
--- a/macro.js
+++ b/macro.js
@@ -6,7 +6,7 @@ $(function() {
var newMacroHtml = $('.new-macro-settings');
// List with handle
- Sortable.create(listWithHandle, {
+ Sortable.create(document.getElementById('listWithHandle'), {
handle: '.move-handle',
filter: '.no-reorder',
draggable: '.list-group-item',
diff --git a/macroLegacy.html b/macroLegacy.html
new file mode 100644
index 00000000..603459cd
--- /dev/null
+++ b/macroLegacy.html
@@ -0,0 +1,97 @@
+
+
+
+
+
Ultimate Hacking Keyboard Configurator
+
+
+
+
+
+
+
+
+
+
+
+
+ Macro1
+
+
+
+
+
+
+ Move pointer by 100px leftward
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+ dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+ sit amet.
+
+
+
+
+ Press letter A
+
+
+
+
+
+ Press Alt+Tab
+
+
+
+
+
+ Delay of 235ms
+
+
+
+
+
+ Press button 1
+
+
+
+
+
+ Scroll by 150px downward
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+ labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+ dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+ sit amet.
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index 471a535a..4a6e0b10 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"gulp-if": "^2.0.1",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
+ "html-loader": "0.4.3",
"npm-run-all": "^2.3.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.0",
@@ -32,6 +33,7 @@
"@angular/core": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
+ "@angular/router": "3.0.0-beta.2",
"bootstrap": "^3.3.6",
"browser-stdout": "^1.3.0",
"es6-shim": "^0.35.1",
@@ -44,7 +46,7 @@
"rxjs": "5.0.0-beta.6",
"select2": "^4.0.3",
"sortablejs": "^1.4.2",
- "typescript": "^1.8.10",
+ "typescript": "1.9.0-dev.20160626-1.0",
"xml-loader": "^1.1.0",
"zone.js": "^0.6.12"
},
diff --git a/src/boot.ts b/src/boot.ts
index fd9c3a28..fe64cce8 100644
--- a/src/boot.ts
+++ b/src/boot.ts
@@ -2,12 +2,16 @@ import { bootstrap } from '@angular/platform-browser-dynamic';
import { MainAppComponent } from './main-app.component';
-import {DataProviderService} from './services/data-provider.service';
-import {MapperService} from './services/mapper.service';
+import { DataProviderService } from './services/data-provider.service';
+import { MapperService } from './services/mapper.service';
+import { APP_ROUTER_PROVIDERS } from './main-app.routes';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
process.stdout = require('browser-stdout')();
bootstrap(MainAppComponent, [
DataProviderService,
- MapperService
+ MapperService,
+ APP_ROUTER_PROVIDERS,
+ { provide: LocationStrategy, useClass: HashLocationStrategy }
]).catch(err => console.error(err));
diff --git a/src/components/keymap/keymap.component.html b/src/components/keymap/keymap.component.html
new file mode 100644
index 00000000..97e42a4a
--- /dev/null
+++ b/src/components/keymap/keymap.component.html
@@ -0,0 +1,37 @@
+
+
+
+
+ {{keymap.name}} keymap
+ ({{keymap.abbreviation}})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/keymap/keymap.component.scss b/src/components/keymap/keymap.component.scss
new file mode 100644
index 00000000..849aff79
--- /dev/null
+++ b/src/components/keymap/keymap.component.scss
@@ -0,0 +1,57 @@
+:host {
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
+.uhk--wrapper {
+ height: calc(100% - 95px);
+}
+
+button {
+ margin: 2px;
+}
+
+svg-keyboard-popover {
+ width: 95%;
+ max-width: 1400px;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ animation-duration: 400ms;
+ animation-timing-function: ease-in-out;
+}
+
+.keyboard-slider {
+ height: calc(100% - 45px);
+}
+
+.uhk__layer-switcher--wrapper {
+ margin-bottom: 2rem;
+}
+
+@keyframes animate-center-left {
+ 0% {
+ transform: translateX(-50%);
+ left: 50%;
+ }
+ 100% {
+ transform: translateX(-100%);
+ left: 0;
+ }
+}
+
+@keyframes animate-center-right {
+ 0% {
+ transform: translateX(-50%);
+ left: 50%;
+ }
+ 100% {
+ transform: translateX(0%);
+ left: 100%;
+ }
+}
+
+[hidden] {
+ display: none;
+}
diff --git a/src/components/keymap/keymap.component.ts b/src/components/keymap/keymap.component.ts
new file mode 100644
index 00000000..c86a5e79
--- /dev/null
+++ b/src/components/keymap/keymap.component.ts
@@ -0,0 +1,138 @@
+import { Component, ViewChildren, QueryList, ElementRef, OnInit, AfterViewInit, Renderer } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { SvgKeyboardPopoverComponent } from '../svg-keyboard-popover.component';
+import { Layers } from '../../../config-serializer/config-items/Layers';
+import { UhkConfigurationService } from '../../services/uhk-configuration.service';
+import { Keymap } from '../../../config-serializer/config-items/Keymap';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+ selector: 'keymap',
+ template: require('./keymap.component.html'),
+ styles: [require('./keymap.component.scss')],
+ directives: [SvgKeyboardPopoverComponent],
+ providers: [UhkConfigurationService]
+})
+export class KeymapComponent implements OnInit, AfterViewInit {
+ @ViewChildren('baseButton,modButton,fnButton,mouseButton')
+ buttonsQueryList: QueryList
;
+
+ @ViewChildren(SvgKeyboardPopoverComponent, { read: ElementRef })
+ keyboardsQueryList: QueryList;
+
+ private buttons: ElementRef[];
+ private keyboards: ElementRef[];
+ private selectedLayerIndex: number;
+ private keymapId: number = 0;
+
+ private layers: Layers;
+ private keymap: Keymap;
+
+ private numAnimationInProgress: number;
+ private subParams: Subscription;
+ private subQuery: Subscription;
+
+ constructor(
+ private renderer: Renderer,
+ private uhkConfigurationService: UhkConfigurationService,
+ private route: ActivatedRoute
+ ) {
+ this.buttons = [];
+ this.keyboards = [];
+ this.selectedLayerIndex = 0;
+ this.numAnimationInProgress = 0;
+ }
+
+ ngOnInit() {
+ this.subParams = this.route.params.subscribe(params => {
+ let id: number = +params['id'];
+
+ if (!isNaN(id)) {
+ this.keymapId = id;
+ }
+
+ this.keymap = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements[this.keymapId];
+ this.layers = this.keymap.layers;
+ });
+ }
+
+ ngAfterViewInit() {
+ this.buttons = this.buttonsQueryList.toArray();
+ this.afterView();
+
+ this.subQuery = this.keyboardsQueryList.changes.subscribe(() => {
+ this.afterView();
+ });
+ }
+
+ ngOnDestroy() {
+ this.subParams.unsubscribe();
+ this.subQuery.unsubscribe();
+ }
+
+ private afterView() {
+ this.keyboards = this.keyboardsQueryList.toArray();
+ this.renderer.setElementAttribute(this.keyboards[0].nativeElement, 'hidden', undefined);
+ this.renderer.setElementClass(this.buttons[this.selectedLayerIndex].nativeElement, 'btn-primary', false);
+ this.renderer.setElementClass(this.buttons[0].nativeElement, 'btn-primary', true);
+ this.selectedLayerIndex = 0;
+ }
+
+ /* tslint:disable:no-unused-variable */
+ /* selectLayer is used in the template string */
+ private selectLayer(index: number): void {
+ /* tslint:enable:no-unused-variable */
+ if (this.selectedLayerIndex === index || index > this.keyboards.length - 1 || this.numAnimationInProgress > 0) {
+ return;
+ }
+
+ this.renderer.setElementClass(this.buttons[this.selectedLayerIndex].nativeElement, 'btn-primary', false);
+ this.renderer.setElementClass(this.buttons[index].nativeElement, 'btn-primary', true);
+
+ if (index > this.selectedLayerIndex) {
+ this.renderer.setElementStyle(
+ this.keyboards[this.selectedLayerIndex].nativeElement,
+ 'animation-name',
+ 'animate-center-left'
+ );
+ this.renderer.setElementStyle(
+ this.keyboards[index].nativeElement,
+ 'animation-name',
+ 'animate-center-right'
+ );
+ this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
+ } else {
+ this.renderer.setElementStyle(
+ this.keyboards[this.selectedLayerIndex].nativeElement,
+ 'animation-name',
+ 'animate-center-right'
+ );
+ this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-name', 'animate-center-left');
+ this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
+ }
+ this.numAnimationInProgress += 2;
+
+ this.renderer.setElementAttribute(this.keyboards[index].nativeElement, 'hidden', undefined);
+
+ this.selectedLayerIndex = index;
+ }
+
+ /* tslint:disable:no-unused-variable */
+ /* onKeyboardAnimationEnd is used in the template string */
+ private onKeyboardAnimationEnd(event: AnimationEvent) {
+ /* tslint:enable:no-unused-variable */
+ let animationNameTokens: string[] = event.animationName.split('-');
+ let animationFrom: string = animationNameTokens[1];
+ let animationTo: string = animationNameTokens[2];
+ if (( event.target).style.animationDirection === 'reverse') {
+ animationFrom = animationNameTokens[2];
+ animationTo = animationNameTokens[1];
+ this.renderer.setElementStyle(event.target, 'animation-direction', undefined);
+ }
+
+ --this.numAnimationInProgress;
+ this.renderer.setElementStyle(event.target, 'animation-name', undefined);
+ this.renderer.setElementAttribute(event.target, 'hidden', (animationTo === 'center') ? undefined : '');
+ }
+}
diff --git a/src/components/keymap/keymap.routes.ts b/src/components/keymap/keymap.routes.ts
new file mode 100644
index 00000000..1d9e5771
--- /dev/null
+++ b/src/components/keymap/keymap.routes.ts
@@ -0,0 +1,18 @@
+import { RouterConfig } from '@angular/router';
+import { KeymapComponent } from './keymap.component';
+
+export const keymapRoutes: RouterConfig = [
+ {
+ path: '',
+ redirectTo: '/keymap',
+ pathMatch: 'full'
+ },
+ {
+ path: 'keymap',
+ component: KeymapComponent
+ },
+ {
+ path: 'keymap/:id',
+ component: KeymapComponent
+ }
+];
diff --git a/src/components/legacy/legacy-loader.component.scss b/src/components/legacy/legacy-loader.component.scss
new file mode 100644
index 00000000..be368ac1
--- /dev/null
+++ b/src/components/legacy/legacy-loader.component.scss
@@ -0,0 +1,9 @@
+:host {
+ height: 100%;
+ width: 100%;
+}
+
+iframe {
+ height: 100vh;
+ width: 100%;
+}
diff --git a/src/components/legacy/legacy-loader.component.ts b/src/components/legacy/legacy-loader.component.ts
new file mode 100644
index 00000000..5cb0a602
--- /dev/null
+++ b/src/components/legacy/legacy-loader.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { DomSanitizationService, SafeResourceUrl } from '@angular/platform-browser';
+import {ActivatedRoute} from '@angular/router';
+
+@Component({
+ selector: 'legacy',
+ template:
+ `
+
+ `,
+ styles: [require('./legacy-loader.component.scss')]
+})
+export class LegacyLoaderComponent {
+ private safeLink: SafeResourceUrl;
+
+ constructor(private sanitationService: DomSanitizationService, private route: ActivatedRoute) {
+ }
+
+ ngOnInit() {
+ this.route.params.subscribe(params => {
+ if (params['id']) {
+ this.safeLink = this.sanitationService.bypassSecurityTrustResourceUrl(params['id'] + 'Legacy.html');
+ }
+ });
+ }
+}
diff --git a/src/components/legacy/legacy-loader.routes.ts b/src/components/legacy/legacy-loader.routes.ts
new file mode 100644
index 00000000..ec07d8d4
--- /dev/null
+++ b/src/components/legacy/legacy-loader.routes.ts
@@ -0,0 +1,9 @@
+import { RouterConfig } from '@angular/router';
+import {LegacyLoaderComponent} from './legacy-loader.component';
+
+export const legacyRoutes: RouterConfig = [
+ {
+ path: 'legacy/:id',
+ component: LegacyLoaderComponent
+ }
+];
diff --git a/src/components/macro/macro.component.html b/src/components/macro/macro.component.html
new file mode 100644
index 00000000..a3e5bc07
--- /dev/null
+++ b/src/components/macro/macro.component.html
@@ -0,0 +1 @@
+Macro
\ No newline at end of file
diff --git a/src/components/macro/macro.component.scss b/src/components/macro/macro.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/macro/macro.component.ts b/src/components/macro/macro.component.ts
new file mode 100644
index 00000000..945dacc6
--- /dev/null
+++ b/src/components/macro/macro.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'macro',
+ template: require('./macro.component.html'),
+ styles: [require('./macro.component.scss')]
+})
+export class MacroComponent {
+
+ constructor() {
+ }
+}
diff --git a/src/components/macro/macro.routes.ts b/src/components/macro/macro.routes.ts
new file mode 100644
index 00000000..ee40778b
--- /dev/null
+++ b/src/components/macro/macro.routes.ts
@@ -0,0 +1,13 @@
+import { RouterConfig } from '@angular/router';
+import { MacroComponent } from './macro.component';
+
+export const macroRoutes: RouterConfig = [
+ {
+ path: 'macro',
+ component: MacroComponent
+ },
+ {
+ path: 'macro/:id',
+ component: MacroComponent
+ }
+];
diff --git a/src/components/sidemenu/side-menu.component.html b/src/components/sidemenu/side-menu.component.html
new file mode 100644
index 00000000..2d3b8d50
--- /dev/null
+++ b/src/components/sidemenu/side-menu.component.html
@@ -0,0 +1,87 @@
+
+
\ No newline at end of file
diff --git a/src/components/sidemenu/side-menu.component.scss b/src/components/sidemenu/side-menu.component.scss
new file mode 100644
index 00000000..52b9d0e9
--- /dev/null
+++ b/src/components/sidemenu/side-menu.component.scss
@@ -0,0 +1,23 @@
+:host {
+ background-color: #f5f5f5;
+ border-right: 1px solid #ccc;
+ position: fixed;
+ overflow-y: auto;
+ width: 250px;
+ height: 100%;
+}
+
+a {
+ color: #333;
+}
+
+ul ul {
+ max-height: 200px;
+ transition: max-height 0.5s ease-in;
+ overflow: hidden;
+}
+
+ul ul.slide-up {
+ max-height: 0;
+ transition: max-height 0.5s ease-out;
+}
diff --git a/src/components/sidemenu/side-menu.component.ts b/src/components/sidemenu/side-menu.component.ts
new file mode 100644
index 00000000..aaf0ecb8
--- /dev/null
+++ b/src/components/sidemenu/side-menu.component.ts
@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Keymap } from '../../../config-serializer/config-items/Keymap';
+import { UhkConfigurationService } from '../../services/uhk-configuration.service';
+import { Macro } from '../../../config-serializer/config-items/Macro';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+@Component({
+ selector: 'side-menu',
+ template: require('./side-menu.component.html'),
+ styles: [require('./side-menu.component.scss')],
+ providers: [UhkConfigurationService],
+ directives: [ROUTER_DIRECTIVES]
+})
+export class SideMenuComponent implements OnInit {
+ private keymaps: Keymap[];
+ private macros: Macro[];
+
+ constructor(private uhkConfigurationService: UhkConfigurationService) {
+ }
+
+ ngOnInit() {
+ this.keymaps = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements;
+ this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements;
+ }
+
+ private toggleHide(event: Event, view: Element) {
+ let header: DOMTokenList = ( event.target).classList;
+
+ view.classList.toggle('slide-up');
+ header.toggle('fa-chevron-up');
+ header.toggle('fa-chevron-down');
+ }
+}
diff --git a/src/main-app.component.html b/src/main-app.component.html
new file mode 100644
index 00000000..64a6662a
--- /dev/null
+++ b/src/main-app.component.html
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/main-app.component.scss b/src/main-app.component.scss
index 92d41fcb..273c774f 100644
--- a/src/main-app.component.scss
+++ b/src/main-app.component.scss
@@ -1,58 +1,10 @@
:host {
- display: flex;
- flex-direction: column;
+ display: block;
+ height: 100vh;
+ width: 100%;
overflow: hidden;
-
- > div:first-child {
- display: flex;
- flex: 1;
- align-items: center;
- justify-content: center;
- }
}
-button {
- margin: 2px;
+.main-content {
+ height: 100%;
}
-
-:host > div:last-child {
- display: flex;
- flex: 5;
- position: relative;
-}
-
-:host > div:last-child > svg-keyboard-popover {
- width: 80%;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- animation-duration: 400ms;
- animation-timing-function: ease-in-out;
-}
-
-@keyframes animate-center-left {
- 0% {
- transform: translateX(-50%);
- left: 50%;
- }
- 100% {
- transform: translateX(-100%);
- left: 0%;
- }
-}
-
-@keyframes animate-center-right {
- 0% {
- transform: translateX(-50%);
- left: 50%;
- }
- 100% {
- transform: translateX(0%);
- left: 100%;
- }
-}
-
-[hidden] {
- display: none;
-}
-
diff --git a/src/main-app.component.ts b/src/main-app.component.ts
index 3b59f7ef..b172f9ec 100644
--- a/src/main-app.component.ts
+++ b/src/main-app.component.ts
@@ -1,131 +1,16 @@
-import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, ElementRef} from '@angular/core';
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
-import {Layers} from '../config-serializer/config-items/Layers';
-
-import {SvgKeyboardPopoverComponent} from './components/svg-keyboard-popover.component';
-import {UhkConfigurationService} from './services/uhk-configuration.service';
+import { SideMenuComponent } from './components/sidemenu/side-menu.component';
@Component({
moduleId: module.id,
selector: 'main-app',
- template:
- `
-
-
-
-
-
-
-
-
-
- `,
+ template: require('./main-app.component.html'),
styles: [require('./main-app.component.scss')],
- directives: [SvgKeyboardPopoverComponent],
- providers: [UhkConfigurationService]
+ directives: [SideMenuComponent, ROUTER_DIRECTIVES]
})
-export class MainAppComponent implements OnInit, AfterViewInit {
- @ViewChildren('baseButton,modButton,fnButton,mouseButton')
- buttonsQueryList: QueryList;
-
- @ViewChildren(SvgKeyboardPopoverComponent, { read: ElementRef })
- keyboardsQueryList: QueryList;
-
- private buttons: ElementRef[];
- private keyboards: ElementRef[];
- private selectedLayerIndex: number;
-
- private layers: Layers;
-
- private numAnimationInProgress: number;
-
- constructor(
- private renderer: Renderer,
- private uhkConfigurationService: UhkConfigurationService
- ) {
- this.buttons = [];
- this.keyboards = [];
- this.selectedLayerIndex = -1;
- this.numAnimationInProgress = 0;
+export class MainAppComponent {
+ constructor() {
}
-
- ngOnInit() {
- this.layers = this.uhkConfigurationService.getUhkConfiguration().keymaps.elements[0].layers;
- }
-
- ngAfterViewInit() {
- this.buttons = this.buttonsQueryList.toArray();
- this.keyboards = this.keyboardsQueryList.toArray();
- this.selectedLayerIndex = 0;
- this.renderer.setElementAttribute(this.keyboards[0].nativeElement, 'hidden', undefined);
- }
-
- /* tslint:disable:no-unused-variable */
- /* selectLayer is used in the template string */
- private selectLayer(index: number): void {
- /* tslint:enable:no-unused-variable */
- if (this.selectedLayerIndex === index || index > this.keyboards.length - 1 || this.numAnimationInProgress > 0) {
- return;
- }
-
- this.renderer.setElementClass(this.buttons[this.selectedLayerIndex].nativeElement, 'btn-primary', false);
- this.renderer.setElementClass(this.buttons[index].nativeElement, 'btn-primary', true);
-
- if (index > this.selectedLayerIndex) {
- this.renderer.setElementStyle(
- this.keyboards[this.selectedLayerIndex].nativeElement,
- 'animation-name',
- 'animate-center-left'
- );
- this.renderer.setElementStyle(
- this.keyboards[index].nativeElement,
- 'animation-name',
- 'animate-center-right'
- );
- this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
- } else {
- this.renderer.setElementStyle(
- this.keyboards[this.selectedLayerIndex].nativeElement,
- 'animation-name',
- 'animate-center-right'
- );
- this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-name', 'animate-center-left');
- this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
- }
- this.numAnimationInProgress += 2;
-
- this.renderer.setElementAttribute(this.keyboards[index].nativeElement, 'hidden', undefined);
-
- this.selectedLayerIndex = index;
- }
-
- /* tslint:disable:no-unused-variable */
- /* onKeyboardAnimationEnd is used in the template string */
- private onKeyboardAnimationEnd(event: AnimationEvent) {
- /* tslint:enable:no-unused-variable */
- let animationNameTokens: string[] = event.animationName.split('-');
- let animationFrom: string = animationNameTokens[1];
- let animationTo: string = animationNameTokens[2];
- if (( event.target).style.animationDirection === 'reverse') {
- animationFrom = animationNameTokens[2];
- animationTo = animationNameTokens[1];
- this.renderer.setElementStyle(event.target, 'animation-direction', undefined);
- }
-
- --this.numAnimationInProgress;
- this.renderer.setElementStyle(event.target, 'animation-name', undefined);
- this.renderer.setElementAttribute(event.target, 'hidden', (animationTo === 'center') ? undefined : '');
- }
-
}
diff --git a/src/main-app.routes.ts b/src/main-app.routes.ts
new file mode 100644
index 00000000..f173a23b
--- /dev/null
+++ b/src/main-app.routes.ts
@@ -0,0 +1,14 @@
+import { provideRouter, RouterConfig } from '@angular/router';
+import { keymapRoutes } from './components/keymap/keymap.routes';
+import { macroRoutes } from './components/macro/macro.routes';
+import {legacyRoutes} from './components/legacy/legacy-loader.routes';
+
+export const routes: RouterConfig = [
+ ...keymapRoutes,
+ ...macroRoutes,
+ ...legacyRoutes
+];
+
+export const APP_ROUTER_PROVIDERS = [
+ provideRouter(routes)
+];
diff --git a/webpack.config.js b/webpack.config.js
index 136cbd22..594e06c1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
+ { test: /\.html$/, loader: 'html-loader' },
{
test: /\.scss$/,
exclude: /node_modules/,