ADD GLobalScope and Shryriiwook Services. Multiple adjustments for th…

…e looks and the workings :P

Signed-off-by: Jose Ignacio Santa Cruz G <[email protected]>

README.md

@@ -14,24 +14,25 @@ Don' t know if really nice, but I like them...
 * Lazy loading for pages
 * SVG icons
 * Lodash
-* InAppBrowser for external links
+* InAppBrowser for external links (solved iOS issue, due to target not optional)
+* Shyriiwook translator (Chewie mode) **_NEW_**
 
 ## TODO
 To resolve sometime, in the future...
 
 * Un-hardcode the joke list
 * Unit & E2E tests
-* Add an "Affiliation" option to choose from Jedi/Sith/or none
-* Implement the real wookie mode, to apply joke translation to Shyriiwook
+* ~~Add an _"Affiliation"_ option to choose from _Jedi/Sith/or none_~~ **DONE**
+* ~~Implement the real wookie mode, to apply joke translation to Shyriiwook~~ **DONE**
 * Add app languages
-* Use PouchDB for local cache.
+* Use _PouchDB_ for local cache.
 
 Had most of the TODO items in mind, but I really need to sleep.
 
 Please report any issues. This is my first attempt for a full Ionic2 app, so bugs & improvements to be expected.
 
-*Twitter*: @JSantaCL |
-*Medium*: https://medium.com/@jsantacl
+*Twitter*: @JSantaCL
+<br>*Medium*: https://medium.com/@jsantacl
 
 
 

config.xml

@@ -6,6 +6,7 @@
     <content src="index.html" />
     <access origin="*" />
     <allow-navigation href="http://ionic.local/*" />
+    <allow-navigation href="http://192.168.0.134:8100" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
     <allow-intent href="tel:*" />
@@ -18,10 +19,13 @@
     <preference name="android-minSdkVersion" value="16" />
     <preference name="BackupWebStorage" value="none" />
     <preference name="SplashMaintainAspectRatio" value="true" />
-    <preference name="FadeSplashScreenDuration" value="300" />
-    <preference name="SplashShowOnlyFirstTime" value="false" />
+    <preference name="FadeSplashScreenDuration" value="1500" />
     <preference name="SplashScreen" value="screen" />
-    <preference name="SplashScreenDelay" value="3000" />
+    <preference name="SplashScreenDelay" value="1500" />
+    <preference name="ShowSplashScreenSpinner" value="false" />
+    <preference name="AutoHideSplashScreen" value="false" />
+    <preference name="StatusBarBackgroundColor" value="#222222" />
+    <preference name="StatusBarStyle" value="blacktranslucent" />
     <platform name="android">
         <allow-intent href="market:*" />
         <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
@@ -77,13 +81,22 @@
         <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
         <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
     </platform>
-    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
-    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
-    <plugin name="cordova-plugin-console" spec="1.0.5" />
-    <plugin name="cordova-plugin-statusbar" spec="2.2.1" />
-    <plugin name="cordova-plugin-device" spec="1.1.4" />
-    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
-    <engine name="ios" spec="~4.3.1" />
     <engine name="android" spec="~6.1.2" />
+    <engine name="ios" spec="~4.3.1" />
+    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
+    <plugin name="cordova-plugin-whitelist" spec="~1.3.1" />
+    <plugin name="cordova-plugin-console" spec="~1.0.5" />
+    <plugin name="cordova-plugin-statusbar" spec="~2.2.1" />
+    <plugin name="cordova-plugin-device" spec="~1.1.4" />
+    <plugin name="cordova-plugin-crosswalk-webview" spec="~2.3.0" />
+    <plugin name="cordova-plugin-crosswalk-webview" spec="https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview.git">
+        <variable name="XWALK_VERSION" value="23+" />
+        <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
+        <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
+        <variable name="XWALK_MODE" value="embedded" />
+        <variable name="XWALK_MULTIPLEAPK" value="true" />
+    </plugin>
     <plugin name="cordova-plugin-inappbrowser" spec="~1.7.1" />
+    <plugin name="cordova-plugin-splashscreen" spec="https://github.com/apache/cordova-plugin-splashscreen" />
+    <plugin name="cordova-sqlite-storage" spec="~2.0.4" />
 </widget>

package.json

@@ -22,9 +22,11 @@
     "@ionic-native/core": "^3.6.1",
     "@ionic-native/in-app-browser": "^3.6.1",
     "@ionic-native/splash-screen": "3.4.2",
+    "@ionic-native/sqlite": "^3.7.0",
     "@ionic-native/status-bar": "3.4.2",
     "@ionic/storage": "2.0.1",
     "ionic-angular": "3.1.1",
+    "ionic-cache": "^2.0.1",
     "ionicons": "3.0.0",
     "lodash": "^4.17.4",
     "rxjs": "5.1.1",
@@ -33,8 +35,8 @@
   },
   "devDependencies": {
     "@ionic/app-scripts": "1.3.6",
-    "@ionic/cli-plugin-cordova": "^1.0.0-rc.2",
-    "@ionic/cli-plugin-ionic-angular": "^1.0.0-rc.2",
+    "@ionic/cli-plugin-cordova": "^1.0.0",
+    "@ionic/cli-plugin-ionic-angular": "^1.0.0",
     "typescript": "~2.2.1"
   },
   "description": "A brief (and probably boring collection) of anotated StarWars jokes. Created for the Ionic Jedi Hackster (hackathon 2017)."

src/app/app.component.ts

@@ -1,61 +1,123 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, EventEmitter, Output } from '@angular/core';
 import { Platform, NavController } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
+import { GlobalScopeService } from "../providers/global-scope-service/global-scope-service";
 
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
-  rootPage: string = 'SplashPage';
-  pages: Array < {
-      title: string,
-      name: string
-    } >
-    @ViewChild('content') nav: NavController;
+  rootPage: string = 'SplashPage';  
+  @ViewChild('content') nav: NavController;
 
   public isJedi: boolean;
-  public isSith: boolean;
-
-  constructor(private platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen) {
-    this.initializeApp();
-    this.pages = [{
-        title: 'Splash',
-        name: 'Splash'
-      },
-      {
-        title: 'Credits',
-        name: 'Credits'
-      },
-      {
-        title: 'Search',
-        name: 'Search'
-      }
-    ];
+  private isJedi$: any;
+  public affiliation: string;
+  public affiliationImg: string;  
+
+  constructor(private platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen, private rootScope: GlobalScopeService) {
+    this.initializeApp();    
   }
+  private affiliationCount: number = 0;
 
   initializeApp() {
     this.platform.ready().then(() => {
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.
-      this.statusBar.styleDefault();
-      this.splashScreen.hide();
+      //this.statusBar.styleBlackTranslucent();
+      this.statusBar.backgroundColorByHexString('#222');
+
+      // If using Crosswalk add <meta name="theme-color" content="#222222"> to index (or change color)
+      // Ref.: https://forum.ionicframework.com/t/ionic2-rc0-and-ionic2-rc1-plugin-statusbar-not-working-in-android-with-crosswalk/66449/24
+
+      // http://stackoverflow.com/questions/41544016/white-screen-after-splashscreen-ionic2-android-device
+      // Ref.: http://www.codingandclimbing.co.uk/blog/ionic-2-fix-splash-screen-white-screen-issue/
+      setTimeout(() => { 
+        this.splashScreen.hide(); 
+      }, 10);      
+
+      this.nav.swipeBackEnabled = false;
+
+      this.isJedi  = this.rootScope.getItem('isJedi');
+      try {
+        // jedi, sith, none
+        this.affiliation = this.rootScope.getItem('affiliation');
+        switch(this.affiliation) {
+          case 'jedi':
+            this.isJedi = true;
+            this.affiliation = 'jedi';
+            this.affiliationImg = 'kenobi';
+            break;
+          case 'sith':
+            this.isJedi = false;
+            this.affiliation = 'sith';
+            this.affiliationImg = 'vader';
+            break;
+          case 'none':
+            this.isJedi = undefined;
+            this.affiliation = 'none';
+            this.affiliationImg = 'boba';
+            break;
+          default:
+            console.log('No affiliation. Defaulting value');
+            this.isJedi = undefined;
+            this.affiliation = 'none';
+            this.affiliationImg = 'boba';
+        }
+
+      } catch(err) {
+          console.error('ERROR, Could not retrieve affiliation', err);
+          this.isJedi = undefined;
+          this.affiliation = 'none';
+          this.affiliationImg = 'boba';
+      }
+
+      if(this.isJedi !== undefined){
+         this.rootScope.setItem('isJedi', this.isJedi);
+      } else {
+        this.rootScope.clearItem('isJedi');
+      }
+      this.rootScope.setItem('affiliation', this.affiliation);
+      this.rootScope.setItem('affiliationImg', this.affiliationImg); 
+
+      this.isJedi$ = this.rootScope.watch('isJedi').subscribe(variable => {         
+        this.isJedi = (variable != undefined) ? variable.value : undefined;             
+      });           
 
-      this.isJedi = false;
-      this.isSith = false;
     });
   }
 
   openPage(page) {
-    this.nav.push(page);
+    this.nav.setRoot(page);
   }
 
   changeAffiliation() {
-    console.log("Change affiliation!");
-  }
+
+    this.affiliationCount++;
+    switch (this.affiliationCount){
+      case 1:
+        this.affiliationImg = 'kenobi';
+        this.affiliation = 'jedi';
+        this.isJedi = true;
+        break;
+      case 2:
+        this.affiliationImg = 'vader';
+        this.affiliation = 'sith';
+        this.isJedi = false;
+        break;
+      default:
+        this.affiliationImg = 'boba';
+        this.affiliation = 'none';  
+        this.isJedi = undefined;   
+        this.affiliationCount = 0;
+    }
+
+    this.rootScope.setItem('isJedi', this.isJedi);
+    this.rootScope.setItem('affiliation', this.affiliation);
+    this.rootScope.setItem('affiliationImg', this.affiliationImg);
 
-  chewieMode() {
-    console.log('Chewie mode');
+
   }
 
   exitApp() {

src/app/app.html

@@ -8,19 +8,25 @@
 
   <ion-content>
 
-    <ion-list [ngClass]="{'jedi': !!isJedi, 'sith': !!isSith, 'sw': !!!isJedi && !!!isSith}">
+    <ion-list [ngClass]="{
+      'jedi': !!isJedi, 
+      'sith': !!!isJedi, 
+      'sw': isJedi === undefined }">
         <ion-list-header (click)="changeAffiliation()">
-        <ion-avatar item-left>
-      <img src="assets/img/boba.svg">
-    </ion-avatar>
-    <h2 [ngClass]="{'jedi': !!isJedi, 'sith': !!isSith, 'sw': !!!isJedi && !!!isSith}" text-center>No afiliation</h2>
-    <!--<p text-center><small>(click to change)</small></p>-->
-  </ion-list-header>
+          <ion-avatar item-left>
+            <img [src]="'assets/img/'+ affiliationImg + '.svg'">
+          </ion-avatar>
+          <h2 [ngClass]="{
+              'jedi': !!isJedi, 
+              'sith': !!!isJedi, 
+              'sw': isJedi === undefined }" text-center>{{ (isJedi === undefined) ? 'No affiliation':(isJedi ? 'Jedi' : 'Sith')}}</h2>
+          <p text-center><small>(click to change)</small></p>
+        </ion-list-header>
 
-        <ion-item menuClose (click)="openPage('SplashPage')">Enjoy the Splash (again)</ion-item>
-        <ion-item menuClose (click)="openPage('JokePage')">Random joke</ion-item>
-      <ion-item menuClose (click)="openPage('CreditsPage')">Credits</ion-item>
-      <ion-item menuClose (click)="openPage('AboutPage')">About</ion-item>
+        <button ion-item menuClose (click)="openPage('SplashPage')">Enjoy the Splash (again)</button>
+        <button ion-item menuClose (click)="openPage('JokePage')">Random joke</button>
+      <button ion-item menuClose (click)="openPage('CreditsPage')">Credits</button>
+      <button ion-item menuClose (click)="openPage('AboutPage')">About</button>
     </ion-list>
   </ion-content>
   <ion-footer>

src/app/app.module.ts

@@ -8,10 +8,14 @@ import { StatusBar } from '@ionic-native/status-bar';
 import { MyApp } from './app.component';
 import { SwJokeProvider } from '../providers/sw-joke/sw-joke';
 import { SwApiServiceProvider } from '../providers/sw-api-service/sw-api-service';
+import { GlobalScopeService } from '../providers/global-scope-service/global-scope-service';
+import { SpyDirective } from '../directives/spy/spy';
+import { ShyriiwookPipe } from '../pipes/shyriiwook/shyriiwook';
 
 @NgModule({
   declarations: [
     MyApp,
+    SpyDirective,    
   ],
   imports: [
     BrowserModule,
@@ -27,7 +31,9 @@ import { SwApiServiceProvider } from '../providers/sw-api-service/sw-api-service
     SplashScreen,
     {provide: ErrorHandler, useClass: IonicErrorHandler},
     SwJokeProvider,
-    SwApiServiceProvider
+    SwApiServiceProvider,
+    GlobalScopeService
+
   ]
 })
 export class AppModule {}