diff --git a/packages/viewer/src/header.ts b/packages/viewer/src/header.ts index 546c0dd..6d9305b 100644 --- a/packages/viewer/src/header.ts +++ b/packages/viewer/src/header.ts @@ -14,7 +14,182 @@ * limitations under the License. */ +/* + * LICENSE FOR Google Material Icons + * + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + 1. Definitions. + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + END OF TERMS AND CONDITIONS + APPENDIX: How to apply the Apache License to your work. + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + Copyright [yyyy] [name of copyright owner] + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + */ + import printFrame from './utils/print' +import startPresentation from './utils/present' class Header { private pages: HTMLElement[] @@ -29,10 +204,14 @@ class Header { private pageNumber: HTMLElement | null = null + private currentPageNumber: number = 1 + private infoButton: HTMLElement | null = null private printButton: HTMLElement | null = null + private presentButton: HTMLElement | null = null + constructor(view: HTMLElement, content: HTMLElement, pages: HTMLElement[]) { this.content = content this.pages = pages @@ -64,6 +243,9 @@ class Header { const buttonStyle: string = ` .hwpjs-header-control { transition: background .2s; + padding: 3px; + border-radius: 5px; + height: 100%; } .hwpjs-header-control:hover { background: #DDD; @@ -81,12 +263,13 @@ class Header { } updatePageNumber(pageNumber: number) { + this.currentPageNumber = pageNumber if (this.pageNumber) { this.pageNumber.textContent = pageNumber.toString() } } - distory() { + destroy() { this.pages.forEach((page) => { this.observer.unobserve(page) }) @@ -97,9 +280,12 @@ class Header { this.infoButton?.removeEventListener('click', this.handleInfoButtionClick) this.infoButton = null - this.printButton?.removeEventListener('click', this.handleInfoButtionClick) + this.printButton?.removeEventListener('click', this.handlePrintButtionClick) this.printButton = null + this.presentButton?.removeEventListener('click', this.handlePresentationButtionClick) + this.presentButton = null + this.pageNumber = null } @@ -192,6 +378,10 @@ class Header { printFrame(this.pages) } + handlePresentationButtionClick = () => { + startPresentation(this.content, this.container, this.pages, this.currentPageNumber) + } + drawPageNumber() { this.pageNumber = document.createElement('span') this.pageNumber.textContent = '1' @@ -204,37 +394,53 @@ class Header { } drawInfoIcon() { - const buttion = document.createElement('div') - buttion.style.marginLeft = '10px' - buttion.style.cursor = 'pointer' - buttion.style.height = '100%' - buttion.style.padding = '5px' - buttion.classList.add('hwpjs-header-control') - buttion.innerHTML = '' - buttion.addEventListener('click', this.handleInfoButtionClick) - - this.container.appendChild(buttion) - - this.infoButton = buttion + const button = document.createElement('div') + button.style.marginLeft = '10px' + button.style.cursor = 'pointer' + button.style.height = '100%' + button.style.padding = '2px' + button.innerHTML = '
' + button.addEventListener('click', this.handleInfoButtionClick) + this.container.appendChild(button) + this.infoButton = button + } + + drawPresentationIcon() { + const button = document.createElement('div') + button.style.marginLeft = '10px' + button.style.cursor = 'pointer' + button.style.height = '100%' + button.style.padding = '2px' + button.innerHTML = '
' + button.addEventListener('click', this.handlePresentationButtionClick) + this.container.appendChild(button) + this.presentButton = button } drawPrintIcon() { - const buttion = document.createElement('div') - buttion.style.cursor = 'pointer' - buttion.style.height = '100%' - buttion.style.padding = '5px' - buttion.classList.add('hwpjs-header-control') - buttion.innerHTML = '' - buttion.style.marginLeft = 'auto' - buttion.addEventListener('click', this.handlePrintButtionClick) - - this.container.appendChild(buttion) - - this.printButton = buttion + const button = document.createElement('div') + button.style.marginLeft = '10px' + button.style.cursor = 'pointer' + button.style.height = '100%' + button.style.padding = '2px' + button.innerHTML = '
' + button.addEventListener('click', this.handlePrintButtionClick) + this.container.appendChild(button) + this.printButton = button + } + + drawPlaceHolder() { + const button = document.createElement('div') + button.style.marginLeft = 'auto' + button.style.height = '100%' + button.style.padding = '5px' + this.container.appendChild(button) } draw() { this.drawPageNumber() + this.drawPlaceHolder() + this.drawPresentationIcon() this.drawPrintIcon() this.drawInfoIcon() } diff --git a/packages/viewer/src/utils/present.ts b/packages/viewer/src/utils/present.ts new file mode 100644 index 0000000..0fda327 --- /dev/null +++ b/packages/viewer/src/utils/present.ts @@ -0,0 +1,157 @@ +/** + * Copyright Han Lee and other contributors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export declare class ResizeObserver { + constructor(e: () => void) + + observe(target: Element): void + + unobserve(target: Element): void +} + +const prevKey = ['ArrowLeft', 'ArrowUp', 'PageUp'] +const nextKey = ['ArrowRight', 'ArrowDown', 'Enter', ' ', 'PageDown', 'Tab'] + +export default function startPresentation(container: HTMLElement, header: HTMLElement, + elements: HTMLElement[], initPage: number) { + let currentPage = initPage + + const documentContainer = container.children[0] as HTMLElement + const pageContainer = elements[currentPage - 1].parentElement as HTMLElement + const headerContainer = header.parentElement as HTMLElement + let originalScaleFactor = pageContainer.offsetHeight / elements[0].offsetHeight + + const originalBackground = documentContainer.style.backgroundColor + const originalBorder = documentContainer.style.border + const originalUserSelect = documentContainer.style.userSelect + const originalHeight = pageContainer.style.height + const originalOverflow = pageContainer.style.overflow + const originalHeaderDisplay = headerContainer.style.display + const originalPageContainerMarginTop = pageContainer.style.marginTop + const originalPageContainerDisplay = pageContainer.style.display + const originalPageContainerAlignItems = pageContainer.style.alignItems + const originalPageDisplay = elements[currentPage - 1].style.display + const originalPageTransform = elements[currentPage - 1].style.display + const originalPageMargin = elements[currentPage - 1].style.margin + const originalScrollTop = pageContainer.scrollTop + + const resizeObserver = new ResizeObserver(() => { + const newScaleFactor = pageContainer.offsetHeight / elements[currentPage - 1].offsetHeight + if (originalScaleFactor !== newScaleFactor) { + originalScaleFactor = newScaleFactor + elements.forEach((i: HTMLElement) => { + i.style.transform = `scale(${newScaleFactor})` + }) + } + }) + resizeObserver.observe(pageContainer) + + documentContainer.style.backgroundColor = 'rgb(0, 0, 0)' + documentContainer.style.border = '' + documentContainer.style.userSelect = 'none' + pageContainer.style.height = '100%' + pageContainer.style.overflow = 'hidden' + headerContainer.style.display = 'none' + pageContainer.style.marginTop = '0' + pageContainer.style.display = 'flex' + pageContainer.style.alignItems = 'center' + + elements.forEach((i: HTMLElement) => { + i.style.display = 'none' + i.style.margin = '0 auto' + }) + + elements[currentPage - 1].style.display = '' + + const validatePage = () => { + if (currentPage < 1) currentPage = 1 + if (currentPage > elements.length) { + document.exitFullscreen() + .then() + return true + } + return false + } + + const scrollHandler = (e: WheelEvent) => { + const lastPage = currentPage + if (e.deltaY <= 0) { + currentPage -= 1 + if (validatePage()) return + } else { + currentPage += 1 + if (validatePage()) return + } + elements[lastPage - 1].style.display = 'none' + elements[currentPage - 1].style.display = '' + } + + const clickHandler = () => { + const lastPage = currentPage + currentPage += 1 + if (validatePage()) return + elements[lastPage - 1].style.display = 'none' + elements[currentPage - 1].style.display = '' + } + + const keyHandler = (e: KeyboardEvent) => { + e.preventDefault() + const lastPage = currentPage + const key = e.key + if(nextKey.includes(key)) currentPage += 1 + if(prevKey.includes(key)) currentPage -= 1 + if (key==='Home') currentPage = 1 + if (key==='End') currentPage = elements.length + if (validatePage()) return + elements[lastPage - 1].style.display = 'none' + elements[currentPage - 1].style.display = '' + } + + const exitFullScreenHandler = () => { + if (!document.fullscreenElement) { + document.removeEventListener('fullscreenchange', exitFullScreenHandler) + resizeObserver.unobserve(pageContainer) + pageContainer.removeEventListener('click', clickHandler) + pageContainer.removeEventListener('mousewheel', scrollHandler as (e: Event) => void) + document.removeEventListener('keydown', keyHandler) + + documentContainer.style.backgroundColor = originalBackground + documentContainer.style.border = originalBorder + documentContainer.style.userSelect = originalUserSelect + pageContainer.style.height = originalHeight + pageContainer.style.overflow = originalOverflow + headerContainer.style.display = originalHeaderDisplay + pageContainer.style.marginTop = originalPageContainerMarginTop + pageContainer.style.display = originalPageContainerDisplay + pageContainer.style.alignItems = originalPageContainerAlignItems + elements.forEach((i: HTMLElement) => { + i.style.transform = originalPageTransform + i.style.display = originalPageDisplay + i.style.margin = originalPageMargin + }) + pageContainer.scrollTop = originalScrollTop + } + } + + pageContainer.addEventListener('mousewheel', scrollHandler as (e: Event) => void) + pageContainer.addEventListener('click', clickHandler) + document.addEventListener('keydown', keyHandler) + + document.addEventListener('fullscreenchange', exitFullScreenHandler) + + container.requestFullscreen() + .catch() +} diff --git a/packages/viewer/src/viewer.ts b/packages/viewer/src/viewer.ts index 3ee97f1..c5fa1e9 100644 --- a/packages/viewer/src/viewer.ts +++ b/packages/viewer/src/viewer.ts @@ -86,9 +86,9 @@ class HWPViewer { this.draw() } - distory() { + destroy() { this.pages = [] - this.header?.distory() + this.header?.destroy() this.viewer.parentElement?.removeChild(this.viewer) } @@ -137,6 +137,7 @@ class HWPViewer { this.viewer.style.overflow = 'hidden' this.viewer.style.width = '100%' this.viewer.style.height = '100%' + this.viewer.style.border = '1px solid #ced4da' } private drawBorderFill( diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 8a492cf..b588e67 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -24,7 +24,6 @@ html, body { flex: 1; width: 100%; overflow: hidden; - border: 1px solid #ced4da; } .code {