Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Select Menu when click a tag about _target in webview
- Loading branch information
Showing
8 changed files
with
234 additions
and
19 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
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,53 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import './OutsideClickHandler.scss'; | ||
|
|
||
| const propTypes = { | ||
| children: PropTypes.oneOfType([ | ||
| PropTypes.element, | ||
| PropTypes.arrayOf(PropTypes.element), | ||
| ]).isRequired, | ||
| onOutSideClick: PropTypes.func, | ||
| }; | ||
| const defaultProps = { | ||
| onOutSideClick() {}, | ||
| }; | ||
|
|
||
| class OutsideClickHandler extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.handleOutSideClick = this.handleOutSideClick.bind(this); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| document.addEventListener('click', this.handleOutSideClick); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| document.removeEventListener('click', this.handleOutSideClick); | ||
| } | ||
|
|
||
| handleOutSideClick(e) { | ||
| const { onOutSideClick } = this.props; | ||
| if (!this.outsideRef.contains(e.target)) { | ||
| onOutSideClick(); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| const { children } = this.props; | ||
| return ( | ||
| <div | ||
| className="OutsideClickHandler" | ||
| ref={(ref) => { this.outsideRef = ref; }} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| OutsideClickHandler.propTypes = propTypes; | ||
| OutsideClickHandler.defaultProps = defaultProps; | ||
|
|
||
| export default OutsideClickHandler; |
17 changes: 17 additions & 0 deletions
17
app/page/webview/components/MenuNewWindow/MenuNewWindow.scss
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,17 @@ | ||
| .MenuNewWindow { | ||
| background-color: gainsboro; | ||
| position: absolute; | ||
| } | ||
|
|
||
| .MenuNewWindow__btn { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .MenuNewWindow__list { | ||
| width: 100px; | ||
| height: 30px; | ||
| background-color: antiquewhite; | ||
| border: 1px solid black; | ||
| margin-bottom: -1px; | ||
| } |
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,107 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { shell } from 'electron'; | ||
| import i18n from 'constants/i18n'; | ||
| import './MenuNewWindow.scss'; | ||
|
|
||
| const propTypes = { | ||
| url: PropTypes.string, | ||
| webview: PropTypes.object, // eslint-disable-line react/forbid-prop-types | ||
| x: PropTypes.number, | ||
| y: PropTypes.number, | ||
| onClose: PropTypes.func, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| url: '', | ||
| webview: null, | ||
| x: 0, | ||
| y: 0, | ||
| onClose() {}, | ||
| }; | ||
|
|
||
| class MenuNewWindow extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.handleClose = this.handleClose.bind(this); | ||
| this.handleOpenBrowser = this.handleOpenBrowser.bind(this); | ||
| this.handleOpenWidget = this.handleOpenWidget.bind(this); | ||
| this.handleMovementPage = this.handleMovementPage.bind(this); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| window.addEventListener('mouseup', this.handleClose); | ||
| } | ||
|
|
||
| componentWillUnmount() { | ||
| window.removeEventListener('mouseup', this.handleClose); | ||
| } | ||
|
|
||
| handleClose() { | ||
| const { onClose } = this.props; | ||
| onClose(); | ||
| } | ||
|
|
||
| handleOpenBrowser() { | ||
| const { url } = this.props; | ||
| shell.openExternal(url); | ||
| } | ||
|
|
||
| handleMovementPage() { | ||
| const { webview, url } = this.props; | ||
| webview.loadURL(url); | ||
| } | ||
|
|
||
| handleOpenWidget() { | ||
| const { url } = this.props; | ||
| console.log('url: ', url); | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| x, | ||
| y, | ||
| } = this.props; | ||
| const text = i18n().contextMenu; | ||
|
|
||
| return ( | ||
| <ul | ||
| className="MenuNewWindow" | ||
| style={{ left: x, top: y }} | ||
| > | ||
| <li className="MenuNewWindow__list"> | ||
| <button | ||
| className="MenuNewWindow__btn" | ||
| type="button" | ||
| onMouseUp={this.handleOpenBrowser} | ||
| > | ||
| {text.openNewBrowser} | ||
| </button> | ||
| </li> | ||
| <li className="MenuNewWindow__list"> | ||
| <button | ||
| className="MenuNewWindow__btn" | ||
| type="button" | ||
| onMouseUp={this.handleMovementPage} | ||
| > | ||
| {text.moveBrowser} | ||
| </button> | ||
| </li> | ||
| <li className="MenuNewWindow__list"> | ||
| <button | ||
| className="MenuNewWindow__btn" | ||
| type="button" | ||
| onMouseUp={this.handleOpenWidget} | ||
| > | ||
| {text.openNewWidget} | ||
| </button> | ||
| </li> | ||
| </ul> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| MenuNewWindow.propTypes = propTypes; | ||
| MenuNewWindow.defaultProps = defaultProps; | ||
|
|
||
| export default MenuNewWindow; |
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 |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Provider } from 'react-redux'; | ||
| import WebWidget from 'webview/components/WebWidget'; | ||
| import getStore from 'store/createStore'; | ||
| import subscribeActionRenderer from 'store/utils/subscribeActionRenderer'; | ||
| import 'scss/index.scss'; | ||
| import WebWidgetContainer from './containers/WebWidgetContainer'; | ||
|
|
||
| const store = getStore(); | ||
| subscribeActionRenderer(store); | ||
|
|
||
| ReactDOM.render( | ||
| <Provider store={store}> | ||
| <WebWidget /> | ||
| <WebWidgetContainer /> | ||
| </Provider>, | ||
| document.getElementById('root'), | ||
| ); |