mastodon-share-button
Version:
Stencil Mastodon share button
277 lines (276 loc) • 9.94 kB
JavaScript
import { h, getAssetPath } from "@stencil/core";
export class MastodonShareButton {
constructor() {
//Customizable text translations
this.share_button_text = "Share to Mastodon";
this.close_button_text = "Close";
this.send_button_text = "Send";
this.modal_title = "Share to Mastodon";
this.other_instance_text = "Other instance";
//Customizable styles
this.icon_url = getAssetPath(`./assets/mastodon-logo.png`);
this.share_message = null;
this.open = false;
this.dark_mode = false;
this.instances = '["https://mastodon.social"]';
this.selected_instance = this.instances.length != 0 ? this.parseJSON(this.instances)[0] : ["https://mastodon.social"];
}
componentDidLoad() {
this.instances = this.instances.length == 0 ? '["https://mastodon.social"]' : this.instances;
const modal = this.element.shadowRoot.getElementById("modal");
modal.addEventListener("click", event => {
//Konparatuko dugu ea kanpoko modaleko div-a eta klikatutakoa berdina den, ixteko
if (event.target == modal) {
this.closeModal();
}
});
}
closeModal() {
this.open = false;
}
openModal() {
this.open = true;
}
handleSubmit(e) {
e.preventDefault();
if (this.share_message) {
if (this.selected_instance == 'other_instance') {
if (this.value) {
window.open(this.value + '/share?text=' + this.share_message);
}
}
else {
window.open(this.selected_instance + '/share?text=' + this.share_message);
}
}
else {
console.error("share_message tag return: ", this.share_message, "\n> Make sure you fill in the label 'share_message'");
}
}
handleChange(event) {
this.value = event.target.value;
}
handleSelect(event) {
this.selected_instance = event.target.value;
}
parseJSON(string_value) {
return JSON.parse(string_value);
}
render() {
return (h("div", { class: (this.dark_mode ? 'is-dark-mode' : '') },
h("button", { onClick: () => this.openModal(), class: "share-button" },
this.share_button_text,
this.icon_url ? h("img", { src: this.icon_url, class: this.share_button_text.length != 0 ? "icon-with-text" : "" }) : ""),
h("div", { class: 'overlay ' + (this.open ? 'is-visible' : ''), id: "modal" },
h("div", { class: "modal-window" },
h("div", { class: "modal-window__content" },
h("slot", null,
h("button", { class: "close-modal", onClick: () => this.closeModal() }, this.close_button_text),
h("br", null),
h("h2", { class: "modal-title" }, this.modal_title),
h("form", { onSubmit: (e) => this.handleSubmit(e) },
h("select", { onInput: (event) => this.handleSelect(event), class: "form-style" },
this.parseJSON(this.instances).map(instance => (h("option", { value: instance }, instance))),
h("option", { value: "other_instance" }, this.other_instance_text)),
h("br", null),
this.selected_instance === 'other_instance' ? h("input", { type: "url", placeholder: "https://", value: this.value, onInput: (event) => this.handleChange(event), class: "form-style input-width" }) : null,
h("br", null),
h("input", { type: "submit", value: this.send_button_text, class: "send-button" }))))))));
}
static get is() { return "mastodon-share-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["mastodon-share-button.css"]
}; }
static get styleUrls() { return {
"$": ["mastodon-share-button.css"]
}; }
static get assetsDirs() { return ["assets"]; }
static get properties() { return {
"share_button_text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "share_button_text",
"reflect": false,
"defaultValue": "\"Share to Mastodon\""
},
"close_button_text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "close_button_text",
"reflect": false,
"defaultValue": "\"Close\""
},
"send_button_text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "send_button_text",
"reflect": false,
"defaultValue": "\"Send\""
},
"modal_title": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "modal_title",
"reflect": false,
"defaultValue": "\"Share to Mastodon\""
},
"other_instance_text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "other_instance_text",
"reflect": false,
"defaultValue": "\"Other instance\""
},
"icon_url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "icon_url",
"reflect": false,
"defaultValue": "getAssetPath(`./assets/mastodon-logo.png`)"
},
"share_message": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "share_message",
"reflect": false,
"defaultValue": "null"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "open",
"reflect": false,
"defaultValue": "false"
},
"dark_mode": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "dark_mode",
"reflect": false,
"defaultValue": "false"
},
"instances": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "instances",
"reflect": false,
"defaultValue": "'[\"https://mastodon.social\"]'"
}
}; }
static get states() { return {
"selected_instance": {},
"value": {}
}; }
static get elementRef() { return "element"; }
}