Site updated: 2019-04-15 15:42:26
This commit is contained in:
Cool-Y
127
lib/needsharebutton/font-embedded.css
Normal file
127
lib/needsharebutton/font-embedded.css
Normal file
File diff suppressed because one or more lines are too long
372
lib/needsharebutton/needsharebutton.css
Normal file
372
lib/needsharebutton/needsharebutton.css
Normal file
@ -0,0 +1,372 @@
|
||||
/***********************************************
|
||||
needShareButton
|
||||
- Version 1.0.0
|
||||
- Copyright 2015 Dzmitry Vasileuski
|
||||
- Licensed under MIT (http://opensource.org/licenses/MIT)
|
||||
***********************************************/
|
||||
/* Social icons font
|
||||
***********************************************/
|
||||
@import url('font-embedded.css');
|
||||
.need-share-button {
|
||||
position: relative;
|
||||
}
|
||||
.need-share-button-opened {
|
||||
position: relative;
|
||||
}
|
||||
.need-share-button-opened img.need-share-wechat-code-image {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
.need-share-button_dropdown {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
width: 300px;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
-webkit-transform: scale(.1);
|
||||
-ms-transform: scale(.1);
|
||||
transform: scale(.1);
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
|
||||
opacity: 0;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
|
||||
}
|
||||
.need-share-button-opened .need-share-button_dropdown {
|
||||
visibility: visible;
|
||||
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
.need-share-button_dropdown-box-vertical,
|
||||
.need-share-button_dropdown-box-horizontal {
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.need-share-button_dropdown-box-vertical {
|
||||
width: 50px;
|
||||
}
|
||||
.need-share-button_dropdown-box-horizontal {
|
||||
width: auto;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
.need-share-button_link {
|
||||
display: inline-block;
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
line-height: 50px;
|
||||
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.need-share-button_link:hover {
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
|
||||
opacity: .7;
|
||||
}
|
||||
/* Dropdown position
|
||||
***********************************************/
|
||||
.need-share-button_dropdown-top-left {
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-top-right {
|
||||
bottom: 100%;
|
||||
left: 100%;
|
||||
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-top-center {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-middle-left {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-middle-right {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-bottom-left {
|
||||
top: 100%;
|
||||
right: 100%;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-bottom-right {
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.need-share-button_dropdown-bottom-center {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* Default theme
|
||||
***********************************************/
|
||||
.need-share-button-default {
|
||||
display: inline-block;
|
||||
|
||||
margin-bottom: 0;
|
||||
padding: 6px 12px;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* Network buttons
|
||||
***********************************************/
|
||||
.need-share-button_wechat {
|
||||
color: #a2dc30;
|
||||
}
|
||||
.need-share-button_wechat.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #a2dc30;
|
||||
}
|
||||
.need-share-button_weibo {
|
||||
color: #d52b2b;
|
||||
}
|
||||
.need-share-button_weibo.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #d52b2b;
|
||||
}
|
||||
.need-share-button_douban {
|
||||
color: #072;
|
||||
}
|
||||
.need-share-button_douban:before {
|
||||
content: '豆';
|
||||
}
|
||||
.need-share-button_douban.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #072;
|
||||
}
|
||||
.need-share-button_qqzone {
|
||||
color: #ffce00;
|
||||
}
|
||||
.need-share-button_qqzone.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #ffce00;
|
||||
}
|
||||
.need-share-button_renren {
|
||||
color: #207cc5;
|
||||
}
|
||||
.need-share-button_renren.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #207cc5;
|
||||
}
|
||||
.need-share-button_mailto {
|
||||
color: #efbe00;
|
||||
}
|
||||
.need-share-button_mailto.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #efbe00;
|
||||
}
|
||||
.need-share-button_twitter {
|
||||
color: #00acec;
|
||||
}
|
||||
.need-share-button_twitter.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #00acec;
|
||||
}
|
||||
.need-share-button_pinterest {
|
||||
color: #cd2027;
|
||||
}
|
||||
.need-share-button_pinterest.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #cd2027;
|
||||
}
|
||||
.need-share-button_facebook {
|
||||
color: #3b5998;
|
||||
}
|
||||
.need-share-button_facebook.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #3b5998;
|
||||
}
|
||||
.need-share-button_googleplus {
|
||||
color: #d44132;
|
||||
}
|
||||
.need-share-button_googleplus.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #d44132;
|
||||
}
|
||||
.need-share-button_reddit {
|
||||
color: #000;
|
||||
}
|
||||
.need-share-button_reddit.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #000;
|
||||
}
|
||||
.need-share-button_delicious {
|
||||
color: #000;
|
||||
}
|
||||
.need-share-button_delicious.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #000;
|
||||
}
|
||||
.need-share-button_stumbleupon {
|
||||
color: #f04e23;
|
||||
}
|
||||
.need-share-button_stumbleupon.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #f04e23;
|
||||
}
|
||||
.need-share-button_linkedin {
|
||||
color: #0085af;
|
||||
}
|
||||
.need-share-button_linkedin.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #0085af;
|
||||
}
|
||||
.need-share-button_slashdot {
|
||||
color: #026664;
|
||||
}
|
||||
.need-share-button_slashdot.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #026664;
|
||||
}
|
||||
.need-share-button_technorati {
|
||||
color: #49ae47;
|
||||
}
|
||||
.need-share-button_technorati.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #49ae47;
|
||||
}
|
||||
.need-share-button_posterous {
|
||||
color: #795d31;
|
||||
}
|
||||
.need-share-button_posterous.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #795d31;
|
||||
}
|
||||
.need-share-button_tumblr {
|
||||
color: #34465d;
|
||||
}
|
||||
.need-share-button_tumblr.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #34465d;
|
||||
}
|
||||
.need-share-button_googlebookmarks {
|
||||
color: #fde331;
|
||||
}
|
||||
.need-share-button_googlebookmarks.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #fde331;
|
||||
}
|
||||
.need-share-button_newsvine {
|
||||
color: #03652c;
|
||||
}
|
||||
.need-share-button_newsvine.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #03652c;
|
||||
}
|
||||
.need-share-button_evernote {
|
||||
color: #79d626;
|
||||
}
|
||||
.need-share-button_evernote.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #79d626;
|
||||
}
|
||||
.need-share-button_friendfeed {
|
||||
color: #b0cbe9;
|
||||
}
|
||||
.need-share-button_friendfeed.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #b0cbe9;
|
||||
}
|
||||
.need-share-button_vkontakte {
|
||||
color: #4c75a3;
|
||||
}
|
||||
.need-share-button_vkontakte.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #4c75a3;
|
||||
}
|
||||
.need-share-button_odnoklassniki {
|
||||
color: #ed812b;
|
||||
}
|
||||
.need-share-button_odnoklassniki.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #ed812b;
|
||||
}
|
||||
.need-share-button_mailru {
|
||||
color: #f89c0e;
|
||||
}
|
||||
.need-share-button_mailru.need-share-button_link-box {
|
||||
color: #fff;
|
||||
|
||||
background: #f89c0e;
|
||||
}
|
||||
537
lib/needsharebutton/needsharebutton.js
Normal file
537
lib/needsharebutton/needsharebutton.js
Normal file
@ -0,0 +1,537 @@
|
||||
/***********************************************
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user