CapacitorPlugin POC

Demonstrate creating a own plugin and integrate with an existed pwa application.

How to Use

  1. Add dependency package to your package.json to get via npm/yarn (package manager) then run npm i 
    "dependencies": {
 "@capacitor/android": "^2.4.0",
 "@capacitor/cli": "^2.4.0",
 "@capacitor/core": "^2.4.0",
 "@capacitor/ios": "^2.4.0",
 "capacitor-login-flow": "git+https://github.com/pycohub/CapacitorPluginPOC.git"
}
  2. Add dependency to your podfile in ios/App/Podfile. Remember run pod install 
    target 'App' do
 capacitor_pods
 # Add your Pods here
 pod 'CapacitorLoginFlow', :path => '../../node_modules/capacitor-login-flow'
end

  3. Consume Plugin ``` window.customElements.define(‘capacitor-welcome’, class extends HTMLElement { constructor() { super();

    Capacitor.Plugins.SplashScreen.hide();

    const root = this.attachShadow({ mode: ‘open’ });

    root.innerHTML = `

    Capacitor

    Capacitor makes it easy to build powerful apps for the app stores, mobile web (Progressive Web Apps), and desktop, all with a single code base.

    Getting Started

    You'll probably need a UI framework to build a full-featured app. Might we recommend Ionic?

    Visit ionic-team.github.io/capacitor for information on using native features, building plugins, and more.

    Read more

    Tiny Demo

    This demo shows how to call Capacitor plugins. Say cheese!

    ` }

connectedCallback() { const self = this;

self.shadowRoot.querySelector('#take-photo').addEventListener('click', async function(e) {
  const { Camera } = Capacitor.Plugins;

  try {
    const photo = await Camera.getPhoto({
      resultType: "uri"
    });

    const image = self.shadowRoot.querySelector('#image');
    if (!image) {
      return;
    }
    
    image.src = photo.webPath;
  } catch (e) {
    console.warn('User cancelled', e);
  }
});

self.shadowRoot.querySelector('#invoke-native-ui').addEventListener('click', async function(e) {
  const { LoginPlugin } = Capacitor.Plugins;
  console.log('LoginPlugin = ' + LoginPlugin)
  
  const result = await LoginPlugin.showLogin({ value: "Hello NativeUI!" })
  console.log(result.value)   })   } });

window.customElements.define(‘capacitor-welcome-titlebar’, class extends HTMLElement { constructor() { super(); const root = this.attachShadow({ mode: ‘open’ }); root.innerHTML = ` `; } });

```