fix(less): pixel pattern element size match to appearance, closes #1

.gitignore

@@ -26,3 +26,4 @@ node_modules
 
 # Users Environment Variables
 .lock-wscript
+bower_components

.travis.yml

@@ -0,0 +1,8 @@
+language: nodejs
+before_script:
+- npm install
+- npm install -g grunt-cli
+- npm install -g bower
+- bower install
+script:
+- npm test

Gruntfile.js

@@ -19,10 +19,49 @@ module.exports = function(grunt) {
             }
         },
 
+        connect: {
+            test : {
+                port : 8000
+            }
+        },
+
         changelog: {
             options: {}
         },
 
+        jasmine: {
+            options: {
+                src: 'src/**/*.js',
+                specs: 'spec/**/*.spec.js',
+                helpers: 'spec/helpers/*.js',
+                host: 'http://127.0.0.1:8000/',
+            },
+
+            'less-1.6.0': {
+                options: {
+                    vendor: [
+                        'bower_components/less-1.7.5/dist/less-1.6.0.js'
+                    ]
+                }
+            },
+
+            'less-1.7.5':{
+                options: {
+                    vendor: [
+                        'bower_components/less-1.7.5/dist/less-1.7.5.js'
+                    ]
+                }
+            },
+
+            'less-2.0.0':{
+                options: {
+                    vendor: [
+                        'bower_components/less-2.0.0/dist/less.js'
+                    ]
+                }
+            }
+        },
+
         less: {
             development: {
                 files: {
@@ -42,7 +81,7 @@ module.exports = function(grunt) {
 
         push: {
             options: {
-                files: ['package.json'],
+                files: ['package.json', 'bower.json'],
                 updateConfigs: ['pkg'],
                 add: true,
                 addFiles: ['.'],
@@ -65,6 +104,11 @@ module.exports = function(grunt) {
     require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
     require('./tasks/marked_material.js')(grunt);
 
+    grunt.registerTask('test', [
+        'connect',
+        'jasmine'
+    ]);
+
     grunt.registerTask('build-docs', [
         'less',
         'marked-material'

README.md

@@ -2,6 +2,17 @@
 
 > Utility created to ease maintenance of pixel pattern figures
 
+## Requirements/support
+
+Less v1.6.0+
+
+Tested and works in browsers:
+- Chrome
+- Safari 5+
+- Firefox
+- Opera
+- IE9+
+
 ## Install
 
 Copy src folder to your project.

bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "pixel-pattern-generator",
+  "version": "0.0.2",
+  "homepage": "https://ertrzyiks.github.io/pixel-pattern-generator",
+  "authors": [
+    "Mateusz Derks <mateusz.derks@gmail.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "spec",
+    "docs",
+    "tasks"
+  ],
+  "devDependencies": {
+    "less-1.7.5": "less#1.7.5",
+    "less-2.0.0": "less#2.0.0"
+  }
+}

docs/app/templates/example.html

@@ -1,5 +1,5 @@
-<div style="height: 400px" layout>
-    <div style="width: 400px;" class="pixel-pattern sch-pixel-pattern">
+<div layout>
+    <div layout-margin class="pixel-pattern sch-pixel-pattern">
         <div class="pixel-pattern-pixel"></div>
     </div>
 

docs/app/templates/home.html

@@ -1,6 +1,13 @@
 <md-whiteframe class="md-whiteframe-z1" layout="column" layout-margin><md-toolbar><h2 class="md-toolbar-tools">Pixel pattern</h2></md-toolbar><blockquote>
 <p flex>Utility created to ease maintenance of pixel pattern figures</p></blockquote>
-<md-toolbar class="docs-toolbar"><h2 class="md-toolbar-tools">Install</h2></md-toolbar><p flex>Copy src folder to your project.</p><md-toolbar class="docs-toolbar"><h2 class="md-toolbar-tools">Usage</h2></md-toolbar><p flex>Use mixin to set size of pixel and assing color to chosen coordinates</p><div flex><pre><code class="lang-less"><span class="hljs-class">.pixelart-myawesomesquare</span>{
+<md-toolbar class="docs-toolbar"><h2 class="md-toolbar-tools">Requirements/support</h2></md-toolbar><p flex>Less v1.6.0+</p><p flex>Tested and works in browsers:</p><ul>
+<li>Chrome</li>
+<li>Safari 5+</li>
+<li>Firefox</li>
+<li>Opera</li>
+<li>IE9+</li>
+</ul>
+<md-toolbar class="docs-toolbar"><h2 class="md-toolbar-tools">Install</h2></md-toolbar><p flex>Copy src folder to your project.</p><md-toolbar class="docs-toolbar"><h2 class="md-toolbar-tools">Usage</h2></md-toolbar><p flex>Use mixin to set size of pixel and assing color to chosen coordinates</p><div layout-margin><pre><code class="lang-less"><span class="hljs-class">.pixelart-myawesomesquare</span>{
   <span class="hljs-class">.pixel-pattern-size</span>(<span class="hljs-number">50px</span>);
 
   <span class="hljs-class">.pixel-pattern</span>(

docs/css/sch-pixel-pattern.css

@@ -1,5 +1,7 @@
 .sch-pixel-pattern {
   font-size: 25px;
+  width: 6em;
+  height: 7em;
 }
 .sch-pixel-pattern .pixel-pattern-pixel {
   display: block;

package.json

@@ -10,15 +10,17 @@
     "type": "git",
     "url": "https://github.com/ertrzyiks/pixel-pattern-generator.git"
   },
-  "author": "ertrzyiks <mateusz.derks@gmail.com>",
+  "author": "Mateusz Derks <mateusz.derks@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/ertrzyiks/pixel-pattern-generator/issues"
   },
-  "homepage": "https://github.com/ertrzyiks/pixel-pattern-generator",
+  "homepage": "https://ertrzyiks.github.io/pixel-pattern-generator",
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-build-control": "^0.2.2",
+    "grunt-contrib-connect": "^0.9.0",
+    "grunt-contrib-jasmine": "^0.8.1",
     "grunt-contrib-less": "^0.12.0",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-conventional-changelog": "^1.1.0",

spec/helpers/less.render.js

@@ -0,0 +1,44 @@
+function loadFile(url, done) {
+    var xhr = new XMLHttpRequest();
+
+    xhr.onload = function(){
+        return done(null, this.responseText);
+    };
+
+    xhr.onerror = function(err){
+        return done(err, this.responseText);
+    };
+
+    xhr.open("GET", url, true);
+    xhr.send();
+}
+
+function renderLess(code, done) {
+    var parser;
+
+    if ('function' === typeof less.render) {
+        less
+            .render(code)
+            .then(function (result) {
+                done(null, result.css);
+            })
+            .catch(function (err) {
+                done(err);
+            });
+    } else {
+        parser = new (less.Parser);
+        parser.parse(code, function (e, tree) {
+            if (e) {
+                return done(e);
+            }
+
+            done(null, tree.toCSS());
+        });
+    }
+}
+
+function renderLessWithLibrary(code, done) {
+    loadFile('src/less/pixel-pattern.less', function (err, libcode) {
+        renderLess(libcode + '\n' + code, done);
+    });
+}

spec/less/pixel-pattern.spec.js

@@ -0,0 +1,56 @@
+describe('Pixel Pattern Generator', function () {
+    describe('pixel-pattern-set-pixel', function () {
+        it('should render 0,0 pixel background color', function (done) {
+            renderLessWithLibrary('.mypixel{ .pixel-pattern-set-pixel(0, 0, #ff0000); }', function (err, css) {
+                expect(err).toBe(null);
+                expect(css).toContain('background-color: #ff0000;');
+                done();
+            });
+        });
+
+        it('should render other pixels as shadow', function (done) {
+            renderLessWithLibrary('.mypixel{ .pixel-pattern-set-pixel(1, 0, #ff0000); }', function (err, css) {
+                expect(err).toBe(null);
+                expect(css).toContain('0em 1em #ff0000');
+                done();
+            });
+        });
+    });
+
+    describe('pixel-pattern', function () {
+        it('should render all pixels', function (done) {
+            renderLessWithLibrary('.mypixel{ .pixel-pattern(1 0 #ff0000, 0 1 #00ff00); }', function (err, css) {
+                expect(err).toBe(null);
+                expect(css).toContain('0em 1em #ff0000, 1em 0em #00ff00;');
+                done();
+            });
+        });
+
+        it('should force container width to contain all pixels', function (done) {
+            renderLessWithLibrary('.mypixel{ .pixel-pattern(0 10 #ff0000, 15 0 #00ff00); }', function (err, css) {
+                expect(err).toBe(null);
+                expect(css).toContain('width: 11em;');
+                expect(css).toContain('height: 16em;');
+                done();
+            });
+        });
+    });
+
+    describe('pixel-pattern-size', function () {
+        it('should set font size in pixels', function (done) {
+            renderLessWithLibrary('.mypixel{ .pixel-pattern-size(25px); }', function (err, css) {
+                expect(err).toBe(null);
+                expect(css).toContain('font-size: 25px;')
+                done();
+            });
+        });
+
+        it('should set font size in ems', function (done) {
+            renderLessWithLibrary('.mypixel{ .pixel-pattern-size(2em); }', function (err, css) {
+                expect(err).toBe(null);
+                expect(css).toContain('font-size: 2em;');
+                done();
+            });
+        });
+    });
+});

src/less/pixel-pattern.less

@@ -1,22 +1,8 @@
 .pixel-pattern(@pixels...) {
-  //https://github.com/seven-phases-max/less.curious/blob/master/src/for.less
-  .for(@array)   when (default()) {.for-impl_(length(@array))}
-  .for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
-  .for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}
+  .pixel-pattern-util_();
 
-  .set-pixel(@row, @col, @color) when (@row = 0) and (@col = 0) {
-    background-color: @color;
-  }
-
-  .set-pixel(@row, @col, @color) when (default()) {
-    .box-shadow(@col * 1em @row * 1em @color);
-  }
-
-  .box-shadow(@shadow) {
-    -webkit-box-shadow+: @shadow;
-    -moz-box-shadow+: @shadow;
-    box-shadow+: @shadow;
-  }
+  .set-width(@pixels);
+  .set-height(@pixels);
 
   & .pixel-pattern-pixel{
     display: block;
@@ -28,11 +14,82 @@
       @col: extract(@pixel, 2);
       @color: extract(@pixel, 3);
 
-      .set-pixel(@row, @col, @color);
+      .pixel-pattern-set-pixel(@row, @col, @color);
     }
   }
 }
 
+.pixel-pattern-set-pixel(@row, @col, @color) when (@row = 0) and (@col = 0) {
+  background-color: @color;
+}
+
+.pixel-pattern-set-pixel(@row, @col, @color) when (default()) {
+  .box-shadow(@shadow) {
+    -webkit-box-shadow+: @shadow;
+    -moz-box-shadow+: @shadow;
+    box-shadow+: @shadow;
+  }
+
+  .box-shadow(@col * 1em @row * 1em @color);
+}
+
 .pixel-pattern-size(@size){
   font-size: @size;
 }
+
+
+.pixel-pattern-util_(){
+  .pixel-pattern-util_for_();
+  .pixel-pattern-util_set_width_();
+  .pixel-pattern-util_set_height_();
+}
+
+//Foreach sugar syntax
+//https://github.com/seven-phases-max/less.curious/blob/master/src/for.less
+.pixel-pattern-util_for_(){
+  .for(@array)   when (default()) {.for-impl_(length(@array))}
+  .for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
+  .for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}
+}
+
+//Set width to max from pixel array
+.pixel-pattern-util_set_width_(){
+  .set-width(@pixels, @currentWidth, @n) when (@n = 0) {
+    width: (@currentWidth + 1) * 1em;
+  }
+
+  .set-width(@pixels, @currentWidth: 0, @n:length(@pixels)) when (@n > 0) {
+    @pixel: extract(@pixels, @n);
+
+    .set-width-impl_(@pixels, @currentWidth, extract(@pixel, 2), @n);
+  }
+
+  .set-width-impl_(@pixels, @w, @newWidth, @n) when (@w >= @newWidth) {
+    .set-width(@pixels, @w, @n - 1);
+  }
+
+  .set-width-impl_(@pixels, @w, @newWidth, @n) when (@w < @newWidth) {
+    .set-width(@pixels, @newWidth, @n - 1);
+  }
+}
+
+//Set height to max from pixel array
+.pixel-pattern-util_set_height_() {
+  .set-height(@pixels, @currentHeight, @n) when (@n = 0) {
+    height: (@currentHeight + 1) * 1em;
+  }
+
+  .set-height(@pixels, @currentHeight: 0, @n:length(@pixels)) when (@n > 0) {
+    @pixel: extract(@pixels, @n);
+
+    .set-height-impl_(@pixels, @currentHeight, extract(@pixel, 1), @n);
+  }
+
+  .set-height-impl_(@pixels, @w, @newHeight, @n) when (@w >= @newHeight) {
+    .set-height(@pixels, @w, @n - 1);
+  }
+
+  .set-height-impl_(@pixels, @w, @newHeight, @n) when (@w < @newHeight) {
+    .set-height(@pixels, @newHeight, @n - 1);
+  }
+}