Skip to content

Instantly share code, notes, and snippets.

@backflip
Last active October 10, 2019 11:54
Show Gist options
  • Save backflip/e1b74d02b1c7275a5791831e8328e07c to your computer and use it in GitHub Desktop.
Save backflip/e1b74d02b1c7275a5791831e8328e07c to your computer and use it in GitHub Desktop.
import Helper from "./Helper";
import HeaderStateHandler from "./HeaderStateHandler";
const defaults = {
toggler: "#js-share-toggler",
share: "#js-header-share",
title: "title",
facebook: "#js-share-facebook",
twitter: "#js-share-twitter",
linkedin: "#js-share-linkedin",
mail: "#js-share-mail",
activeClass: "active"
};
class ShareHandler {
constructor(options) {
this.options = Object.assign({ ...defaults }, options);
this.toggler = this.constructor.getToggler(this.options);
this.share = this.constructor.getShare(this.options);
this.title = document.querySelector(this.options.title).innerText;
this.url = window.location.href;
this.image = "";
this.bindEvents();
}
bindEvents() {
this.toggler.addEventListener("click", () => {
this.togglerClicked();
});
document
.querySelector(this.options.facebook)
.addEventListener("click", () => {
this.shareFacebook();
});
document
.querySelector(this.options.twitter)
.addEventListener("click", () => {
this.shareTwitter();
});
document
.querySelector(this.options.linkedin)
.addEventListener("click", () => {
this.shareLinkedin();
});
document.querySelector(this.options.mail).addEventListener("click", () => {
this.shareMail();
});
}
openShare() {
HeaderStateHandler.shareHandler();
Helper.slideOpen(this.share);
Helper.addClass(this.toggler, this.options.activeClass);
}
togglerClicked() {
if (this.constructor.isShareOpen(this.options)) {
this.constructor.closeShare(this.options);
} else {
this.openShare();
}
}
shareTwitter() {
open(
"http://twitter.com/share?url=" + this.url + "&text=" + this.title,
"tshare",
"height=400,width=550,resizable=1,toolbar=0,menubar=0,status=0,location=0"
);
}
shareFacebook() {
open(
"http://facebook.com/sharer.php?s=100&p[url]=" +
this.url +
"&p[images][0]=" +
this.image +
"&p[title]=" +
this.title,
"fbshare",
"height=380,width=660,resizable=0,toolbar=0,menubar=0,status=0,location=0,scrollbars=0"
);
}
shareLinkedin() {
window.open(
"http://www.linkedin.com/shareArticle?mini=true&title=" +
this.title +
"url=" +
encodeURIComponent(this.url),
"",
"left=0,top=0,width=650,height=420,personalbar=0,toolbar=0,scrollbars=0,resizable=0"
);
}
shareMail() {
window.location.href =
"mailto:?subject=" + this.title + "&body=" + this.url;
}
static getToggler(options = defaults) {
return document.querySelector(options.toggler);
}
static getShare(options = defaults) {
return document.querySelector(options.share);
}
static isShareOpen(options = defaults) {
return Helper.hasClass(this.getToggler(), options.activeClass);
}
static closeShare(options = defaults) {
Helper.slideClose(this.getShare(options));
Helper.removeClass(this.getToggler(options), options.activeClass);
}
}
export default ShareHandler;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment