From cd80d72e328a7152c67a1bc925900cecc221ef70 Mon Sep 17 00:00:00 2001 From: vjrj Date: Mon, 12 Feb 2018 12:18:50 +0100 Subject: [PATCH] Added share it --- imports/ui/components/ShareIt/ShareIt.js | 146 ++++++++++++++++++ imports/ui/components/ShareIt/ShareIt.scss | 19 +++ imports/ui/components/Utils/location.js | 8 + imports/ui/pages/Fires/Fires.js | 3 + imports/ui/pages/FiresMap/FiresMap.js | 7 +- imports/ui/pages/Index/Index.js | 12 +- .../pages/Subscriptions/SubscriptionsMap.js | 7 +- package-lock.json | 23 ++- package.json | 1 + 9 files changed, 219 insertions(+), 7 deletions(-) create mode 100644 imports/ui/components/ShareIt/ShareIt.js create mode 100644 imports/ui/components/ShareIt/ShareIt.scss diff --git a/imports/ui/components/ShareIt/ShareIt.js b/imports/ui/components/ShareIt/ShareIt.js new file mode 100644 index 0000000..558e216 --- /dev/null +++ b/imports/ui/components/ShareIt/ShareIt.js @@ -0,0 +1,146 @@ +/* eslint-disable react/jsx-indent-props */ +/* eslint-disable import/no-absolute-path */ +/* eslint-disable import/no-absolute-path */ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { translate } from 'react-i18next'; +import { withTracker } from 'meteor/react-meteor-data'; +import { currentLocationHref } from '/imports/ui/components/Utils/location'; +import { + FacebookShareButton, + GooglePlusShareButton, + TwitterShareButton, + TelegramShareButton, + WhatsappShareButton, + RedditShareButton, + EmailShareButton, + + FacebookIcon, + GooglePlusIcon, + TwitterIcon, + TelegramIcon, + WhatsappIcon, + RedditIcon, + EmailIcon +} from 'react-share'; + +import './ShareIt.scss'; + +class ShareIt extends Component { + constructor(props) { + super(props); + this.t = props.t; + } + + render() { + const { title } = this.props; + const shareUrl = currentLocationHref(); + + return ( +
+
+ + + +
+ +
+ + + + +
+   +
+
+ +
+ + + + +
+   +
+
+ +
+ + + + +
+   +
+
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+
+ ); + } +} + +ShareIt.propTypes = { + t: PropTypes.func.isRequired, + title: PropTypes.string.isRequired +}; + +ShareIt.defaultProps = { +}; + +export default translate([], { wait: true })(withTracker((props) => { + const { title } = props; + return { + title + }; +})(ShareIt)); diff --git a/imports/ui/components/ShareIt/ShareIt.scss b/imports/ui/components/ShareIt/ShareIt.scss new file mode 100644 index 0000000..99996de --- /dev/null +++ b/imports/ui/components/ShareIt/ShareIt.scss @@ -0,0 +1,19 @@ +.share_it { + vertical-align: top; + display: inline-block; + margin-right: 10px; + text-align: center; +} + +.share_it__share-count { + margin-top: 3px; + font-size: 12px; +} + +.share_it__share-button { + cursor: pointer; +} + +.share_it__share-button:hover:not(:active) { + opacity: 0.75; +} diff --git a/imports/ui/components/Utils/location.js b/imports/ui/components/Utils/location.js index 8f60415..804724a 100644 --- a/imports/ui/components/Utils/location.js +++ b/imports/ui/components/Utils/location.js @@ -10,4 +10,12 @@ export const currentLocation = () => { return location.get(); }; +export const currentLocationHref = () => { + if (Meteor.isClient) { + return window.location.href; + } + // FIXME + return location.get(); +}; + export const isHome = () => currentLocation() === '/'; diff --git a/imports/ui/pages/Fires/Fires.js b/imports/ui/pages/Fires/Fires.js index 52d1b81..7b7f425 100644 --- a/imports/ui/pages/Fires/Fires.js +++ b/imports/ui/pages/Fires/Fires.js @@ -19,6 +19,7 @@ import FromNow from '/imports/ui/components/FromNow/FromNow'; import { dateLongFormat } from '/imports/api/Common/dates'; import '/imports/startup/client/comments'; import FalsePositiveTypes from '/imports/api/FalsePositives/FalsePositiveTypes'; +import ShareIt from '/imports/ui/components/ShareIt/ShareIt'; import './Fires.scss'; class Fire extends React.Component { @@ -113,6 +114,8 @@ class Fire extends React.Component {

Fuego notificado por uno de nuestros usuarios/as

} + + {(fire.type !== 'vecinal') &&
{t('¿No es un fuego forestal?')}
diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js index 15850f2..8cbfb45 100644 --- a/imports/ui/pages/FiresMap/FiresMap.js +++ b/imports/ui/pages/FiresMap/FiresMap.js @@ -32,6 +32,7 @@ import SiteSettings from '/imports/api/SiteSettings/SiteSettings'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import { isNotHomeAndMobile, isChrome } from '/imports/ui/components/Utils/isMobile'; import { isHome } from '/imports/ui/components/Utils/location'; +import ShareIt from '/imports/ui/components/ShareIt/ShareIt'; import './FiresMap.scss'; @@ -137,6 +138,7 @@ class FiresMap extends React.Component { render() { const { t } = this.props; console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length + this.props.firealerts.length} of ${this.props.activefirestotal} total. False positives: ${this.props.falsePositives.length}. Subs users ready ${this.props.subsready} (${this.props.userSubs.length}), reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`); + const title = `${t('AppName')}: ${t('Fuegos activos')}`; if (Meteor.isDevelopment) { console.log(`False positives total: ${this.props.falsePositivesTotal}`); } @@ -148,7 +150,7 @@ class FiresMap extends React.Component { > { !isHome() && - {t('AppName')}: {t('Fuegos activos')} + {title} } {this.props.loading || !this.props.subsready ? @@ -255,6 +257,9 @@ class FiresMap extends React.Component {

(*)Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.

+ { !isHome() && + + } ); } diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js index 5a3fe23..f69ec43 100644 --- a/imports/ui/pages/Index/Index.js +++ b/imports/ui/pages/Index/Index.js @@ -16,6 +16,7 @@ import 'bootstrap-carousel-swipe-haven/carousel-swipe'; import { isAnyMobile } from '/imports/ui/components/Utils/isMobile'; import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor'; import SubscriptionsMap from '/imports/ui/pages/Subscriptions/SubscriptionsMap'; +import ShareIt from '/imports/ui/components/ShareIt/ShareIt'; import FiresMap from '../FiresMap/FiresMap'; import './Index.scss'; @@ -35,7 +36,10 @@ class Index extends Component { } componentDidMount() { - $('.carousel').carousel(); + const c = $('.carousel'); + if (c.carousel) { + c.carousel(); + } } onResize() { @@ -78,10 +82,11 @@ class Index extends Component { render() { const { t } = this.props; + const title = `${t('AppName')}: ${t('Inicio')}`; return (
- {t('AppName')}: {t('Inicio')} + {title} {/* https://v4-alpha.getbootstrap.com/components/carousel/ */} @@ -291,6 +296,9 @@ class Index extends Component {
+
+ +
diff --git a/imports/ui/pages/Subscriptions/SubscriptionsMap.js b/imports/ui/pages/Subscriptions/SubscriptionsMap.js index 0afd38d..72842a3 100644 --- a/imports/ui/pages/Subscriptions/SubscriptionsMap.js +++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.js @@ -22,6 +22,7 @@ import Loading from '/imports/ui/components/Loading/Loading'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import { isChrome } from '/imports/ui/components/Utils/isMobile'; import { isHome } from '/imports/ui/components/Utils/location'; +import ShareIt from '/imports/ui/components/ShareIt/ShareIt'; import './SubscriptionsMap.scss'; @@ -85,12 +86,13 @@ class SubscriptionsMap extends React.Component { render() { const { t } = this.props; + const title = `${t('AppName')}: ${t('Zonas vigiladas')}`; console.log(`Rendering Subs users ready ${this.props.subsready} subs: ${this.props.userSubs.length} viewport: ${JSON.stringify(this.state.viewport)}`); return ( { !isHome() && - {t('AppName')}: {t('Zonas vigiladas')} + {title} } {!this.props.subsready ? @@ -140,6 +142,9 @@ class SubscriptionsMap extends React.Component {

(*)Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.

+ { !isHome() && + + } ); } diff --git a/package-lock.json b/package-lock.json index 002d5c7..5f4f4a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2946,7 +2946,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" }, @@ -2954,8 +2953,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" } } }, @@ -7330,6 +7328,14 @@ "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", "dev": true }, + "jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=", + "requires": { + "debug": "2.6.9" + } + }, "jsonpointer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz", @@ -10205,6 +10211,17 @@ "prop-types": "15.6.0" } }, + "react-share": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-share/-/react-share-2.0.0.tgz", + "integrity": "sha512-WlY2nPEg8D3X9/WIJwKcEAlfqNVXbvYJ2nXIjRRQR3GBehQCs1iOrEeRn0KxJxj8AOWmX7k/AmJZLvxtovjVdQ==", + "requires": { + "babel-runtime": "6.26.0", + "classnames": "2.2.5", + "jsonp": "0.2.1", + "prop-types": "15.6.0" + } + }, "react-side-effect": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.3.tgz", diff --git a/package.json b/package.json index 945775d..e63515b 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "react-router-bootstrap": "^0.24.4", "react-router-dom": "^4.2.2", "react-router-hash-link": "^1.1.1", + "react-share": "^2.0.0", "reactstrap": "^5.0.0-alpha.3", "simpl-schema": "^0.3.2", "simple-line-icons": "^2.4.1",