diff --git a/README.md b/README.md index 93d9996..6aeec03 100644 --- a/README.md +++ b/README.md @@ -114,6 +114,7 @@ Built-in formats: - `'sass'`, `'scss'`: http://sass-lang.com/ - `'css'`: http://www.w3.org/Style/CSS/ - `'prefixed-css'`: A version of `'css'` that generates a smaller stylesheet but requires the use of the `'prefix'` stylesheet option +- `'javascript'`: Creates a file that exports javascrip object with sprites data. #### options.stylesheetOptions Type: `Object` diff --git a/lib/stylesheet/javascript.js b/lib/stylesheet/javascript.js new file mode 100644 index 0000000..135073f --- /dev/null +++ b/lib/stylesheet/javascript.js @@ -0,0 +1,6 @@ +'use strict'; + +var getTemplatedStylesheet = require('./templatedStylesheet'), + path = require('path'); + +module.exports = getTemplatedStylesheet(path.join(__dirname, '/templates/javascript.tpl')); diff --git a/lib/stylesheet/templates/javascript.tpl b/lib/stylesheet/templates/javascript.tpl new file mode 100644 index 0000000..b0dfa5f --- /dev/null +++ b/lib/stylesheet/templates/javascript.tpl @@ -0,0 +1,8 @@ +'use strict'; + +var SPRITES = { + <% layout.images.forEach(function (image, idx) { if (image.className.indexOf('-') >= 0) { %>'<%= image.className %>'<% } else { %><%= image.className %><% } %>: { x: <%= image.x %>, y: <%= image.y %>, width: <%= image.width %>, height: <%= image.height %> }<% if (idx !== layout.images.length - 1) { %>,<% } %> + <% }); %> +}; + +module.exports = SPRITES; \ No newline at end of file diff --git a/test/fixtures/stylesheets/javascript/no-options.js b/test/fixtures/stylesheets/javascript/no-options.js new file mode 100644 index 0000000..8953551 --- /dev/null +++ b/test/fixtures/stylesheets/javascript/no-options.js @@ -0,0 +1,10 @@ +'use strict'; + +var SPRITES = { + foo: { x: 0, y: 0, width: 150, height: 12 }, + bar: { x: 0, y: 12, width: 150, height: 24 }, + test: { x: 0, y: 36, width: 150, height: 12 } + +}; + +module.exports = SPRITES; \ No newline at end of file diff --git a/test/fixtures/stylesheets/javascript/with-nameMapping.js b/test/fixtures/stylesheets/javascript/with-nameMapping.js new file mode 100644 index 0000000..cd2f610 --- /dev/null +++ b/test/fixtures/stylesheets/javascript/with-nameMapping.js @@ -0,0 +1,10 @@ +'use strict'; + +var SPRITES = { + oof: { x: 0, y: 0, width: 150, height: 12 }, + rab: { x: 0, y: 12, width: 150, height: 24 }, + tset: { x: 0, y: 36, width: 150, height: 12 } + +}; + +module.exports = SPRITES; \ No newline at end of file diff --git a/test/fixtures/stylesheets/javascript/with-pixelRatio.js b/test/fixtures/stylesheets/javascript/with-pixelRatio.js new file mode 100644 index 0000000..408098b --- /dev/null +++ b/test/fixtures/stylesheets/javascript/with-pixelRatio.js @@ -0,0 +1,10 @@ +'use strict'; + +var SPRITES = { + foo: { x: 0, y: 0, width: 75, height: 6 }, + bar: { x: 0, y: 6, width: 75, height: 12 }, + test: { x: 0, y: 18, width: 75, height: 6 } + +}; + +module.exports = SPRITES; \ No newline at end of file diff --git a/test/fixtures/stylesheets/javascript/with-prefix.js b/test/fixtures/stylesheets/javascript/with-prefix.js new file mode 100644 index 0000000..1b7f4ac --- /dev/null +++ b/test/fixtures/stylesheets/javascript/with-prefix.js @@ -0,0 +1,10 @@ +'use strict'; + +var SPRITES = { + 'prefix-foo': { x: 0, y: 0, width: 150, height: 12 }, + 'prefix-bar': { x: 0, y: 12, width: 150, height: 24 }, + 'prefix-test': { x: 0, y: 36, width: 150, height: 12 } + +}; + +module.exports = SPRITES; \ No newline at end of file diff --git a/test/fixtures/stylesheets/javascript/with-spritePath.js b/test/fixtures/stylesheets/javascript/with-spritePath.js new file mode 100644 index 0000000..8953551 --- /dev/null +++ b/test/fixtures/stylesheets/javascript/with-spritePath.js @@ -0,0 +1,10 @@ +'use strict'; + +var SPRITES = { + foo: { x: 0, y: 0, width: 150, height: 12 }, + bar: { x: 0, y: 12, width: 150, height: 24 }, + test: { x: 0, y: 36, width: 150, height: 12 } + +}; + +module.exports = SPRITES; \ No newline at end of file diff --git a/test/specs/stylesheet/javascript.js b/test/specs/stylesheet/javascript.js new file mode 100644 index 0000000..7f60adc --- /dev/null +++ b/test/specs/stylesheet/javascript.js @@ -0,0 +1,5 @@ +'use strict'; + +var testTemplatedStylesheet = require('./testTemplatedStylesheet'); + +testTemplatedStylesheet('javascript', 'js');