From 59a891ac8af32323fc6c864049dad9b7ce52ec77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=96nder=20Ceylan?= Date: Mon, 19 Aug 2019 12:30:04 +0200 Subject: [PATCH] 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 --- config/constants.js | 36 +++++++++++++--- helpers/images.js | 12 +++++- helpers/pwa.js | 10 ++++- puppets.js | 103 +++++++++++++++++++++++--------------------- 4 files changed, 103 insertions(+), 58 deletions(-) diff --git a/config/constants.js b/config/constants.js index ca540135..a464e7b3 100644 --- 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 = { `, - APPLE_LAUNCH_SCREEN_META_HTML: (width, height, url, scaleFactor) => `\ - -`, + APPLE_LAUNCH_SCREEN_META_HTML: ( + width, + height, + url, + scaleFactor, + orientation, + ) => { + /* eslint-disable */ + if (orientation === 'portrait') { + return `\ + +`; + } + + // As weird as it gets, Apple expects same device width and height values from portrait orientation, for landscape + return `\ + +`; + /* 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 index 247c5663..8676c935 100644 --- 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 index 5738a2df..1467f11d 100644 --- 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 index 086b7480..9c1b3f78 100644 --- 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) => {