fix: fixed iPad 12.9" specs being stripped out and added orientation …

…key to the media queries fixed iPad 12.9" specs being stripped out and added orientation key to the media queries fix #18
elegantapp · Aug 19, 2019 · 59a891a · 59a891a
1 parent 6cc6e22
commit 59a891a
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 58 deletions.
diff --git a/config/constants.js b/config/constants.js
@@ -32,6 +32,7 @@ module.exports = {
   APPLE_ICON_FILENAME_PREFIX: 'apple-icon',
   APPLE_SPLASH_FILENAME_PREFIX: 'apple-splash',
   MANIFEST_ICON_FILENAME_PREFIX: 'manifest-icon',
+  APPLE_HIG_SPLASH_SCR_SPECS_DATA_GRID_SELECTOR: 'table tbody tr',
   WAIT_FOR_SELECTOR_TIMEOUT: 1000,
 
   SHELL_HTML_FOR_LOGO: (imgPath, backgroundColor = 'transparent', padding) => `\
@@ -64,13 +65,38 @@ module.exports = {
 <link rel="apple-touch-icon" sizes="${size}x${size}" href="${url}">
 `,
 
-  APPLE_LAUNCH_SCREEN_META_HTML: (width, height, url, scaleFactor) => `\
-<link rel="apple-touch-startup-image" href="${url}" media="(device-width: ${width /
-    scaleFactor}px) and (device-height: ${height /
-    scaleFactor}px) and (-webkit-device-pixel-ratio: ${scaleFactor})">
-`,
+  APPLE_LAUNCH_SCREEN_META_HTML: (
+    width,
+    height,
+    url,
+    scaleFactor,
+    orientation,
+  ) => {
+    /* eslint-disable */
+    if (orientation === 'portrait') {
+      return `\
+<link rel="apple-touch-startup-image"
+    href="${url}"
+    media="(device-width: ${width / scaleFactor}px) and (device-height: ${height / scaleFactor}px) and (-webkit-device-pixel-ratio: ${scaleFactor}) and (orientation: ${orientation})">
+`;
+    }
+
+    // As weird as it gets, Apple expects same device width and height values from portrait orientation, for landscape
+    return `\
+<link rel="apple-touch-startup-image"
+    href="${url}"
+    media="(device-width: ${height / scaleFactor}px) and (device-height: ${width / scaleFactor}px) and (-webkit-device-pixel-ratio: ${scaleFactor}) and (orientation: ${orientation})">
+`;
+    /* eslint-enable */
+  },
 
   APPLE_HIG_SPLASH_SCREEN_FALLBACK_DATA: [
+    {
+      device: '12.9" iPad Pro',
+      portrait: { width: 2048, height: 2732 },
+      landscape: { width: 2732, height: 2048 },
+      scaleFactor: 2,
+    },
     {
       device: '11" iPad Pro',
       portrait: { width: 1668, height: 2388 },

diff --git a/helpers/images.js b/helpers/images.js
@@ -7,13 +7,21 @@ const mapToSqImageFileObj = (fileNamePrefix, size) => ({
   width: size,
   height: size,
   scaleFactor: null,
+  orientation: null,
 });
 
-const mapToImageFileObj = (fileNamePrefix, width, height, scaleFactor) => ({
+const mapToImageFileObj = (
+  fileNamePrefix,
+  width,
+  height,
+  scaleFactor,
+  orientation,
+) => ({
   name: `${fileNamePrefix}-${width}-${height}`,
   width,
   height,
   scaleFactor,
+  orientation,
 });
 
 const getIconImages = () => {
@@ -41,6 +49,7 @@ const getSplashScreenImages = (uniformSplashScreenData, options) => {
                 curr.portrait.width,
                 curr.portrait.height,
                 curr.scaleFactor,
+                'portrait',
               )
             : null,
           !options.portraitOnly
@@ -49,6 +58,7 @@ const getSplashScreenImages = (uniformSplashScreenData, options) => {
                 curr.landscape.width,
                 curr.landscape.height,
                 curr.scaleFactor,
+                'landscape',
               )
             : null,
         ]);

diff --git a/helpers/pwa.js b/helpers/pwa.js
@@ -28,8 +28,14 @@ const generateAppleLaunchImageHtml = savedImages => {
     .filter(image =>
       image.name.startsWith(constants.APPLE_SPLASH_FILENAME_PREFIX),
     )
-    .map(({ width, height, path, scaleFactor }) =>
-      constants.APPLE_LAUNCH_SCREEN_META_HTML(width, height, path, scaleFactor),
+    .map(({ width, height, path, scaleFactor, orientation }) =>
+      constants.APPLE_LAUNCH_SCREEN_META_HTML(
+        width,
+        height,
+        path,
+        scaleFactor,
+        orientation,
+      ),
     )
     .join('');
 };

diff --git a/puppets.js b/puppets.js
@@ -31,10 +31,10 @@ const getAppleSplashScreenData = async browser => {
     throw e;
   }
 
-  const splashScreenData = await page.evaluate(() => {
-    const scrapeSplashScreenDataFromHIGPage = () =>
-      Array.from(document.querySelectorAll('table tr:not(:first-child)')).map(
-        tr => {
+  const splashScreenData = await page.evaluate(
+    ({ selector }) => {
+      const scrapeSplashScreenDataFromHIGPage = () =>
+        Array.from(document.querySelectorAll(selector)).map(tr => {
           return Array.from(tr.querySelectorAll('td')).reduce(
             (acc, curr, index) => {
               const appleLaunchScreenTableColumnOrder = [
@@ -70,10 +70,11 @@ const getAppleSplashScreenData = async browser => {
               landscape: { width: 0, height: 0 },
             },
           );
-        },
-      );
-    return scrapeSplashScreenDataFromHIGPage();
-  });
+        });
+      return scrapeSplashScreenDataFromHIGPage();
+    },
+    { selector: constants.APPLE_HIG_SPLASH_SCR_SPECS_DATA_GRID_SELECTOR },
+  );
 
   if (splashScreenData == null) {
     const err = `Failed scraping the data on web page ${constants.APPLE_HIG_SPLASH_SCR_SPECS_URL}`;
@@ -82,7 +83,6 @@ const getAppleSplashScreenData = async browser => {
   }
 
   logger.log('Retrieved splash screen data');
-  // logger.trace(splashScreenData);
   return splashScreenData;
 };
 
@@ -107,10 +107,10 @@ const getDeviceScaleFactorData = async browser => {
     throw Error(err);
   }
 
-  const scaleFactorData = await page.evaluate(() => {
-    const scrapeScaleFactorDataFromHIGPage = () =>
-      Array.from(document.querySelectorAll('table tr:not(:first-child)')).map(
-        tr => {
+  const scaleFactorData = await page.evaluate(
+    ({ selector }) => {
+      const scrapeScaleFactorDataFromHIGPage = () =>
+        Array.from(document.querySelectorAll(selector)).map(tr => {
           return Array.from(tr.querySelectorAll('td')).reduce(
             (acc, curr, index) => {
               const appleScaleFactorTableColumnOrder = [
@@ -139,10 +139,11 @@ const getDeviceScaleFactorData = async browser => {
             },
             { device: '', scaleFactor: 1 },
           );
-        },
-      );
-    return scrapeScaleFactorDataFromHIGPage();
-  });
+        });
+      return scrapeScaleFactorDataFromHIGPage();
+    },
+    { selector: constants.APPLE_HIG_SPLASH_SCR_SPECS_DATA_GRID_SELECTOR },
+  );
 
   if (scaleFactorData == null) {
     const err = `Failed scraping the data on web page ${constants.APPLE_HIG_DEVICE_SCALE_FACTOR_SPECS_URL}`;
@@ -203,41 +204,43 @@ const saveImages = async (imageList, source, output, options) => {
 
   const address = await url.getAddress(source, options);
 
-  return imageList.map(async ({ name, width, height, scaleFactor }) => {
-    const browser = await puppeteer.launch({
-      headless: true,
-      defaultViewport: {
-        width,
-        height,
-      },
-      args: constants.PUPPETEER_LAUNCH_ARGS,
-    });
-
-    const { type, quality } = options;
-
-    const path = output
-      ? file.getImageSavePath(name, output, type)
-      : file.getDefaultImageSavePath(name, type);
-
-    try {
-      const page = await browser.newPage();
-      await page.goto(address);
-      await page.screenshot({
-        path,
-        omitBackground: !options.opaque,
-        type: options.type,
-        ...(type !== 'png' ? { quality } : {}),
+  return imageList.map(
+    async ({ name, width, height, scaleFactor, orientation }) => {
+      const browser = await puppeteer.launch({
+        headless: true,
+        defaultViewport: {
+          width,
+          height,
+        },
+        args: constants.PUPPETEER_LAUNCH_ARGS,
       });
 
-      logger.success(`Saved image ${name}`);
-      return { name, width, height, scaleFactor, path };
-    } catch (e) {
-      logger.error(e.message);
-      throw Error(`Failed to save image ${name}`);
-    } finally {
-      await browser.close();
-    }
-  });
+      const { type, quality } = options;
+
+      const path = output
+        ? file.getImageSavePath(name, output, type)
+        : file.getDefaultImageSavePath(name, type);
+
+      try {
+        const page = await browser.newPage();
+        await page.goto(address);
+        await page.screenshot({
+          path,
+          omitBackground: !options.opaque,
+          type: options.type,
+          ...(type !== 'png' ? { quality } : {}),
+        });
+
+        logger.success(`Saved image ${name}`);
+        return { name, width, height, scaleFactor, path, orientation };
+      } catch (e) {
+        logger.error(e.message);
+        throw Error(`Failed to save image ${name}`);
+      } finally {
+        await browser.close();
+      }
+    },
+  );
 };
 
 const generateImages = async (source, output, options) => {