@inizioevoke/veeva-astroclm-core 1.1.7 → 1.2.0

package/build.ts

@@ -28,6 +28,7 @@ switch (argv.cmd) {
     const dirsToCopy = [
       'apps/page-manager/templates',
       'apps/veeva-config-manager/templates',
+      'components',
       'types'
     ];
     for (const dir of dirsToCopy) {

package/dist/components/scripts/PlatformScript/PlatformScript.astro

@@ -0,0 +1,25 @@
+---
+import esbuild from 'esbuild';
+import { BuildTarget } from '../../../types/env';
+
+import script from './platform.ts?raw';
+
+export interface Props {
+  buildTarget: BuildTarget;
+}
+
+const { 
+  buildTarget
+} = Astro.props;
+
+let js: string | undefined;
+if (buildTarget === 'veeva') {
+  const { code } = await esbuild.transform(script, {
+    loader: 'ts',
+    target: 'es2020',
+    minify: true
+  });
+  js = code;
+}
+---
+{js && <script is:inline set:html={js} />}

package/dist/components/scripts/PlatformScript/index.ts

@@ -0,0 +1,4 @@
+export {
+  default,
+  type Props as PlatformScriptProps
+} from "./PlatformScript.astro";

package/dist/components/scripts/PlatformScript/platform.ts

@@ -0,0 +1,16 @@
+(() => {
+  const veevaPlatform: 'windows' | 'mac' | 'ipad' | 'unknown' = (() => {
+    const ua = navigator.userAgent;
+    const platform = navigator.platform;
+    if (/windows/i.test(ua)) {
+      return 'windows';
+    } else if (/ipad/i.test(ua) || (platform === 'MacIntel' && navigator.maxTouchPoints > 1) || (/macintosh/i.test(ua) && 'ontouchstart' in window)) {
+      return 'ipad';
+    } else if (/macintosh/i.test(ua) || platform === 'MacIntel') {
+      return 'mac';
+    } else {
+      return 'unknown';
+    }
+  })();
+  document.documentElement.classList.add(`platform-${veevaPlatform}`);
+})();

package/dist/components/scripts/ResizeScript/ResizeScript.astro

@@ -0,0 +1,35 @@
+---
+import esbuild from 'esbuild';
+import { BuildTarget } from '../../../types/env';
+import script from './resize.ts?raw';
+
+export interface Props {
+  buildTarget: BuildTarget,
+  webScaling: boolean,
+  ivaDimensions: {
+    width: number,
+    height: number
+  }
+}
+
+const {
+  buildTarget,
+  webScaling,
+  ivaDimensions
+} = Astro.props;
+
+let js: string | undefined;
+if (buildTarget === 'veeva' || webScaling) {
+  const { code } = await esbuild.transform(script, {
+    loader: 'ts',
+    target: 'es2020',
+    minify: true,
+    define: {
+      IVA_WIDTH: ivaDimensions.width.toString(),
+      IVA_HEIGHT: ivaDimensions.height.toString()
+    }
+  });
+  js = code;
+}
+---
+{js && <script is:inline set:html={js} />}

package/dist/components/scripts/ResizeScript/index.ts

@@ -0,0 +1,4 @@
+export {
+  default,
+  type Props as ResizeScriptProps
+} from "./ResizeScript.astro";

package/dist/components/scripts/ResizeScript/resize.ts

@@ -0,0 +1,50 @@
+(() => {
+  // Backup for CSS scaling for Veeva builds when the current screen size is not configured
+
+  // ----------------------------------------------------------------------------------------------------
+  // These values will be replaced during the build
+  // @ts-ignore
+  const width: number = IVA_WIDTH;
+  // @ts-ignore
+  const height: number = IVA_HEIGHT;
+  // ----------------------------------------------------------------------------------------------------
+
+  const scalingWrapper = document.querySelector('.scaling-wrapper') as HTMLElement;
+
+  function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number = 100) {
+    let timer: ReturnType<typeof setTimeout>;
+    return (...args: Parameters<T>) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => fn(...args), delay);
+    };
+  }
+
+  let lastScale = 0;
+  const resize = () => {
+    const vw = Math.round(visualViewport?.width ?? window.innerWidth);
+    const vh = Math.round(visualViewport?.height ?? window.innerHeight);
+    let transform: string | undefined;
+    const shouldScaleDown = vw < width - 1 || vh < height - 1;
+    if (shouldScaleDown) {
+      const scale = Math.min(vw / width, vh / height);
+      if (scale !== 1 && lastScale !== scale) {
+        lastScale = scale;
+        const offsetX = (vw - width * scale) / 2 / scale;
+        const offsetY = (vh - height * scale) / 2 / scale;
+        transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
+      }
+    } else {
+      transform = 'none';
+    }
+    
+    if (transform) {
+      document.body.classList[transform === 'none' ? 'remove' : 'add']('scaled');
+      scalingWrapper.style.transform = transform;
+    }
+  }
+  
+  resize();
+  window.addEventListener('DOMContentLoaded', () => {
+    window.addEventListener('resize', debounce(resize), { passive: true });
+  }, { passive: true });
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inizioevoke/veeva-astroclm-core",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -12,6 +12,8 @@
   },
   "exports": {
     "./apps": "./dist/apps/index.js",
+    "./PlatformScript": "./dist/components/PlatformScript/index.ts",
+    "./ResizeScript": "./dist/components/ResizeScript/index.ts",
     "./env": "./dist/env/index.js",
     "./integrations": "./dist/integrations/index.js",
     "./lib": {

package/src/components/scripts/PlatformScript/PlatformScript.astro

@@ -0,0 +1,25 @@
+---
+import esbuild from 'esbuild';
+import { BuildTarget } from '../../../types/env';
+
+import script from './platform.ts?raw';
+
+export interface Props {
+  buildTarget: BuildTarget;
+}
+
+const { 
+  buildTarget
+} = Astro.props;
+
+let js: string | undefined;
+if (buildTarget === 'veeva') {
+  const { code } = await esbuild.transform(script, {
+    loader: 'ts',
+    target: 'es2020',
+    minify: true
+  });
+  js = code;
+}
+---
+{js && <script is:inline set:html={js} />}

package/src/components/scripts/PlatformScript/index.ts

@@ -0,0 +1,4 @@
+export {
+  default,
+  type Props as PlatformScriptProps
+} from "./PlatformScript.astro";

package/src/components/scripts/PlatformScript/platform.ts

@@ -0,0 +1,16 @@
+(() => {
+  const veevaPlatform: 'windows' | 'mac' | 'ipad' | 'unknown' = (() => {
+    const ua = navigator.userAgent;
+    const platform = navigator.platform;
+    if (/windows/i.test(ua)) {
+      return 'windows';
+    } else if (/ipad/i.test(ua) || (platform === 'MacIntel' && navigator.maxTouchPoints > 1) || (/macintosh/i.test(ua) && 'ontouchstart' in window)) {
+      return 'ipad';
+    } else if (/macintosh/i.test(ua) || platform === 'MacIntel') {
+      return 'mac';
+    } else {
+      return 'unknown';
+    }
+  })();
+  document.documentElement.classList.add(`platform-${veevaPlatform}`);
+})();

package/src/components/scripts/ResizeScript/ResizeScript.astro

@@ -0,0 +1,35 @@
+---
+import esbuild from 'esbuild';
+import { BuildTarget } from '../../../types/env';
+import script from './resize.ts?raw';
+
+export interface Props {
+  buildTarget: BuildTarget,
+  webScaling: boolean,
+  ivaDimensions: {
+    width: number,
+    height: number
+  }
+}
+
+const {
+  buildTarget,
+  webScaling,
+  ivaDimensions
+} = Astro.props;
+
+let js: string | undefined;
+if (buildTarget === 'veeva' || webScaling) {
+  const { code } = await esbuild.transform(script, {
+    loader: 'ts',
+    target: 'es2020',
+    minify: true,
+    define: {
+      IVA_WIDTH: ivaDimensions.width.toString(),
+      IVA_HEIGHT: ivaDimensions.height.toString()
+    }
+  });
+  js = code;
+}
+---
+{js && <script is:inline set:html={js} />}

package/src/components/scripts/ResizeScript/index.ts

@@ -0,0 +1,4 @@
+export {
+  default,
+  type Props as ResizeScriptProps
+} from "./ResizeScript.astro";

package/src/components/scripts/ResizeScript/resize.ts

@@ -0,0 +1,50 @@
+(() => {
+  // Backup for CSS scaling for Veeva builds when the current screen size is not configured
+
+  // ----------------------------------------------------------------------------------------------------
+  // These values will be replaced during the build
+  // @ts-ignore
+  const width: number = IVA_WIDTH;
+  // @ts-ignore
+  const height: number = IVA_HEIGHT;
+  // ----------------------------------------------------------------------------------------------------
+
+  const scalingWrapper = document.querySelector('.scaling-wrapper') as HTMLElement;
+
+  function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number = 100) {
+    let timer: ReturnType<typeof setTimeout>;
+    return (...args: Parameters<T>) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => fn(...args), delay);
+    };
+  }
+
+  let lastScale = 0;
+  const resize = () => {
+    const vw = Math.round(visualViewport?.width ?? window.innerWidth);
+    const vh = Math.round(visualViewport?.height ?? window.innerHeight);
+    let transform: string | undefined;
+    const shouldScaleDown = vw < width - 1 || vh < height - 1;
+    if (shouldScaleDown) {
+      const scale = Math.min(vw / width, vh / height);
+      if (scale !== 1 && lastScale !== scale) {
+        lastScale = scale;
+        const offsetX = (vw - width * scale) / 2 / scale;
+        const offsetY = (vh - height * scale) / 2 / scale;
+        transform = `scale(${scale}) translate(${offsetX}px, ${offsetY}px)`;
+      }
+    } else {
+      transform = 'none';
+    }
+    
+    if (transform) {
+      document.body.classList[transform === 'none' ? 'remove' : 'add']('scaled');
+      scalingWrapper.style.transform = transform;
+    }
+  }
+  
+  resize();
+  window.addEventListener('DOMContentLoaded', () => {
+    window.addEventListener('resize', debounce(resize), { passive: true });
+  }, { passive: true });
+})();

package/tsconfig.json

@@ -22,6 +22,7 @@
   ],
   "exclude": [
     "./dist",
-    "./node_modules"
+    "./node_modules",
+    "./src/components"
   ]
 }