Skip to content

Paste SVG file as a inline element. #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tysian wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Paste SVG file as a inline element. #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6febaae
Core: Added option to paste inline SVG
tysian Oct 22, 2019
ab1ca25
Change option name, README update
tysian Oct 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,10 @@ It accepts following values:
* **image url** - string in image url format is rendered as `<img src="image url" />`.
* **image base64 url** - string in image base64 url format is rendered as `<img src="image base64 url" />`.

#### inlineSvg :`Boolean`

If `true` and logo has correct image url with `*.svg`, it will use it as a inline SVG instead of `<img src="image url" />`.

#### css: `String`

A string specifying spaces-separated custom css classes to attach to share DOM element.
Expand Down
167 changes: 121 additions & 46 deletions dist/jssocials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
/*! jssocials - v1.5.0 - 2017-04-30
/*! jssocials - v1.5.0 - 2019-10-22
* http://js-socials.com
* Copyright (c) 2017 Artem Tabalin; Licensed MIT */
* Copyright (c) 2019 Artem Tabalin; Licensed MIT */
(function(window, $, undefined) {

"use strict";

var JSSOCIALS = "JSSocials",
JSSOCIALS_DATA_KEY = JSSOCIALS;

Expand All @@ -14,7 +16,8 @@
};

var IMG_SRC_REGEX = /(\.(jpeg|png|gif|bmp|svg)$|^data:image\/(jpeg|png|gif|bmp|svg\+xml);base64)/i;
var URL_PARAMS_REGEX = /(&?[a-zA-Z0-9]+=)?\{([a-zA-Z0-9]+)\}/g;
var SVG_EXTENSION_REGEX = /(\.svg)/i;
var URL_PARAMS_REGEX = /(&?[a-zA-Z0-9]+=)?{([a-zA-Z0-9]+)}/g;

var MEASURES = {
"G": 1000000000,
Expand Down Expand Up @@ -78,7 +81,7 @@

_initDefaults: function() {
this.url = window.location.href;
this.text = $.trim($("meta[name=description]").attr("content") || $("title").text());
this.text = $.trim($("meta[name=description]").attr("content") || $(document).prop("title"));
},

_initShares: function() {
Expand Down Expand Up @@ -192,8 +195,9 @@
_getShareStrategy: function(share) {
var result = shareStrategies[share.shareIn || this.shareIn];

if(!result)
if(!result) {
throw Error("Share strategy '" + this.shareIn + "' not found");
}

return result;
},
Expand All @@ -205,14 +209,42 @@

_createShareLogo: function(share) {
var logo = share.logo;

var $result = IMG_SRC_REGEX.test(logo) ?
$("<img>").attr("src", share.logo) :
$("<i>").addClass(logo);

$result.addClass(this.shareLogoClass);
var isinlineSvg = share.inlineSvg;
var $result;
if(isinlineSvg && SVG_EXTENSION_REGEX.test(logo)) {
var shareLogoClass = this.shareLogoClass;
$.ajax({
type: "GET",
url: logo,
async: false,
data: {},
success: function(data) {
var $svg = $(data).find('svg');
$svg = $($svg);
$svg.removeAttr('xmlns:a');
$result = $svg.addClass(shareLogoClass)
}
});
// $.get(logo, function(data) {
// var $svg = $(data).find('svg');
// $svg = $($svg);
// $svg.removeAttr('xmlns:a');
// $result = $("<div>")
// .addClass(this.shareLogoClass)
// .append($svg);
// // return $result
// return $("<div>").addClass(logo);
// })
} else {
$result = IMG_SRC_REGEX.test(logo) ?
$("<img>").attr("src", share.logo) :
$("<i>").addClass(logo);

$result.addClass(this.shareLogoClass);
}

return $result;

},

_createShareLabel: function(share) {
Expand Down Expand Up @@ -279,6 +311,9 @@
},

_formatShareUrl: function(url, share) {
if (!url)
return url;

return url.replace(URL_PARAMS_REGEX, function(match, key, field) {
var value = share[field] || "";
return value ? (key || "") + window.encodeURIComponent(value) : "";
Expand Down Expand Up @@ -411,6 +446,10 @@
return $("<a>").attr({ target: "_blank", href: args.shareUrl });
},

top: function(args) {
return $("<a>").attr({ target: "_top", href: args.shareUrl });
},

self: function(args) {
return $("<a>").attr({ target: "_self", href: args.shareUrl });
}
Expand All @@ -428,53 +467,50 @@

(function(window, $, jsSocials, undefined) {

"use strict";

$.extend(jsSocials.shares, {

email: {
label: "E-mail",
logo: "fa fa-at",
inlineSvg: false,
shareUrl: "mailto:{to}?subject={text}&body={url}",
countUrl: "",
shareIn: "self"
shareIn: "top"
},

twitter: {
label: "Tweet",
logo: "fa fa-twitter",
inlineSvg: false,
shareUrl: "https://twitter.com/share?url={url}&text={text}&via={via}&hashtags={hashtags}",
countUrl: ""
},

facebook: {
label: "Like",
logo: "fa fa-facebook",
inlineSvg: false,
shareUrl: "https://facebook.com/sharer/sharer.php?u={url}",
countUrl: "https://graph.facebook.com/?id={url}",
getCount: function(data) {
return data.share && data.share.share_count || 0;
}
},

vkontakte: {
label: "Like",
logo: "fa fa-vk",
shareUrl: "https://vk.com/share.php?url={url}&title={title}&description={text}",
countUrl: "https://vk.com/share.php?act=count&index=1&url={url}",
getCount: function(data) {
return parseInt(data.slice(15, -2).split(', ')[1]);
}
},

googleplus: {
label: "+1",
logo: "fa fa-google",
inlineSvg: false,
shareUrl: "https://plus.google.com/share?url={url}",
countUrl: ""
},

linkedin: {
label: "Share",
logo: "fa fa-linkedin",
inlineSvg: false,
shareUrl: "https://www.linkedin.com/shareArticle?mini=true&url={url}",
countUrl: "https://www.linkedin.com/countserv/count/share?format=jsonp&url={url}&callback=?",
getCount: function(data) {
Expand All @@ -485,6 +521,7 @@
pinterest: {
label: "Pin it",
logo: "fa fa-pinterest",
inlineSvg: false,
shareUrl: "https://pinterest.com/pin/create/bookmarklet/?media={media}&url={url}&description={text}",
countUrl: "https://api.pinterest.com/v1/urls/count.json?&url={url}&callback=?",
getCount: function(data) {
Expand All @@ -495,64 +532,102 @@
stumbleupon: {
label: "Share",
logo: "fa fa-stumbleupon",
inlineSvg: false,
shareUrl: "http://www.stumbleupon.com/submit?url={url}&title={title}",
countUrl: "https://cors-anywhere.herokuapp.com/https://www.stumbleupon.com/services/1.01/badge.getinfo?url={url}",
getCount: function(data) {
return data.result && data.result.views;
}
},

telegram: {
label: "Telegram",
logo: "fa fa-telegram",
shareUrl: "tg://msg?text={url} {text}",
countUrl: "",
shareIn: "self"
pocket: {
label: "Pocket",
logo: "fa fa-get-pocket",
inlineSvg: false,
shareUrl: "https://getpocket.com/save?url={url}&title={title}",
countUrl: ""
},

whatsapp: {
label: "WhatsApp",
logo: "fa fa-whatsapp",
inlineSvg: false,
shareUrl: "whatsapp://send?text={url} {text}",
countUrl: "",
shareIn: "self"
},

line: {
label: "LINE",
logo: "fa fa-comment",
shareUrl: "http://line.me/R/msg/text/?{text} {url}",
countUrl: ""
shareIn: "top"
},

viber: {
label: "Viber",
logo: "fa fa-volume-control-phone",
inlineSvg: false,
shareUrl: "viber://forward?text={url} {text}",
countUrl: "",
shareIn: "self"
},

pocket: {
label: "Pocket",
logo: "fa fa-get-pocket",
shareUrl: "https://getpocket.com/save?url={url}&title={title}",
countUrl: ""
shareIn: "top"
},

messenger: {
label: "Share",
logo: "fa fa-commenting",
inlineSvg: false,
shareUrl: "fb-messenger://share?link={url}",
countUrl: "",
shareIn: "self"
shareIn: "top"
},

browser_messenger: {
label: "Share",
logo: "fa fa-commenting",
inlineSvg: false,
shareUrl: "https://www.facebook.com/dialog/send?app_id={appid}&link={url}&redirect_uri={redirect}",
countUrl: "",
shareIn: "top"
},

telegram: {
label: "Telegram",
logo: "fa fa-telegram",
inlineSvg: false,
shareUrl: "tg://msg?text={url} {text}",
countUrl: "",
shareIn: "top"
},

vkontakte: {
label: "Like",
logo: "fa fa-vk",
inlineSvg: false,
shareUrl: "https://vk.com/share.php?url={url}&title={title}&description={text}",
countUrl: "https://vk.com/share.php?act=count&index=1&url={url}",
getCount: function(data) {
return parseInt(data.slice(15, -2).split(', ')[1]);
}
},

line: {
label: "LINE",
logo: "fa fa-comment",
inlineSvg: false,
shareUrl: "http://line.me/R/msg/text/?{text} {url}",
countUrl: ""
},

rss: {
label: "RSS",
logo: "fa fa-rss",
inlineSvg: false,
shareUrl: "/feeds/",
countUrl: ""
},

sms: {
label: "SMS",
logo: "fa fa-comments-o",
inlineSvg: false,
shareUrl: "sms:{delimiter}body={text} {url}",
delimiter: "?",
countUrl: "",
shareIn: "blank"
shareIn: "top"
}

});
Expand Down
Loading