frontend: タイトルをコードから生成

3 files changed, 54 insertions, 16 deletions

diff --git a/frontend/app/app.component.ts b/frontend/app/app.component.ts
index 1f39981..a88633a 100644
--- a/frontend/app/app.component.ts
+++ b/frontend/app/app.component.ts
@@ -16,11 +16,11 @@ import {EditorComponent} from "./editor.component";
   template: `
     <nav class="navbar">
       <div class="brand">
-        <a class="navbar-brand" [routerLink]="['Home']">Poe</a>
+        <a class="navbar-brand" href="#">snippet: {{editing.summarize()}}</a>
       </div>
-      <!--<ul>
-        <li><a href="/about">about</a></li>
-      </ul>-->
+      <ul>
+        <li><a href="/">about poe</a></li>
+      </ul>
     </nav>
     <div class="container">
       <div class="panel panel-default">
@@ -55,13 +55,11 @@ export class AppComponent {
     private _service: SnippetService,
     private _router: Router,
     _edit_service: EditingDataService,
-    _title: Title) {
+    private _title: Title) {
     this.editing = _edit_service.get();
-    _router.subscribe(path => {
-      let title = "poe: online ruby environment";
-      if (path !== "")
-        title = "poe: " + path;
-      _title.setTitle(title);
+    this.editing.onChange(e => {
+      const summary = this.editing.summarize();
+      this._title.setTitle("poe: " + summary);
     });
   }
 
diff --git a/frontend/app/editing-data.service.ts b/frontend/app/editing-data.service.ts
index 14f4fda..d58478a 100644
--- a/frontend/app/editing-data.service.ts
+++ b/frontend/app/editing-data.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from "angular2/core";
+import {Injectable, EventEmitter} from "angular2/core";
 import {Http, Response} from "angular2/http";
 import {Headers, RequestOptions, URLSearchParams} from "angular2/http";
 import {Observable}     from "rxjs/Observable";
@@ -7,15 +7,54 @@ import {Snippet, SnippetService} from "./snippet.service";
 
 export class EditingData {
   public static availableLangs = ["ruby", "php"];
+  private change = new EventEmitter(true);
 
-  constructor(
-    public code: string,
-    public lang: string) { }
+  private _code: string = "";
+  get code() { return this._code; }
+  set code(val: string) {
+    this._code = val;
+    this.change.emit(this);
+  }
+
+  private _lang: string = EditingData.availableLangs[0];
+  get lang() { return this._lang; }
+  set lang(val: string) {
+    this._lang = val;
+    this.change.emit(this);
+  }
+
+  constructor() {
+  }
+
+  summarize() {
+    let head = this.code.substring(0, 40)
+
+    switch (this.lang) {
+      case "ruby":
+        head = head.replace(/^#+ */m, "");
+        let firstLine = head.substr(0, head.indexOf("\n")).trim();
+        if (firstLine.length >= 3)
+          head = firstLine;
+        else
+          head = head.replace("\n", "  ").replace(/\s{3,}/, "  ");
+        break;
+    }
+
+    head = head.trim();
+    if (head.length >= 30)
+      return head.substring(0, 29) + "…";
+    else
+      return head;
+  }
+
+  onChange(cb) {
+    this.change.subscribe(cb);
+  }
 }
 
 @Injectable()
 export class EditingDataService {
-  private data: EditingData = new EditingData("", "ruby");
+  private data: EditingData = new EditingData();
 
   get() {
     return this.data;
diff --git a/frontend/app/main.ts b/frontend/app/main.ts
index 737e308..74d5f7e 100644
--- a/frontend/app/main.ts
+++ b/frontend/app/main.ts
@@ -8,7 +8,8 @@ import {HTTP_PROVIDERS} from "angular2/http";
 import {AppComponent} from "./app.component"
 
 declare var ENV: any;
-if (typeof ENV !== "undefined" && ENV === "production") enableProdMode();
+if (typeof ENV !== "undefined" && ENV === "production")
+  enableProdMode();
 
 bootstrap(AppComponent, [
   ROUTER_PROVIDERS,