feat(cli): added --portrait-only and --landscape-only flags

App used to generate splash screens on both portrait and landscape format. Some PWAs are constrained to be launched in one of portrait or landscape. So, adding this options makes it possible to only generate splash screen images for a specific orientation. fix #4
elegantapp · Aug 15, 2019 · 1fb1ecb · 1fb1ecb
1 parent 20f39e0
commit 1fb1ecb
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -50,19 +50,23 @@ $ pwa-asset-generator --help
     The assets will be saved to the folder where the command is executed if no output-folder provided.
     
   Options
-    -b --background             Page background to use when image source is provided  [default: transparent]
+    -b --background             Page background to use when image source is provided: css value  [default: transparent]
     -o --opaque                 Making screenshots to be saved with a background color  [default: true]
-    -p --padding                Padding to use when image source provided  [default: "10%"]
+    -p --padding                Padding to use when image source provided: css value  [default: "10%"]
     -s --scrape                 Scraping Apple Human Interface Guidelines to fetch splash screen specs  [default: true]
     -m --manifest               Web app manifest file path to automatically update manifest file with the generated images
     -i --index                  Index html file path to automatically put splash screen meta tags in
     -t --type                   Image type: png|jpeg  [default: png]
     -q --quality                Image quality: 0...100 (Only for JPEG)  [default: 100]
-
+    -h --splash-only            Only generate splash screens  [default: false]
+    -c --icon-only              Only generate icons  [default: false]
+    -l --landscape-only         Only generate landscape splash screens  [default: false]
+    -r --portrait-only          Only generate portrait splash screens  [default: false]
+    
   Examples
     $ pwa-asset-generator logo.html .
-    $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png .
-    $ pwa-asset-generator logo.svg ./assets --scrape false
+    $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . -t jpeg -q 90 --splash-only --portrait-only
+    $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only
     $ pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "15%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)"
 
   Flag examples
@@ -72,6 +76,12 @@ $ pwa-asset-generator --help
     --scrape=false
     --manifest=./src/manifest.json
     --index=./src/index.html
+    --type=jpeg
+    --quality=80
+    --splash-only
+    --icon-only
+    --landscape-only
+    --portrait-only
 ```
 
 ## Troubleshooting

diff --git a/cli.js b/cli.js
@@ -23,12 +23,14 @@ const cli = meow(
     -q --quality                Image quality: 0...100 (Only for JPEG)  [default: 100]
     -h --splash-only            Only generate splash screens  [default: false]
     -c --icon-only              Only generate icons  [default: false]
+    -l --landscape-only         Only generate landscape splash screens  [default: false]
+    -r --portrait-only          Only generate portrait splash screens  [default: false]
     
   Examples
     $ pwa-asset-generator logo.html .
-    $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . -t jpeg -q 90
+    $ pwa-asset-generator https://your-cdn-server.com/assets/logo.png . -t jpeg -q 90 --splash-only --portrait-only
     $ pwa-asset-generator logo.svg ./assets --scrape false --icon-only
-    $ pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "10%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)"
+    $ pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "15%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)"
 
   Flag examples
     --background="rgba(255, 255, 255, .5)"
@@ -39,8 +41,10 @@ const cli = meow(
     --index=./src/index.html
     --type=jpeg
     --quality=80
-    --splash-only=true
-    --icon-only=true
+    --splash-only
+    --icon-only
+    --landscape-only
+    --portrait-only
 `,
   {
     flags: {
@@ -92,27 +96,51 @@ const cli = meow(
         alias: 'c',
         default: false,
       },
+      landscapeOnly: {
+        type: 'boolean',
+        alias: 'l',
+        default: false,
+      },
+      portraitOnly: {
+        type: 'boolean',
+        alias: 'r',
+        default: false,
+      },
     },
   },
 );
 
 const source = cli.input[0];
 let output = cli.input[1];
-const options = cli.flags;
+let options = cli.flags;
 const logger = preLogger('cli');
 
+const normalizeOnlyFlagPairs = (flag1Key, flag2Key, opts) => {
+  const stripOnly = key => key.replace('Only', '');
+  if (opts[flag1Key] && opts[flag2Key]) {
+    logger.warn(
+      `Hmm, you want to _only_ generate both ${stripOnly(
+        flag1Key,
+      )} and ${stripOnly(
+        flag2Key,
+      )} set. Ignoring --x-only settings as this is default behavior`,
+    );
+    return {
+      ...opts,
+      [flag1Key]: false,
+      [flag2Key]: false,
+    };
+  }
+  return opts;
+};
+
 if (!source) {
   logger.error('Please specify a URL or file path as a source');
   process.exit(1);
 }
 
-if (options.splashOnly && options.iconOnly) {
-  logger.warn(
-    `Hmm, you wan't to _only_ generate both splash and icon set. Ignoring --x-only settings as this is default behavior`,
-  );
-  options.splashOnly = false;
-  options.iconOnly = false;
-}
+options = normalizeOnlyFlagPairs('splashOnly', 'iconOnly', options);
+options = normalizeOnlyFlagPairs('landscapeOnly', 'portraitOnly', options);
 
 if (!output) {
   output = process.cwd();

diff --git a/helpers/images.js b/helpers/images.js
@@ -30,24 +30,30 @@ const getIconImages = () => {
   );
 };
 
-const getSplashScreenImages = uniformSplashScreenData => {
+const getSplashScreenImages = (uniformSplashScreenData, options) => {
   return uniqWith(
-    uniformSplashScreenData.reduce((acc, curr) => {
-      return acc.concat([
-        mapToImageFileObj(
-          constants.APPLE_SPLASH_FILENAME_PREFIX,
-          curr.portrait.width,
-          curr.portrait.height,
-          curr.scaleFactor,
-        ),
-        mapToImageFileObj(
-          'apple-splash',
-          curr.landscape.width,
-          curr.landscape.height,
-          curr.scaleFactor,
-        ),
-      ]);
-    }, []),
+    uniformSplashScreenData
+      .reduce((acc, curr) => {
+        return acc.concat([
+          !options.landscapeOnly
+            ? mapToImageFileObj(
+                constants.APPLE_SPLASH_FILENAME_PREFIX,
+                curr.portrait.width,
+                curr.portrait.height,
+                curr.scaleFactor,
+              )
+            : null,
+          !options.portraitOnly
+            ? mapToImageFileObj(
+                constants.APPLE_SPLASH_FILENAME_PREFIX,
+                curr.landscape.width,
+                curr.landscape.height,
+                curr.scaleFactor,
+              )
+            : null,
+        ]);
+      }, [])
+      .filter(el => el !== null),
     isEqual,
   );
 };

diff --git a/puppets.js b/puppets.js
@@ -244,7 +244,7 @@ const generateImages = async (source, output, options) => {
   const splashScreenMetaData = await getSplashScreenMetaData(options);
   const allImages = [
     ...(!options.iconOnly
-      ? images.getSplashScreenImages(splashScreenMetaData)
+      ? images.getSplashScreenImages(splashScreenMetaData, options)
       : []),
     ...(!options.splashOnly ? images.getIconImages() : []),
   ];