forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Page Preview Thumbnail (elastic#375)
* Created dom_preview and page_preview components * temporarily display page number on non active pages. Need to fix page thumbnail width issue * Added page number to page controls * Rendered preview for all pages instead of just the active one * Fixed background color on thumbnails. Added box-shadow to active page * Removed background color from page controls * Changed background color on page controls * Changed prop 'id' to 'elementId' in dom_preview * Removed unused style in page_manager.less * Removed jQuery from dom_preview * Updated styles for page preview * Added text styles back to page-index * Removed unused code * Hides element controls in page preview * Removed debounce for page preview update * Changes propTypes and observer to static variables. Disconnects observer on unmount * Added radix to parseInt in dom_preview * Added debounce to update function in dom_preview * Updated styles for page manager. References css variables instead of hard-coded values
- Loading branch information
Showing
9 changed files
with
205 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { debounce } from 'lodash'; | ||
|
|
||
| export class DomPreview extends React.Component { | ||
| static container = null; | ||
| static content = null; | ||
| static observer = null; | ||
|
|
||
| static propTypes = { | ||
| elementId: PropTypes.string.isRequired, | ||
| height: PropTypes.number.isRequired, | ||
| setPagePreviewWidth: PropTypes.func, | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| const original = document.querySelector(`#${this.props.elementId}`); | ||
|
|
||
| const update = this.update(original); | ||
| update(); | ||
|
|
||
| const slowUpdate = debounce(update, 250); | ||
|
|
||
| this.observer = new MutationObserver(slowUpdate); | ||
| // configuration of the observer: | ||
| const config = { attributes: true, childList: true, subtree: true }; | ||
| // pass in the target node, as well as the observer options | ||
| this.observer.observe(original, config); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| this.observer.disconnect(); | ||
| } | ||
|
|
||
| update = original => () => { | ||
| const thumb = original.cloneNode(true); | ||
|
|
||
| const originalStyle = window.getComputedStyle(original, null); | ||
| const originalWidth = parseInt(originalStyle.getPropertyValue('width'), 10); | ||
| const originalHeight = parseInt(originalStyle.getPropertyValue('height'), 10); | ||
|
|
||
| const thumbHeight = this.props.height; | ||
| const scale = thumbHeight / originalHeight; | ||
| const thumbWidth = originalWidth * scale; | ||
|
|
||
| if (this.content) { | ||
| if (this.content.hasChildNodes()) this.content.removeChild(this.content.firstChild); | ||
| this.content.appendChild(thumb); | ||
| } | ||
| // Copy canvas data | ||
| const originalCanvas = original.querySelectorAll('canvas'); | ||
| const thumbCanvas = thumb.querySelectorAll('canvas'); | ||
|
|
||
| // Cloned canvas elements are blank and need to be explicitly redrawn | ||
| if (originalCanvas.length > 0) { | ||
| Array.from(originalCanvas).map((img, i) => | ||
| thumbCanvas[i].getContext('2d').drawImage(img, 0, 0) | ||
| ); | ||
| } | ||
|
|
||
| this.props.setPagePreviewWidth(thumbWidth + 2); | ||
|
|
||
| this.container.style.cssText = `width: ${thumbWidth}; height: ${thumbHeight}; overflow: 'hidden',`; | ||
|
|
||
| this.content.style.cssText = `transform: scale(${scale}); transform-origin: top left; height: ${originalHeight}; width: ${originalWidth};`; | ||
|
|
||
| thumb.style.cssText = 'top: 0; left: 0;'; | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <div | ||
| ref={container => { | ||
| this.container = container; | ||
| }} | ||
| className="dom-preview" | ||
| > | ||
| <div | ||
| ref={content => { | ||
| this.content = content; | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { DomPreview as Component } from './dom_preview'; | ||
|
|
||
| export const DomPreview = Component; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { compose, withState } from 'recompose'; | ||
| import { PagePreview as Component } from './page_preview'; | ||
|
|
||
| export const PagePreview = compose(withState('width', 'setWidth', 77))(Component); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import React, { PureComponent } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { DomPreview } from '../dom_preview'; | ||
| import { RemoveIcon } from '../remove_icon'; | ||
| import { PageControls } from './page_controls'; | ||
|
|
||
| export class PagePreview extends PureComponent { | ||
| static propTypes = { | ||
| page: PropTypes.object.isRequired, | ||
| height: PropTypes.number.isRequired, | ||
| pageNumber: PropTypes.number.isRequired, | ||
| movePage: PropTypes.func, | ||
| duplicatePage: PropTypes.func, | ||
| selectedPage: PropTypes.string, | ||
| confirmDelete: PropTypes.func, | ||
| width: PropTypes.number, | ||
| setWidth: PropTypes.func, | ||
| }; | ||
|
|
||
| render() { | ||
| const { | ||
| page, | ||
| pageNumber, | ||
| height, | ||
| selectedPage, | ||
| movePage, | ||
| duplicatePage, | ||
| confirmDelete, | ||
| width, | ||
| setWidth, | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <div | ||
| className={`canvas__page-manager--page ${page.id === selectedPage ? 'active' : ''}`} | ||
| style={{ width: width, backgroundColor: page.style.background }} | ||
| > | ||
| <div className="canvas__page-manager--page-index" style={{ width: width }}> | ||
| <DomPreview | ||
| elementId={page.id} | ||
| pageNumber={pageNumber} | ||
| height={height} | ||
| setPagePreviewWidth={width => setWidth(width)} | ||
| /> | ||
| </div> | ||
| <RemoveIcon | ||
| className="canvas__page-manager--page-remove" | ||
| onClick={confirmDelete(page.id)} | ||
| /> | ||
| <PageControls | ||
| pageId={page.id} | ||
| pageNumber={pageNumber} | ||
| movePage={movePage} | ||
| duplicatePage={duplicatePage} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters