diff --git a/assets/hexagon-logo.svg b/assets/hexagon-logo.svg index 86a1865e151..0618ec67ca0 100644 --- a/assets/hexagon-logo.svg +++ b/assets/hexagon-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/hexagon-print.css b/assets/hexagon-print.css new file mode 100644 index 00000000000..c663528e52f --- /dev/null +++ b/assets/hexagon-print.css @@ -0,0 +1,130 @@ +.hx-print-only { + display: none; +} + +@media print { + /* Fix layout and font size issues with root elements */ + html, + body { + height: auto; + font-size: 12pt; + page-break-after: avoid; + } + + /* Force body to display in print-friendly mode */ + body { + background: transparent !important; + width: 100% !important; + padding: 0 !important; + margin: 0 !important; + color: black !important; + } + + /* Hide elements that should not be shown when printing */ + .hx-no-print, + .hx-spinner, + .hx-spinner-wide, + .hx-heading, + .hx-sidebar { + display: none !important; + } + + /* Box shadows display badly when printing */ + * { + box-shadow: none !important; + } + + .hx-print-only { + display: initial; + } + + .hx-footnote-ref { + font-size: 0.8em; + margin-top: -0.5em; + display: inline-block; + font-style: italic; + } + + /* Attempt prevention of page breaks inside important elements */ + h1, h2, h3, h4, h5, h6, + table, + ul, + svg, + img, + form, + input, + .hx-footnote-links, + .hx-data-table, + .hx-card, + .hx-form, + .hx-table, + .hx-graph, + .hx-meter { + page-break-inside: avoid; + } + + /* Attempt prevention of page breaks after heading elements */ + h1, h2, h3, h4, h5, h6, + .hx-footnote-links { + page-break-after: avoid; + } + + /* Reset font sizes for print (relative to 12pt) */ + h1 { + font-size: 250%; + } + + h2 { + font-size: 175%; + } + + h3 { + font-size: 135%; + } + + h4 { + font-size: 100%; + font-variant: small-caps; + } + + h5 { + font-size: 100%; + } + + h6 { + font-size: 90%; + font-style: italic; + } + + /* Prevent images flowing outside the printable area */ + img { + max-width: 100% !important; + } + + /* Remove the margin around content as this is handled by the print margin */ + .hx-content { + padding: 0 !important; + margin: 0 !important; + width: 100% !important; + } + + /* Style links to be bold so they are visible as links */ + a:link:not(.hx-btn), + a:visited:not(.hx-btn) { + font-weight: bolder; + text-decoration: underline; + } + + /* Set the page margin */ + @page { + margin: 1.5cm; + } +} + +/* Make most browsers show background colors etc. by default when printing */ +@media print and (color) { + * { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } +} \ No newline at end of file diff --git a/assets/hexagon-print.js b/assets/hexagon-print.js new file mode 100644 index 00000000000..dc7606ed461 --- /dev/null +++ b/assets/hexagon-print.js @@ -0,0 +1,42 @@ +;(function () { + function beforePrint () { + var links = hx.detached('ol') + var refs = [] + hx.select('body').selectAll('*').forEach(function (sel) { + if (sel.node().nodeName === 'A' && !sel.classed('.hx-btn')) { + var thisRef = sel.attr('href') + if (thisRef && thisRef.length && thisRef !== '#') { + if (!(refs.indexOf(thisRef) > -1)) + refs.push(thisRef) + var itemIndex = refs.indexOf(thisRef) + sel.add(hx.detached('sup')['class']('hx-footnote-ref hx-print-only').text('[' + (itemIndex + 1) + ']')) + } + } + }) + refs.forEach(function (ref) { + links.add(hx.detached('li').text(ref)) + }) + if (refs.length > 0) { + hx.select('body').add(hx.detached('div')['class']('hx-footnote-links hx-print-only').add('hr').add(hx.detached('h2').text('Links')).add(links)) + } + } + + function afterPrint () { + hx.selectAll('.hx-footnote-ref').remove() + hx.selectAll('.hx-footnote-links').remove() + } + + if (window.matchMedia) { + var mediaQueryList = window.matchMedia('print') + mediaQueryList.addListener(function (mql) { + if (mql.matches) { + beforePrint() + } else { + afterPrint() + } + }) + } + + window.onbeforeprint = beforePrint + window.onafterprint = afterPrint +}).call(this) diff --git a/build/main/build.js b/build/main/build.js index 1c56bc4a1f5..f7d3f4a81e7 100644 --- a/build/main/build.js +++ b/build/main/build.js @@ -19,24 +19,32 @@ var path = require('path') var assetDir = path.join(__dirname, '../../' , 'assets') module.exports = (new Builder).assets({ - 'hexagon-icons.ttf': { + 'assets/hexagon-icons.ttf': { filepath: path.join(assetDir, 'hexagon-icons.ttf'), allowEmbed: true }, - 'hexagon-icons.eot': { + 'assets/hexagon-icons.eot': { filepath: path.join(assetDir, 'hexagon-icons.eot'), allowEmbed: true }, - 'hexagon-icons.woff': { + 'assets/hexagon-icons.woff': { filepath: path.join(assetDir, 'hexagon-icons.woff'), allowEmbed: true }, - 'hexagon-icons.svg': { + 'assets/hexagon-icons.svg': { filepath: path.join(assetDir, 'hexagon-icons.svg'), allowEmbed: true }, - 'logo.svg': { + 'assets/logo.svg': { filepath: path.join(assetDir, 'hexagon-logo.svg'), allowEmbed: true + }, + 'hexagon.print.css': { + filepath: path.join(assetDir, 'hexagon-print.css'), + allowEmbed: false + }, + 'hexagon.print.js': { + filepath: path.join(assetDir, 'hexagon-print.js'), + allowEmbed: false } }) diff --git a/build/main/builder.js b/build/main/builder.js index 33fc6590b8e..4ca0bb0db9e 100644 --- a/build/main/builder.js +++ b/build/main/builder.js @@ -144,6 +144,7 @@ function getEmbeddableAssets (options, assetFiles) { svg: 'image/svg+xml', eot: 'application/vnd.ms-fontobject', woff: 'application/font-woff', + woff2: 'application/font-woff2', jpeg: 'image/jpeg', jpg: 'image/jpeg', png: 'image/png' diff --git a/demo/index.html b/demo/index.html index 7c3558d2d18..147daab92d4 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,6 +4,7 @@