paginate-for-print - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

bower.json

 {
   "name": "paginate-for-print",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "homepage": "https://github.com/paginate-for-print",
@@ -5,0 +5,0 @@ "authors": [

dist/cut-content.js

@@ -6,5 +6,8 @@ "use strict";
 });
+exports.ContentCutter = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+var _getBoundingClientRect = require("./get-bounding-client-rect");
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -35,23 +38,45 @@
             contentHeight = contents.parentElement.clientHeight - contents.previousSibling.clientHeight - contents.nextSibling.clientHeight,
+                contentWidth = contents.parentElement.clientWidth,
                 boundingRect = void 0,
-                bottom = void 0;
+                rightCutOff = void 0;
 
+            // set height to contentHeight
+            contents.style.height = contentHeight + "px";
+
+            if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+                // Firefox has some insane bug which means that the new content height
+                // isn't applied immediately when dealing with multicol -- unless one
+                // removes the content and re-adds it.
+                var nSib = contents.nextSibling;
+                var pEl = contents.parentElement;
+                pEl.removeChild(contents);
+                pEl.insertBefore(contents, nSib);
+            }
+
             // Set height temporarily to "auto" so the page flows beyond where
-            // it should end and we can ginf the page break.
-            contents.style.height = "auto";
+            // it should end and we can find the page break.
+            contents.style.width = contentWidth * 2 + 100 + 'px';
+            contents.style.columnWidth = contentWidth + 'px';
+            contents.style.columnGap = '100px';
+            contents.style.columnFill = 'auto';
+
+            contents.style.MozColumnWidth = contentWidth + 'px';
+            contents.style.MozColumnGap = '100px';
+            contents.style.MozColumnFill = 'auto';
+
             boundingRect = contents.getBoundingClientRect();
-            bottom = boundingRect.top + contentHeight;
+            rightCutOff = boundingRect.left + contentWidth + 20;
 
             manualPageBreak = contents.querySelector(this.config['pagebreakSelector']);
 
-            if (manualPageBreak && manualPageBreak.getBoundingClientRect().top < bottom) {
+            if (manualPageBreak && manualPageBreak.getBoundingClientRect().left < rightCutOff) {
                 range = document.createRange();
                 range.setStartBefore(manualPageBreak);
-            } else if (boundingRect.bottom <= bottom) {
-                contents.style.height = contentHeight + "px";
+            } else if (boundingRect.right <= rightCutOff) {
+                contents.style.width = contentWidth + "px";
                 return false;
             } else {
-                pageBreak = this.findPageBreak(contents, bottom);
+                pageBreak = this.findPageBreak(contents, rightCutOff);
                 if (!pageBreak) {
-                    contents.style.height = contentHeight + "px";
+                    contents.style.width = contentWidth + "px";
                     return false;
@@ -62,4 +87,4 @@ }
             }
-            // Set height to contentHeight
-            contents.style.height = contentHeight + "px";
+
+            contents.style.width = contentWidth + "px";
             // We find that the first item is an OL/UL which may have started on the previous page.
@@ -166,7 +191,8 @@ if (['OL', 'UL'].indexOf(range.startContainer.nodeName) !== -1 || range.startContainer.nodeName === '#text' && range.startContainer.parentNode && ['OL', 'UL'].indexOf(range.startContainer.parentNode.nodeName) !== -1 && range.startContainer.length === range.startOffset) {
 
-        // Go through a node (contents) and find the exact position where it goes lower than bottom.
+        // Go through a node (contents) and find the exact position where it goes
+        // further to the right than the right cutoff.
 
     }, {
         key: "findPageBreak",
-        value: function findPageBreak(contents, bottom) {
+        value: function findPageBreak(contents, rightCutOff) {
             var contentCoords = void 0,
@@ -176,9 +202,9 @@ found = void 0,
             if (contents.nodeType === 1) {
-                contentCoords = contents.getBoundingClientRect();
-                if (contentCoords.top < bottom) {
-                    if (contentCoords.bottom > bottom) {
+                contentCoords = (0, _getBoundingClientRect.getBoundingClientRect)(contents);
+                if (contentCoords.left < rightCutOff) {
+                    if (contentCoords.right > rightCutOff) {
                         found = false;
                         var i = 0;
                         while (found === false && i < contents.childNodes.length) {
-                            found = this.findPageBreak(contents.childNodes[i], bottom);
+                            found = this.findPageBreak(contents.childNodes[i], rightCutOff);
                             i++;
@@ -204,7 +230,8 @@ }
                 contentCoords = range.getBoundingClientRect();
+
                 if (contentCoords.bottom === contentCoords.top) {
-                    // Some text node that doesn't have any output.
+                    // A text node that doesn't have any output.
                     return false;
-                } else if (contentCoords.top < bottom) {
-                    if (contentCoords.bottom > bottom) {
+                } else if (contentCoords.left < rightCutOff) {
+                    if (contentCoords.right > rightCutOff) {
                         found = false;
@@ -215,3 +242,3 @@ while (found === false && offset > 0) {
                             contentCoords = range.getBoundingClientRect();
-                            if (contentCoords.bottom <= bottom) {
+                            if (contentCoords.right <= rightCutOff) {
                                 found = {
@@ -218,0 +245,0 @@ node: contents,

package.json

 {
   "name": "paginate-for-print",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "author": "Johannes Wilm",
@@ -5,0 +5,0 @@ "license": "LGPL",

src/cut-content.js

@@ -0,1 +1,3 @@
+import {getBoundingClientRect} from "./get-bounding-client-rect"
+
 export class ContentCutter {
@@ -17,24 +19,47 @@
                 .clientHeight),
-            boundingRect, bottom
+            contentWidth = contents.parentElement.clientWidth,
+            boundingRect, rightCutOff
 
+        // set height to contentHeight
+        contents.style.height = contentHeight + "px"
+
+        if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+            // Firefox has some insane bug which means that the new content height
+            // isn't applied immediately when dealing with multicol -- unless one
+            // removes the content and re-adds it.
+            let nSib = contents.nextSibling
+            let pEl = contents.parentElement
+            pEl.removeChild(contents)
+            pEl.insertBefore(contents,nSib)
+        }
+
         // Set height temporarily to "auto" so the page flows beyond where
-        // it should end and we can ginf the page break.
-        contents.style.height = "auto"
+        // it should end and we can find the page break.
+        contents.style.width = (contentWidth * 2 + 100) + 'px'
+        contents.style.columnWidth = contentWidth + 'px'
+        contents.style.columnGap = '100px'
+        contents.style.columnFill = 'auto'
+
+        contents.style.MozColumnWidth = contentWidth + 'px'
+        contents.style.MozColumnGap = '100px'
+        contents.style.MozColumnFill = 'auto'
+
         boundingRect = contents.getBoundingClientRect()
-        bottom = boundingRect.top + contentHeight
+        rightCutOff = boundingRect.left + contentWidth + 20
 
+
         manualPageBreak = contents.querySelector(this.config[
             'pagebreakSelector'])
 
-        if (manualPageBreak && manualPageBreak.getBoundingClientRect().top <
-            bottom) {
+        if (manualPageBreak && manualPageBreak.getBoundingClientRect().left <
+            rightCutOff) {
             range = document.createRange()
             range.setStartBefore(manualPageBreak)
-        } else if (boundingRect.bottom <= bottom) {
-            contents.style.height = contentHeight + "px"
+        } else if (boundingRect.right <= rightCutOff) {
+            contents.style.width = contentWidth + "px"
             return false
         } else {
-            pageBreak = this.findPageBreak(contents, bottom)
+            pageBreak = this.findPageBreak(contents, rightCutOff)
             if (!pageBreak) {
-                contents.style.height = contentHeight + "px"
+                contents.style.width = contentWidth + "px"
                 return false
@@ -45,4 +70,4 @@ }
         }
-        // Set height to contentHeight
-        contents.style.height = contentHeight + "px"
+
+        contents.style.width = contentWidth + "px"
         // We find that the first item is an OL/UL which may have started on the previous page.
@@ -153,9 +178,10 @@ if (['OL','UL'].indexOf(range.startContainer.nodeName) !== -1 || range.startContainer.nodeName ===
 
-    // Go through a node (contents) and find the exact position where it goes lower than bottom.
-    findPageBreak(contents, bottom) {
+    // Go through a node (contents) and find the exact position where it goes
+    // further to the right than the right cutoff.
+    findPageBreak(contents, rightCutOff) {
         let contentCoords, found, prevNode
         if (contents.nodeType === 1) {
-            contentCoords = contents.getBoundingClientRect()
-            if (contentCoords.top < bottom) {
-                if (contentCoords.bottom > bottom) {
+            contentCoords = getBoundingClientRect(contents)
+            if (contentCoords.left < rightCutOff) {
+                if (contentCoords.right > rightCutOff) {
                     found = false
@@ -165,3 +191,3 @@ let i = 0
                         found = this.findPageBreak(contents.childNodes[
-                            i], bottom)
+                            i], rightCutOff)
                         i++
@@ -188,7 +214,8 @@ }
             contentCoords = range.getBoundingClientRect()
+
             if (contentCoords.bottom === contentCoords.top) {
-                // Some text node that doesn't have any output.
+                // A text node that doesn't have any output.
                 return false
-            } else if (contentCoords.top < bottom) {
-                if (contentCoords.bottom > bottom) {
+            } else if (contentCoords.left < rightCutOff) {
+                if (contentCoords.right > rightCutOff) {
                     found = false
@@ -199,3 +226,3 @@ while (found === false && offset > 0) {
                         contentCoords = range.getBoundingClientRect()
-                        if (contentCoords.bottom <= bottom) {
+                        if (contentCoords.right <= rightCutOff) {
                             found = {
@@ -202,0 +229,0 @@ node: contents,

No alert changes

Improved metrics

Total package byte prevSize

87731

5.1%

Number of package files

26

8.33%

Lines of code

1679

5%

No dependency changes