Add Document Service

This new service provides two features:
- Keep track of the bootstrap size (e.g. xs, sm, md, lg, or xl)
- Set the page title

Also updated the demo to use these new features.

example/lib/about.dart

@@ -9,4 +9,10 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
     templateUrl: 'about.html',
     directives: const [ROUTER_DIRECTIVES, MA_DIRECTIVES]
 )
-class AboutComponent {}
+class AboutComponent {
+    DocumentService _doc;
+
+    AboutComponent(this._doc) {
+        this._doc.title = 'About';
+    }
+}

example/lib/body.dart

@@ -37,10 +37,9 @@ import 'typography.dart';
     templateUrl: 'body.html',
     directives: const [CORE_DIRECTIVES, FaIcon, formDirectives, MA_DIRECTIVES,
         ROUTER_DIRECTIVES],
-    providers: const [ROUTER_PROVIDERS, MA_PROVIDERS, LayoutService,
-        TagsService,
-        const Provider(LocationStrategy, useClass: HashLocationStrategy),
-    ]
+    providers: const [ROUTER_PROVIDERS, MA_PROVIDERS, DocumentService,
+        LayoutService, TagsService,
+        const Provider(LocationStrategy, useClass: HashLocationStrategy)]
 )
 @RouteConfig(const [
     const Route(path: '/about', name: 'About', component: AboutComponent, useAsDefault: true),

example/lib/body.html

@@ -20,7 +20,7 @@
   </ma-top-nav>
   <ma-side-nav *ngIf='layoutService.hasSideNav' [fixed]='layoutService.sideNavIsFixed'>
     <ma-side-nav-header>
-      <ma-logo></ma-logo> Ng2 Mod Admin
+      <ma-logo></ma-logo> Modular Admin
     </ma-side-nav-header>
     <ma-side-nav-item [route]='["About"]'>
       <fa name='home' [fw]='true' size='lg'></fa> About

example/lib/buttons.dart

@@ -17,6 +17,12 @@ class ButtonsComponent {
     bool disabledDemo = false;
     bool busyDemo = false;
 
+    DocumentService _doc;
+
+    ButtonsComponent(this._doc) {
+        this._doc.title = 'Buttons';
+    }
+
     /// A sample action for responding to a button click.
     void showClickAlert(ButtonClick click) {
         String description = (click.event.currentTarget as Element).text.trim();

example/lib/cards.dart

@@ -7,4 +7,10 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
     templateUrl: 'cards.html',
     directives: const [MA_DIRECTIVES]
 )
-class CardsComponent {}
+class CardsComponent {
+    DocumentService _doc;
+
+    CardsComponent(this._doc) {
+        this._doc.title = 'Cards';
+    }
+}

example/lib/footer.dart

@@ -19,6 +19,10 @@ class FooterComponent {
     /// A service that contains layout state.
     LayoutService layoutService;
 
+    DocumentService _doc;
+
     /// Constructor.
-    FooterComponent(this.layoutService);
+    FooterComponent(this._doc, this.layoutService) {
+        this._doc.title = 'Footer';
+    }
 }

example/lib/forms.dart

@@ -21,7 +21,10 @@ import 'package:ng_modular_admin/validators.dart' as MaValidators;
 class FormsComponent {
     ControlGroup demoForm;
 
-    FormsComponent() {
+    DocumentService _doc;
+
+    FormsComponent(this._doc) {
+        this._doc.title = 'Forms';
         final builder = new FormBuilder();
         this.demoForm = builder.group({
             'name': ['', MaValidators.required()],

example/lib/layout.dart

@@ -1,14 +1,21 @@
 import 'package:angular/angular.dart';
+import 'package:angular_forms/angular_forms.dart';
 import 'package:angular_router/angular_router.dart';
 import 'package:ng_modular_admin/ng_modular_admin.dart';
 
 /// Layout component.
 @Component(
     selector: 'layout',
     templateUrl: 'layout.html',
-    directives: const [MA_DIRECTIVES, RouterLink]
+    directives: const [formDirectives, MA_DIRECTIVES, RouterLink]
 )
-class LayoutComponent {}
+class LayoutComponent {
+    DocumentService documentService;
+
+    LayoutComponent(this.documentService) {
+        this.documentService.title = 'Layout';
+    }
+}
 
 /// Maintains state related to application layout.
 @Injectable()

example/lib/layout.html

@@ -1,3 +1,4 @@
+<ma-size-spy></ma-size-spy>
 <ma-card>
   <h2>Application Shell</h2>
   <p class='lead'>
@@ -96,3 +97,66 @@ <h2>Columns</h2>
     </ma-card>
   </div>
 </div>
+<div class='row'>
+  <div class='col-lg'>
+    <ma-card>
+      <h2>Size Spy</h2>
+      <p class='lead'>
+        Programmatic Bootstrap Sizes
+      </p>
+      <p>
+        Bootstrap includes CSS classes to control page contents based on the
+        viewport size, for example <code>.hidden-sm-down</code> will hide an
+        element when the viewport is <code>xs</code> or <code>sm</code>.
+      </p>
+      <p>
+        The size spy
+        allows you to detect the Bootstrap viewport size programmatically.
+        First, insert an <code>&lt;ma-size-spy&gt;</code> component, then
+        observe the Bootstrap size through the <code>DocumentService</code>.
+        Try resizing the window and observe how the Bootstrap size changes.
+      </p>
+      <p>
+        The current Bootstrap size is: <strong>{{documentService.bootstrapSize}}</strong>.
+      </p>
+      <pre class='code'>&#x3C;p&#x3E;
+  The current Bootstrap size is:
+  &#x3C;strong&#x3E;
+    {{"{"+"{documentService.boostrapSize}"+"}"}}
+  &#x3C;/strong&#x3E;.
+&#x3C;/p&#x3E;</pre>
+    <p>
+      You can also use <code>document.onBootstrapSize.listen(…)</code> to
+      respond to changes in the Bootstrap size.
+    </p>
+    </ma-card>
+  </div>
+  <div class='col-lg'>
+    <ma-card>
+      <h2>Title</h2>
+      <p class='lead'>
+        Customize the document title.
+      </p>
+      <p>
+        The <code>DocumentService</code> allows you to customize the page
+        title, which is composed of a <code>siteName</code> that should be
+        set once at the application level,
+        plus a dynamic <code>title</code> that can be set by each component.
+      </p>
+      <p>
+        Try changing the document title now:
+      </p>
+      <p>
+        <ma-input-group>
+          <label style='width: 7em'>Document Title</label>
+          <input type='text' [(ngModel)]='documentService.title'>
+        </ma-input-group>
+      </p>
+      <pre class='code'>&#x3C;ma-input-group&#x3E;
+  &#x3C;label style=&#x27;width: 7em&#x27;&#x3E;Document Title&#x3C;/label&#x3E;
+  &#x3C;input type=&#x27;text&#x27;
+    (ngModel)]=&#x27;documentService.title&#x27;&#x3E;
+&#x3C;/ma-input-group&#x3E;</pre>
+    </ma-card>
+  </div>
+</div>

example/lib/list_group.dart

@@ -7,4 +7,10 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
     templateUrl: 'list_group.html',
     directives: const [MA_DIRECTIVES]
 )
-class ListGroupComponent {}
+class ListGroupComponent {
+    DocumentService _doc;
+
+    ListGroupComponent(this._doc) {
+        this._doc.title = 'List Group';
+    }
+}

example/lib/login.dart

@@ -56,8 +56,11 @@ class LoginComponent {
 
     ControlGroup loginForm;
 
+    DocumentService _doc;
+
     /// Constructor.
-    LoginComponent(this.router) {
+    LoginComponent(this._doc, this.router) {
+        this._doc.title = 'Login';
         final builder = new FormBuilder();
         this.loginForm = builder.group({
             'username': ['', MaValidators.required()],

example/lib/overlay.dart

@@ -20,4 +20,10 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
 class OverlayComponent {
     bool overlayIsVisible = false;
     bool overlayIsOpaque = false;
+
+    DocumentService _doc;
+
+    OverlayComponent(this._doc) {
+        this._doc.title = 'Overlay';
+    }
 }

example/lib/pagers.dart

@@ -15,9 +15,11 @@ class PagersComponent {
     int maxPages = 5;
     List<String> items;
 
+    DocumentService _doc;
     Page _lastPage;
 
-    PagersComponent() {
+    PagersComponent(this._doc) {
+        this._doc.title = 'Pagers';
         this.updateItems();
     }
 

example/lib/side-nav.dart

@@ -19,6 +19,10 @@ class SideNavComponent {
     /// A service that contains layout state.
     LayoutService layoutService;
 
+    DocumentService _doc;
+
     /// Constructor.
-    SideNavComponent(this.layoutService);
+    SideNavComponent(this._doc, this.layoutService) {
+        this._doc.title = 'Side Navigation';
+    }
 }

example/lib/sign-up.dart

@@ -34,8 +34,11 @@ class SignUpComponent {
     /// Form controls
     ControlGroup signupForm;
 
+    DocumentService _doc;
+
     /// Constructor.
-    SignUpComponent(this.router) {
+    SignUpComponent(this._doc, this.router) {
+        this._doc.title = 'Sign Up';
         final builder = new FormBuilder();
         this.signupForm = builder.group({
             'username': ['', MaValidators.required()],

example/lib/tables.dart

@@ -7,4 +7,10 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
     templateUrl: 'tables.html',
     directives: const [MA_DIRECTIVES]
 )
-class TablesComponent {}
+class TablesComponent {
+    DocumentService _doc;
+
+    TablesComponent(this._doc) {
+        this._doc.title = 'Tables';
+    }
+}

example/lib/tags.dart

@@ -14,8 +14,12 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
 class TagsComponent {
     TagsService tagsService;
 
+    DocumentService _doc;
+
     /// Constructor.
-    TagsComponent(this.tagsService);
+    TagsComponent(this._doc, this.tagsService) {
+        this._doc.title = 'Tags';
+    }
 }
 
 /// Service for keeping track of tags (a.k.a. badges).

example/lib/themes.dart

@@ -44,13 +44,16 @@ class ThemesComponent implements AfterContentInit {
     String cardPadding = '';
     String contentPadding = '';
     String gutterWidth = '';
+    ElementRef host;
     Timer updateTimer;
     List<String> themes = ['blue', 'red', 'orange', 'purple', 'seagreen'];
 
-    ElementRef host;
+    DocumentService _doc;
 
     /// Constructor.
-    ThemesComponent(this.host);
+    ThemesComponent(this._doc, this.host) {
+        this._doc.title = 'Themes';
+    }
 
     /// Apply a theme to the <ma-app> element.
     void applyTheme(String theme) {

example/lib/toast.dart

@@ -12,8 +12,12 @@ class ToastComponent {
     /// Toast (a.k.a. pop-up notification) service.
     ToastService toastService;
 
+    DocumentService _doc;
+
     /// Constructor.
-    ToastComponent(this.toastService);
+    ToastComponent(this._doc, this.toastService) {
+        this._doc.title = 'Toast';
+    }
 
     /// Create a toast with the specified theme.
     void createToast(String type) {

example/lib/top-nav.dart

@@ -19,6 +19,10 @@ class TopNavComponent {
     /// A service that contains application state.
     LayoutService layoutService;
 
+    DocumentService _doc;
+
     /// Constructor.
-    TopNavComponent(this.layoutService);
+    TopNavComponent(this._doc, this.layoutService) {
+        this._doc.title = 'Top Navigation';
+    }
 }

example/lib/typography.dart

@@ -8,4 +8,10 @@ import 'package:ng_modular_admin/ng_modular_admin.dart';
     templateUrl: 'typography.html',
     directives: const [MA_DIRECTIVES, FaIcon]
 )
-class TypographyComponent {}
+class TypographyComponent {
+    DocumentService _doc;
+
+    TypographyComponent(this._doc) {
+        this._doc.title = 'Typography';
+    }
+}

example/web/index.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset='utf-8'>
-    <title>Modular Admin for Angular Dart</title>
+    <title>Modular Admin</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <link rel='stylesheet' type='text/css'
           href='packages/ng_modular_admin/css/modular-admin.css'>

lib/ng_modular_admin.dart

@@ -15,9 +15,11 @@ export 'src/components/side_nav_header.dart';
 export 'src/components/side_nav_item.dart';
 export 'src/components/side_nav_menu.dart';
 export 'src/components/side_nav_menu_header.dart';
+export 'src/components/size_spy.dart';
 export 'src/components/tag.dart';
 export 'src/components/toast_outlet.dart';
 export 'src/components/top_nav.dart';
 export 'src/framework.dart';
+export 'src/services/document.dart';
 export 'src/services/side_nav.dart';
 export 'src/services/toast.dart';