added es6 modules, page-break and text-decoration support

crabbly · Apr 24, 2017 · 163548d · 163548d
1 parent 5d15b4b
commit 163548d
Show file tree

Hide file tree

Showing 18 changed files with 620 additions and 587 deletions.
diff --git a/dist/print.min.css.map b/dist/print.min.css.map
diff --git a/dist/print.min.js b/dist/print.min.js
diff --git a/dist/print.min.js.map b/dist/print.min.js.map
diff --git a/gulpfile.js b/gulpfile.js
@@ -4,6 +4,6 @@ elixir.config.js.folder = ''
 elixir.config.css.folder = ''
 
 elixir(function (mix) {
-  mix.webpack('print.js', 'dist/print.min.js')
+  mix.webpack('index.js', 'dist/print.min.js')
       .styles('css/print.css', 'dist/print.min.css')
 })
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "print.js",
   "homepage": "http://printjs.crabbly.com",
   "description": "A tiny javascript library to help printing from the web.",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "main": "src/print.js",
   "repository": {
     "type": "git",

diff --git a/src/css/print.css b/src/css/print.css
@@ -1,7 +1,7 @@
 /*
  * Print.js
  * http://printjs.crabbly.com
- * Version: 1.0.14
+ * Version: 1.0.15
  *
  * Copyright 2017 Rodrigo Vieira (@crabbly)
  * Released under the MIT license

diff --git a/src/print.js → src/index.js b/src/print.js → src/index.js
@@ -1,11 +1,17 @@
 /*
  * Print.js
  * http://printjs.crabbly.com
- * Version: 1.0.14
+ * Version: 1.0.15
  *
  * Copyright 2017 Rodrigo Vieira (@crabbly)
  * Released under the MIT license
  * https://github.com/crabbly/Print.js/blob/master/LICENSE
  */
 
-window.printJS = require('./js/print')
+import printJS from './js/init'
+
+module.exports = printJS
+
+if (typeof window !== 'undefined') {
+  window.printJS = printJS
+}
diff --git a/src/js/browser.js b/src/js/browser.js
@@ -1,5 +1,5 @@
-// Firefox 1.0+
-module.exports = {
+export default {
+  // Firefox 1.0+
   isFirefox: function () {
     return typeof InstallTrigger !== 'undefined'
   },
@@ -17,11 +17,13 @@ module.exports = {
   // Chrome 1+
   isChrome: function () {
     return !!window.chrome && !!window.chrome.webstore
-  }
+  },
 
   // Opera 8.0+
   // let isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0
 
   // At least Safari 3+: "[object HTMLElementConstructor]"
-  // let isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0
+  isSafari: function () {
+    return Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0
+  }
 }
diff --git a/src/js/class.js b/src/js/class.js
@@ -0,0 +1,41 @@
+import browser from './browser'
+
+let PrintJS = function (params) {
+  this.params = params
+
+    // check if showing feedback to user (useful for large files)
+  if (this.params.showModal) {
+    this.showModal()
+  }
+
+    // to prevent duplication and issues, remove this.printFrame from DOM, if it exists
+  let usedFrame = document.getElementById(this.params.frameId)
+
+  if (usedFrame) {
+    usedFrame.parentNode.removeChild(usedFrame)
+  }
+
+    // create a new iframe or embed element (IE prints blank pdf's if we use iframe)
+  if (browser.isIE() && this.params.type === 'pdf') {
+        // create embed element
+    this.printFrame = document.createElement('embed')
+    this.printFrame.setAttribute('type', 'application/pdf')
+
+        // hide embed
+    this.printFrame.setAttribute('style', 'width:0px;height:0px;')
+  } else {
+        // create iframe element
+    this.printFrame = document.createElement('iframe')
+
+        // hide iframe
+    this.printFrame.setAttribute('style', 'display:none;')
+  }
+
+    // set element id
+  this.printFrame.setAttribute('id', this.params.frameId)
+
+    // for non pdf printing, pass empty html document to srcdoc (force onload callback)
+  if (this.params.type !== 'pdf') this.printFrame.srcdoc = '<html><head></head><body></body></html>'
+}
+
+export default PrintJS
diff --git a/src/js/functions.js b/src/js/functions.js
@@ -0,0 +1,126 @@
+export function extend (a, b) {
+  for (let key in b) {
+    if (b.hasOwnProperty(key)) {
+      a[key] = b[key]
+    }
+  }
+
+  return a
+}
+
+export function addWrapper (htmlData, params) {
+  let bodyStyle = 'font-family:' + params.font + ' !important; font-size: ' + params.font_size + ' !important; width:100%;'
+  return '<div style="' + bodyStyle + '">' + htmlData + '</div>'
+}
+
+export function capitalizePrint (string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export function collectStyles (element, params) {
+  let win = document.defaultView || window
+
+  let style = []
+
+    // String variable to hold styling for each element
+  let elementStyle = ''
+
+  if (win.getComputedStyle) { // modern browsers
+    style = win.getComputedStyle(element, '')
+
+        // Styles including
+    let targetStyles = ['border', 'float', 'box', 'break', 'text-decoration']
+
+        // Exact match
+    let targetStyle = ['clear', 'display', 'width', 'min-width', 'height', 'min-height', 'max-height']
+
+        // Optional - include margin and padding
+    if (params.honorMarginPadding) {
+      targetStyles.push('margin', 'padding')
+    }
+
+        // Optional - include color
+    if (params.honorColor) {
+      targetStyles.push('color')
+    }
+
+    for (let i = 0; i < style.length; i++) {
+      for (let s = 0; s < targetStyle.length; s++) {
+        if (style[i].indexOf(targetStyles[s]) !== -1 || style[i].indexOf(targetStyle[s]) === 0) {
+          elementStyle += style[i] + ':' + style.getPropertyValue(style[i]) + ';'
+        }
+      }
+    }
+  } else if (element.currentStyle) { // IE
+    style = element.currentStyle
+
+    for (let name in style) {
+      if (style.indexOf('border') !== -1 && style.indexOf('color') !== -1) {
+        elementStyle += name + ':' + style[name] + ';'
+      }
+    }
+  }
+
+    // Print friendly defaults
+  elementStyle += 'max-width: ' + params.maxWidth + 'px !important;' + params.font_size + ' !important;'
+
+  return elementStyle
+}
+
+export function loopNodesCollectStyles (elements, params) {
+  for (let n = 0; n < elements.length; n++) {
+    let currentElement = elements[n]
+
+        // Form Printing - check if is element Input
+    let tag = currentElement.tagName
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+            // save style to variable
+      let textStyle = collectStyles(currentElement, params)
+
+            // remove INPUT element and insert a text node
+      let parent = currentElement.parentNode
+
+            // get text value
+      let textNode = tag === 'SELECT'
+                ? document.createTextNode(currentElement.options[currentElement.selectedIndex].text)
+                : document.createTextNode(currentElement.value)
+
+            // create text element
+      let textElement = document.createElement('div')
+      textElement.appendChild(textNode)
+
+            // add style to text
+      textElement.setAttribute('style', textStyle)
+
+            // add text
+      parent.appendChild(textElement)
+
+            // remove input
+      parent.removeChild(currentElement)
+    } else {
+            // get all styling for print element
+      currentElement.setAttribute('style', collectStyles(currentElement, params))
+    }
+
+        // check if more elements in tree
+    let children = currentElement.children
+
+    if (children && children.length) {
+      loopNodesCollectStyles(children, params)
+    }
+  }
+}
+
+export function addHeader (printElement, header) {
+    // create header element
+  let headerElement = document.createElement('h1')
+
+    // create header text node
+  let headerNode = document.createTextNode(header)
+
+    // build and style
+  headerElement.appendChild(headerNode)
+  headerElement.setAttribute('style', 'font-weight:300;')
+
+  printElement.insertBefore(headerElement, printElement.childNodes[0])
+}
diff --git a/src/js/html.js b/src/js/html.js
@@ -0,0 +1,50 @@
+import { collectStyles, loopNodesCollectStyles, addWrapper, addHeader } from './functions'
+
+export default function (PrintJS) {
+  PrintJS.prototype.html = function () {
+        // get HTML printable element
+    let printElement = document.getElementById(this.params.printable)
+
+        // check if element exists
+    if (!printElement) {
+      window.console.error('Invalid HTML element id: ' + this.params.printable)
+
+      return false
+    }
+
+        // make a copy of the printElement to prevent DOM changes
+    let printableElement = document.createElement('div')
+    printableElement.appendChild(printElement.cloneNode(true))
+
+        // add cloned element to DOM, to have DOM element methods available. It will also be easier to colect styles
+    printableElement.setAttribute('style', 'display:none;')
+    printableElement.setAttribute('id', 'printJS-html')
+    printElement.parentNode.appendChild(printableElement)
+
+        // update printableElement variable with newly created DOM element
+    printableElement = document.getElementById('printJS-html')
+
+        // get main element styling
+    printableElement.setAttribute('style', collectStyles(printableElement, this.params) + 'margin:0 !important;')
+
+        // get all children elements
+    let elements = printableElement.children
+
+        // get styles for all children elements
+    loopNodesCollectStyles(elements, this.params)
+
+        // add header if any
+    if (this.params.header) {
+      addHeader(printableElement, this.params.header)
+    }
+
+        // remove DOM printableElement
+    printableElement.parentNode.removeChild(printableElement)
+
+        // store html data
+    this.params.htmlData = addWrapper(printableElement.innerHTML, this.params)
+
+        // print html element contents
+    this.print()
+  }
+}
diff --git a/src/js/image.js b/src/js/image.js
@@ -0,0 +1,44 @@
+import { addHeader } from './functions'
+import browser from './browser'
+
+export default function (PrintJS) {
+  PrintJS.prototype.image = function () {
+        // create the image element
+    let img = document.createElement('img')
+    img.setAttribute('style', 'width:100%;')
+    img.setAttribute('id', 'printableImage')
+
+        // set image src with image file url
+    img.src = this.params.printable
+
+        // create wrapper
+    let printableElement = document.createElement('div')
+    printableElement.setAttribute('style', 'width:100%')
+
+        // to prevent firefox from not loading images within iframe, we can use base64-encoded data URL of images pixel data
+    if (browser.isFirefox()) {
+          // let's make firefox happy
+      let canvas = document.createElement('canvas')
+      canvas.setAttribute('width', img.width)
+      canvas.setAttribute('height', img.height)
+      let context = canvas.getContext('2d')
+      context.drawImage(img, 0, 0)
+
+          // reset img src attribute with canvas dataURL
+      img.setAttribute('src', canvas.toDataURL('JPEG', 1.0))
+    }
+
+    printableElement.appendChild(img)
+
+        // add header if any
+    if (this.params.header) {
+      addHeader(printableElement)
+    }
+
+        // store html data
+    this.params.htmlData = printableElement.outerHTML
+
+        // print image
+    this.print()
+  }
+}