Rename rightDown->horizontal, downRight->vertical as in #38

README.md

@@ -2,12 +2,12 @@
 
 > `<juicy-tile-list>` is masonry-like Polymer Element for sortable tiles that packs efficiently without changing HTML structure (changes CSS only).
 
-## Features 
+## Features
 
 It gives you:
- - masonry-like, gap-less layout (bin-packing), 
+ - masonry-like, gap-less layout (bin-packing),
  - layout applied in Shadow DOM - so it doesn't mess with your styles,
- - prioritizing items, 
+ - prioritizing items,
  - grouping into virtual, nested containers,
  - alignment in different orientations/directions,
  - dynamically changing size,
@@ -55,7 +55,7 @@ Attribute                    | Options             | Default      | Description
 `duration`                   | *Number*            | `0.5`        | Duration of repack animation (in seconds).
 `setup`                      | *Object*            |              | Tiles setup
 `setup.gutter`               | *Number*            | `0`          | Gutter/cell-spacing size in px
-`setup.direction`            | *String*            | `rightDown`  | How to align our package (horizontal layers `rightDown`, or vertiaval layers: `downRight`)
+`setup.direction`            | *String*            | `horizontal` | How to align our package (horizontal layers `horizontal`, or vertiacal layers: `vertical`)
 `setup.items`                | *Array*             | `[]`         | Tiles setup
 `setup.items[?].priority`    | *Number* (0-1)      | `0`          | Importance of tile, used for sorting elements.
 `setup.items[?].width`       | *Number*            | `1`          | Tile width (number of columns)
@@ -108,7 +108,7 @@ Name               | Param name | Type               | Default | Description
 ## Events
 
 Name                      | Data | Description
----                       | ---  | ---   
+---                       | ---  | ---
 `juicy-tile-list-refresh` |  -   | Triggered once layout is refreshed
 
 ## Refresh/repack

examples/innerHTML.html

@@ -63,7 +63,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                         // group properties
                         id: "group1", //group id (optional?)
                         gutter: 8,
-                        direction: "downRight",
+                        direction: "vertical",
                         //items property indicates it is a group
                         items: [
 
@@ -74,7 +74,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                                 // group properties
                                 id: "group2", //group id (optional?)
                                 gutter: 4,
-                                direction: "rightDown",
+                                direction: "horizontal",
                                 content: "<div style=\"background: rgba(191, 81, 236, 0.5);width: calc(100% + 2 * 4px ); position:relative; top:-4px; left: -4px; height: calc(100% + 2 * 4px ); text-align: right;\">test</div>",
                                 //items property indicates it is a group
                                 items: [

examples/oversize.html

@@ -60,7 +60,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                         id: "group1", //group id (optional?)
                         gutter: 16,
                         oversize: 12,
-                        direction: "downRight",
+                        direction: "vertical",
                         background: "#BDC3C7",
                         //items property indicates it is a group
                         items: [
@@ -73,7 +73,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                                 id: "group2", //group id (optional?)
                                 gutter: 8,
                                 oversize: 8,
-                                direction: "rightDown",
+                                direction: "horizontal",
                                 background: "#89C4F4",
                                 //items property indicates it is a group
                                 items: [

examples/recursiveGroups.html

@@ -59,7 +59,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                         // group properties
                         id: "group1", //group id (optional?)
                         gutter: 4,
-                        direction: "downRight",
+                        direction: "vertical",
                         //items property indicates it is a group
                         items: [
 
@@ -70,7 +70,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                                 // group properties
                                 id: "group2", //group id (optional?)
                                 gutter: 0,
-                                direction: "rightDown",
+                                direction: "horizontal",
                                 //items property indicates it is a group
                                 items: [
                                     {

examples/recursiveGroupsHeightAuto.html

@@ -64,7 +64,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                         // group properties
                         id: "group1", //group id (optional?)
                         gutter: 4,
-                        direction: "downRight",
+                        direction: "vertical",
                         //items property indicates it is a group
                         items: [
 
@@ -76,7 +76,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                                 // group properties
                                 id: "group2", //group id (optional?)
                                 gutter: 0,
-                                direction: "rightDown",
+                                direction: "horizontal",
                                 //items property indicates it is a group
                                 items: [
                                     {

examples/relativeSize.html

@@ -59,7 +59,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                         // group properties
                         id: "group", //group id (optional?)
                         gutter: 4,
-                        direction: "rightDown",
+                        direction: "horizontal",
                         //items property indicates it is a group
                         items: [
                             {
@@ -75,7 +75,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
                                 // group properties
                                 id: "deeperGroup", //group id (optional?)
                                 gutter: 0,
-                                direction: "downRight",
+                                direction: "vertical",
                                 //items property indicates it is a group
                                 items: [
                                     {

examples/verticalLayers.html

@@ -49,7 +49,7 @@ <h1>&lt;juicy-tile-list&gt;</h1>
         model = {
             setup: {
                 gutter: 8,
-                direction: "downRight",
+                direction: "vertical",
                 items: [
                     // 011
                     // 233

src/juicy-tile-list.html

@@ -299,7 +299,7 @@
         Polymer('juicy-tile-list', Platform.mixin( {}, Package.prototype, {
             // setup: {}, // set in `created` 'constructor'
             // {
-            //   direction: "rightDown",
+            //   direction: "horizontal",
             //   gutter: 8,
             //   items: []
             // },
@@ -553,7 +553,7 @@
               this.tiles = this.updateWrappers(this.elements, this);
             }
             // TODO: support LTR
-            if( this.setup.direction != "downRight"){
+            if( this.setup.direction != "vertical"){
                this.setup.width = this.setup.width || innerWidth(this);
                this.setup.heightAuto = true;
             } else {

src/package.js

@@ -82,7 +82,7 @@ function Package( setup ){
   }else{
     this.setup = {
       id: "root",
-      direction: "rightDown",
+      direction: "horizontal",
       gutter: 0,
       items: []
     };
@@ -93,7 +93,7 @@ Package.prototype.allItems = null;
 Package.prototype.setup = null;
 
 
-Package.prototype.direction = "rightDown";
+Package.prototype.direction = "horizontal";
 
 /**
  * [packItems description]
@@ -115,7 +115,7 @@ Package.prototype.packItems = function packItems( setup ) {
       // TODO: do it more lightweight
       var rect = new Rectangle(itemSetup);
 
-      //first calculate rect width because it cannot be auto TODO: fix for downRight mode
+      //first calculate rect width because it cannot be auto TODO: fix for vertical mode
       if( !rect.widthAuto && typeof rect.width == "string" && rect.width.indexOf("%") > 0 ){
         rect.width = ( (setup.width + gutter) * parseFloat(rect.width) /100  - gutter);
       } else {

src/packer.js

@@ -7,21 +7,21 @@
 "use strict";
 
 /**
- * Packs Rectangles to infinite rectangle (\infty × 
+ * Packs Rectangles to infinite rectangle (\infty ×
  * infty, width × \infty, or height × \infty)
  * @param {Object} [props] packer properties
  * @param {Number} [props.width=0] packer width (in px)
  * @param {Number} [props.height=0] packer height (in px)
  * @param {Number} [props.gutter=0] gutter between items (in px)
- * @param {String} [props.direction="rightDown"] packing direction `"rightDown"|"downRight"`
+ * @param {String} [props.direction="horizontal"] packing direction `"horizontal"|"vertical"`
  * @TODO write tests for `#gutter` (tomalec)
  * @IDEA make it single dimentional, merge width and hegith into single constraint
  */
 function Packer( props /*width, height, direction*/ ){
   for ( var prop in props ) {
     this[ prop ] = props[ prop ];
   }
-  if(this.direction == "rightDown"){
+  if(this.direction == "horizontal"){
     this.height = Number.POSITIVE_INFINITY;
   } else {
     this.width = Number.POSITIVE_INFINITY;
@@ -31,7 +31,7 @@ function Packer( props /*width, height, direction*/ ){
 Packer.prototype.width = Number.POSITIVE_INFINITY;
 Packer.prototype.height = Number.POSITIVE_INFINITY;
 Packer.prototype.gutter = 0;
-Packer.prototype.direction = "rightDown";
+Packer.prototype.direction = "horizontal";
 Packer.prototype.minWidth = 0;
 Packer.prototype.minHeight = 0;
 
@@ -50,7 +50,7 @@ Packer.prototype.reset = function() {
   this.slots.push( initialSlot );
 
   // set sorter
-  this.sorter = sorters[ this.direction ] || sorters.rightDown;
+  this.sorter = sorters[ this.direction ] || sorters.horizontal;
 };
 
 /**
@@ -77,7 +77,7 @@ Packer.prototype.add = function( rectangle ) {
   }
   return this;
 };
-/** 
+/**
  * Place element at specyfic slot
  * @param  {Rectangle} rectangle  [description]
  * @param  {Rectangle | Object} slot slot to place, or at least object with position
@@ -112,10 +112,10 @@ Packer.prototype.placed = function( rectangle ) {
   for ( var i=0, len = this.slots.length; i < len; i++ ) {
     var slot = this.slots[i];
     var newSlots = slot.getSlotsAround( rectangle );
-    if ( newSlots ) { 
+    if ( newSlots ) {
       // slot intersects with rectangle, add all slots around
       revisedSlots.push.apply( revisedSlots, newSlots );
-    } else { 
+    } else {
       // this slot does not intersect with one to add
       revisedSlots.push( slot );
     }
@@ -171,11 +171,11 @@ Packer.cleanRedundant = function( rectangles ) {
 
 var sorters = {
   // align in horizontal layers RTL
-  rightDown: function( a, b ) {
+  horizontal: function( a, b ) {
     return a.y - b.y || a.x - b.x;
   },
   // align in vertical layers UTB
-  downRight: function( a, b ) {
+  vertical: function( a, b ) {
     return a.x - b.x || a.y - b.y;
   }
 };
@@ -184,4 +184,4 @@ var sorters = {
 // TODO: export
 scope.Packer = Packer;
 
-}(window));
+}(window));

tests/packageSpec.js

@@ -476,7 +476,7 @@ describe('Package', function() {
           gutter: 5,
           priority: 0.7, // 0.3,
           height: 100,
-          direction: "downRight",
+          direction: "vertical",
           widthAuto: true,
           items: [{
             id: 0,

tests/packerSpec.js

@@ -9,18 +9,18 @@ describe('Packer', function() {
 
 
     describe("when created", function() {
-      it("with default (`rightDown`) direction, makes itself infinitely tall, regardless of `height` given", function(){
+      it("with default (`horizontal`) direction, makes itself infinitely tall, regardless of `height` given", function(){
         var pkr = new Packer({
           width: 3,
           height: 10
         });
         assert.strictEqual( pkr.height, Number.POSITIVE_INFINITY);
       });
-      it("with `downRight` direction, makes itself infinitely wide, regardless of `width` given", function(){
+      it("with `vertical` direction, makes itself infinitely wide, regardless of `width` given", function(){
         var pkr = new Packer({
           width: 3,
           height: 10,
-          direction: "downRight"
+          direction: "vertical"
         });
         assert.strictEqual( pkr.width, Number.POSITIVE_INFINITY);
       });
@@ -153,10 +153,10 @@ describe('Packer', function() {
 
         });
       });
-      describe("with `direction: 'downRight'`", function() {
+      describe("with `direction: 'vertical'`", function() {
         var pkr = new Packer({
           height: 3,
-          direction: 'downRight'
+          direction: 'vertical'
         });
 
         // 153xx