Skip to content
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.

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

Mastodon support #569

Closed
watzon opened this issue Jan 10, 2023 · 7 comments · Fixed by #570
Closed

Mastodon support #569

watzon opened this issue Jan 10, 2023 · 7 comments · Fixed by #570

Comments

@watzon
Copy link

watzon commented Jan 10, 2023

Seeing as so many people are frequenting mastodon now it would be really nice to have a mastodon button as well. I've yet to see a single library add support since a mastodon share button would require a modal or something to enter your instance address, which tends to upset the simple "click and go" flow.

@webistomin
Copy link
Owner

Hey! I'll take a look at the issue soon. I think the interface should look like this:

interface IMastodonShareOptions {
  domain?: string
  text?: string;
  url?: string;
}

Leave the modal window to users, as the design may not be suitable.

@watzon
Copy link
Author

watzon commented Jan 11, 2023

Seems great :) would love to see this get added for sure. Thanks for the quick response.

webistomin added a commit that referenced this issue Jan 11, 2023
add mastodon button

✅ Closes: #569
@webistomin
Copy link
Owner

Available in v2.0.0 for vue 3

<template>
  <s-mastodon
    :window-features="windowFeatures"
    :share-options="shareOptions"
    :use-native-behavior="useNativeBehavior"
    @popup-close="onClose"
    @popup-open="onOpen"
    @popup-block="onBlock"
    @popup-focus="onFocus"
  ></s-mastodon>
</template>

<script>
  import { SMastodon } from 'vue-socials'

  export default {
    name: 'SSMastodonSharing',
    
    components: { SMastodon },
    
    data() {
      return {
        windowFeatures: {},
        shareOptions: {
          domain: 'https://mas.to',
          url: 'https://github.com',
          text: 'Hello, world!',
        },
        useNativeBehavior: false,
      }
    },
    
    methods: {
      onClose() {},
      onOpen() {},
      onBlock() {},
      onFocus() {},
    }
  };
</script>

@watzon
Copy link
Author

watzon commented Jan 11, 2023

My dude. Absolute legend. Thanks!

@watzon
Copy link
Author

watzon commented Jan 11, 2023

How would you recommend allowing the user to provide a domain before launching the window? I'd like to have it so that clicking the button launches a modal that asks for the mastodon domain, and then clicking Ok on the modal triggers the click event on the vue-social button, passing in the user's provided domain.

@webistomin
Copy link
Owner

How would you recommend allowing the user to provide a domain before launching the window? I'd like to have it so that clicking the button launches a modal that asks for the mastodon domain, and then clicking Ok on the modal triggers the click event on the vue-social button, passing in the user's provided domain.

Make your own modal, where there will be an input for the domain and an ok button (actually it will be the s-mastodon from vue-socials). Pass the domain from input to the button via props. Close modal after success.

@watzon
Copy link
Author

watzon commented Jan 11, 2023

Ahhhh smart. Thanks again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants