Add Angular2

2016-04-06 21:44:53 +02:00
parent 3d8b6eea1a
commit dcf5cbe4d8
9 changed files with 250 additions and 139 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 node_modules
 typings
+.vscode
+bundle
--- a/app.js
+++ b/app.js
@@ -209,6 +209,21 @@ var menuObject = {
        }
      ]
    },
+    {
+      icon: 'keyboard-o',
+      name: 'Keymaps-ng2',
+      hasDefaults: true,
+      expandable: true,
+      dataContent: '.keymap--edit-ng2',
+      children: [
+        {
+          icon: '',
+          name: 'Factory keymap',
+          abbrev: 'FTY',
+          isDefault: true
+        }
+      ]
+    },
    {
      icon: 'play',
      name: 'Macros',
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <title>Ultimate Hacking Keyboard Configurator</title>
@@ -8,6 +9,7 @@
    <link href="node_modules/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="css/app.css" rel="stylesheet">
    <link href="css/macro.css" rel="stylesheet">
+
    <script>
        // This js function is here to make sure it loads before any iframe content on the page.
      function resizeIframe(ifr) {
@@ -16,16 +18,20 @@
      }
    </script>
 </head>
+
 <body>

    <!-- Google Tag Manager -->
-    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB"
-    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    <noscript>
+        <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
+    <script>
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-    })(window,document,'script','dataLayer','GTM-PQLCXB');</script>
+    })(window,document,'script','dataLayer','GTM-PQLCXB');
+    </script>
    <!-- End Google Tag Manager -->

    <div id="sidebar-menu" class="split split-horizontal" style=""></div>
@@ -70,6 +76,10 @@
            </div>
        </div>

+        <div class="keymap--edit-ng2 main-content__inner" style="display: none;">
+            <main-app></main-app>
+        </div>
+
        <div class="macro--edit main-content__inner" style="display: none;">
            <div class="row">
                <h1 class="col-xs-12 pane-title">
@@ -87,7 +97,10 @@
                    </div>
                    <div class="list-group-item macro-settings" style="display: none;">
                        <div class="helper"></div>
-              <p>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.</p>
+                        <p>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.</p>
                        <div class="row">
                            <div class="col-sm-12 flex-button-wrapper">
                                <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
@@ -130,7 +143,10 @@
                    </div>
                    <div class="list-group-item new-macro-settings">
                        <div class="helper"></div>
-              <p>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.</p>
+                        <p>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.</p>
                        <div class="row">
                            <div class="col-sm-12 flex-button-wrapper">
                                <button class="btn btn-primary btn-sm pull-right flex-button settings-save">Save</button>
@@ -150,6 +166,7 @@
    <script src="node_modules/handlebars/dist/handlebars.js"></script>
    <script src="app.js"></script>
    <script src="macro.js"></script>
+    <script src="bundle/uhk.js"></script>

    <script type="text/x-handlebars-template" id="sidebar-menu--source">
        {{#if menu}}
@@ -157,7 +174,8 @@
            {{#each menu as |menuValue menuKey|}}
            <li class="sidebar__level-1--item">
                <div class="sidebar__level-1">
-                <i class='fa fa-{{icon}}'></i> {{name}} <!--<span class="small-text">collapse</span>-->
+                    <i class='fa fa-{{icon}}'></i> {{name}}
+                    <!--<span class="small-text">collapse</span>-->
                    {{#if expandable}}
                    <a href="#" class="btn btn-default pull-right btn-sm">
                        <i class="fa fa-plus"></i>
@@ -170,12 +188,8 @@
                    {{#each children}}
                    <li class="sidebar__level-2--item {{classes}}" data-name="{{name}}" data-content="{{menuValue.dataContent}}" data-abbrev="{{abbrev}}">
                        <div class="sidebar__level-2">
-                        {{name}}
-                        {{#if menuValue.hasDefaults}}
-                          {{#if isDefault}}
-                            <i class="fa fa-star pull-right"></i>
-                          {{/if}}
-                        {{/if}}
+                            {{name}} {{#if menuValue.hasDefaults}} {{#if isDefault}}
+                            <i class="fa fa-star pull-right"></i> {{/if}} {{/if}}
                        </div>
                    </li>
                    {{/each}}
@@ -184,8 +198,7 @@
            </li>
            {{/each}}
        </ul>
-      {{/if}}
-      {{#if menuBottom}}
+        {{/if}} {{#if menuBottom}}
        <ul class="menu--bottom">
            {{#each menuBottom}}
            <li class="sidebar__level-1--item">
@@ -196,4 +209,5 @@
        {{/if}}
    </script>
 </body>
+
 </html>
--- a/package.json
+++ b/package.json
@@ -8,13 +8,22 @@
  },
  "license": "GPL-3.0",
  "devDependencies": {
+    "angular2": "2.0.0-beta.13",
    "browser-sync": "^2.11.0",
+    "es6-shim": "^0.35.0",
    "gulp": "^3.9.0",
    "gulp-if": "^2.0.0",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.2",
+    "ts-loader": "^0.8.1",
    "tslint": "^3.6.0",
-    "yargs": "^4.2.0"
+    "typings": "^0.7.12",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1",
+    "yargs": "^4.2.0",
+    "zone.js": "^0.6.9"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
@@ -27,6 +36,9 @@
  },
  "scripts": {
    "postinstall": "typings install",
-      "lint": "tslint **/*.ts"
+    "lint": "tslint **/*.ts",
+    "typings": "typings",
+    "webpack": "webpack",
+    "webpack-dev-server": "webpack-dev-server"
  }
 }
--- a/src/boot.ts
+++ b/src/boot.ts
@@ -0,0 +1,9 @@
+///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
+import { bootstrap } from 'angular2/platform/browser';
+import { HTTP_PROVIDERS } from 'angular2/http';
+
+import { MainAppComponent } from './main-app.component';
+
+bootstrap(MainAppComponent, [
+    HTTP_PROVIDERS
+]).catch(err => console.error(err));
--- a/src/main-app.component.ts
+++ b/src/main-app.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+    selector: 'main-app',
+    template: 'It works!'
+})
+export class MainAppComponent implements OnInit {
+    constructor() { }
+
+    ngOnInit() { }
+
+}
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  },
+  "exclude": [
+    "../node_modules",
+    "../typings/main",
+    "../typings/main.d.ts"
+  ]
+}
--- a/typings.json
+++ b/typings.json
@@ -1,5 +1,6 @@
 {
  "ambientDependencies": {
-    "node": "registry:dt/node#4.0.0+20160319033040"
+    "node": "registry:dt/node#4.0.0+20160319033040",
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,29 @@
+// var webpack = require("webpack");
+
+module.exports = {
+    entry: ['reflect-metadata', 'zone.js', 'es6-shim', "./src/boot.ts"],
+    output: {
+        path: __dirname + "/bundle",
+        filename: "uhk.js"
+    },
+    devtool: 'source-map',
+    resolve: {
+        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+        alias: {
+
+        },
+        modulesDirectories: [
+            'node_modules',
+            'bower_components'
+        ]
+    },
+    module: {
+        loaders: [
+            { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ }
+        ]
+    }/*,
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({ minimize: true })
+    ]*/
+
+}