FEATURE: added an animation on card close, added help page

.hgignore

@@ -43,3 +43,5 @@ DynamicBibleIonic/bin
 DynamicBibleIonic/.vscode
 DynamicBibleUtility/.vs
 DynamicBibleIonic/platforms/android/release-signing.properties
+syntax: regexp
+npm-debug.log.*

DynamicBibleIonic/DynamicBibleIonic.njsproj

@@ -58,12 +58,13 @@
     <Folder Include="src\components" />
     <Folder Include="src\components\component-loader" />
     <Folder Include="src\components\error" />
-	<Folder Include="src\components\error-message" />
+    <Folder Include="src\components\error-message" />
     <Folder Include="src\components\passage" />
     <Folder Include="src\components\strongs" />
     <Folder Include="src\components\strongs-modal" />
     <Folder Include="src\components\words" />
     <Folder Include="src\libs\" />
+    <Folder Include="src\pages\help\" />
     <Folder Include="src\services\" />
     <Folder Include="src\pages" />
     <Folder Include="src\pages\search" />

DynamicBibleIonic/package.json

@@ -1,70 +1,71 @@
-{
-  "version": "3.0.0",
-  "name": "dynamicbible",
-  "author": "Jason Wall",
-  "homepage": "http://dynamicbible.com/",
-  "private": true,
-  "config": {
-    "ionic_source_map": "source-map"
-  },
-  "scripts": {
-    "clean": "ionic-app-scripts clean",
-    "build": "ionic-app-scripts build",
-    "ionic:build": "ionic-app-scripts build",
-    "ionic:serve": "ionic-app-scripts serve",
-    "start": "ionic serve",
-    "lab": "ionic serve --lab",
-    "test": "ng test",
-    "test-coverage": "ng test --code-coverage"
-  },
-  "dependencies": {
-    "@angular/common": "2.2.1",
-    "@angular/compiler": "2.2.1",
-    "@angular/compiler-cli": "2.2.1",
-    "@angular/core": "2.2.1",
-    "@angular/forms": "2.2.1",
-    "@angular/http": "2.2.1",
-    "@angular/platform-browser": "2.2.1",
-    "@angular/platform-browser-dynamic": "2.2.1",
-    "@angular/platform-server": "2.2.1",
-    "@ionic/storage": "1.1.7",
-    "@types/jasmine": "^2.5.38",
-    "ionic-angular": "2.0.0",
-    "ionic-native": "2.2.11",
-    "ionicons": "3.0.0",
-    "rxjs": "5.0.0-beta.12",
-    "sw-toolbox": "3.4.0",
-    "zone.js": "0.6.26"
-  },
-  "devDependencies": {
-    "@ionic/app-scripts": "1.0.0",
-    "@types/jasmine": "2.5.38",
-    "@types/node": "6.0.42",
-    "angular-cli": "1.0.0-beta.24",
-    "codecov": "1.0.1",
-    "jasmine-core": "2.5.2",
-    "jasmine-spec-reporter": "2.7.0",
-    "karma": "1.3.0",
-    "karma-chrome-launcher": "2.0.0",
-    "karma-cli": "1.0.1",
-    "karma-jasmine": "1.1.0",
-    "karma-mocha-reporter": "2.2.1",
-    "karma-remap-istanbul": "0.2.2",
-    "protractor": "4.0.13",
-    "protractor-jasmine2-screenshot-reporter": "0.3.2",
-    "ts-node": "1.7.2",
-    "tslint": "4.1.1",
-    "tslint-eslint-rules": "3.2.0",
-    "typescript": "2.0.9"
-  },
-  "cordovaPlugins": [
-    "cordova-plugin-whitelist",
-    "cordova-plugin-statusbar",
-    "cordova-plugin-console",
-    "cordova-plugin-device",
-    "cordova-plugin-splashscreen",
-    "ionic-plugin-keyboard"
-  ],
-  "cordovaPlatforms": [],
-  "description": "Dynamic Bible: A bible made for studying scripture"
-}
+{
+  "version": "3.0.0",
+  "name": "dynamicbible",
+  "author": "Jason Wall",
+  "homepage": "http://dynamicbible.com/",
+  "private": true,
+  "config": {
+    "ionic_source_map": "source-map"
+  },
+  "scripts": {
+    "clean": "ionic-app-scripts clean",
+    "build": "ionic-app-scripts build",
+    "ionic:build": "ionic-app-scripts build",
+    "ionic:serve": "ionic-app-scripts serve",
+    "start": "ionic serve",
+    "lab": "ionic serve --lab",
+    "test": "ng test",
+    "test-coverage": "ng test --code-coverage"
+  },
+  "dependencies": {
+    "@angular/common": "2.2.1",
+    "@angular/compiler": "2.2.1",
+    "@angular/compiler-cli": "2.2.1",
+    "@angular/core": "2.2.1",
+    "@angular/forms": "2.2.1",
+    "@angular/http": "2.2.1",
+    "@angular/platform-browser": "2.2.1",
+    "@angular/platform-browser-dynamic": "2.2.1",
+    "@angular/platform-server": "2.2.1",
+    "@ionic/storage": "1.1.7",
+    "@types/jasmine": "^2.5.38",
+    "ionic-angular": "2.0.0",
+    "ionic-native": "2.2.11",
+    "ionicons": "3.0.0",
+    "rxjs": "5.0.0-beta.12",
+    "sw-toolbox": "3.4.0",
+    "zone.js": "0.6.26"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "1.0.0",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "6.0.42",
+    "angular-cli": "1.0.0-beta.24",
+    "codecov": "1.0.1",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.7.0",
+    "karma": "1.3.0",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-cli": "1.0.1",
+    "karma-jasmine": "1.1.0",
+    "karma-mocha-reporter": "2.2.1",
+    "karma-remap-istanbul": "0.2.2",
+    "protractor": "4.0.13",
+    "protractor-jasmine2-screenshot-reporter": "0.3.2",
+    "ts-node": "1.7.2",
+    "tslint": "4.1.1",
+    "tslint-eslint-rules": "3.2.0",
+    "typescript": "2.0.9"
+  },
+  "cordovaPlugins": [
+    "cordova-plugin-whitelist",
+    "cordova-plugin-statusbar",
+    "cordova-plugin-console",
+    "cordova-plugin-device",
+    "cordova-plugin-splashscreen",
+    "ionic-plugin-keyboard"
+  ],
+  "cordovaPlatforms": [],
+  "description": "Dynamic Bible: A bible made for studying scripture"
+, "-vs-binding":{"AfterBuild":["ionic:serve"]}
+}

DynamicBibleIonic/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { MyApp } from './app.component';
 
 import { SearchPage } from "../pages/search/search";
 import { SettingsPage } from "../pages/settings/settings";
+import { HelpPage } from "../pages/help/help";
 
 import { ComponentLoader } from "../components/component-loader/component-loader";
 import { Passage } from "../components/passage/passage";
@@ -22,6 +23,7 @@ import { ErrorMessage } from '../components/error-message/error-message';
         MyApp,
         SearchPage,
         SettingsPage,
+        HelpPage,
         ComponentLoader,
         Passage,
         Strongs,
@@ -39,6 +41,7 @@ import { ErrorMessage } from '../components/error-message/error-message';
         MyApp,
         SearchPage,
         SettingsPage,
+        HelpPage,
         Passage,
         Strongs,
         StrongsModal,

DynamicBibleIonic/src/components/error/error.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, Component, Input, Output } from "@angular/core";
+import { EventEmitter, Component, Input, Output, ElementRef } from "@angular/core";
 import { CardItem } from "../../pages/search/search";
 
 @Component({
@@ -13,12 +13,24 @@ export class Error
     @Input()
     cardItem: CardItem;
 
-    constructor()
+    constructor(private elementRef: ElementRef)
     {
     }
 
     close()
     {
-        this.onClose.emit(this.cardItem);
+        let d = 275;
+        this.elementRef.nativeElement.parentElement.animate({
+            transform: ['none', 'translate3d(110%, 0, 0)']
+        }, {
+                fill: 'forwards',
+                duration: d,
+                iterations: 1,
+                easing: 'ease-in-out',
+            });
+        setTimeout(() =>
+        {
+            this.onClose.emit(this.cardItem);
+        }, d);
     }
 }

DynamicBibleIonic/src/components/passage/passage.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, Input, OnInit } from "@angular/core";
+import { Component, EventEmitter, Output, Input, OnInit, ElementRef } from "@angular/core";
 import { OpenData, CardItem } from "../../pages/search/search";
 import { BiblePassageResult, BibleService } from '../../services/bible-service';
 import { Reference } from '../../libs/Reference';
@@ -23,7 +23,7 @@ export class Passage implements OnInit
 
     data: BiblePassageResult;
 
-    constructor(private bibleService: BibleService)
+    constructor(private bibleService: BibleService, private elementRef: ElementRef)
     {
     }
 
@@ -35,7 +35,19 @@ export class Passage implements OnInit
 
     close()
     {
-        this.onClose.emit(this.cardItem);
+        let d = 275;
+        this.elementRef.nativeElement.parentElement.animate({
+            transform: ['none', 'translate3d(110%, 0, 0)']
+        }, {
+                fill: 'forwards',
+                duration: d,
+                iterations: 1,
+                easing: 'ease-in-out',
+            });
+        setTimeout(() =>
+        {
+            this.onClose.emit(this.cardItem);
+        }, d);
     }
 
     openStrongs(strongs: string)

DynamicBibleIonic/src/components/strongs/strongs.ts

@@ -1,4 +1,4 @@
-import { HostListener, EventEmitter, Component, Input, Output, OnInit, AfterViewChecked } from "@angular/core";
+import { HostListener, EventEmitter, Component, Input, Output, OnInit, AfterViewChecked, ElementRef } from "@angular/core";
 import { Reference } from '../../libs/Reference';
 import { OpenData, CardItem } from "../../pages/search/search";
 import { StrongsResult, StrongsService } from '../../services/strongs-service';
@@ -21,7 +21,7 @@ export class Strongs implements AfterViewChecked, OnInit
 
     data: StrongsResult;
 
-    constructor(private strongsService: StrongsService)
+    constructor(private strongsService: StrongsService, private elementRef: ElementRef)
     {
     }
 
@@ -52,8 +52,20 @@ export class Strongs implements AfterViewChecked, OnInit
     }
 
     close()
-    {
-        this.onClose.emit(this.cardItem);
+    {
+        let d = 275;
+        this.elementRef.nativeElement.parentElement.animate({
+            transform: ['none', 'translate3d(110%, 0, 0)']
+        }, {
+                fill: 'forwards',
+                duration: d,
+                iterations: 1,
+                easing: 'ease-in-out',
+            });
+        setTimeout(() =>
+        {
+            this.onClose.emit(this.cardItem);
+        }, d);
     }
 
     openItem(p: string)

DynamicBibleIonic/src/components/words/words.ts

@@ -1,5 +1,5 @@
 /// <reference path="../../../typings/browser/ambient/jquery/index.d.ts" />
-import { HostListener, EventEmitter, Component, Input, Output, AfterViewChecked, OnInit } from "@angular/core";
+import { HostListener, EventEmitter, Component, Input, Output, AfterViewChecked, OnInit, ElementRef } from "@angular/core";
 import { Reference } from '../../libs/Reference';
 import { OpenData, CardItem } from "../../pages/search/search";
 import { WordLookupResult, WordService } from '../../services/word-service';
@@ -24,7 +24,7 @@ export class Words implements AfterViewChecked, OnInit
 
     data: WordLookupResult;
 
-    constructor(private wordService: WordService)
+    constructor(private wordService: WordService, private elementRef: ElementRef)
     {
     }
 
@@ -38,10 +38,8 @@ export class Words implements AfterViewChecked, OnInit
 
             if (wr.scrollWidth < 500) // 1 col
             {
-                if (len < 6) // 5 rows
-                    $(el).css("height", len * 44.4 + 25);
-                else
-                    $(el).css("height", 250);
+                // 5 rows
+                len < 6 ?  $(el).css("height", len * 44.4 + 25) : $(el).css("height", 250);
             }
             else if (wr.scrollWidth < 699) // 2 col
             {
@@ -87,14 +85,26 @@ export class Words implements AfterViewChecked, OnInit
 
     ngOnInit(): void
     {
-        this.wordService.getResultAsPromise(this.cardItem.qry).then(data => 
+        this.wordService.getResultAsPromise(this.cardItem.qry).then(data =>
             this.data = data
         );
     }
 
     close()
     {
-        this.onClose.emit(this.cardItem);
+        let d = 275;
+        this.elementRef.nativeElement.parentElement.animate({
+            transform: ['none', 'translate3d(110%, 0, 0)']
+        }, {
+                fill: 'forwards',
+                duration: d,
+                iterations: 1,
+                easing: 'ease-in-out',
+            });
+        setTimeout(() =>
+        {
+            this.onClose.emit(this.cardItem);
+        }, d);
     }
 
     makePassage(p: string)

DynamicBibleIonic/src/index.html

@@ -1,41 +1,35 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-  <meta charset="UTF-8">
-  <title>Dynamic Bible</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-
-  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
-  <link rel="manifest" href="manifest.json">
-  <meta name="theme-color" content="#4e8ef7">
-  
-  <!-- cordova.js required for cordova apps -->
-  <script src="cordova.js"></script>
-
-  <!-- un-comment this code to enable service worker
-  <script>
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('service-worker.js')
-        .then(() => console.log('service worker installed'))
-        .catch(err => console.log('Error', err));
-    }
-  </script>-->
-
-  <link href="build/main.css" rel="stylesheet">
-
-</head>
-<body>
-
-  <!-- Ionic's root component and where the app will load -->
-  <ion-app></ion-app>
-
-  <!-- The polyfills js is generated during the build process -->
-  <script src="build/polyfills.js"></script>
-
-  <!-- The bundle js is generated during the build process -->
-  <script src="build/main.js"></script>
-  <script src="lib/jquery.min.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <title>Dynamic Bible</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#4e8ef7">
+
+    <!-- cordova.js required for cordova apps -->
+    <script src="cordova.js"></script>
+    <!-- un-comment this code to enable service worker
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('service-worker.js')
+          .then(() => console.log('service worker installed'))
+          .catch(err => console.log('Error', err));
+      }
+    </script>-->
+    <link href="build/main.css" rel="stylesheet">
+</head>
+<body>
+    <!-- Ionic's root component and where the app will load -->
+    <ion-app></ion-app>
+    <!-- The polyfills js is generated during the build process -->
+    <script src="build/polyfills.js"></script>
+    <!-- The bundle js is generated during the build process -->
+    <script src="build/main.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/web-animations.min.js"></script>
+</body>
+</html>

DynamicBibleIonic/src/pages/help/help.html

@@ -0,0 +1,25 @@
+<ion-header>
+    <ion-navbar>
+        <button ion-button icon-only menuToggle left>
+            <ion-icon name="menu"></ion-icon>
+        </button>
+        <ion-title>Settings</ion-title>
+    </ion-navbar>
+</ion-header>
+<ion-content padding>
+    <h2>How to search for a verse</h2>
+<p>
+Dynamic Bible doesn't yet have a verse picker.  If you need a verse picker, hang on, we're diligently working on that feature.  In the mean time, to bring up a passage, 
+just type in a reference.  Dynamic Bible will recognize many abbreviations of books, and can handle ranges within a book.  Here are a few examples to get you started:
+</p>
+<dl>
+<dd>John 3:16</dd>
+<dd>Jn 3:16</dd>
+<dd>Jn 3:16-17</dd>
+<dd>John 3:16-4:4</dd>
+<dd>Jn 3-4</dd>
+<dd>Jn 3:1-* (this will get all the verses in the chapter.  the * char can be used in verse ranges, but not chapter ranges.)</dd>
+</dl>
+
+We currently don't support ranges that cross book boundaries.
+</ion-content>

DynamicBibleIonic/src/pages/help/help.scss

@@ -0,0 +1,3 @@
+page-settings {
+
+}

DynamicBibleIonic/src/pages/help/help.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'help',
+    templateUrl: 'help.html'
+})
+export class HelpPage
+{
+    constructor()
+    {
+    }
+    
+}

DynamicBibleIonic/src/services/pages-service.ts

@@ -2,6 +2,8 @@ import { Injectable } from "@angular/core";
 import { Storage } from '@ionic/storage';
 import { SearchPage } from "../pages/search/search";
 import { SettingsPage } from "../pages/settings/settings";
+import { HelpPage } from "../pages/help/help";
+
 import { SavedPage } from "../libs/UserProfile";
 
 @Injectable()
@@ -14,7 +16,8 @@ export class PagesService
     {
         this.pages = [
             { title: 'Search', component: SearchPage, params: { queries: [], title: "Search" }, icon: "search" },
-            { title: 'Settings', component: SettingsPage, params: {}, icon: "settings" }
+            { title: 'Settings', component: SettingsPage, params: {}, icon: "settings" },
+            { title: 'Help', component: HelpPage, params: {}, icon: "help-circle" }
         ];
         this.savedPages = [];
     }

DynamicBibleIonic/www/index.html

@@ -1,41 +1,35 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-  <meta charset="UTF-8">
-  <title>Dynamic Bible</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <meta name="format-detection" content="telephone=no">
-  <meta name="msapplication-tap-highlight" content="no">
-
-  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
-  <link rel="manifest" href="manifest.json">
-  <meta name="theme-color" content="#4e8ef7">
-  
-  <!-- cordova.js required for cordova apps -->
-  <script src="cordova.js"></script>
-
-  <!-- un-comment this code to enable service worker
-  <script>
-    if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('service-worker.js')
-        .then(() => console.log('service worker installed'))
-        .catch(err => console.log('Error', err));
-    }
-  </script>-->
-
-  <link href="build/main.css" rel="stylesheet">
-
-</head>
-<body>
-
-  <!-- Ionic's root component and where the app will load -->
-  <ion-app></ion-app>
-
-  <!-- The polyfills js is generated during the build process -->
-  <script src="build/polyfills.js"></script>
-
-  <!-- The bundle js is generated during the build process -->
-  <script src="build/main.js"></script>
-  <script src="lib/jquery.min.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <title>Dynamic Bible</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#4e8ef7">
+
+    <!-- cordova.js required for cordova apps -->
+    <script src="cordova.js"></script>
+    <!-- un-comment this code to enable service worker
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('service-worker.js')
+          .then(() => console.log('service worker installed'))
+          .catch(err => console.log('Error', err));
+      }
+    </script>-->
+    <link href="build/main.css" rel="stylesheet">
+</head>
+<body>
+    <!-- Ionic's root component and where the app will load -->
+    <ion-app></ion-app>
+    <!-- The polyfills js is generated during the build process -->
+    <script src="build/polyfills.js"></script>
+    <!-- The bundle js is generated during the build process -->
+    <script src="build/main.js"></script>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/web-animations.min.js"></script>
+</body>
+</html>