Merge 7055d3a into 59591a3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bolingbrook-church",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {

src/app/components/molecules/index.ts

@@ -1,5 +1,7 @@
-import { SermonCardComponent } from './sermon-card';
+import { SermonCardComponent }  from './sermon-card';
+import { VerseComponent }       from './verse';
 
 export const MOLECULES = [
-  SermonCardComponent
+  SermonCardComponent,
+  VerseComponent
 ];

src/app/components/molecules/verse.html

@@ -0,0 +1,13 @@
+<a class="verse" md-button [href]="url" (click)="show()">
+  {{ book }} {{ chapter }} : {{ verses }}
+</a>
+
+<div class="shadow" *ngIf="shown" (click)="hide()">
+  <div class="content">
+    <button md-mini-fab (click)="hide()">
+      <md-icon>close</md-icon>
+    </button>
+    <iframe [src]="safeResourceUrl" [style.height]="frameHeight" frameborder="0"></iframe>
+    <a md-button class="outlink" [href]="url" (click)="launch()">See on YouVersion (bible.com)</a>
+  </div>
+</div>

src/app/components/molecules/verse.scss

@@ -0,0 +1,44 @@
+a.verse {
+  width: 200px;
+  text-align: left;
+}
+
+div.shadow {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 1000;
+  background-color: rgba(black, 0.6);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  div.content {
+    background-color: white;
+    position: relative;
+    margin: 10px;
+    padding: 10px;
+    border-radius: 8px;
+    width: 450px;
+
+    button {
+      position: absolute;
+      background-color: white;
+      color: black;
+      right: 10px;
+      top: 10px;
+    }
+
+    iframe {
+      width: 100%;
+    }
+
+    a.outlink {
+      float: right;
+      font-style: italic;
+    }
+  }
+}

src/app/components/molecules/verse.spec.ts

@@ -0,0 +1,100 @@
+import { expect, sinon, async, MockBuilder }      from 'testing';
+import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
+import { VerseComponent }                         from './verse';
+import { Analytics, Observable }                  from 'app/services';
+
+describe('VerseComponent', () => {
+  describe('url', () => {
+    it('should construct correctly', () => {
+      const verse = new VerseComponent(undefined, undefined);
+      verse.book = 'John';
+      verse.chapter = '3';
+      verse.verses = '16';
+
+      expect(verse.url).to
+      .equal('https://www.bible.com/bible/111/John.3.16.NIV');
+    });
+
+    it('should be able to create a safe resource url', () => {
+      const safe = {} as SafeResourceUrl;
+      const sanitizer = MockBuilder.of<DomSanitizer>()
+                          .withStub('bypassSecurityTrustResourceUrl', safe)
+                          .build();
+
+      const verse = new VerseComponent(sanitizer, undefined);
+      expect(verse.safeResourceUrl).to.equal(safe);
+    });
+  });
+
+  describe('frameHeight', () => {
+    it('should be 600px on large devices', () => {
+      const verse = new VerseComponent(undefined, undefined);
+      verse._window = { innerHeight: 1000 } as Window;
+      expect(verse.frameHeight).to.equal('600px');
+    });
+
+    it('should be 80px less than window height on smaller devices', () => {
+      const verse = new VerseComponent(undefined, undefined);
+      verse._window = { innerHeight: 500 } as Window;
+      expect(verse.frameHeight).to.equal('420px');
+    });
+
+    it('should be 80px less than window height on smaller devices', () => {
+      const verse = new VerseComponent(undefined, undefined);
+      verse._window = { innerHeight: 679 } as Window;
+      expect(verse.frameHeight).to.equal('599px');
+    });
+  });
+
+  describe('launch', () => {
+    it('should launch a new tab and log analytics', () => {
+      const analytics = MockBuilder.of(Analytics)
+                          .withSpy('event')
+                          .build();
+
+      const _window = MockBuilder.of(Window)
+                        .withSpy('open')
+                        .build();
+
+      const verse = new VerseComponent(undefined, analytics);
+      verse.book = 'John';
+      verse.chapter = '3';
+      verse.verses = '16';
+      verse._window = _window;
+
+      expect(verse.launch()).to.be.false;
+      expect(analytics.event).to.have.been.calledOnce;
+      expect(_window.open).to.have.been.calledOnce
+        .and.calledWith('https://www.bible.com/bible/111/John.3.16.NIV', '_blank');
+    });
+  });
+
+  describe('show', () => {
+    it('should show and log analytics', () => {
+      const analytics = MockBuilder.of(Analytics)
+                          .withSpy('event')
+                          .build();
+
+      const verse = new VerseComponent(undefined, analytics);
+      expect(verse.shown).to.be.false;
+
+      expect(verse.show()).to.be.false;
+
+      expect(analytics.event).to.have.been.calledOnce;
+      expect(verse.shown).to.be.true;
+    });
+  });
+
+  describe('hide', () => {
+    it('should hide and nothing else', () => {
+      const verse = new VerseComponent(undefined, undefined);
+      expect(verse.shown).to.be.false;
+      verse.shown = true;
+
+      verse.hide();
+
+      expect(verse.shown).to.be.false;
+    });
+  });
+
+});

src/app/components/molecules/verse.ts

@@ -0,0 +1,60 @@
+import { Component, Input }                       from '@angular/core';
+import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
+import { Analytics }                              from 'app/services';
+
+@Component({
+  selector: 'bc-verse',
+  templateUrl: './verse.html',
+  styleUrls: [ './verse.scss' ]
+
+})
+export class VerseComponent {
+
+  @Input()
+  book: string;
+
+  @Input()
+  chapter: string;
+
+  @Input()
+  verses: string;
+
+  shown: boolean = false;
+
+  _window = window;
+
+  constructor(
+    private sanatizer: DomSanitizer,
+    private analytics: Analytics
+  ) {}
+
+  get url(): string {
+    return `https://www.bible.com/bible/111/${this.book}.${this.chapter}.${this.verses}.NIV`;
+  }
+
+  get safeResourceUrl(): SafeResourceUrl {
+    return this.sanatizer.bypassSecurityTrustResourceUrl(this.url);
+  }
+
+  get frameHeight(): string {
+    const height = Math.min(600, this._window.innerHeight - 80);
+    return `${height}px`;
+  }
+
+  launch(): boolean {
+    this.analytics.event('nav', 'verse', `${this.book} ${this.chapter}:${this.verses}`);
+    this._window.open(this.url, '_blank');
+    return false;
+  }
+
+  show(): boolean {
+    this.analytics.event('overlay', 'verse', `${this.book} ${this.chapter}:${this.verses}`);
+    this.shown = true;
+    return false;
+  }
+
+  hide() {
+    this.shown = false;
+  }
+
+}

src/app/components/pages/beliefs.html

@@ -0,0 +1,73 @@
+<bc-header image="/assets/giving/giving2-e1443270113333.jpg" shade="0.4" relativeHeight="0.4">
+  <h1>WHAT WE BELIEVE</h1>
+</bc-header>
+<main>
+  <section class="white">
+    <div class="content">
+      <p>
+        We believe that God Loves without restraint; More than that, He is Love. He is all power and splendor and a mystery beyond
+        words can describe. He is Immortal, Everliving, and all-loving, God is a relationship of Father, Son and Holy Spirit.
+        The only being worthy of our worship, God is our Creator, Redeemer and Friend. His ways are far beyond us, but He
+        still reaches out to us. God is infinite yet intimate, three yet one, all-knowing yet all-forgiving. We will spend
+        eternity cherishing an ever-deepening relationship with God the Father, Son and Holy Spirit.
+      </p>
+
+      <ul>
+        <li><bc-verse book="Genesis"          chapter="1"   verses="26"></bc-verse></li>
+        <li><bc-verse book="Deuteronomy"      chapter="6"   verses="4"></bc-verse></li>
+        <li><bc-verse book="Isaiah"           chapter="6"   verses="8"></bc-verse></li>
+        <li><bc-verse book="Matthew"          chapter="28"  verses="19"></bc-verse></li>
+        <li><bc-verse book="John"             chapter="3"   verses="16"></bc-verse></li>
+        <li><bc-verse book="2 Corinthians"    chapter="1"   verses="21-22"></bc-verse></li>
+        <li><bc-verse book="2 Corinthians"    chapter="13"  verses="14"></bc-verse></li>
+        <li><bc-verse book="Ephesians"        chapter="4"   verses="4-6"></bc-verse></li>
+        <li><bc-verse book="1 Peter"          chapter="1"   verses="2"></bc-verse></li>
+      </ul>
+
+      <p>
+        We believe that the Bible is the story of God striving to reconnect with His children, and is a major method God uses to
+        reach us. It is the supreme source of truth for all humanity. It is the infallible revelation of God’s will towards
+        us and for us. It is accurate, it has authority, and remains applicable to our lives today. Written by a mosaic of
+        authors, styles and perspectives, the Bible reveals a God who is ever-creative, ever-patient and ever-seeking to
+        restore our relationship with Him. Though written by ordinary people, through the Spirit it pierces our hearts, opens
+        our eyes and convicts us to live for Him.
+      </p>
+
+      <ul>
+        <li><bc-verse book="Psalms"           chapter="119" verses="105"></bc-verse></li>
+        <li><bc-verse book="Proverbs"         chapter="30"  verses="5-6"></bc-verse></li>
+        <li><bc-verse book="Isaiah"           chapter="8"   verses="20"></bc-verse></li>
+        <li><bc-verse book="John"             chapter="17"  verses="17"></bc-verse></li>
+        <li><bc-verse book="1 Thessalonians"  chapter="2"   verses="13"></bc-verse></li>
+        <li><bc-verse book="2 Timothy"        chapter="3"   verses="16-17"></bc-verse></li>
+        <li><bc-verse book="Hebrews"          chapter="4"   verses="12"></bc-verse></li>
+        <li><bc-verse book="2 Peter"          chapter="1"   verses="20-21"></bc-verse></li>
+      </ul>
+
+      <p>
+        We believe that Jesus is the Eternal Son of God. He is co-equal to God the Father and the Holy Spirit. Through Jesus, God
+        the Father reached out to us most dramatically. It is through Him all things were created, and only in Him is God’s
+        character ultimately revealed. Jesus chose not just to visit us, but become one of us. Born human so we can be reborn
+        in the Spirit, Jesus showed us God’s love and character—and how far God was willing to go to save us from self-destruction.
+        What we could not do for ourselves, He did for us, paying the price for our sins, dying in our place so we can live
+        forever. He conquered death through resurrection, and promised to return to take us home.
+      </p>
+
+      <ul>
+        <li><bc-verse book="Isaiah"           chapter="53"  verses="4-6"></bc-verse></li>
+        <li><bc-verse book="Daniel"           chapter="9"   verses="25-27"></bc-verse></li>
+        <li><bc-verse book="Luke"             chapter="1"   verses="35"></bc-verse></li>
+        <li><bc-verse book="John"             chapter="1"   verses="1-3"></bc-verse></li>
+        <li><bc-verse book="John"             chapter="5"   verses="22"></bc-verse></li>
+        <li><bc-verse book="John"             chapter="10"  verses="30"></bc-verse></li>
+        <li><bc-verse book="John"             chapter="14"  verses="1–3"></bc-verse></li>
+        <li><bc-verse book="Romans"           chapter="6"   verses="23"></bc-verse></li>
+        <li><bc-verse book="1 Corinthians"    chapter="15"  verses="3-4"></bc-verse></li>
+        <li><bc-verse book="2 Corinthians"    chapter="3"   verses="18"></bc-verse></li>
+        <li><bc-verse book="2 Corinthians"    chapter="5"   verses="17-19"></bc-verse></li>
+        <li><bc-verse book="Colossians"       chapter="1"   verses="15-19"></bc-verse></li>
+        <li><bc-verse book="Hebrews"          chapter="2"   verses="9-18"></bc-verse></li>
+      </ul>
+    </div>
+  </section>
+</main>

src/app/components/pages/beliefs.scss

@@ -0,0 +1,3 @@
+main section div.content ul li {
+  padding: 0;
+}

src/app/components/pages/beliefs.ts

@@ -0,0 +1,9 @@
+import { Component }    from '@angular/core';
+import { Analytics }    from '../../services';
+
+@Component({
+  templateUrl: './beliefs.html',
+  styleUrls: [ './beliefs.scss' ]
+})
+export class BeliefsComponent {
+}

src/app/components/pages/index.ts

@@ -2,6 +2,7 @@ import { Component, NgModule }                      from '@angular/core';
 import { RouterModule, Routes }                     from '@angular/router';
 
 import { AboutComponent }                           from './about';
+import { BeliefsComponent }                         from './beliefs';
 import { ConnectComponent }                         from './connect';
 import { EventsComponent }                          from './events';
 import { FriendsAndFamilyComponent }                from './friends-and-family';
@@ -19,6 +20,7 @@ import { SERVE_ROUTES, SERVE_COMPONENTS }           from './serve/';
 const routes: Routes = [
   { path: '',                       component: HomeComponent },
   { path: 'about',                  component: AboutComponent },
+  { path: 'beliefs',                component: BeliefsComponent },
   { path: 'connect',                component: ConnectComponent },
   { path: 'events',                 component: EventsComponent },
   { path: 'friends-family-sabbath', component: FriendsAndFamilyComponent },
@@ -40,6 +42,7 @@ export class AppRoutingModule {}
 
 export const PAGE_COMPONENTS = [
   AboutComponent,
+  BeliefsComponent,
   ConnectComponent,
   EventsComponent,
   FriendsAndFamilyComponent,

src/testing.ts

@@ -11,7 +11,7 @@ const expect = chai.expect;
 export class MockBuilder<T> {
   private object = {};
 
-  static of<T>(clazz: new (...argv) => T): MockBuilder<T> {
+  static of<T>(clazz?: new (...argv) => T): MockBuilder<T> {
     return new MockBuilder<T>();
   }