Refactor ionic app

Author: tolyo

app/apps/ionic/index.js

@@ -1,83 +1,11 @@
-import { Camera, CameraResultType, CameraSource } from "@capacitor/camera";
 import { angular } from "@angular-wave/angular.ts";
-
-/**
- * @typedef {Object} UserPhoto
- * @property {string} filepath - The file path to the user's photo.
- * @property {string} base64Data - Base64 representation of the photo.
- */
+import { PhotoController } from "./photo-controller.js";
+import { defineCustomElements } from "@ionic/pwa-elements/loader";
+defineCustomElements(window);
 
 angular
   .module("app", [])
   .config(($sceProvider) => {
     $sceProvider.enabled(false);
   })
-  .controller(
-    "PhotoController",
-    class PhotoController {
-      static $inject = ["$scope"];
-
-      constructor($scope) {
-        /** @type {UserPhoto[]} */
-        this.photos = [];
-        this.$scope = $scope;
-      }
-
-      async addPhotoToGallery() {
-        const capturedPhoto = await Camera.getPhoto({
-          resultType: CameraResultType.Uri,
-          source: CameraSource.Camera,
-          quality: 100,
-        });
-        const savedImageFile = await this.savePicture(capturedPhoto);
-        this.photos.unshift(savedImageFile);
-        this.$scope.$digest();
-      }
-
-      /**
-       * @param {import('@capacitor/camera').Photo} photo
-       * @returns {Promise<UserPhoto>}
-       */
-      async savePicture(photo) {
-        // Convert photo to base64 format, required by Filesystem API to save
-        const base64Data = await this.readAsBase64(photo);
-        const fileName = Date.now() + ".jpeg";
-
-        // Use webPath to display the new image instead of base64 since it's
-        // already loaded into memory
-        return {
-          filepath: fileName,
-          base64Data: base64Data,
-        };
-      }
-
-      /**
-       * Convert a Blob to a base64 string.
-       *@param {import('@capacitor/camera').Photo} photo
-       * @returns {string}
-       */
-      async readAsBase64(photo) {
-        // Fetch the photo, read as a blob, then convert to base64 format
-        const response = await fetch(photo.webPath);
-        const blob = await response.blob();
-
-        return await this.convertBlobToBase64(blob);
-      }
-
-      /**
-       * @private
-       * @param {Blob} blob
-       * @returns {Promise<string>}
-       */
-      convertBlobToBase64(blob) {
-        return new Promise((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onerror = reject;
-          reader.onload = () => {
-            resolve(reader.result);
-          };
-          reader.readAsDataURL(blob);
-        });
-      }
-    },
-  );
+  .controller("PhotoController", PhotoController);

app/apps/ionic/ionic.html

@@ -12,26 +12,17 @@
 
     <script
       type="module"
-      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@6.0.0/dist/ionic/ionic.esm.js"
     ></script>
     <script
       nomodule
-      src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
+      src="https://cdn.jsdelivr.net/npm/@ionic/core@6.0.0/dist/ionic/ionic.js"
     ></script>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
+      href="https://cdn.jsdelivr.net/npm/@ionic/core@6.0.0/css/ionic.bundle.css"
     />
 
-    <script
-      type="module"
-      src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
-    ></script>
-    <script
-      nomodule
-      src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
-    ></script>
-
     <link rel="icon" type="image/x-icon" href="./assets/icon/favicon.ico" />
     <link rel="manifest" href="./manifest.json" />
     <link rel="stylesheet" href="./css/style.css" />

app/apps/ionic/photo-controller.js

@@ -0,0 +1,72 @@
+import { Camera, CameraResultType, CameraSource } from "@capacitor/camera";
+
+/**
+ * @typedef {Object} UserPhoto
+ * @property {string} filepath - The file path to the user's photo.
+ * @property {string} base64Data - Base64 representation of the photo.
+ */
+
+export class PhotoController {
+  static $inject = ["$scope"];
+
+  constructor($scope) {
+    /** @type {UserPhoto[]} */
+    this.photos = [];
+    this.$scope = $scope;
+  }
+
+  async addPhotoToGallery() {
+    const capturedPhoto = await Camera.getPhoto({
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Camera,
+      quality: 100,
+    });
+    const savedImageFile = await this.savePicture(capturedPhoto);
+    this.photos.unshift(savedImageFile);
+    this.$scope.$digest();
+  }
+
+  /**
+   * @param {import('@capacitor/camera').Photo} photo
+   * @returns {Promise<UserPhoto>}
+   */
+  async savePicture(photo) {
+    // Convert photo to base64 format, required by Filesystem API to save
+    const base64Data = await this.readAsBase64(photo);
+    const fileName = Date.now() + ".jpeg";
+
+    // Use webPath to display the new image instead of base64 since it's
+    // already loaded into memory
+    return {
+      filepath: fileName,
+      base64Data: base64Data,
+    };
+  }
+
+  /**
+   * Convert a Blob to a base64 string.
+   * @param {import('@capacitor/camera').Photo} photo
+   * @returns {Promise<string>}
+   */
+  async readAsBase64(photo) {
+    // Fetch the photo, read as a blob, then convert to base64 format
+    const response = await fetch(photo.webPath);
+    const blob = await response.blob();
+
+    return await this.convertBlobToBase64(blob);
+  }
+
+  /**
+   * @private
+   * @param {Blob} blob
+   * @returns {Promise<string>}
+   */
+  convertBlobToBase64(blob) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = reject;
+      reader.onload = () => resolve(/** @type {string} */ (reader.result));
+      reader.readAsDataURL(blob);
+    });
+  }
+}