diff options
Diffstat (limited to 'packages/gitbook-plugin-sharing')
| -rw-r--r-- | packages/gitbook-plugin-sharing/README.md | 38 | ||||
| -rw-r--r-- | packages/gitbook-plugin-sharing/package.json | 53 | ||||
| -rw-r--r-- | packages/gitbook-plugin-sharing/src/SITES.js | 72 | ||||
| -rw-r--r-- | packages/gitbook-plugin-sharing/src/index.js | 132 | ||||
| -rw-r--r-- | packages/gitbook-plugin-sharing/src/optionsShape.js | 20 |
5 files changed, 301 insertions, 14 deletions
diff --git a/packages/gitbook-plugin-sharing/README.md b/packages/gitbook-plugin-sharing/README.md new file mode 100644 index 0000000..28ae0d4 --- /dev/null +++ b/packages/gitbook-plugin-sharing/README.md @@ -0,0 +1,38 @@ +# plugin-sharing + +This plugin adds sharing buttons in the GitBook website toolbar to share book on social networks. + +### Disable this plugin + +This is a default plugin and it can be disabled using a `book.json` configuration: + +``` +{ + plugins: ["-sharing"] +} +``` + +### Configuration + +This plugin can be configured in the `book.json`: + +Default configuration is: + +```js +{ + "pluginsConfig": { + "sharing": { + "facebook": true, + "twitter": true, + "google": false, + "weibo": false, + "instapaper": false, + "vk": false, + "all": [ + "facebook", "google", "twitter", + "weibo", "instapaper" + ] + } + } +} +``` diff --git a/packages/gitbook-plugin-sharing/package.json b/packages/gitbook-plugin-sharing/package.json index 7f85575..b0540e8 100644 --- a/packages/gitbook-plugin-sharing/package.json +++ b/packages/gitbook-plugin-sharing/package.json @@ -4,6 +4,54 @@ "main": "index.js", "browser": "./_assets/plugin.js", "version": "4.0.0", + "gitbook": { + "properties": { + "facebook": { + "type": "boolean", + "default": true, + "title": "Facebook" + }, + "twitter": { + "type": "boolean", + "default": true, + "title": "Twitter" + }, + "google": { + "type": "boolean", + "default": false, + "title": "Google" + }, + "weibo": { + "type": "boolean", + "default": false, + "description": "Weibo" + }, + "instapaper": { + "type": "boolean", + "default": false, + "description": "Instapaper" + }, + "vk": { + "type": "boolean", + "default": false, + "description": "VK" + }, + "all": { + "type": "array", + "items": { + "type": "string" + }, + "default": [ + "facebook", + "google", + "twitter", + "weibo", + "instapaper" + ], + "uniqueItems": true + } + } + }, "dependencies": { "gitbook-core": "4.0.0" }, @@ -24,5 +72,6 @@ }, "bugs": { "url": "https://github.com/GitbookIO/gitbook/issues" - } -}
\ No newline at end of file + }, + "license": "Apache-2.0" +} diff --git a/packages/gitbook-plugin-sharing/src/SITES.js b/packages/gitbook-plugin-sharing/src/SITES.js new file mode 100644 index 0000000..86eae74 --- /dev/null +++ b/packages/gitbook-plugin-sharing/src/SITES.js @@ -0,0 +1,72 @@ +// All the sharing platforms +const SITES = { + + // One sharing platform + 'facebook': { + // Displayed name + label: 'Facebook', + + // Font-awesome icon id + icon: 'facebook', + + /** + * Share a page on this platform + * @param {String} url The url to share + * @param {String} title The title of the url page + */ + onShare(url, title) { + url = encodeURIComponent(url); + window.open(`http://www.facebook.com/sharer/sharer.php?s=100&p[url]=${url}`); + } + }, + + 'twitter': { + label: 'Twitter', + icon: 'twitter', + onShare(url, title) { + const status = encodeURIComponent(title + ' ' + url); + window.open(`http://twitter.com/home?status=${status}`); + } + }, + + 'google': { + label: 'Google+', + icon: 'google-plus', + onShare(url, title) { + url = encodeURIComponent(url); + window.open(`https://plus.google.com/share?url=${url}`); + } + }, + + 'weibo': { + label: 'Weibo', + icon: 'weibo', + onShare(url, title) { + url = encodeURIComponent(url); + title = encodeURIComponent(title); + window.open(`http://service.weibo.com/share/share.php?content=utf-8&url=${url}&title=${title}`); + } + }, + + 'instapaper': { + label: 'Instapaper', + icon: 'instapaper', + onShare(url, title) { + url = encodeURIComponent(url); + window.open(`http://www.instapaper.com/text?u=${url}`); + } + }, + + 'vk': { + label: 'VK', + icon: 'vk', + onShare(url, title) { + url = encodeURIComponent(url); + window.open(`http://vkontakte.ru/share.php?url=${url}`); + } + } +}; + +SITES.ALL = Object.keys(SITES); + +module.exports = SITES; diff --git a/packages/gitbook-plugin-sharing/src/index.js b/packages/gitbook-plugin-sharing/src/index.js index 4821de2..357ccbb 100644 --- a/packages/gitbook-plugin-sharing/src/index.js +++ b/packages/gitbook-plugin-sharing/src/index.js @@ -1,10 +1,22 @@ const GitBook = require('gitbook-core'); -const { React } = GitBook; +const { + React, + Dropdown +} = GitBook; +const { string, arrayOf, shape, func } = React.PropTypes; + +const SITES = require('./SITES'); +const optionsShape = require('./optionsShape'); +const siteShape = shape({ + label: string.isRequired, + icon: string.isRequired, + onShare: func.isRequired +}); module.exports = GitBook.createPlugin({ activate: (dispatch, getState, { Components }) => { // Dispatch initialization actions - dispatch(Components.registerComponent(SharingButton, { role: 'toolbar:buttons:right' })) + dispatch(Components.registerComponent(Sharing, { role: 'toolbar:buttons:right' })); }, deactivate: (dispatch, getState) => { // Dispatch cleanup actions @@ -12,23 +24,119 @@ module.exports = GitBook.createPlugin({ reduce: (state, action) => state }); -let SharingButton = React.createClass({ +/** + * Displays the group of sharing buttons + */ +let Sharing = React.createClass({ + propTypes: { + options: optionsShape.isRequired, + page: GitBook.Shapes.Page.isRequired + }, + + onShare(site) { + site.onShare(location.href, this.props.page.title); + }, + + render() { + const { options } = this.props; + + // Highlighted sites + const mainButtons = SITES + .ALL + .filter(id => options[id]) + .map(id => <SiteButton key={id} onShare={this.onShare} site={SITES[id]} />); + + // Other sites + let shareButton = undefined; + if (options.all.length > 0) { + shareButton = ( + <ShareButton siteIds={options.all} + onShare={this.onShare} /> + ); + } + + return ( + <GitBook.ButtonGroup> + { mainButtons } + { shareButton } + </GitBook.ButtonGroup> + ); + } +}); + +function mapStateToProps(state) { + let options = state.config.getIn(['pluginsConfig', 'sharing']); + if (options) { + options = options.toJS(); + } else { + options = { all: [] }; + } + + return { + page: state.page, + options + }; +} + +Sharing = GitBook.connect(Sharing, mapStateToProps); + +// An individual site sharing button +const SiteButton = React.createClass({ propTypes: { - page: GitBook.Shapes.Page + site: siteShape.isRequired, + onShare: func.isRequired }, - onClick() { - alert(this.props.page.title) + onClick(e) { + e.preventDefault(); + this.props.onShare(this.props.site); }, render() { + const { site } = this.props; + return ( <GitBook.Button onClick={this.onClick}> - <GitBook.Icon id="facebook"/> + <GitBook.Icon id={site.icon}/> </GitBook.Button> - ) + ); + } +}); + +// Share button with dropdown list of sites +const ShareButton = React.createClass({ + propTypes: { + siteIds: arrayOf(string).isRequired, + onShare: func.isRequired + }, + + getInitialState() { + return { open: false }; + }, + + onToggle() { + this.setState({ open: !this.state.open }); + }, + + render() { + const { siteIds, onShare } = this.props; + + const items = siteIds.map((id) => ( + <Dropdown.Item onClick={() => onShare(SITES[id])} key={id}> + {SITES[id].label} + </Dropdown.Item> + )); + + return ( + <Dropdown.Container> + <GitBook.Button onClick={this.onToggle}> + <GitBook.Icon id="share-alt" /> + </GitBook.Button> + + <Dropdown.Menu open={this.state.open}> + {items} + </Dropdown.Menu> + </Dropdown.Container> + ); } -}) -SharingButton = GitBook.connect(SharingButton, function mapStateToProps(state) { - return { page: state.page } -}) +}); diff --git a/packages/gitbook-plugin-sharing/src/optionsShape.js b/packages/gitbook-plugin-sharing/src/optionsShape.js new file mode 100644 index 0000000..dd51016 --- /dev/null +++ b/packages/gitbook-plugin-sharing/src/optionsShape.js @@ -0,0 +1,20 @@ +const { + bool, + arrayOf, + oneOf, + shape +} = require('gitbook-core').React.PropTypes; + +const { ALL } = require('./SITES'); + +const optionsShape = shape({ + facebook: bool, + twitter: bool, + google: bool, + weibo: bool, + instapaper: bool, + vk: bool, + all: arrayOf(oneOf(ALL)).isRequired +}); + +module.exports = optionsShape; |