https://reasonator.toolforge.org/resources/vue_es6/mastodon-button.js

1/**
2 * <mastodon-button> component – share a message/URL to a user-chosen
3 * Mastodon instance.  The last-used instance is persisted in localStorage.
4 *
5 * Props:
6 *   message {String} – text to share
7 *   target  {String} – URL to append after the message
8 *
9 * Usage:
10 *   <mastodon-button message="Hello" target="https://example.org"></mastodon-button>
11 */
12
13import { state } from './state.js';
14
15export default {
16    name: 'mastodon-button',
17    props: ['message', 'target'],
18    data() {
19        return { instance: '', ls_key: 'mastodon-instance' };
20    },
21    created() {
22        this.instance = localStorage.getItem(this.ls_key) || '';
23    },
24    mounted() {
25        if (state.tt) state.tt.updateInterface(this.$el);
26    },
27    updated() {
28        if (state.tt) state.tt.updateInterface(this.$el);
29    },
30    methods: {
31        onclick() {
32            if (this.instance !== '') return this.open_tab();
33            this.edit_instance(() => this.open_tab());
34        },
35        edit_instance(callback) {
36            const tt = state.tt;
37            const prompt_text = tt ? tt.t('enter_mastodon_instance') : 'Enter your Mastodon instance (e.g. mastodon.social)';
38            const instance = window.prompt(prompt_text, this.instance);
39            if (instance) {
40                localStorage.setItem(this.ls_key, instance);
41                this.instance = instance;
42                if (typeof callback === 'function') callback();
43            }
44        },
45        open_tab() {
46            const url = 'https://' + this.instance + '/share?text=' +
47                encodeURIComponent(this.message) + '%0A' + encodeURIComponent(this.target);
48            window.open(url, 'mastodon').focus();
49        },
50    },
51    template: `
52<div class="btn-group">
53    <button href="#" rel="noreferrer noopener" target="mastodon" class="mastodon-button btn btn-outline-secondary" tt="mastodon_share_label" @click='onclick'>
54    </button>
55    <button v-if="instance!=''" href="#" @click.prevent="edit_instance" class="btn btn-outline-secondary" :tt_title="instance">✏️</button>
56</div>`,
57};