ftcolumnflow - npm Package Compare versions

Comparing version 0.2.6 to 0.3.0

package.json

 {
   "name": "ftcolumnflow",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "author": "FT Labs <[e-mail]> (http://labs.ft.com/)",
@@ -15,3 +15,3 @@ "description": "FTColumnflow is a polyfill that fixes the inadequacies of CSS column layouts.",
   "scripts": {
-    "test": "node_modules/.bin/buster-test"
+    "test": "./node_modules/.bin/grunt test"
   },
@@ -25,3 +25,7 @@ "keywords": [
   "devDependencies": {
-    "buster": "~0.6.2"
+    "buster": "~0.7",
+    "grunt": "~0.4",
+    "grunt-cli": "~0.1",
+    "grunt-buster": "~0.3",
+    "phantomjs": "~1.9"
   },
@@ -28,0 +32,0 @@ "license": "MIT",

README.md

@@ -177,3 +177,3 @@ # FTColumnflow [![Build Status](https://travis-ci.org/ftlabs/ftcolumnflow.png?branch=master)](https://travis-ci.org/ftlabs/ftcolumnflow)
 
-	If false, FTColumnflow assumes all column content is corrected/padded to conform to a baseline grid (for example, paragraph margins should be a multiple of their line-height value), and determines the grid height from the lineheight of a paragraph. If true, FTColumnflow uses the mode of the first few line-heights found, and adds padding to all other element to conform to the grid. *(Boolean, default false)*
+	If false, FTColumnflow assumes all column content is corrected/padded to conform to a baseline grid (for example, paragraph margins should be a multiple of their line-height value), and determines the grid height from the lineheight of a paragraph. If true, FTColumnflow uses the mode of the first few line-heights found, and adds margin to all other element to conform to the grid. *(Boolean, default false)*
 
@@ -180,0 +180,0 @@ *	`lineHeight: 20`

src/FTColumnflow.js

@@ -900,4 +900,4 @@ /**
 
-			var originalPadding, existingPadding, totalElementHeight,
-				desiredElementHeight, newPadding, overflow, loopCount,
+			var originalMargin, existingMargin, totalElementHeight,
+				desiredElementHeight, newMargin, overflow, loopCount,
 
@@ -909,15 +909,15 @@ nextElement = element.nextSibling;
 
-				originalPadding = parseFloat(element.getAttribute('data-cf-original-padding'), 10) || null;
-				existingPadding = parseFloat(window.getComputedStyle(element).getPropertyValue('padding-bottom'), 10);
+				originalMargin = parseFloat(element.getAttribute('data-cf-original-margin'), 10) || null;
+				existingMargin = parseFloat(window.getComputedStyle(element).getPropertyValue('margin-bottom'), 10);
 
-				if (null === originalPadding) {
-					originalPadding = existingPadding;
-					element.setAttribute('data-cf-original-padding', originalPadding);
+				if (null === originalMargin) {
+					originalMargin = existingMargin;
+					element.setAttribute('data-cf-original-margin', originalMargin);
 				} else {
-					existingPadding = originalPadding;
+					existingMargin = originalMargin;
 				}
 
-				// Return the element to its original padding
-				if (originalPadding !== existingPadding) {
-					element.style.paddingBottom = originalPadding + 'px';
+				// Return the element to its original margin
+				if (originalMargin !== existingMargin) {
+					element.style.marginBottom = originalMargin + 'px';
 				}
@@ -928,6 +928,6 @@
 
-				newPadding = desiredElementHeight - totalElementHeight + existingPadding;
+				newMargin = desiredElementHeight - totalElementHeight + existingMargin;
 
-				if (newPadding !== existingPadding) {
-					element.style.paddingBottom = newPadding + 'px';
+				if (newMargin !== existingMargin) {
+					element.style.marginBottom = newMargin + 'px';
 				}
@@ -934,0 +934,0 @@ }

test/baselinegrid-test.js

@@ -185,3 +185,3 @@ /**
 
-	'ShouldPadElementsWhenConfigured' : function() {
+	'ShouldRoundUpElementMarginsWhenConfigured' : function() {
 
@@ -197,6 +197,3 @@ document.body.className = 'unpadded-parags';
 
-		assert.match(parags[0].offsetHeight, 60);
-		assert.match(parags[1].offsetHeight, 60);
-		assert.match(parags[2].offsetHeight, 60);
-
+		// 53-px parags with a 20px margin, so rounded-up to 80px
 		assert.match(parags[0].offsetTop, 0);
@@ -207,3 +204,3 @@ assert.match(parags[1].offsetTop, 80);
 
-	'ShouldPadElementsIgnoringPlainTextNodes' : function() {
+	'StandardisedLineHeightShouldNotAffectElementHeight' : function() {
 
@@ -214,2 +211,18 @@ document.body.className = 'unpadded-parags';
 			standardiseLineHeight : true,
+		}).flow('<p>Test paragraph</p><p>Test paragraph</p><p>Test paragraph</p>');
+
+		var column = target.querySelector('.cf-column-1');
+		var parags = column.getElementsByTagName('p');
+
+		assert.match(parags[0].offsetHeight, 53);
+		assert.match(parags[1].offsetHeight, 53);
+		assert.match(parags[2].offsetHeight, 53);
+	},
+
+	'ShouldRoundUpElementsIgnoringPlainTextNodes' : function() {
+
+		document.body.className = 'unpadded-parags';
+
+		createCf({
+			standardiseLineHeight : true,
 		}).flow('<p>Test paragraph</p>\n<p>Test paragraph</p>\n<p>Test paragraph</p>');
@@ -220,6 +233,2 @@
 
-		assert.match(parags[0].offsetHeight, 60);
-		assert.match(parags[1].offsetHeight, 60);
-		assert.match(parags[2].offsetHeight, 60);
-
 		assert.match(parags[0].offsetTop, 0);
@@ -226,0 +235,0 @@ assert.match(parags[1].offsetTop, 80);

test/helpers/helpers.js

@@ -17,1 +17,5 @@ var cf, target, viewport;
 }
+
+var assert = buster.assert;
+var refute = buster.refute;
+var expect = buster.expect;

No alert changes

Improved metrics

Total package byte prevSize

186552

increased by0.28%

Number of package files

29

increased by3.57%

Lines of code

3245

increased by0.65%

Worsened metrics

Dev dependency count

5

increased by400%

No dependency changes