62 feature wechat share

css/app.css

@@ -7,6 +7,7 @@
 @import 'modules/_header.css';
 @import 'modules/_generator.css';
 @import 'modules/_share-buttons.css';
+@import 'modules/_qrcode-popup.css';
 @import 'modules/_footer.css';
 
 @import 'modules/_media-queries.css';

css/modules/_qrcode-popup.css

@@ -0,0 +1,46 @@
+/* Qrcode popover */
+.qrcode-popup__qrcode {
+	display: none;
+	position:absolute;
+	top:-150px;
+	left:-13px
+}
+.qrcode-popup__checkbox:checked ~ .qrcode-popup__qrcode {
+	display: block
+}
+
+.qrcode-popup__checkbox {
+	position: absolute;
+	left: -9999px
+}
+
+.qrcode-popup__qrcode-wrapper {
+	padding: 10px;
+	background: #fff;
+	border: 2px solid #efefef;
+	border-radius: 5px
+}
+
+.qrcode-popup__qrcode-wrapper:after, .qrcode-popup__qrcode-wrapper:before {
+	top: 98%;
+	left: 20%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none
+}
+
+.qrcode-popup__qrcode-wrapper:after {
+	border-color: rgba(255, 255, 255, 0);
+	border-top-color: #ffffff;
+	border-width: 13px;
+	margin-left: -13px
+}
+.qrcode-popup__qrcode-wrapper:before {
+	border-color: rgba(239, 239, 239, 0);
+	border-top-color: #efefef;
+	border-width: 16px;
+	margin-left: -16px
+}

css/modules/_share-buttons.css

@@ -11,6 +11,7 @@
 }
 
 .resp-sharing-button {
+	cursor: pointer;
 	border-radius: 5px;
 	transition: 25ms ease-out;
 	padding: 0.5em 0.75em;
@@ -117,4 +118,13 @@
 
 .resp-sharing-button--whatsapp:hover {
 	background-color: #1da851
-}
+}
+
+.resp-sharing-button--wechat {
+	background-color: #37c700;
+	position:relative
+}
+
+.resp-sharing-button--wechat:hover {
+	background-color: #30af00
+}

js/components/PreviewButton.react.js

@@ -1,12 +1,17 @@
+var QrcodePopup = require('./QrcodePopup.react');
+
 var PreviewButton = React.createClass({
 	render: function() {
+		var ShareButton = "a";
+		var ShareBProps = {};
 		var network = this.props.network;
 		var name = network.name;
 		var text = this.props.text;
 		var url = this.props.url;
 		var id = this.props.id;
 		var icon = <div aria-hidden="true" key={"preview-button-" + name} className={"resp-sharing-button__icon resp-sharing-button__icon--" + this.props.iconSize} dangerouslySetInnerHTML={ this._makeIcon(this.props.icon) }></div>;
 		var shareText = "";
+		var qrcode;
 
 		// Change the button text based on size
 		if (this.props.size === "medium") {
@@ -15,18 +20,26 @@ var PreviewButton = React.createClass({
 			shareText = "Share " + (this.props.network.name.toLowerCase() === "e-mail" ? "by " : "on ") + name;
 		}
 
+		if (network.qrcode) {
+			ShareButton = "label";
+			ShareBProps.htmlFor = name + "__qrcode";
+			qrcode = <QrcodePopup id={ ShareBProps.htmlFor } content={ network.link }/>;
+		}
+
 		// Render preview button
 		return (
-			<a className="resp-sharing-button__link"
+			<ShareButton {...ShareBProps}
+			   className="resp-sharing-button__link"
 			   key={ name + "share-link" }
 			   href={ network.link }
 			   target={ network.openInThisWindow ? "_self" : "_blank" }
-				 aria-label={ shareText }>
+			   aria-label={ shareText }>
 				<div key={ name + "share-button"} className={ "resp-sharing-button resp-sharing-button--" + id.toLowerCase() + " resp-sharing-button--" + this.props.size}>
 					{ icon }
 					{ shareText }
+					{ qrcode }
 				</div>
-			</a>
+			</ShareButton>
 		);
 	},
 	_makeIcon: function(string) {

js/components/QrcodePopup.react.js

@@ -0,0 +1,19 @@
+var QrcodePopup = React.createClass({
+	render: function() {
+		var id = this.props.idPopup;
+		var content = this.props.content;
+
+		return (
+			<div className={ "qrcode-popup" }>
+				<input type="checkbox" className={ "qrcode-popup__checkbox" } id={ this.props.id }/>
+				<div className={ "qrcode-popup__qrcode" } >
+					<div className={ "qrcode-popup__qrcode-wrapper" } >
+						<img src={ 'https://api.qrserver.com/v1/create-qr-code/?size=110x110&data=' + this.props.content } />
+					</div>
+				</div>
+			</div>
+		);
+	}
+});
+
+module.exports = QrcodePopup;