ftcolumnflow - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

package.json

 {
   "name": "ftcolumnflow",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "author": "FT Labs <[e-mail]> (http://labs.ft.com/)",
@@ -5,0 +5,0 @@ "description": "FTColumnflow is a polyfill that fixes the inadequacies of CSS column layouts.",

README.md

@@ -260,5 +260,5 @@ # FTColumnflow [![Build Status](https://travis-ci.org/ftlabs/ftcolumnflow.png?branch=master)](https://travis-ci.org/ftlabs/ftcolumnflow)
 
-		* `attach-page-<n>`
+		* `attach-page-<n|last>`
 
-			Fixed element should appear on page `n`. (Default: attach-page-1).
+			If numeric `n` is specified, fixed element should appear on page `n`. `attach-page-last` will create a new, empty page at the end, after all the fixed and flowed content is rendered. Multiple `attach-page-last` elements will appear on individual pages, in the order of declaration. (Default: attach-page-1).
 
@@ -265,0 +265,0 @@ *	`reflow({});`

src/FTColumnflow.js

@@ -154,2 +154,3 @@ /**
 			pagedContent = [],
+			pagedEndContent = [],
 
@@ -634,10 +635,25 @@ // Counters
 			// Determine the page
-			matches = element.className.match(/(\s|^)attach-page-(\d+)(\s|$)/);
-			if (matches) {
-				pageNum = matches[2] - 1;
+			if (element.classList.contains('attach-page-last')) {
+
+				// Add to a separate store of elements to be added after all the other content is rendered
+				pagedEndContent.push({
+					'fixed': [{
+						content: _outerHTML(element),
+						top:     config.layoutDimensions.colDefaultTop,
+						left:    config.layoutDimensions.colDefaultLeft
+					}]
+				});
+				return;
+
 			} else {
-				pageNum = 0;
+
+				// Look for a numeric page
+				matches = element.className.match(/(\s|^)attach-page-(\d+)(\s|$)/);
+				if (matches) {
+					pageNum = matches[2] - 1;
+				} else {
+					pageNum = 0;
+				}
 			}
 
-
 			// Create any necessary page objects
@@ -812,11 +828,12 @@ _createPageObjects(pageNum);
 			pagedContent      = [];
+			pagedEndContent   = [];
 
-			indexedPageNum =
-				indexedColumnNum =
-				indexedColumnFrag =
+			indexedPageNum         =
+				indexedColumnNum   =
+				indexedColumnFrag  =
 				borderElementIndex =
-				indexedColumnNum =
-				indexedColumnFrag =
+				indexedColumnNum   =
+				indexedColumnFrag  =
 				topElementOverflow =
-				totalColumnHeight = 0;
+				totalColumnHeight  = 0;
 
@@ -1114,3 +1131,20 @@ // Set the maximum column height to a multiple of the lineHeight
 
+			// Add any end pages
+			for (indexedPageNum = 0, page_len = pagedEndContent.length; indexedPageNum < page_len; indexedPageNum++) {
+				pageHTML = '';
+				page     = pagedEndContent[indexedPageNum];
+
+				for (i = 0, l = page.fixed.length; i < l; i++) {
+
+					element = page.fixed[i];
+					element.content = _addClass(element.content, fixedElementClassName);
+					pageHTML += _addStyleRule(element.content, 'top:' + _round(element.top) + 'px;left:' + _round(element.left) + 'px;');
+				}
+
+				// Add the page contents to the HTML string
+				outputHTML += _openPage(pagedContent.length + indexedPageNum) + pageHTML + '</div>';
+			}
+
 			renderArea.innerHTML = outputHTML;
+			page_len = pagedContent.length + pagedEndContent.length;
 
@@ -1121,3 +1155,3 @@ // Set an explicit width on the target - not necessary but will allow adjacent content to flow around the flowed columns normally
 			// Update the instance page counter
-			that.pagedContentCount = pagedContent.length;
+			that.pagedContentCount = page_len;
 		}
@@ -1177,3 +1211,3 @@
 			var delta   = val % config.lineHeight,
-			    resized = (delta ? (val - delta + config.lineHeight) : val);
+				resized = (delta ? (val - delta + config.lineHeight) : val);
 
@@ -1180,0 +1214,0 @@ // If the difference after rounding up is less than the minimum padding, also add one grid line

test/fixedelements-test.js

@@ -281,3 +281,3 @@ /**
 
-	'ShouldShiftAcrossToLeftToFit' : function() {
+	'ShouldShiftAcrossToRightToFit' : function() {
 
@@ -560,26 +560,2 @@ createCf().flow('<div class="height600">height600</div><div class="height600">height600</div><div class="height600">height600</div>', '<div class="fixed anchor-top-left col-span-2-left">fixedContent</div>');
 
-	'ShouldCorrectlyHandleATallVerticallyCenteredElementInCol2' : function() {
-
-		createCf().flow('<div class="height1000">height1000</div>', '<div class="fixed600 anchor-middle-col-2">fixedContent</div>');
-
-		var page    = target.querySelector('.cf-page-1');
-		var fixed   = page.querySelector('.fixed600');
-
-		assert.isNull(target.querySelector('.cf-page-2'));
-
-		assert.match(fixed.offsetTop, 0);
-		assert.match(fixed.offsetLeft, 275);
-
-		assert.isNull(page.querySelector('.cf-column-2'));
-
-		var column1 = page.querySelector('.cf-column-1');
-		var column3 = page.querySelector('.cf-column-3');
-
-		assert.match(column1.offsetTop, 0);
-		assert.match(cssProp(column1.childNodes[0], 'margin-top'), '0px');
-
-		assert.match(column3.offsetTop, 0);
-		assert.match(cssProp(column3.childNodes[0], 'margin-top'), '-600px');
-	},
-
 	'ShouldHandleANormalAndACenteredElementInTheSameColumn' : function() {
@@ -769,4 +745,3 @@
 		assert.match(fixed.style.width, "250px");
-		assert.match(parseInt(cssProp(fixed, 'width')), 250);
-
+		assert.match(parseInt(cssProp(fixed, 'width'), 10), 250);
 	},
@@ -783,4 +758,3 @@
 		assert.match(fixed.style.width, "525px");
-		assert.match(parseInt(cssProp(fixed, 'width')), 525);
-
+		assert.match(parseInt(cssProp(fixed, 'width'), 10), 525);
 	},
@@ -807,4 +781,4 @@
 
-		var page   = target.querySelector('.cf-page-1');
-		var column = page.querySelector('.cf-column');
+		page   = target.querySelector('.cf-page-1');
+		column = page.querySelector('.cf-column');
 
@@ -822,4 +796,4 @@ assert.match(column.offsetTop, 220);
 
-		var page   = target.querySelector('.cf-page-1');
-		var column = page.querySelector('.cf-column');
+		page   = target.querySelector('.cf-page-1');
+		column = page.querySelector('.cf-column');
 
@@ -841,10 +815,52 @@ assert.match(column.offsetTop, 240);
 		assert.match(img.style.height, "100px");
-		assert.match(parseInt(cssProp(img, 'width')), 200);
-		assert.match(parseInt(cssProp(img, 'height')), 100);
+		assert.match(parseInt(cssProp(img, 'width'), 10), 200);
+		assert.match(parseInt(cssProp(img, 'height'), 10), 100);
 	},
 
+	'ShouldAddLastPageElementToFirstPageWhenThereIsNoOtherContent' : function() {
 
+		createCf().flow('', '<div class="fixed attach-page-last">last page content</div>');
 
+		var page1 = target.querySelector('.cf-page-1');
+		var fixed = page1.querySelector('.fixed');
+
+		assert(fixed instanceof HTMLElement);
+		assert.match(fixed.offsetTop, 0);
+	},
+
+	'ShouldAddLastPageElementToLastPageWhenThereIsOtherContent' : function() {
+
+		createCf().flow('<div class="height300">height300</div>', '<div class="fixed attach-page-last">last page content</div><div class="fixed attach-page-2">fixed2</div>');
+
+		var page2 = target.querySelector('.cf-page-2');
+		var page3 = target.querySelector('.cf-page-3');
+
+		var fixedP2   = page2.querySelector('.fixed.attach-page-2');
+		var fixedLast = page3.querySelector('.fixed.attach-page-last');
+
+		assert(fixedLast instanceof HTMLElement);
+		assert.match(fixedLast.offsetTop, 0);
+	},
+
+	'ShouldAddMultipleLastPageElementsInOrder' : function() {
+
+		createCf().flow('<div class="height300">height300</div>', '<div class="fixed attach-page-last attach-page-last-1">last page content</div><div class="fixed attach-page-last attach-page-last-2">last page content</div>');
+
+		var page2 = target.querySelector('.cf-page-2');
+		var page3 = target.querySelector('.cf-page-3');
+
+		var fixedLast1 = page2.querySelector('.attach-page-last-1');
+		var fixedLast2 = page3.querySelector('.attach-page-last-2');
+
+		assert(fixedLast1 instanceof HTMLElement);
+		assert(fixedLast2 instanceof HTMLElement);
+
+		assert.match(fixedLast1.offsetTop, 0);
+		assert.match(fixedLast2.offsetTop, 0);
+	},
+
+
+
 //*/
 
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

185727

increased by1.2%

Lines of code

3218

increased by1.26%

No dependency changes