From 4bc6ad7dd0e9060e748a8c267dc9793fbb95952f Mon Sep 17 00:00:00 2001 From: Evgeny Biriulin Date: Wed, 18 Oct 2023 10:55:40 +0400 Subject: [PATCH] feat: added print styles and js for plugins --- esbuild/build.js | 64 ++++++++++++++++++++++++-------------- src/js/print/index.ts | 1 + src/js/print/table.ts | 62 ++++++++++++++++++++++++++++++++++++ src/scss/_print.scss | 20 ------------ src/scss/print.scss | 6 ++++ src/scss/print/code.scss | 9 ++++++ src/scss/print/common.scss | 13 ++++++++ src/scss/print/cut.scss | 18 +++++++++++ src/scss/print/note.scss | 7 +++++ src/scss/print/table.scss | 24 ++++++++++++++ src/scss/print/tabs.scss | 20 ++++++++++++ src/scss/yfm.scss | 1 - 12 files changed, 201 insertions(+), 44 deletions(-) create mode 100644 src/js/print/index.ts create mode 100644 src/js/print/table.ts delete mode 100644 src/scss/_print.scss create mode 100644 src/scss/print.scss create mode 100644 src/scss/print/code.scss create mode 100644 src/scss/print/common.scss create mode 100644 src/scss/print/cut.scss create mode 100644 src/scss/print/note.scss create mode 100644 src/scss/print/table.scss create mode 100644 src/scss/print/tabs.scss diff --git a/esbuild/build.js b/esbuild/build.js index 04418457..6e000b62 100755 --- a/esbuild/build.js +++ b/esbuild/build.js @@ -20,24 +20,35 @@ const common = { }; (async function buildCss() { - await build({ - ...common, - entryPoints: ['src/scss/yfm.scss'], - outfile: 'dist/css/yfm.css', - format: 'iife', - plugins: [ - sassPlugin({ - async transform(source) { - const {css} = await postcss([ - autoprefixer({cascade: false}), - postcssPresetEnv({stage: 0}), - ]).process(source, {from: undefined}); - - return css; - }, - }), - ], - }); + const plugins = [ + sassPlugin({ + async transform(source) { + const {css} = await postcss([ + autoprefixer({cascade: false}), + postcssPresetEnv({stage: 0}), + ]).process(source, {from: undefined}); + + return css; + }, + }), + ]; + + await Promise.all([ + build({ + ...common, + entryPoints: ['src/scss/yfm.scss'], + outfile: 'dist/css/yfm.css', + format: 'iife', + plugins, + }), + build({ + ...common, + entryPoints: ['src/scss/print.scss'], + outfile: 'dist/css/print.css', + format: 'iife', + plugins, + }) + ]); await build({ ...common, @@ -48,11 +59,18 @@ const common = { })(); (async function buildJs() { - await build({ - ...common, - entryPoints: ['src/js/index.ts'], - outfile: 'dist/js/yfm.js', - }); + await Promise.all([ + build({ + ...common, + entryPoints: ['src/js/index.ts'], + outfile: 'dist/js/yfm.js', + }), + build({ + ...common, + entryPoints: ['src/js/print/index.ts'], + outfile: 'dist/js/print.js', + }) + ]); await build({ ...common, diff --git a/src/js/print/index.ts b/src/js/print/index.ts new file mode 100644 index 00000000..5d6838d9 --- /dev/null +++ b/src/js/print/index.ts @@ -0,0 +1 @@ +import './table'; diff --git a/src/js/print/table.ts b/src/js/print/table.ts new file mode 100644 index 00000000..bda7ce86 --- /dev/null +++ b/src/js/print/table.ts @@ -0,0 +1,62 @@ +const Selector = { + WRAPPED_TABLE: '.pdf .yfm-table-container table', + TABLE: '.pdf table', +}; +const Padding = { + BOTTOM: 20, +}; + +function resizeElement(element: HTMLElement) { + const availableWidth = element.parentElement?.offsetWidth; + const contentWidth = (element.firstElementChild as HTMLElement).offsetWidth; + + if (!availableWidth) { + return; + } + + const needScale = contentWidth > availableWidth; + + if (needScale) { + const scale = availableWidth / contentWidth; + + element.style.transform = `scale(${scale})`; + } + + element.parentElement.style.height = `${ + element.getBoundingClientRect().height + Padding.BOTTOM + }px`; +} + +function resizeElements() { + document.querySelectorAll(Selector.WRAPPED_TABLE).forEach((element) => { + resizeElement(element as HTMLElement); + }); +} + +function wrapTables() { + const tables = document.querySelectorAll(Selector.TABLE); + + for (let i = 0; i < tables.length; i++) { + const table = tables[i]; + + const parent = table.parentNode; + + if (!parent) { + continue; + } + + const wrapper = document.createElement('div'); + parent.insertBefore(wrapper, table); + wrapper.appendChild(table); + wrapper.classList.add('yfm-table-container'); + } +} + +if (typeof document !== 'undefined') { + window.addEventListener('load', () => { + wrapTables(); + resizeElements(); + }); +} + +export {}; diff --git a/src/scss/_print.scss b/src/scss/_print.scss deleted file mode 100644 index c75dbb10..00000000 --- a/src/scss/_print.scss +++ /dev/null @@ -1,20 +0,0 @@ -@media print { - .tab-list { - display: none !important; - } - - .tab-panel:before { - content: attr(data-title); - margin-bottom: -1px; - margin-right: 20px; - border-bottom: 2px solid transparent; - line-height: 33px; - font-weight: 700; - outline: 0; - cursor: pointer; - } - - .tab-panel { - display: block !important; - } -} diff --git a/src/scss/print.scss b/src/scss/print.scss new file mode 100644 index 00000000..33868ccc --- /dev/null +++ b/src/scss/print.scss @@ -0,0 +1,6 @@ +@import 'print/code'; +@import 'print/common'; +@import 'print/cut'; +@import 'print/note'; +@import 'print/table'; +@import 'print/tabs'; \ No newline at end of file diff --git a/src/scss/print/code.scss b/src/scss/print/code.scss new file mode 100644 index 00000000..8904fd7e --- /dev/null +++ b/src/scss/print/code.scss @@ -0,0 +1,9 @@ +@media print { + .yfm { + .yfm-clipboard { + & > pre > code { + white-space: pre-wrap; + } + } + } +} \ No newline at end of file diff --git a/src/scss/print/common.scss b/src/scss/print/common.scss new file mode 100644 index 00000000..825bdd63 --- /dev/null +++ b/src/scss/print/common.scss @@ -0,0 +1,13 @@ +@media print { + .yfm { + .yfm-page__delimeter { + display: none; + } + + h1, h2 { + &[data-original-article] { + page-break-before: always; + } + } + } +} \ No newline at end of file diff --git a/src/scss/print/cut.scss b/src/scss/print/cut.scss new file mode 100644 index 00000000..eb1b9470 --- /dev/null +++ b/src/scss/print/cut.scss @@ -0,0 +1,18 @@ +@media print { + .yfm { + .yfm-cut { + &-title { + padding-left: 0; + + &:before { + display: none; + } + } + + &-content { + height: auto; + padding: 5px 0 15px 30px; + } + } + } +} diff --git a/src/scss/print/note.scss b/src/scss/print/note.scss new file mode 100644 index 00000000..5af20942 --- /dev/null +++ b/src/scss/print/note.scss @@ -0,0 +1,7 @@ +@media print { + .yfm { + .yfm-note { + page-break-inside: avoid; + } + } +} diff --git a/src/scss/print/table.scss b/src/scss/print/table.scss new file mode 100644 index 00000000..0f053d5b --- /dev/null +++ b/src/scss/print/table.scss @@ -0,0 +1,24 @@ +.yfm { + .yfm-table-container { + position: relative; + + & > table { + overflow: initial; + position: absolute; + top: 0; + left: 0; + max-width: initial; + transform-origin: top left; + + thead { + display: table-row-group; + } + + th, td { + page-break-inside: avoid; + white-space: pre-wrap; + text-overflow: initial; + } + } + } +} \ No newline at end of file diff --git a/src/scss/print/tabs.scss b/src/scss/print/tabs.scss new file mode 100644 index 00000000..7bada005 --- /dev/null +++ b/src/scss/print/tabs.scss @@ -0,0 +1,20 @@ +@media print { + .yfm { + .yfm-tab { + &-list { + display: none; + } + + &-panel:before { + content: attr(data-title); + margin-bottom: -1px; + margin-right: 20px; + border-bottom: 2px solid transparent; + line-height: 33px; + font-weight: 700; + outline: 0; + cursor: pointer; + } + } + } +} diff --git a/src/scss/yfm.scss b/src/scss/yfm.scss index 3334ebda..fdd8c80e 100644 --- a/src/scss/yfm.scss +++ b/src/scss/yfm.scss @@ -3,7 +3,6 @@ @import 'anchor'; @import 'highlight'; @import 'code'; -@import 'print'; @import 'cut'; @import 'file'; @import 'term';