Changed property name

.gitignore

@@ -19,3 +19,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Customer
+/src/main.js
+/public

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-share-buttons",
-  "version": "0.1.7",
+  "version": "1.0.0",
   "private": false,
   "license": "MIT",
   "homepage": "https://github.com/Alexandrshy/vue-share-buttons",

src/VueShareBttons.vue

@@ -188,31 +188,93 @@
         shareTitle="Comment"
         btnText
       ></facebook-button>
-      <facebook-button v-bind:hasIcon="false" shareTitle="Comment"></facebook-button>
+      <facebook-button v-bind:hasIcon="false" shareTitle="Comment" hasCounter></facebook-button>
-      <facebook-button class="share-button--circle" shareTitle="Comment"></facebook-button>
+      <facebook-button class="share-button--circle" shareTitle="Comment" hasCounter></facebook-button>
-      <facebook-button class="share-button--circle" shareTitle="Comment" btnText></facebook-button>
+      <facebook-button class="share-button--circle" shareTitle="Comment" btnText hasCounter></facebook-button>
-      <facebook-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></facebook-button>
+      <facebook-button
-      <facebook-button class="share-button--outline" shareTitle="Comment"></facebook-button>
+        class="share-button--circle"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+        hasCounter
+      ></facebook-button>
+      <facebook-button class="share-button--outline" shareTitle="Comment" hasCounter></facebook-button>
       <facebook-button
         class="share-button--outline"
         v-bind:isBlank="false"
         shareText="Twiiter share good work"
         shareTitle="Comment"
         btnText
+        hasCounter
+      ></facebook-button>
+      <facebook-button
+        class="share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+        hasCounter
+      ></facebook-button>
+      <facebook-button class="share-button--outline" hasCounter></facebook-button>
+      <facebook-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        hasCounter
       ></facebook-button>
-      <facebook-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></facebook-button>
-      <facebook-button class="share-button--circle share-button--outline" shareTitle="Comment"></facebook-button>
       <facebook-button
         class="share-button--circle share-button--outline"
         shareTitle="Comment"
         btnText
+        hasCounter
       ></facebook-button>
       <facebook-button
         class="share-button--circle share-button--outline"
         shareTitle="Comment"
         v-bind:hasIcon="false"
+        hasCounter
       ></facebook-button>
     </div>
+    <div class="share-buttons-group">
+      <facebook-messenger-button shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></facebook-messenger-button>
+      <facebook-messenger-button v-bind:hasIcon="false" shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button class="share-button--circle" shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button class="share-button--circle" shareTitle="Comment" btnText></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></facebook-messenger-button>
+      <facebook-messenger-button class="share-button--outline" shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></facebook-messenger-button>
+    </div>
     <div class="share-buttons-group">
       <linkedIn-button shareTitle="Comment"></linkedIn-button>
       <linkedIn-button
@@ -676,6 +738,7 @@ import WeiboButton from "./components/WeiboButton";
 import EvernoteButton from "./components/EvernoteButton";
 import VkontakteButton from "./components/VkontakteButton";
 import FacebookButton from "./components/FacebookButton";
+import FacebookMessengerButton from "./components/FacebookMessengerButton";
 import LinkedInButton from "./components/LinkedInButton";
 import TumblrButton from "./components/TumblrButton";
 import PinterestButton from "./components/PinterestButton";
@@ -702,6 +765,7 @@ export default {
     EvernoteButton,
     VkontakteButton,
     FacebookButton,
+    FacebookMessengerButton,
     LinkedInButton,
     TumblrButton,
     PinterestButton,

src/components/BloggerButton.vue

@@ -2,14 +2,12 @@
   <button
     class="share-button share-button--blogger"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :title="title"
-    :shareTitle="shareTitle"
+    :description="description"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,25 +34,26 @@ export default {
   name: "BloggerShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
-    shareTitle: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Blogger" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Blogger" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.blogger.com/blog-this.g?u=${
-        this.$props.shareUrl
+        this.$props.url
-      }&n=${encodeURIComponent(this.$props.shareTitle)}&t=${encodeURIComponent(
+      }&n=${encodeURIComponent(this.$props.title)}&t=${encodeURIComponent(
-        this.$props.shareDescription
+        this.$props.description
       )}`;
 
       return this.$props.isBlank

src/components/DiggButton.vue

@@ -2,14 +2,10 @@
   <button
     class="share-button share-button--digg"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,25 +21,16 @@
 
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "DiggShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Digg" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
@@ -52,7 +39,7 @@ export default {
       eventEmit(this, "onShare", { name: "Digg" });
       const configWindow = createWindow();
       const url = `http://digg.com/submit?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank

src/components/EmailButton.vue

@@ -2,16 +2,9 @@
   <button
     class="share-button share-button--email"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon
@@ -31,39 +24,24 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "EmailShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Email" },
-    windowWidth: { type: Number },
+    hasIcon: { type: Boolean, default: true }
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Email" });
-      const configWindow = createWindow();
       const url = `mailto:?subject=Share%20Link&body=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
-      return this.$props.isBlank
+      return window.open(url);
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
     }
   }
 };

src/components/EvernoteButton.vue

@@ -2,13 +2,11 @@
   <button
     class="share-button share-button--evernote"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -35,24 +33,24 @@ export default {
   name: "EvernoteShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Evernote" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Evernote" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.evernote.com/clip.action?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&title=${encodeURIComponent(this.$props.shareDescription)}`;
+      )}&title=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/FacebookButton.vue

@@ -2,13 +2,10 @@
   <button
     class="share-button share-button--facebook"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -30,7 +27,6 @@
 import Icon from "./icon/Icon.vue";
 import {
   getDocumentHref,
-  getDocumentTitle,
   eventEmit,
   createWindow,
   getRandomNumber,
@@ -41,14 +37,10 @@ export default {
   name: "FacebookShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Facebook" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -68,9 +60,12 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Facebook" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
@@ -83,7 +78,7 @@ export default {
         this.$props.keyCounter || `Facebook_${getRandomNumber()}`;
       const script = document.createElement("script");
       script.src = `https://graph.facebook.com?id=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 

src/components/FacebookMessengerButton.vue

@@ -2,15 +2,10 @@
   <button
     class="share-button share-button--facebookMessenger"
     type="button"
-    :class="className"
+    :appID="appID"
-    :shareUrl="shareUrl"
+    :url="url"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="FacebookMessenger" class="share-button__icon" v-if="hasIcon === true">
@@ -24,40 +19,25 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "FacebookMessengerShareButton",
   components: { Icon },
   props: {
     appID: { type: String },
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    btnText: { type: String, default: "Messenger" },
-    shareTitle: { type: String, default: "" },
+    hasIcon: { type: Boolean, default: true }
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
-    btnText: { type: String, default: "FacebookMessenger" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "FacebookMessenger" });
-      const configWindow = createWindow();
       const url = `fb-messenger://share/?link=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&app_id=${this.$props.appID}`;
 
-      return this.$props.isBlank
+      return window.open(url);
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
     }
   }
 };

src/components/HatenaButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--hatena"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ export default {
   name: "HatenaShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Hatena" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Hatena" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `http://b.hatena.ne.jp/bookmarklet?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&btitle=${encodeURIComponent(this.$props.shareDescription)}`;
+      )}&btitle=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/InstapaperButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--instapaper"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ export default {
   name: "InstapaperShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Instapaper" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Instapaper" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.instapaper.com/edit?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&title=${encodeURIComponent(this.$props.shareDescription)}`;
+      )}&title=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/LinkedInButton.vue

@@ -2,13 +2,10 @@
   <button
     class="share-button share-button--linkedIn"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -30,7 +27,6 @@
 import Icon from "./icon/Icon.vue";
 import {
   getDocumentHref,
-  getDocumentTitle,
   eventEmit,
   createWindow,
   getRandomNumber,
@@ -41,14 +37,10 @@ export default {
   name: "LinkedInShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "LinkedIn" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -68,9 +60,12 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "LinkedIn" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
@@ -83,7 +78,7 @@ export default {
         this.$props.keyCounter || `LinkedIn_${getRandomNumber()}`;
       const script = document.createElement("script");
       script.src = `https://www.linkedin.com/countserv/count/share?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 

src/components/LiveJournalButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--livejournal"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ export default {
   name: "LiveJournalShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "LiveJournal" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "LiveJournal" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://livejournal.com/update.bml?event=${encodeURIComponent(
-        this.$props.shareDescription
+        this.$props.description
-      )}&subject=${encodeURIComponent(this.$props.shareUrl)}`;
+      )}&subject=${encodeURIComponent(this.$props.url)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/OdnoklassnikiButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--odnoklassniki"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -40,14 +37,11 @@ export default {
   name: "OdnoklassnikiShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Odnoklassniki" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -66,10 +60,13 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Odnoklassniki" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&st.comments=${encodeURIComponent(this.$props.shareTitle)}`;
+      )}&st.comments=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
@@ -83,7 +80,7 @@ export default {
 
       const script = document.createElement("script");
       script.src = `https://connect.ok.ru/dk?st.cmd=extLike&uid=1&ref=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
       document.body.appendChild(script);
 

src/components/PinterestButton.vue

@@ -2,14 +2,12 @@
   <button
     class="share-button share-button--pinterest"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
+    :picture="picture"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -42,14 +40,12 @@ export default {
   name: "PinterestShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
+    picture: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Pinterest" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -69,12 +65,15 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Pinterest" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.pinterest.com/pin/create/button/?canonicalUrl=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&description=${encodeURIComponent(
-        this.$props.shareDescription
+        this.$props.description
-      )}&media=${encodeURIComponent(this.$props.sharePic)}`;
+      )}&media=${encodeURIComponent(this.$props.picture)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
@@ -86,7 +85,7 @@ export default {
         this.$props.keyCounter || `Pinterest_${getRandomNumber()}`;
       const script = document.createElement("script");
       script.src = `https://api.pinterest.com/v1/urls/count.json?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 

src/components/PocketButton.vue

@@ -2,14 +2,10 @@
   <button
     class="share-button share-button--pocket"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,34 +21,28 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "PocketShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Pocket" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Pocket" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://getpocket.com/edit?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank

src/components/RedditButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--reddit"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :title="title"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,35 +22,30 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "RedditShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Reddit" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Reddit" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://reddit.com/submit?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&title=${encodeURIComponent(this.$props.shareTitle)}`;
+      )}&title=${encodeURIComponent(this.$props.title)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/RenrenButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--renren"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :title="title"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -28,35 +25,30 @@
 
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "RenrenShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Renren" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Renren" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&title=${encodeURIComponent(this.$props.shareTitle)}`;
+      )}&title=${encodeURIComponent(this.$props.title)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/TelegramButton.vue

@@ -2,16 +2,10 @@
   <button
     class="share-button share-button--telegram"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="Telegram" class="share-button__icon" v-if="hasIcon === true">
@@ -27,39 +21,25 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, getDocumentTitle, eventEmit } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "TelegramShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Telegram" },
-    windowWidth: { type: Number },
+    hasIcon: { type: Boolean, default: true }
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Telegram" });
-      const configWindow = createWindow();
       const url = `https://telegram.me/share/url?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&text=${encodeURIComponent(this.$props.shareDescription)}`;
+      )}&text=${encodeURIComponent(this.$props.description)}`;
 
-      return this.$props.isBlank
+      return window.open(url);
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
     }
   }
 };

src/components/TumblrButton.vue

@@ -2,14 +2,12 @@
   <button
     class="share-button share-button--tumblr"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :title="title"
-    :shareTitle="shareTitle"
+    :description="description"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -42,14 +40,12 @@ export default {
   name: "TumblrShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
-    shareTitle: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Tumblr" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -69,14 +65,15 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Tumblr" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&title=${encodeURIComponent(
-        this.$props.shareTitle
+        this.$props.title
-      )}&caption=${encodeURIComponent(
+      )}&caption=${encodeURIComponent(this.$props.description)}&posttype=link`;
-        this.$props.shareDescription
-      )}&posttype=link`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
@@ -87,7 +84,7 @@ export default {
       const callback = this.$props.keyCounter || `Tumblr_${getRandomNumber()}`;
       const script = document.createElement("script");
       script.src = `https://api.tumblr.com/v2/share/stats?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 

src/components/TwitterButton.vue

@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--twitter"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ export default {
   name: "TwitterShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Twitter" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Twitter" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://twitter.com/share?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
-      )}&text=${encodeURIComponent(this.$props.shareDescription)}`;
+      )}&text=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/ViberButton.vue

@@ -2,16 +2,9 @@
   <button
     class="share-button share-button--viber"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="Viber" class="share-button__icon" v-if="hasIcon === true">
@@ -37,39 +30,22 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "ViberShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Viber" },
-    windowWidth: { type: Number },
+    hasIcon: { type: Boolean, default: true }
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Viber" });
-      const configWindow = createWindow();
+      const url = `viber://forward?text=${encodeURIComponent(this.$props.url)}`;
-      const url = `viber://forward?text=${encodeURIComponent(
-        this.$props.shareUrl
-      )}`;
 
-      return this.$props.isBlank
+      return window.open(url);
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
     }
   }
 };

src/components/VkontakteButton.vue

@@ -2,13 +2,12 @@
   <button
     class="share-button share-button--vk"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :description="description"
-    :shareDescription="shareDescription"
+    :title="title"
-    :shareTitle="shareTitle"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -40,14 +39,13 @@ export default {
   name: "VkontakteShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
-    shareTitle: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
-    shareDescription: { type: String, default: getDocumentTitle },
     sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Vkontakte" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -66,13 +64,16 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "vk" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://vk.com/share.php?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&title=${encodeURIComponent(
-        this.$props.shareTitle
+        this.$props.title
       )}&comment=${encodeURIComponent(
-        this.$props.shareDescription
+        this.$props.description
       )}&image=${encodeURIComponent(this.$props.sharePic)}&noparse=true`;
 
       return this.$props.isBlank
@@ -91,7 +92,7 @@ export default {
 
       const script = document.createElement("script");
       script.src = `https://vk.com/share.php?act=count&index=${getRandomNumber()}&url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
       document.body.appendChild(script);
 

src/components/WeiboButton.vue

@@ -2,14 +2,13 @@
   <button
     class="share-button share-button--weibo"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
+    :title="title"
-    :shareTitle="shareTitle"
+    :description="description"
-    :shareDescription="shareDescription"
+    :picture="picture"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,26 +35,28 @@ export default {
   name: "WeiboShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
-    shareTitle: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
-    shareDescription: { type: String, default: getDocumentTitle },
+    picture: { type: String, default: "" },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Weibo" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Weibo" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&title=${encodeURIComponent(
-        this.$props.shareTitle
+        this.$props.title
-      )}&pic=${encodeURIComponent(this.$props.sharePic)}`;
+      )}&pic=${encodeURIComponent(this.$props.picture)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")

src/components/WhatsAppButton.vue

@@ -2,16 +2,9 @@
   <button
     class="share-button share-button--whatsApp"
     type="button"
-    :class="className"
     :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="WhatsApp" class="share-button__icon" v-if="hasIcon === true">
@@ -25,39 +18,24 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "WhatsAppShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
     shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "WhatsApp" },
-    windowWidth: { type: Number },
+    hasIcon: { type: Boolean, default: true }
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "WhatsApp" });
-      const configWindow = createWindow();
       const url = `whatsapp://send?text=${encodeURIComponent(
         this.$props.shareUrl
       )}`;
 
-      return this.$props.isBlank
+      return window.open(url);
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
     }
   }
 };

src/components/XingButton.vue

@@ -2,14 +2,10 @@
   <button
     class="share-button share-button--xing"
     type="button"
-    :class="className"
+    :url="url"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
     :btnText="btnText"
-    :windowWidth="windowWidth"
+    :modalWidth="modalWidth"
-    :windowHeight="windowHeight"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,34 +21,28 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
 
 export default {
   name: "XingShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
+    url: { type: String, default: getDocumentHref },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Xing" },
-    windowWidth: { type: Number },
+    modalWidth: { type: Number, default: 500 },
-    windowHeight: { type: Number },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Xing" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.xing.com/social_plugins/share?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank

src/style/facebookMessengerButton.css

@@ -1,51 +1,56 @@
-/* Facebook */
+/* facebookMessenger */
-.share-button--facebook {
+.share-button--facebookMessenger {
   background-color: hsla(221, 44%, 41%, 1);
 }
 
-.share-button--facebook:focus {
+.share-button--facebookMessenger:focus {
   box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4);
 }
 
-.share-button--facebook:hover {
+.share-button--facebookMessenger:hover {
   background-color: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook .share-button__icon path {
+.share-button--facebookMessenger .share-button__icon path {
   fill: #fff;
 }
 
-.share-button--facebook.share-button--outline {
+.share-button--facebookMessenger.share-button--outline {
   background-color: transparent;
   border-color: hsl(221, 44%, 41%, 1);
 }
 
-.share-button--facebook.share-button--outline:hover {
+.share-button--facebookMessenger.share-button--outline:hover {
   background-color: transparent;
   border-color: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook.share-button--outline .share-button__text {
+.share-button--facebookMessenger.share-button--outline .share-button__text {
   color: hsla(221, 44%, 41%, 1);
 }
 
-.share-button--facebook.share-button--outline:hover .share-button__text {
+.share-button--facebookMessenger.share-button--outline:hover
+  .share-button__text {
   color: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook.share-button--outline .share-button__icon path {
+.share-button--facebookMessenger.share-button--outline
+  .share-button__icon
+  path {
   fill: hsla(221, 44%, 41%, 1);
 }
 
-.share-button--facebook.share-button--outline:hover .share-button__icon path {
+.share-button--facebookMessenger.share-button--outline:hover
+  .share-button__icon
+  path {
   fill: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook.share-button--painted {
+.share-button--facebookMessenger.share-button--painted {
   background-color: transparent;
   border-color: hsla(220, 21%, 31%, 1);
 }
 
-.share-button--facebook.share-button--painted::before {
+.share-button--facebookMessenger.share-button--painted::before {
   background-color: hsla(221, 44%, 41%, 1);
 }