1.0.6 • Published 4 years ago
Mastodon share button
This package is a user friendly web component to share in mastodon.
Browsers support
| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Samsung |
|---|
| IE11 (limited), Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Preview
Getting Started
Installation
Via CDN
<script src="https://unpkg.com/mastodon-share-button@latest/dist/mastodon-share-button.js"></script>
Via NPM
$ npm install mastodon-share-button
Usage
<!-- Basic use -->
<mastodon-share-button share_message="Text to share"></mastodon-share-button>
<!-- Customized -->
<mastodon-share-button
instances='["https://mastodon.eus", "https://mastodon.jalgi.eus"]'
share_message="Text to share"
share_button_text="Custom share button text"
close_button_text="Custom close text"
send_button_text="Custom send text"
modal_title="Custom modal title"
other_instance_text="Custom other instance select option text"
dark_mode="true">
</mastodon-share-button>
Documentation
Properties
| Property | Attribute | Required | Description | Type | Default |
|---|
share_message | share_message | Required | Text to share in mastodon. | string | undefined |
instances | instances | Not Required | List of instances to display in the select option. | string | '["https://mastodon.social"]' |
dark_mode | dark_mode | Not Required | Option to activate dark mode. | boolean | false |
send_button_text | send_button_text | Not Required | Text to show at the bottom of sharing in the modal. | string | "Send" |
icon_url | icon_url | Not Required | Icon url. Put it "" to not display any icon. | string | mastodon oficial logo |
modal_title | modal_title | Not Required | Title to display in modal. | string | "Share to Mastodon" |
close_button_text | close_button_text | Not Required | Text to display to close modal. | string | "Close" |
other_instance_text | other_instance_text | Not Required | Text to display on the form. | string | "Other instance" |
share_button_text | share_button_text | Not Required | Text to show at the bottom of sharing. Put it "" to not display any text. | string | "Share to Mastodon" |
open | open | Not Required | Variable to display the modal opened. | boolean | false |
CSS Custom Properties (Styling)
The component could be styled with the help of CSS3 variables.
Example:
<style type="text/css">
mastodon-share-button {
--share-button-background-color:#259FFC;
--share-button-background-color-hover:#C7E7FE;
}
</style>
- Important: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.
Share button
| Name | Description |
|---|
| --share-button-background-color | Share button background color. Default to #cccccc |
| --share-button-background-color-hover | Share button background hover color. Default to #949292 |
| --share-button-border-radius | Default to 5px |
| --share-button-padding | Default to 12px |
| --share-button-color | Default to #ffffff |
| --share-button-font-size | Default to 16px |
| --share-button-font-weight | Default to bold |
| --share-button-border | Defaul to none |
Modal
| Name | Description |
|---|
| --modal-title-color | Text color to modal title. Default to #2c3e50 |
| --modal-background-color | Modal background color. Default to #ffffff |
Modal close button
| Name | Description |
|---|
| --close-modal-button-background-color | Close button background color. Default to #cccccc |
| --close-modal-button-background-color-hover | Share button background hover color. Default to #949292 |
| --close-modal-button-border-radius | Default to 5px |
| --close-modal-button-padding | Default to 6px |
| --close-modal-button-color | Default to #ffffff |
| --close-modal-button-font-size | Default to 16px |
| --close-modal-button-font-weight | Default to bold |
| --close-modal-button-border | Defaul to none |
Modal select option and input
| Name | Description |
|---|
| --select-color | Select and input font color. Default to #2c3e50 |
| --select-background-color | Select and input background color. Default to #ffffff |
| --select-border | Select and input border. Default to 2px solid #2c3e50 |
| --select-font-weight | Select and input font weight. Default to bolder |
| --select-font-size | Font size. Default to 18px |
| --select-padding | Default to 10px |
| --select-border-radius | Default to 0.25em |
| --select-line-height | Default to 3 |
Modal send button
| Name | Description |
|---|
| --send-modal-button-color | Default to #ffffff |
| --send-modal-button-background-color | Default to #2692da |
| --send-modal-button-border-radius | Default to 5px |
| --send-modal-button-width | Default to 100% |
| --send-modal-button-height | Default to 6vh |
| --send-modal-button-min-height | Default to 42px |
| --send-modal-button-font-size | Default to 4vh |