/*********************************************** needShareButton - Version 1.0.0 - Copyright 2015 Dzmitry Vasileuski - Licensed under MIT (http://opensource.org/licenses/MIT) ***********************************************/ (function () { // find closest function closest(elem, parent) { if (typeof (parent) == "string") { var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector; if (!!matchesSelector) { while (elem) { if (matchesSelector.bind(elem)(parent)) { return elem; } else { elem = elem.parentElement; } } } return false; } else { while (elem) { if (elem == parent) { return elem; } else { elem = elem.parentElement; } } return false; } } // share button class window.needShareButton = function (elem, options) { // create element reference var root = this; root.elem = elem || "need-share-button"; /* Helpers ***********************************************/ // get title from html root.getTitle = function () { var content; // check querySelector existance for old browsers if (document.querySelector) { content = document.querySelector("title"); if (content) { return content.innerText; } } return document.title; }; // get image from html root.getImage = function () { var content; // check querySelector existance for old browsers if (document.querySelector) { content = document.querySelector("meta[property=\"og:image\"]") || document.querySelector("meta[name=\"twitter:image\"]"); if (content) { return content.getAttribute("content"); } else { return ""; } } else { return ""; } }; // get description from html root.getDescription = function () { var content; // check querySelector existance for old browsers if (document.querySelector) { content = document.querySelector("meta[property=\"og:description\"]") || document.querySelector("meta[name=\"twitter:description\"]") || document.querySelector("meta[name=\"description\"]"); if (content) { return content.getAttribute("content"); } else { return ""; } } else { content = document.getElementsByTagName("meta").namedItem("description"); if (content) { return content.getAttribute("content"); } else { return ""; } } }; // share urls for all networks root.share = { "weibo": function (el) { var myoptions = getOptions(el); var url = "http://v.t.sina.com.cn/share/share.php?title=" + encodeURIComponent(myoptions.title) + "&url=" + encodeURIComponent(myoptions.url) + "&pic=" + encodeURIComponent(myoptions.image); root.popup(url); }, "wechat": function (el) { var myoptions = getOptions(el); var imgSrc = "https://api.qinco.me/api/qr?size=400&content=" + encodeURIComponent(myoptions.url); var dropdownEl = el.querySelector(".need-share-button_dropdown"); var img = dropdownEl.getElementsByClassName("need-share-wechat-code-image")[0]; if (img) { img.remove(); } else { img = document.createElement("img"); img.src = imgSrc; img.alt = "loading wechat image..."; img.setAttribute("class", "need-share-wechat-code-image"); dropdownEl.appendChild(img); } }, "douban": function (el) { var myoptions = getOptions(el); var url = "https://www.douban.com/share/service?name=" + encodeURIComponent(myoptions.title) + "&href=" + encodeURIComponent(myoptions.url) + "&image=" + encodeURIComponent(myoptions.image); root.popup(url); }, "qqzone": function (el) { var myoptions = getOptions(el); var url = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=" + encodeURIComponent(myoptions.title) + "&url=" + encodeURIComponent(myoptions.url) + "&pics=" + encodeURIComponent(myoptions.image) + "&desc=" + encodeURIComponent(myoptions.description); root.popup(url); }, "renren": function (el) { var myoptions = getOptions(el); var url = "http://widget.renren.com/dialog/share?title=" + encodeURIComponent(myoptions.title) + "&resourceUrl=" + encodeURIComponent(myoptions.url) + "&pic=" + encodeURIComponent(myoptions.image) + "&description=" + encodeURIComponent(myoptions.description); root.popup(url); }, "mailto": function (el) { var myoptions = getOptions(el); var url = "mailto:?subject=" + encodeURIComponent(myoptions.title) + "&body=Thought you might enjoy reading this: " + encodeURIComponent(myoptions.url) + " - " + encodeURIComponent(myoptions.description); window.location.href = url; }, "twitter": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "twitter.com/intent/tweet?text="; url += encodeURIComponent(myoptions.title) + "&url=" + encodeURIComponent(myoptions.url); root.popup(url); }, "pinterest": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "pinterest.com/pin/create/bookmarklet/?is_video=false"; url += "&media=" + encodeURIComponent(myoptions.image); url += "&url=" + encodeURIComponent(myoptions.url); url += "&description=" + encodeURIComponent(myoptions.title); root.popup(url); }, "facebook": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.facebook.com/share.php?"; url += "u=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "googleplus": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "plus.google.com/share?"; url += "url=" + encodeURIComponent(myoptions.url); root.popup(url); }, "reddit": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.reddit.com/submit?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "delicious": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "del.icio.us/post?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); url += "¬es=" + encodeURIComponent(myoptions.description); root.popup(url); }, "stumbleupon": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.stumbleupon.com/submit?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "linkedin": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.linkedin.com/shareArticle?mini=true"; url += "&url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); url += "&source=" + encodeURIComponent(myoptions.source); root.popup(url); }, "slashdot": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "slashdot.org/bookmark.pl?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "technorati": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "technorati.com/faves?"; url += "add=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "posterous": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "posterous.com/share?"; url += "linkto=" + encodeURIComponent(myoptions.url); root.popup(url); }, "tumblr": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.tumblr.com/share?v=3"; url += "&u=" + encodeURIComponent(myoptions.url); url += "&t=" + encodeURIComponent(myoptions.title); root.popup(url); }, "googlebookmarks": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.google.com/bookmarks/mark?op=edit"; url += "&bkmk=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); url += "&annotation=" + encodeURIComponent(myoptions.description); root.popup(url); }, "newsvine": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.newsvine.com/_tools/seed&save?"; url += "u=" + encodeURIComponent(myoptions.url); url += "&h=" + encodeURIComponent(myoptions.title); root.popup(url); }, "evernote": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.evernote.com/clip.action?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "friendfeed": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.friendfeed.com/share?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); root.popup(url); }, "vkontakte": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "vkontakte.ru/share.php?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); url += "&description=" + encodeURIComponent(myoptions.description); url += "&image=" + encodeURIComponent(myoptions.image); url += "&noparse=true"; root.popup(url); }, "odnoklassniki": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1"; url += "&st.comments=" + encodeURIComponent(myoptions.description); url += "&st._surl=" + encodeURIComponent(myoptions.url); root.popup(url); }, "mailru": function (el) { var myoptions = getOptions(el); var url = myoptions.protocol + "connect.mail.ru/share?"; url += "url=" + encodeURIComponent(myoptions.url); url += "&title=" + encodeURIComponent(myoptions.title); url += "&description=" + encodeURIComponent(myoptions.description); url += "&imageurl=" + encodeURIComponent(myoptions.image); root.popup(url); } }; // open share link in a popup root.popup = function (url) { // set left and top position var popupWidth = 600, popupHeight = 500, // fix dual screen mode dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left, dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top, width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width, height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height, // calculate top and left position left = ((width / 2) - (popupWidth / 2)) + dualScreenLeft, top = ((height / 2) - (popupHeight / 2)) + dualScreenTop, // show popup shareWindow = window.open(url, "targetWindow", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=" + popupWidth + ", height=" + popupHeight + ", top=" + top + ", left=" + left); // Puts focus on the newWindow if (window.focus) { shareWindow.focus(); } }; /* Set options ***********************************************/ // create default options root.options = { iconStyle: "default", // default or box boxForm: "horizontal", // horizontal or vertical position: "bottomCenter", // top / middle / bottom + Left / Center / Right protocol: ["http", "https"].indexOf(window.location.href.split(":")[0]) === -1 ? "https://" : "//", networks: "Weibo,Wechat,Douban,QQZone,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Linkedin,Tumblr,Evernote" }; // integrate custom options for (var i in options) { if (options.hasOwnProperty(i)) { root.options[i] = options[i]; } } // convert networks string into array //root.options.networks = root.options.networks.toLowerCase().split(","); root.options.networks = root.options.networks.split(","); function getOptions(el) { // integrate data attribute options var ret = {}; for (var i in root.options) { if (root.options.hasOwnProperty(i)) { ret[i] = root.options[i]; } } // these attrs must get dynamically. ret.url = window.location.href; ret.title = root.getTitle(); ret.image = root.getImage(); ret.description = root.getDescription(); for (var option in el.dataset) { // replace only 'share-' prefixed data-attributes if (option.match(/share/)) { var newOption = option.replace(/share/, ""); if (!newOption.length) { continue; } newOption = newOption.charAt(0).toLowerCase() + newOption.slice(1); var val = el.dataset[option]; if (newOption === "networks") { //val = val.toLowerCase().split(","); val = val.split(","); } else if (newOption === "url" && val && val[0] === "/") { // fix relative url problem. val = location.origin + val; } ret[newOption] = val; } } return ret; } function createDropdown(el) { // create dropdown var dropdownEl = document.createElement("span"); dropdownEl.className = "need-share-button_dropdown"; if (el.querySelector(".need-share-button_dropdown")) { return; } var myoptions = getOptions(el); // set dropdown row length if (myoptions.iconStyle == "box" && myoptions.boxForm == "horizontal") { dropdownEl.className += " need-share-button_dropdown-box-horizontal"; } else if (myoptions.iconStyle == "box" && myoptions.boxForm == "vertical") { dropdownEl.className += " need-share-button_dropdown-box-vertical"; } // set dropdown position setTimeout(function () { switch (myoptions.position) { case "topLeft": dropdownEl.className += " need-share-button_dropdown-top-left"; break; case "topRight": dropdownEl.className += " need-share-button_dropdown-top-right"; break; case "topCenter": dropdownEl.className += " need-share-button_dropdown-top-center"; dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px"; break; case "middleLeft": dropdownEl.className += " need-share-button_dropdown-middle-left"; dropdownEl.style.marginTop = -dropdownEl.offsetHeight / 2 + "px"; break; case "middleRight": dropdownEl.className += " need-share-button_dropdown-middle-right"; dropdownEl.style.marginTop = -dropdownEl.offsetHeight / 2 + "px"; break; case "bottomLeft": dropdownEl.className += " need-share-button_dropdown-bottom-left"; break; case "bottomRight": dropdownEl.className += " need-share-button_dropdown-bottom-right"; break; case "bottomCenter": dropdownEl.className += " need-share-button_dropdown-bottom-center"; dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px"; break; default: dropdownEl.className += " need-share-button_dropdown-bottom-center"; dropdownEl.style.marginLeft = -dropdownEl.offsetWidth / 2 + "px"; break; } }, 1); // fill fropdown with buttons var iconClass = myoptions.iconStyle == "default" ? "need-share-button_link need-share-button_" : "need-share-button_link-" + myoptions.iconStyle + " need-share-button_link need-share-button_"; for (var network in myoptions.networks) { if (myoptions.networks.hasOwnProperty(network)) { var link = document.createElement("span"); network = myoptions.networks[network].trim(); var networkLC = network.toLowerCase(); link.className = iconClass + networkLC; var fontello = ["weibo", "wechat", "douban", "qqzone", "renren"]; if (fontello.indexOf(networkLC) === -1) { link.className += " social-" + networkLC; } else { link.className += " icon-" + networkLC; } link.dataset.network = networkLC; link.title = network; dropdownEl.appendChild(link); } } dropdownEl.addEventListener("click", function (event) { if (closest(event.target, ".need-share-button_link")) { event.preventDefault(); event.stopPropagation(); root.share[event.target.dataset.network](el); return false; } }); el.appendChild(dropdownEl); } // close on click outside document.addEventListener("click", function (event) { var openedEl = document.querySelector(".need-share-button-opened"); if (!closest(event.target, ".need-share-button-opened")) { if (openedEl) { openedEl.classList.remove("need-share-button-opened"); // hide wechat code image when close the dropdown. if (openedEl.querySelector(".need-share-wechat-code-image")) { openedEl.querySelector(".need-share-wechat-code-image").remove(); } } else { var el = closest(event.target, root.elem); if (el) { if (!el.classList.contains("need-share-button-opened")) { createDropdown(el); setTimeout(function () { el.classList.add("need-share-button-opened"); }, 1); } } } } else { setTimeout(function () { openedEl.classList.remove("need-share-button-opened"); // hide wechat code image when close the dropdown. if (openedEl.querySelector(".need-share-wechat-code-image")) { openedEl.querySelector(".need-share-wechat-code-image").remove(); } }, 1); } }); }; })();