diff --git a/bower.json b/bower.json new file mode 100644 index 00000000..71a72bd0 --- /dev/null +++ b/bower.json @@ -0,0 +1,24 @@ +{ + "name": "angular2-webpack-starter", + "description": "Angular 2 admin template.", + "main": "", + "authors": [ + "Patrick Stapleton " + ], + "license": "MIT", + "moduleType": [ + "es6" + ], + "homepage": "", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "Ionicons": "ionicons#~2.0.1" + } +} diff --git a/config/webpack.common.js b/config/webpack.common.js index 2d4641ad..288efbb2 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -48,13 +48,13 @@ module.exports = { * * See: http://webpack.github.io/docs/configuration.html#resolve-extensions */ - extensions: ['', '.ts', '.js'], + extensions: ['', '.ts', '.js', '.css', '.scss'], // Make sure root is src root: helpers.root('src'), // remove other default values - modulesDirectories: ['node_modules'] + modulesDirectories: ['node_modules', 'bower_components'] }, @@ -128,15 +128,15 @@ module.exports = { { test: /\.scss$/, - loaders: ['raw-loader','sass-loader'] + loaders: ['raw-loader', 'sass-loader'] }, { - test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" + test: /\.woff(2)?(\?v=.+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { - test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" + test: /\.(ttf|eot|svg)(\?v=.+)?$/, loader: "file-loader" }, { diff --git a/package.json b/package.json index 9552b704..a0cc235d 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/", "start": "npm run server:dev", "start:hmr": "npm run server:dev:hmr", - "postinstall": "npm run typings -- install", + "postinstall": "npm run typings -- install && bower install", "preversion": "npm run build", "version": "npm run build", "postversion": "git push && git push --tags" diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2d524944..a15d8d59 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,10 +6,13 @@ import {RouteConfig, Router} from 'angular2/router'; import {Pages} from './pages'; -/* - * App Component - * Top Level Component - */ +// TODO: is it really the best place to globally require that dependency? +require("!style!css!sass!./theme/sass/_ionicons.scss"); + + /* + * App Component + * Top Level Component + */ @Component({ selector: 'app', pipes: [ ], @@ -31,7 +34,7 @@ import {Pages} from './pages'; }) @RouteConfig([ { - path: '/pages/...', + path: '/...', name: 'Pages', component: Pages, useAsDefault: true diff --git a/src/app/theme/sass/_ionicons.scss b/src/app/theme/sass/_ionicons.scss new file mode 100644 index 00000000..213ad922 --- /dev/null +++ b/src/app/theme/sass/_ionicons.scss @@ -0,0 +1,3 @@ +$ionicons-font-path: "~Ionicons/fonts"; + +@import "~Ionicons/scss/ionicons"; diff --git a/src/app/theme/sidebar/sidebar.component.ts b/src/app/theme/sidebar/sidebar.component.ts index 274c2453..3cdf23b2 100644 --- a/src/app/theme/sidebar/sidebar.component.ts +++ b/src/app/theme/sidebar/sidebar.component.ts @@ -1,6 +1,7 @@ import {Component, ElementRef} from 'angular2/core'; import {SidebarService} from './sidebar.service'; +import {Location} from 'angular2/router'; @Component({ selector: 'sidebar', @@ -11,12 +12,70 @@ import {SidebarService} from './sidebar.service'; pipes: [] }) export class Sidebar { - menuItems = []; - menuHeight = 0; + elementRef: ElementRef; + location: Location; - constructor(el: ElementRef, private _sidebarService: SidebarService) { + menuItems: Array; + menuHeight: number; + isMenuCollapsed: boolean; + + constructor(el: ElementRef, location: Location, private _sidebarService: SidebarService) { + this.elementRef = el; + this.location = location; this.menuItems = this._sidebarService.getMenuItems(); - // this.menuHeight = el.nativeElement.childNodes[0].clientHeight - 84; - + + this.selectMenuItem(); + } + + // TODO: is it really the best event for this kind of things? + ngAfterViewInit() { + // TODO: get rid of magic 84 constant + this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84; + } + + menuExpand () { + this.isMenuCollapsed = false; + } + + menuCollapse () { + this.isMenuCollapsed = true; + } + + toggleSubMenu ($event, item) { + var submenu = $($event.currentTarget).next(); + + if (this.isMenuCollapsed) { + this.menuExpand(); + if (!item.expanded) { + setTimeout(function () { + item.expanded = !item.expanded; + + // TODO: incomplete + // submenu.slideToggle(); + }, 0); + } + } else { + item.expanded = !item.expanded; + + // TODO: incomplete + // submenu.slideToggle(); + } + return false; + } + + private selectMenuItem() { + let currentPath = this.location.path(); + let isCurrent = (root) => (('#' + currentPath).indexOf(root) == 0); + + this.menuItems.forEach(function (menu) { + menu.selected = isCurrent(menu.root); + menu.expanded = menu.expanded || menu.selected; + console.log(menu); + if (menu.subMenu) { + menu.subMenu.forEach(function (subMenu) { + subMenu.selected = isCurrent(subMenu.root) && !subMenu.disabled; + }); + } + }); } } diff --git a/src/app/theme/sidebar/sidebar.html b/src/app/theme/sidebar/sidebar.html index c3aa60df..55b0bec4 100644 --- a/src/app/theme/sidebar/sidebar.html +++ b/src/app/theme/sidebar/sidebar.html @@ -1,11 +1,17 @@