diff --git a/package.json b/package.json
index ab3a8a8..0f4c3ab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue-goodshare",
- "version": "1.4.0",
+ "version": "1.5.0",
"description": "Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks.",
"main": "src/VueGoodshare.vue",
"scripts": {
diff --git a/src/VueGoodshare.vue b/src/VueGoodshare.vue
index a031c00..8c21aa5 100644
--- a/src/VueGoodshare.vue
+++ b/src/VueGoodshare.vue
@@ -1,28 +1,33 @@
<template>
<div>
<div v-if="this.$props.bundle === 'world'">
- <vue-goodshare-facebook has_icon has_counter title_social="Facebook"/>
- <vue-goodshare-linked-in has_icon has_counter title_social="LinkedIn"/>
- <vue-goodshare-tumblr has_icon has_counter title_social="Tumblr"/>
- <vue-goodshare-pinterest has_icon has_counter title_social="Pinterest"/>
- <vue-goodshare-reddit has_icon has_counter title_social="Reddit"/>
- <vue-goodshare-twitter has_icon title_social="Twitter"/>
- <vue-goodshare-email has_icon title_social="Email"/>
+ <vue-goodshare-facebook has_icon has_counter title_social="Facebook" />
+ <vue-goodshare-linked-in has_icon has_counter title_social="LinkedIn" />
+ <vue-goodshare-tumblr has_icon has_counter title_social="Tumblr" />
+ <vue-goodshare-pinterest has_icon has_counter title_social="Pinterest" />
+ <vue-goodshare-reddit has_icon has_counter title_social="Reddit" />
+ <vue-goodshare-twitter has_icon title_social="Twitter" />
+ <vue-goodshare-email has_icon title_social="Email" />
+ <vue-goodshare-sms has_icon title_social="SMS" />
</div>
<div v-if="this.$props.bundle === 'ru'">
- <vue-goodshare-vkontakte has_icon has_counter title_social="Вконтакте"/>
- <vue-goodshare-odnoklassniki has_icon has_counter title_social="Одноклассники"/>
- <vue-goodshare-facebook has_icon has_counter title_social="Фейсбук"/>
- <vue-goodshare-moi-mir has_icon has_counter title_social="Мой Мир"/>
- <vue-goodshare-twitter has_icon title_social="Твиттер"/>
- <vue-goodshare-live-journal has_icon title_social="Живой Журнал"/>
- <vue-goodshare-email has_icon title_social="Электронная почта"/>
+ <vue-goodshare-vkontakte has_icon has_counter title_social="Вконтакте" />
+ <vue-goodshare-odnoklassniki
+ has_icon
+ has_counter
+ title_social="Одноклассники"
+ />
+ <vue-goodshare-facebook has_icon has_counter title_social="Фейсбук" />
+ <vue-goodshare-moi-mir has_icon has_counter title_social="Мой Мир" />
+ <vue-goodshare-twitter has_icon title_social="Твиттер" />
+ <vue-goodshare-live-journal has_icon title_social="Живой Журнал" />
+ <vue-goodshare-email has_icon title_social="Электронная почта" />
</div>
<div v-if="this.$props.bundle === 'mobile'">
- <vue-goodshare-telegram has_icon title_social="Telegram"/>
- <vue-goodshare-viber has_icon title_social="Viber"/>
- <vue-goodshare-whats-app has_icon title_social="WhatsApp"/>
- <vue-goodshare-line has_icon title_social="LINE"/>
+ <vue-goodshare-telegram has_icon title_social="Telegram" />
+ <vue-goodshare-viber has_icon title_social="Viber" />
+ <vue-goodshare-whats-app has_icon title_social="WhatsApp" />
+ <vue-goodshare-line has_icon title_social="LINE" />
</div>
</div>
</template>
@@ -48,14 +53,15 @@ import VueGoodshareLine from "./providers/Line.vue";
// Import VueGoodshare misc components
import VueGoodshareEmail from "./providers/Email.vue";
+import VueGoodshareSMS from "./providers/SMS.vue";
export default {
name: "VueGoodshare",
props: {
bundle: {
type: String,
- default: "world"
- }
+ default: "world",
+ },
},
components: {
VueGoodshareVkontakte,
@@ -72,7 +78,8 @@ export default {
VueGoodshareViber,
VueGoodshareWhatsApp,
VueGoodshareLine,
- VueGoodshareEmail
- }
+ VueGoodshareEmail,
+ VueGoodshareSMS,
+ },
};
</script>
diff --git a/src/providers/Email.vue b/src/providers/Email.vue
index 703b72f..13da74e 100644
--- a/src/providers/Email.vue
+++ b/src/providers/Email.vue
@@ -27,28 +27,28 @@ export default {
props: {
page_url: {
type: String,
- default: documentHref
+ default: documentHref,
},
mail_subject: {
type: String,
- default: 'Share Link'
+ default: "Share Link",
},
button_design: {
type: String,
- default: () => "flat"
+ default: () => "flat",
},
title_social: String,
has_icon: Boolean,
- has_square_edges: Boolean
+ has_square_edges: Boolean,
},
data() {
return {
buttonSocialDesignObject: {
"button-social__square_edges": this.$props.has_square_edges,
- viber__design__flat: this.$props.button_design === "flat",
- viber__design__gradient: this.$props.button_design === "gradient",
- viber__design__outline: this.$props.button_design === "outline"
- }
+ email__design__flat: this.$props.button_design === "flat",
+ email__design__gradient: this.$props.button_design === "gradient",
+ email__design__outline: this.$props.button_design === "outline",
+ },
};
},
methods: {
@@ -57,22 +57,20 @@ export default {
*
* @return {object} a pop-up window
*/
- showShareWindow: function() {
+ showShareWindow: function () {
// Variables
const width = 640;
const height = 480;
const share_url = `mailto:?subject=${encodeURIComponent(
this.$props.mail_subject
- )}&body=${encodeURIComponent(
- this.$props.page_url
- )}`;
+ )}&body=${encodeURIComponent(this.$props.page_url)}`;
// onClick event
clickEvent(this, "email");
return openPopUpWindow(share_url, width, height);
- }
- }
+ },
+ },
};
</script>
@@ -147,14 +145,14 @@ $text_white_color: rgb(254, 254, 254);
-webkit-border-radius: 0;
}
-// Button viber style `flat`
-.viber__design__flat {
+// Button email style `flat`
+.email__design__flat {
background-color: $email_main_color;
color: $text_white_color;
}
-// Button viber style `gradient`
-.viber__design__gradient {
+// Button email style `gradient`
+.email__design__gradient {
background-image: linear-gradient(
to bottom,
$email_main_color,
@@ -183,8 +181,8 @@ $text_white_color: rgb(254, 254, 254);
color: $text_white_color;
}
-// Button viber style `outline`
-.viber__design__outline {
+// Button email style `outline`
+.email__design__outline {
background-color: $background_white_color;
border: 1px solid $email_main_color;
color: $email_main_color;
diff --git a/src/providers/SMS.vue b/src/providers/SMS.vue
new file mode 100644
index 0000000..c8347a8
--- /dev/null
+++ b/src/providers/SMS.vue
@@ -0,0 +1,190 @@
+<template>
+ <a
+ class="button-social"
+ :class="buttonSocialDesignObject"
+ :page-url="page_url"
+ :button-design="button_design"
+ :title-social="title_social"
+ :has-icon="has_icon"
+ :has-square-edges="has_square_edges"
+ @click.prevent="showShareWindow"
+ >
+ <i class="icon-email" v-if="this.$props.has_icon"></i>
+ <span class="title-social" v-if="this.$props.title_social">{{
+ title_social
+ }}</span>
+ </a>
+</template>
+
+<script>
+import { clickEvent } from "../helpers/events";
+import { documentHref } from "../helpers/href";
+import { openPopUpWindow } from "../helpers/popup_window";
+
+export default {
+ name: "VueGoodshareSMS",
+ props: {
+ page_url: {
+ type: String,
+ default: documentHref,
+ },
+ button_design: {
+ type: String,
+ default: () => "flat",
+ },
+ title_social: String,
+ has_icon: Boolean,
+ has_square_edges: Boolean,
+ },
+ data() {
+ return {
+ buttonSocialDesignObject: {
+ "button-social__square_edges": this.$props.has_square_edges,
+ sms__design__flat: this.$props.button_design === "flat",
+ sms__design__gradient: this.$props.button_design === "gradient",
+ sms__design__outline: this.$props.button_design === "outline",
+ },
+ };
+ },
+ methods: {
+ /**
+ * Show share window.
+ *
+ * @return {object} a pop-up window
+ */
+ showShareWindow: function () {
+ // Variables
+ const width = 640;
+ const height = 480;
+ const share_url = `sms:?&body=${encodeURIComponent(
+ this.$props.page_url
+ )}`;
+
+ // onClick event
+ clickEvent(this, "sms");
+
+ return openPopUpWindow(share_url, width, height);
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+// Fontello
+@font-face {
+ font-family: "Fontello";
+ src: url("../fonts/fontello.eot?26533562");
+ src: url("../fonts/fontello.eot?26533562#iefix") format("embedded-opentype"),
+ url("../fonts/fontello.woff2?26533562") format("woff2"),
+ url("../fonts/fontello.woff?26533562") format("woff"),
+ url("../fonts/fontello.ttf?26533562") format("truetype"),
+ url("../fonts/fontello.svg?26533562#fontello") format("svg");
+ font-weight: normal;
+ font-style: normal;
+}
+
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+ font-family: "Fontello";
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ display: inline-block;
+ text-decoration: inherit;
+ width: 1em;
+ margin-right: 0.2em;
+ text-align: center;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1em;
+ margin-left: 0.2em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-email:before {
+ content: "\e80f";
+}
+
+// Colors
+$email_main_color: rgb(65, 65, 65);
+$gradient_color: rgb(105, 105, 105);
+$background_white_color: rgb(254, 254, 254);
+$text_white_color: rgb(254, 254, 254);
+
+// Reset
+.button-social * {
+ box-sizing: border-box;
+}
+
+// Button Social link style
+.button-social {
+ display: inline-flex;
+ cursor: pointer;
+ padding: 7px 10px;
+ margin: 3px 1.5px;
+ border-radius: 3px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+// Button Social link style on hover
+.button-social:hover {
+ opacity: 0.9;
+}
+
+// Button Social round edges
+.button-social__square_edges {
+ border-radius: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+}
+
+// Button sms style `flat`
+.sms__design__flat {
+ background-color: $email_main_color;
+ color: $text_white_color;
+}
+
+// Button sms style `gradient`
+.sms__design__gradient {
+ background-image: linear-gradient(
+ to bottom,
+ $email_main_color,
+ $gradient_color
+ );
+ background-image: -moz-linear-gradient(
+ to bottom,
+ $email_main_color,
+ $gradient_color
+ );
+ background-image: -o-linear-gradient(
+ to bottom,
+ $email_main_color,
+ $gradient_color
+ );
+ background-image: -webkit-linear-gradient(
+ to bottom,
+ $email_main_color,
+ $gradient_color
+ );
+ background-image: -ms-linear-gradient(
+ to bottom,
+ $email_main_color,
+ $gradient_color
+ );
+ color: $text_white_color;
+}
+
+// Button sms style `outline`
+.sms__design__outline {
+ background-color: $background_white_color;
+ border: 1px solid $email_main_color;
+ color: $email_main_color;
+}
+
+// Title
+.title-social {
+ margin-left: 6px;
+}
+</style>