Simpler config: single target dir instead or many paths

README.md

@@ -42,20 +42,16 @@ Second, include it in your source code with the emoji metadata:
     const generate = require('openmoji-spritemap-generator')
     const mojis = require('openmoji.json')
 
-Third, provide configuration object. You need to specify the path to the unzipped emoji directory and target paths for the generated files. See the API docs further below for details.
+Third, provide configuration object. You need to specify the path to the unzipped emoji directory and target directory for the generated files. See the API docs further below for details.
 
     generate({
+      name: 'animals-nature',
       emojis: mojis.filter(moji => moji.group === 'animals-nature'),
       emojiDir: 'openmoji-72x72-color',
-      targetImagePath: 'target/animals-nature.png',
-      targetHtmlPath: 'target/animals-nature.html',
-      targetJsonPath: 'target/animals-nature.json',
-      targetCssPath: 'target/animals-nature.css',
+      targetDir: 'target',
       emojiSize: 72,
       columns: 10,
-      rows: 16,
-      backgroundColor: '#FFFFFF00',
-      name: 'animals-nature'
+      backgroundColor: '#FFFFFF00'
     }, (err) => {
       if (err) { throw err }
       console.log('Spritemap generated!')
@@ -94,21 +90,16 @@ Generates a sprite sheet image, a CSS sheet, a sprite data JSON, and an image ma
 
 The configuration object `config` can take following options.
 
+- name: A string. A unique name for this emoji set. Affects file prefixes, html classes, and console output.
 - emojis: An array of emoji objects originating from openmoji.json. The order defines the order in the output.
-- name: A string. A unique name for this emoji set. Affects html classes and console output.
-- emojiDir: A directory path to emoji images, downloaded from OpenMoji.
-- targetImagePath: A file path where to save the sheet image. If emojiDir contains SVG images, then use the extension `.svg` and if PNG then `.png`.
-- targetHtmlPath: A file path where to save the image map HTML snippet.
-- targetJsonPath: A file path where to save the map data JSON.
-- targetCssPath: A file path where to save the sprite CSS.
+- mode: Either 'png' or 'svg'. Do we merge PNG or SVG images. Default is 'png'.
+- emojiDir: A directory path to emoji images, either PNG or SVG downloaded from OpenMoji.
+- targetDir: A directory path where to save the generated files.
 - emojiSize: An integer. The pixel width (=height) of emojis in emojiDir. Default is `72`.
 - columns: An integer. How many emojis to place on a single sprite sheet row. Default is `10`.
-- rows: An integer. How many rows of emojis.
 - backgroundColor: A string, parsed by [color](https://www.npmjs.com/package/color). Transparent by default.
 
 Additional notes:
-- If `emojis` provide less emojis than what could fit the columns and rows, then the remaining places are filled with the background color.
-- If `emojis` provide more emojis than what could fit the columns and rows, then the extra emojis are left out and not rendered.
 - Resizing emojis is not currently supported. You must resize the emojis beforehand and provide matching `emojiSize`.
 
 ## Known problems

index.js

@@ -22,27 +22,28 @@ module.exports = (config, callback) => {
     // Source of emoji images, named by hexcode
     emojiDir: path.resolve(__dirname, 'openmoji-72x72-color'),
     // Where to store the resulting spritemap
-    targetImagePath: path.resolve(__dirname, 'emojis.png'),
-    // Where to store the resulting image map html
-    targetHtmlPath: path.resolve(__dirname, 'emojis.html'),
-    // Where to store the resulting map data json (for custom usage)
-    targetJsonPath: path.resolve(__dirname, 'emojis.json'),
-    // Where to store the resulting css sprite sheet
-    targetCssPath: path.resolve(__dirname, 'emojis.css'),
+    targetDir: __dirname,
+    // Unique name for this emoji set.
+    // Generated are prefixed with this name.
+    // Affects also console output and html classes.
+    name: 'default-group',
     // Pixel width=height of emoji on the spritemap
     emojiSize: 72,
-    // Dimensions of the spritemap
+    // Number of emojis on a row. Height is determined from the given emojis.
     columns: 10,
-    rows: 16,
     // Background color. Transparent by default.
-    backgroundColor: '#FFFFFF00',
-    // Unique name for this emoji set. Affects console output and html classes.
-    name: 'default-group'
+    backgroundColor: '#FFFFFF00'
   }, config)
 
-  // Compatible with upper case mode
+  // Compatible with upper case mode, e.g. 'SVG' or 'Png'
   config.mode = config.mode.toLowerCase()
 
+  // Determine the number of rows needed.
+  config.rows = Math.ceil(config.emojis.length / config.columns)
+
+  // Build non-existing base path where to append tags and file extension.
+  config.basePath = path.resolve(config.targetDir, config.name)
+
   // All given emojis.
   const fullGroup = config.emojis
 
@@ -66,12 +67,8 @@ module.exports = (config, callback) => {
     }
   })
 
-  // Limit the number of emojis to fit the spritemap dimensions.
-  // Too many emojis cause sharp to stack extra emojis in messy manner.
-  const limitedGroup = accessableGroup.slice(0, config.columns * config.rows)
-
   // Convert emojis to a sharp composition.
-  const composition = limitedGroup.map((pmoji, i) => {
+  const composition = accessableGroup.map((pmoji, i) => {
     return {
       moji: pmoji.moji, // Original emoji data for image map generation.
       input: pmoji.input,
@@ -114,12 +111,12 @@ module.exports = (config, callback) => {
       // CSS for SVG is created by svg-sprite in the composer.
       console.log('Generating CSS sprite sheet...')
       const outputCss = styleMap(composition, {
-        imageUrl: path.basename(config.targetImagePath),
+        imageUrl: config.name + '.png',
         emojiSize: config.emojiSize
       })
 
       try {
-        fs.writeFileSync(config.targetCssPath, outputCss)
+        fs.writeFileSync(config.basePath + '.css', outputCss)
       } catch (errw) {
         return callback(errw)
       }
@@ -128,15 +125,13 @@ module.exports = (config, callback) => {
     // Generate css sprite sheet sample html
     console.log('Generating CSS sprite sheet sample HTML...')
     const outputCssHtml = styleHtmlMap(composition, {
-      cssSrc: path.basename(config.targetCssPath)
+      cssSrc: config.name + '.css'
     })
 
     try {
-      fs.writeFileSync(config.targetHtmlPath, outputHtml)
-      fs.writeFileSync(config.targetJsonPath, outputJson)
-
-      const cssHtmlPath = config.targetCssPath.replace(/\.css$/, '-css.html')
-      fs.writeFileSync(cssHtmlPath, outputCssHtml)
+      fs.writeFileSync(config.basePath + '.html', outputHtml)
+      fs.writeFileSync(config.basePath + '.json', outputJson)
+      fs.writeFileSync(config.basePath + '-css.html', outputCssHtml)
     } catch (errw) {
       return callback(errw)
     }

lib/composePng.js

@@ -16,7 +16,7 @@ module.exports = (composition, config, callback) => {
       background: config.backgroundColor
     }
   }).composite(composition)
-    .toFile(config.targetImagePath, (err, info) => {
+    .toFile(config.basePath + '.png', (err, info) => {
       return callback(err, info)
     })
 }

lib/composeSvg.js

@@ -14,7 +14,7 @@ module.exports = (composition, config, callback) => {
 
   // See https://github.com/jkphl/svg-sprite
   const svgConfig = {
-    dest: path.dirname(config.targetImagePath),
+    dest: config.targetDir,
     log: null,
     shape: {
       id: {
@@ -35,15 +35,15 @@ module.exports = (composition, config, callback) => {
     mode: {
       css: {
         dest: '.', // put to target dir
-        sprite: path.basename(config.targetImagePath),
+        sprite: config.name + '.svg', // output sprite filename
         bust: false,
         layout: 'packed',
         common: 'openmoji',
         prefix: '.openmoji-%s',
         dimensions: true,
         render: {
           css: {
-            dest: path.basename(config.targetCssPath)
+            dest: config.basePath + '.css'
           }
         }
       },

lib/htmlIndex.js

@@ -1,11 +1,18 @@
 const htmlBoiler = require('./htmlBoiler')
 
-module.exports = (groups) => {
+module.exports = (groups, opts) => {
+  // Generate html index page to browse the sprite sheets.
+
+  // Defaults
+  opts = Object.assign({}, {
+    mode: 'png'
+  }, opts)
+
   let body = '<div>\n'
   body += '<h1>Generated Sprite Sheets</h1>\n'
 
   const fileLabels = [
-    'Merged image: ',
+    'Merged ' + opts.mode.toUpperCase() + ' image: ',
     'HTML image map: ',
     'CSS sprite sheet: ',
     'CSS sprite example: ',
@@ -15,7 +22,7 @@ module.exports = (groups) => {
   body += Object.keys(groups).reduce((acc, groupName) => {
     const header = '<h2>' + groupName + '</h2>\n'
     const files = [
-      groupName + '.png',
+      groupName + '.' + opts.mode,
       groupName + '.html',
       groupName + '.css',
       groupName + '-css.html',

run.js

@@ -3,7 +3,7 @@
 //
 const mojis = require('./openmoji.json')
 const asyn = require('async')
-const merge = require('./index')
+const generate = require('./index')
 const generateIndex = require('./lib/htmlIndex')
 const path = require('path')
 const fs = require('fs')
@@ -23,21 +23,23 @@ const mojiGroups = shortMojis.reduce((acc, moji) => {
   return acc
 }, {})
 
+// Limit all groups to 8 * 16 emojis to avoid bus error 10.
+Object.keys(mojiGroups).forEach(groupName => {
+  mojiGroups[groupName] = mojiGroups[groupName].slice(0, 128)
+})
+
 // For each group, run sheet generator.
 // Sheet generation is asynchronous operation, thus @caolan/async is used.
 asyn.eachSeries(Object.keys(mojiGroups), (groupName, next) => {
   const mojiGroup = mojiGroups[groupName]
-  merge({
+  generate({
+    mode: 'png',
+    name: groupName,
     emojis: mojiGroup,
     emojiDir: path.join(__dirname, 'openmoji-72x72-color'),
-    targetImagePath: path.join(__dirname, 'target', groupName + '.png'),
-    targetHtmlPath: path.join(__dirname, 'target', groupName + '.html'),
-    targetJsonPath: path.join(__dirname, 'target', groupName + '.json'),
-    targetCssPath: path.join(__dirname, 'target', groupName + '.css'),
+    targetDir: path.join(__dirname, 'target'),
     emojiSize: 72,
-    columns: 10,
-    rows: 16,
-    name: groupName
+    columns: 8
   }, next)
 }, (err) => {
   if (err) {
@@ -46,7 +48,9 @@ asyn.eachSeries(Object.keys(mojiGroups), (groupName, next) => {
   }
 
   // Generate an index page to browse the generated sheets.
-  const indexHtml = generateIndex(mojiGroups)
+  const indexHtml = generateIndex(mojiGroups, {
+    mode: 'png'
+  })
   const indexPath = path.join(__dirname, 'target', 'index.html')
   fs.writeFileSync(indexPath, indexHtml)