themeable Browser for ionic

api.ts

  cssVariable: string = `
  #header, #breadcrumb-wrapper, #footer,#mobile-bottom-navigation, #back-to-top {
    display:none;
  }
  body {
    padding-bottom: 80px;
    padding-top: 1px;
  }
`
// alert(123);
// console.log('customer name',document.querySelector('#customer_sidebar h3').innerHTML)
// alert("hello",document.querySelector('#customer_sidebar h3').innerHTML);

  jsVariable: string = `
  (function() { 
    console.log('hello world')
    var item = 'hello ';
    var data = 'world ';
    var name = document.querySelector("#customer_sidebar h2").innerHTML;
    return item + data + name
  })()
   
  ` 

inAppAccount() {
    let loading = this.loadingCtrl.create({
      content: 'Loading...'
    });
    loading.present();

    const options = {
      title: {
          color: '#003264ff',
          showPageTitle: true
      },
      backButton: {
        wwwImage: 'assets/imgs/back-button.png',
        wwwImagePressed: 'assets/imgs/back-button.png',
        wwwImageDensity: 2,
        align: 'left',
        event: 'backPressed'
      },
      hidden: true,
      clearcache: false,
      clearsessioncache: false,
      backButtonCanClose: true
    };
    if (this.platform.is('cordova')) {
    this.platform.ready().then(() =>{
        let ref = cordova.ThemeableBrowser.open('https://suplo-food.myharavan.com/account?view=suplo', '_blank', options)
        .addEventListener('loadstart',
        (data:{type:string,url:string}) => {
          console.log('data',data)
          if(data.url.endsWith('https://suplo-food.myharavan.com/')) {
            ref.close();
            // ref = undefined;
            this.userState(false);
            console.log('push user back to home page then close then set undefined, why select not define?',this.navCtrl)
            this.events.publish('selectTabs',0);
            // this.navCtrl.setRoot('HomePage', { tabIndex: 0 })
          }
        })
        .addEventListener('loadstop',
        () =>  ref.insertCSS({code: this.cssVariable},
          () => {
            ref.show(); 
            loading.dismiss();
            ref.executeScript({code: this.jsVariable},value => console.log('added completed',value))
          })
        )
        .addEventListener('exit',
        () => this.events.publish('selectTabs',0))
        .addEventListener('backPressed',
        () => console.log('user press backed'))
      })
    }


  }


  inAppLogin() {
    let loading = this.loadingCtrl.create({
      content: 'Loading...'
    });
    loading.present();

    const options = {
      title: {
          color: '#003264ff',
          showPageTitle: true
      },  backButton: {
        wwwImage: 'assets/imgs/back-button.png',
        wwwImagePressed: 'assets/imgs/back-button.png',
        wwwImageDensity: 2,
        align: 'left',
        event: 'backPressed'
      },
      hidden: true,
      clearcache: false,
      clearsessioncache: false,
      backButtonCanClose: true
    };
    if (this.platform.is('cordova')) {
    this.platform.ready().then(() =>{
        let ref = cordova.ThemeableBrowser.open('https://suplo-food.myharavan.com/account/login', '_blank', options)
        .addEventListener('loadstart',
        (data:{type:string,url:string}) => {
          console.log('data',data)
          if(data.url.endsWith('account')) {
            console.log('we open to suplo account, is navCtrl parent have select?',this.navCtrl)
            ref.close();
            this.userState(true);
            setTimeout(() =>  this.events.publish('selectTabs',3),100)
          }
        })
        .addEventListener('loadstop',
        () => {
          ref.insertCSS({code: this.cssVariable},
          () => ref.show())
          loading.dismiss();
        })
        .addEventListener('exit',
        () => this.events.publish('selectTabs',0))
        .addEventListener('backPressed',
        () => console.log('user press backed'))
      })
    }


  }