mastodon-share-button
Version:
Stencil Mastodon share button
70 lines (67 loc) • 8.2 kB
JavaScript
import { r as registerInstance, g as getAssetPath, h, c as getElement } from './core-80440d3f.js';
const MastodonShareButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
//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 assetsDirs() { return ["assets"]; }
get element() { return getElement(this); }
static get style() { return ":host{--img-width:40px;--img-height:auto;--share-button-background-color:#ccc;--share-button-background-color-hover:#949292;--share-button-border-radius:5px;--share-button-padding:12px;--share-button-color:#fff;--share-button-font-size:16px;--share-button-font-weight:bold;--share-button-border:none;--close-modal-button-background-color:#ccc;--close-modal-button-background-color-hover:#949292;--close-modal-button-border:none;--close-modal-button-font-size:16px;--close-modal-button-font-weight:bold;--close-modal-button-color:#fff;--close-modal-button-padding:6px;--close-modal-button-border-radius:5px;--modal-title-color:#2c3e50;--modal-background-color:#fff;--send-modal-button-color:#fff;--send-modal-button-background-color:#2692da;--send-modal-button-border-radius:5px;--send-modal-button-width:100%;--send-modal-button-height:6vh;--send-modal-button-min-height:42px;--send-modal-button-font-size:4vh;--select-color:#2c3e50;--select-background-color:#fff;--select-border:2px solid #2c3e50;--select-font-weight:bolder;--select-font-size:18px;--select-padding:10px;--select-border-radius:0.25em;--select-line-height:3}.overlay{opacity:0;visibility:hidden;position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.42);-webkit-transition:opacity .5s,visibility 0s .5s;transition:opacity .5s,visibility 0s .5s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:999}.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity .5s;transition:opacity .5s}.is-dark-mode{--share-button-background-color:#2c3e50;--share-button-background-color-hover:#23313f;--share-button-color:#fff;--close-modal-button-background-color:23313f;--close-modal-button-color:#fff;--close-modal-button-border:1px solid #fff;--modal-title-color:#fff;--modal-background-color:#23313f;--send-modal-button-color:#fff;--send-modal-button-background-color:#2692da;--select-color:#fff;--select-background-color:#2c3e50;--select-border:2px solid #fff}.modal-window{background:var(--modal-background-color);border-radius:25px;width:80%;max-width:400px;height:auto;padding:30px;margin:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.modal-window__content{width:100%;height:100%}.modal-title{color:var(--modal-title-color);font-family:Open Sans,sans-serif;font-size:30px;font-weight:300;line-height:32px;text-align:center}.close-modal{float:right;background-color:var(--close-modal-button-background-color);padding:var(--close-modal-button-padding);border-radius:var(--close-modal-button-border-radius);color:var(--close-modal-button-color);border:var(--close-modal-button-border);font-size:var(--close-modal-button-font-size);font-weight:var(--close-modal-button-font-weight);cursor:pointer}.close-modal:hover{background-color:var(--close-modal-button-background-color-hover)}.share-button img{width:var(--img-width);height:var(--img-height)}.icon-with-text{display:inline-block;vertical-align:middle;padding-left:5px}.share-button{border:var(--share-button-boder);background-color:var(--share-button-background-color);padding:var(--share-button-padding);border-radius:var(--share-button-border-radius);color:var(--share-button-color);font-size:var(--share-button-font-size);font-weight:var(--share-button-font-weight);cursor:pointer;height:calc(var(--img-width) + var(--share-button-padding) * 2);position:relative;text-align:left}.share-button:hover{background-color:var(--share-button-background-color-hover)}.send-button{background-color:var(--send-modal-button-background-color);padding:var(--modal-button-padding);border-radius:var(--send-modal-button-border-radius);color:var(--send-modal-button-color);width:var(--send-modal-button-width);height:var(--send-modal-button-height);min-height:var(--send-modal-button-min-height);font-size:var(--send-modal-button-font-size);cursor:pointer}.form-style{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;outline:0;-webkit-box-shadow:none;box-shadow:none;position:relative;display:-ms-flexbox;display:flex;width:100%;line-height:var(--select-line-height);overflow:hidden;border-radius:var(--select-border-radius);padding:var(--select-padding);font-size:var(--select-font-size);font-weight:var(--select-font-weight);color:var(--select-color);border:var(--select-border);background-color:var(--select-background-color)}.input-width{width:calc(100% - 24px)}"; }
};
export { MastodonShareButton as mastodon_share_button };