Split out new-post modal and post-menu template and code

src/app/app.module.ts

@@ -4,7 +4,9 @@ import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 
 import { MyApp } from './app.component';
 import { LoginPage } from '../pages/login/login';
-import { StreamPage, NewPostModal, PostMenu } from '../pages/stream/stream';
+import { StreamPage } from '../pages/stream/stream';
+import { PostMenu } from '../pages/stream/post-menu';
+import { NewPostModal } from '../pages/stream/new-post';
 import { ThreadPage } from '../pages/thread/thread';
 import { SettingsPage } from '../pages/settings/settings';
 

src/pages/stream/new-post.html

@@ -1,20 +1,48 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>New Post</ion-title>
+
     <ion-buttons start>
       <button ion-button (click)="dismiss()">
-        <span ion-text color="primary" showWhen="ios">Cancel</span>
+        <span ion-text color="primary">Cancel</span>
-        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-buttons end>
+
-      <button ion-button>
+    <ion-title>{{ title }}</ion-title>
-        <span ion-text color="primary" showWhen="ios">Post</span>
+
-        <ion-icon name="send" showWhen="android,windows"></ion-icon>
-    </ion-buttons>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <p>Blarp</p>
+  <ion-card>
+    <ion-card-content>
+      <ion-item>
+        <ion-textarea [(ngModel)]="ptext" autocomplete="true" spellcheck="true" clearInput="true" rows="8"></ion-textarea>
+      </ion-item>
+    </ion-card-content>
+    <ion-row justify-content-end>
+      <ion-col offset-0>
+        <button ion-button (click)="attachImage()">
+          <ion-icon name="attach"></ion-icon>
+        </button>
+      </ion-col>
+      <ion-col col-2><div text-center>{{textCount()}}</div></ion-col>
+      <ion-col col-2>
+        <button ion-button (click)="send()">
+          <ion-icon name="send"></ion-icon>
+        </button>
+      </ion-col>
+    </ion-row>
+    <progress id='p' *ngIf="showProgress"></progress>
+    <ion-list>
+      <ion-item *ngFor="let f of files">
+        <ion-thumbnail item-start>
+          <img src="{{ f.link }}">
+        </ion-thumbnail>
+        <p>{{ f.name }}</p>
+        <button ion-button color="dark" clear item-end (click)="unattach(f.id)">
+          <ion-icon name="remove-circle"></ion-icon>
+        </button>
+      </ion-item>
+    </ion-list>
+  </ion-card>
 </ion-content>

src/pages/stream/new-post.ts

@@ -0,0 +1,193 @@
+import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ViewController, NavController, NavParams, ModalController, Content, ToastController, PopoverController, Events } from 'ionic-angular';
+import { Storage } from '@ionic/storage';
+import { FileChooser } from '@ionic-native/file-chooser';
+import { FilePath } from '@ionic-native/file-path';
+import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
+
+@Component({
+  selector: 'modal-newpost',
+  templateUrl: 'new-post.html',
+})
+export class NewPostModal {
+  title: string;
+  replyid: string;
+  ptext: string = "";
+  showProgress: boolean = false;
+  files: Array<Object> = [];
+  fname: string = "";
+  fpath: string = "";
+  options: Object = {};
+  myUsername: string;
+  authToken: string;
+  longpost: Object = {};
+  raw: {type: string, value: Object}[] = [];
+
+  constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
+    private fileChooser: FileChooser, private storage: Storage, public events: Events, private filePath: FilePath,
+    private transfer: FileTransfer) {
+    console.log(JSON.stringify(this.navParams));
+    this.myUsername = navParams.data.me;
+    if (navParams.data.type === 'reply') {
+      this.replyid = navParams.data.post.id;
+      this.options = {replyTo: this.replyid};
+      if (navParams.data.post.user.username !== this.myUsername) {
+        this.ptext = "@" + navParams.data.post.user.username + " ";
+      } else {
+        this.ptext = ""
+      }
+      if (navParams.data.post.content.entities) {
+        if (navParams.data.post.content.entities.mentions.length > 0) {
+          this.ptext = this.ptext + this.parseMentions(navParams.data.post.content.entities.mentions);
+        }
+      }
+      this.title = "Reply to " + navParams.data.post.user.username
+    } else if (navParams.data.type === 'quote') {
+      this.ptext = " >> @" + navParams.data.post.user.username + ": " + navParams.data.post.content.text;
+      this.title = "New Post";
+    } else {
+      this.title = "New Post";
+    }
+    this.storage.get('token').then((val) => {
+      this.authToken = val;
+    });
+  }
+
+  dismiss() {
+   this.viewCtrl.dismiss();
+  }
+
+  send() {
+
+    if (this.ptext.length > 254) {
+      this.longpost = {
+        'title': '',
+        'body': this.ptext,
+        'tstamp': new Date().valueOf()
+      }
+      this.ptext = this.ptext.substr(0, 40) + "... - http://chimpnut.nl/u/";
+      this.ptext = this.ptext + this.navParams.data.me + "/lp/{object_id} - #longpost";
+      this.raw.push({
+        type: "nl.chimpnut.blog.post",
+        value: this.longpost
+      });
+    }
+
+    this.options['raw'] = this.raw;
+    pnut.createPost(this.ptext, this.options).then(res => {
+      console.log('-success-');
+      console.log(JSON.stringify(res));
+      this.presentToast("Status posted.");
+      this.events.publish('stream:reload', {});
+    }).catch(err => {
+      console.log('-error posting-');
+      console.log(JSON.stringify(err));
+    });
+    this.viewCtrl.dismiss();
+  }
+
+  presentToast(text) {
+    let toast = this.toastCtrl.create({
+      position: 'top',
+      message: text,
+      duration: 2000
+    });
+    toast.present();
+  }
+
+  parseMentions(mentions) {
+    let mtext = ""
+    for(var i = 0; i < mentions.length; i++) {
+      let mu = mentions[i].text;
+      if (mu !== this.myUsername) {
+        mtext += "@" + mu + " ";
+      }
+    }
+    if (mtext.length > 0) {
+      if (this.navParams.data.cc) {
+        mtext = "\n/" + mtext;
+      }
+      return mtext;
+    } else {
+      return "";
+    }
+  }
+
+  textCount() {
+    let counttext = ""
+    let count = 254 - this.ptext.length
+    if (count < 1) {
+      counttext = "longpost"
+    } else {
+      counttext = String(count)
+    }
+    return counttext
+  }
+
+  attachImage() {
+    // console.log('file chooser');
+    const fileTransfer: FileTransferObject = this.transfer.create();
+
+    this.fileChooser.open().then(uri => {
+      console.log('File URI: ' + uri);
+      this.filePath.resolveNativePath(uri).then(filePath => {
+        this.fpath = filePath;
+        this.fname = filePath.split('/').pop();
+
+        let options: FileUploadOptions = {
+          fileKey: 'content',
+          fileName: this.fname,
+          params: {
+            name: this.fname,
+            type: 'com.monkeystew.goober_m',
+            is_public: true
+          },
+          headers: {'Authorization': 'Bearer ' + this.authToken}
+        }
+
+        this.showProgress = true;
+        fileTransfer.upload(this.fpath, 'https://api.pnut.io/v0/files', options).then((response) => {
+
+          let rdata = JSON.parse(response.response);
+          let oembed = {
+            '+io.pnut.core.file': {
+              file_id: rdata.data.id,
+              file_token: rdata.data.file_token,
+              format: 'oembed'
+            }
+          }
+          // console.log(JSON.stringify(oembed));
+          this.raw.push({
+            type: "io.pnut.core.oembed",
+            value: oembed
+          });
+          this.files.push({
+            name: this.fname,
+            link: rdata.data.link,
+            id: this.raw.length - 1
+          });
+          this.showProgress = false;
+        }).catch((err) => {
+
+          this.showProgress = false;
+          let edata = JSON.parse(err.body);
+          this.presentToast(edata.meta.error_message);
+        });
+
+      }).catch(err => {
+        console.log('-error getting filepath-');
+        console.log(err);
+      });
+
+    }).catch(err => {
+      console.log(err);
+    });
+
+  }
+
+  unattach(id) {
+    console.log('removing item ' + id);
+    this.raw.splice(id, 1);
+    this.files.splice(id, 1);
+  }
+}

src/pages/stream/post-menu.ts

@@ -0,0 +1,69 @@
+import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
+import { ViewController, NavController, NavParams, ModalController, Content, ToastController, PopoverController } from 'ionic-angular';
+import { Events } from 'ionic-angular';
+
+import * as pnut from 'pnut-butter';
+
+@Component({
+  template: `
+<ion-list>
+  <button ion-item (click)="browse()">Open in Browser</button>
+  <button ion-item (click)="share()">Share</button>
+  <button ion-item *ngIf="showDelBtn" (click)="delete()">Delete</button>
+</ion-list>
+`
+})
+export class PostMenu {
+
+  showDelBtn: boolean = false;
+
+  constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
+    public events: Events) {
+    if (navParams.data.me == navParams.data.post.user.username) {
+      this.showDelBtn = true;
+    } else {
+      this.showDelBtn = false;
+    }
+  }
+
+  browse() {
+    window.open('https://posts.pnut.io/' + this.navParams.data.post.id, '_system');
+    this.close();
+  }
+
+  share() {
+    (<any>window).shareContentPlugin.share(this.navParams.data.post.content.text, function(e) {
+      console.log('sharing post:');
+      console.log(JSON.stringify(e));
+    }, function(e) {
+      console.log('sharing failed:');
+      console.log(JSON.stringify(e));
+    });
+    this.close();
+  }
+
+  delete() {
+    pnut.deletePost(this.navParams.data.post.id).then(res => {
+      console.log(res);
+      this.presentToast('Post Deleted');
+      this.events.publish('stream:reload', {});
+    }).catch( err => {
+      console.log('-error-');
+      console.log(err);
+    });
+    this.close()
+  }
+
+  presentToast(text) {
+    let toast = this.toastCtrl.create({
+      position: 'top',
+      message: text,
+      duration: 2000
+    });
+    toast.present();
+  }
+
+  close() {
+    this.viewCtrl.dismiss();
+  }
+}

src/pages/stream/stream.ts

@@ -2,11 +2,10 @@ import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { ViewController, NavController, NavParams, ModalController, Content, ToastController, PopoverController } from 'ionic-angular';
 import { ThreadPage } from '../thread/thread';
 import { Storage } from '@ionic/storage';
-import { FileChooser } from '@ionic-native/file-chooser';
-import { FilePath } from '@ionic-native/file-path';
-import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
 import { Events } from 'ionic-angular';
 import { LoginPage } from '../login/login';
+import { PostMenu } from '../stream/post-menu';
+import { NewPostModal } from '../stream/new-post';
 
 import * as pnut from 'pnut-butter';
 
@@ -326,304 +325,3 @@ export class StreamPage {
   }
 
 }
-
-@Component({
-  // templateUrl: 'new-post.html'
-  selector: 'modal-newpost',
-  template: `
-<ion-header>
-  <ion-toolbar>
-
-    <ion-buttons start>
-      <button ion-button (click)="dismiss()">
-        <span ion-text color="primary">Cancel</span>
-      </button>
-    </ion-buttons>
-
-    <ion-title>{{ title }}</ion-title>
-
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <ion-card>
-    <ion-card-content>
-      <ion-item>
-        <ion-textarea [(ngModel)]="ptext" autocomplete="true" spellcheck="true" clearInput="true" rows="8"></ion-textarea>
-      </ion-item>
-    </ion-card-content>
-    <ion-row justify-content-end>
-      <ion-col offset-0>
-        <button ion-button (click)="attachImage()">
-          <ion-icon name="attach"></ion-icon>
-        </button>
-      </ion-col>
-      <ion-col col-2><div text-center>{{textCount()}}</div></ion-col>
-      <ion-col col-2>
-        <button ion-button (click)="send()">
-          <ion-icon name="send"></ion-icon>
-        </button>
-      </ion-col>
-    </ion-row>
-    <progress id='p' *ngIf="showProgress"></progress>
-    <ion-list>
-      <ion-item *ngFor="let f of files">
-        <ion-thumbnail item-start>
-          <img src="{{ f.link }}">
-        </ion-thumbnail>
-        <p>{{ f.name }}</p>
-        <button ion-button color="dark" clear item-end (click)="unattach(f.id)">
-          <ion-icon name="remove-circle"></ion-icon>
-        </button>
-      </ion-item>
-    </ion-list>
-  </ion-card>
-</ion-content>
-`
-})
-export class NewPostModal {
-  title: string;
-  replyid: string;
-  ptext: string = "";
-  showProgress: boolean = false;
-  files: Array<Object> = [];
-  fname: string = "";
-  fpath: string = "";
-  options: Object = {};
-  myUsername: string;
-  authToken: string;
-  longpost: Object = {};
-  raw: {type: string, value: Object}[] = [];
-
-  constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
-    private fileChooser: FileChooser, private storage: Storage, public events: Events, private filePath: FilePath,
-    private transfer: FileTransfer) {
-    console.log(JSON.stringify(this.navParams));
-    this.myUsername = navParams.data.me;
-    if (navParams.data.type === 'reply') {
-      this.replyid = navParams.data.post.id;
-      this.options = {replyTo: this.replyid};
-      if (navParams.data.post.user.username !== this.myUsername) {
-        this.ptext = "@" + navParams.data.post.user.username + " ";
-      } else {
-        this.ptext = ""
-      }
-      if (navParams.data.post.content.entities) {
-        if (navParams.data.post.content.entities.mentions.length > 0) {
-          this.ptext = this.ptext + this.parseMentions(navParams.data.post.content.entities.mentions);
-        }
-      }
-      this.title = "Reply to " + navParams.data.post.user.username
-    } else if (navParams.data.type === 'quote') {
-      this.ptext = " >> @" + navParams.data.post.user.username + ": " + navParams.data.post.content.text;
-      this.title = "New Post";
-    } else {
-      this.title = "New Post";
-    }
-    this.storage.get('token').then((val) => {
-      this.authToken = val;
-    });
-  }
-
-  dismiss() {
-   this.viewCtrl.dismiss();
-  }
-
-  send() {
-
-    if (this.ptext.length > 254) {
-      this.longpost = {
-        'title': '',
-        'body': this.ptext,
-        'tstamp': new Date().valueOf()
-      }
-      this.ptext = this.ptext.substr(0, 40) + "... - http://chimpnut.nl/u/";
-      this.ptext = this.ptext + this.navParams.data.me + "/lp/{object_id} - #longpost";
-      this.raw.push({
-        type: "nl.chimpnut.blog.post",
-        value: this.longpost
-      });
-    }
-
-    this.options['raw'] = this.raw;
-    pnut.createPost(this.ptext, this.options).then(res => {
-      console.log('-success-');
-      console.log(JSON.stringify(res));
-      this.presentToast("Status posted.");
-      this.events.publish('stream:reload', {});
-    }).catch(err => {
-      console.log('-error posting-');
-      console.log(JSON.stringify(err));
-    });
-    this.viewCtrl.dismiss();
-  }
-
-  presentToast(text) {
-    let toast = this.toastCtrl.create({
-      position: 'top',
-      message: text,
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  parseMentions(mentions) {
-    let mtext = ""
-    for(var i = 0; i < mentions.length; i++) {
-      let mu = mentions[i].text;
-      if (mu !== this.myUsername) {
-        mtext += "@" + mu + " ";
-      }
-    }
-    if (mtext.length > 0) {
-      if (this.navParams.data.cc) {
-        mtext = "\n/" + mtext;
-      }
-      return mtext;
-    } else {
-      return "";
-    }
-  }
-
-  textCount() {
-    let counttext = ""
-    let count = 254 - this.ptext.length
-    if (count < 1) {
-      counttext = "longpost"
-    } else {
-      counttext = String(count)
-    }
-    return counttext
-  }
-
-  attachImage() {
-    // console.log('file chooser');
-    const fileTransfer: FileTransferObject = this.transfer.create();
-
-    this.fileChooser.open().then(uri => {
-      console.log('File URI: ' + uri);
-      this.filePath.resolveNativePath(uri).then(filePath => {
-        this.fpath = filePath;
-        this.fname = filePath.split('/').pop();
-
-        let options: FileUploadOptions = {
-          fileKey: 'content',
-          fileName: this.fname,
-          params: {
-            name: this.fname,
-            type: 'com.monkeystew.goober_m',
-            is_public: true
-          },
-          headers: {'Authorization': 'Bearer ' + this.authToken}
-        }
-
-        this.showProgress = true;
-        fileTransfer.upload(this.fpath, 'https://api.pnut.io/v0/files', options).then((response) => {
-
-          let rdata = JSON.parse(response.response);
-          let oembed = {
-            '+io.pnut.core.file': {
-              file_id: rdata.data.id,
-              file_token: rdata.data.file_token,
-              format: 'oembed'
-            }
-          }
-          // console.log(JSON.stringify(oembed));
-          this.raw.push({
-            type: "io.pnut.core.oembed",
-            value: oembed
-          });
-          this.files.push({
-            name: this.fname,
-            link: rdata.data.link,
-            id: this.raw.length - 1
-          });
-          this.showProgress = false;
-        }).catch((err) => {
-
-          this.showProgress = false;
-          let edata = JSON.parse(err.body);
-          this.presentToast(edata.meta.error_message);
-        });
-
-      }).catch(err => {
-        console.log('-error getting filepath-');
-        console.log(err);
-      });
-
-    }).catch(err => {
-      console.log(err);
-    });
-
-  }
-
-  unattach(id) {
-    console.log('removing item ' + id);
-    this.raw.splice(id, 1);
-    this.files.splice(id, 1);
-  }
-}
-
-@Component({
-  template: `
-<ion-list>
-  <button ion-item (click)="browse()">Open in Browser</button>
-  <button ion-item (click)="share()">Share</button>
-  <button ion-item *ngIf="showDelBtn" (click)="delete()">Delete</button>
-</ion-list>
-`
-})
-export class PostMenu {
-
-  showDelBtn: boolean = false;
-
-  constructor(public navParams: NavParams, public viewCtrl: ViewController, public toastCtrl: ToastController,
-    public events: Events) {
-    if (navParams.data.me == navParams.data.post.user.username) {
-      this.showDelBtn = true;
-    } else {
-      this.showDelBtn = false;
-    }
-  }
-
-  browse() {
-    window.open('https://posts.pnut.io/' + this.navParams.data.post.id, '_system');
-    this.close();
-  }
-
-  share() {
-    (<any>window).shareContentPlugin.share(this.navParams.data.post.content.text, function(e) {
-      console.log('sharing post:');
-      console.log(JSON.stringify(e));
-    }, function(e) {
-      console.log('sharing failed:');
-      console.log(JSON.stringify(e));
-    });
-    this.close();
-  }
-
-  delete() {
-    pnut.deletePost(this.navParams.data.post.id).then(res => {
-      console.log(res);
-      this.presentToast('Post Deleted');
-      this.events.publish('stream:reload', {});
-    }).catch( err => {
-      console.log('-error-');
-      console.log(err);
-    });
-    this.close()
-  }
-
-  presentToast(text) {
-    let toast = this.toastCtrl.create({
-      position: 'top',
-      message: text,
-      duration: 2000
-    });
-    toast.present();
-  }
-
-  close() {
-    this.viewCtrl.dismiss();
-  }
-}

src/pages/thread/thread.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { NavController, NavParams, ModalController, ToastController, PopoverController } from 'ionic-angular';
-import { NewPostModal, PostMenu } from '../stream/stream';
+import { NewPostModal } from '../stream/stream';
+import { PostMenu } from '../stream/post-menu';
 
 import * as pnut from 'pnut-butter';