mastodon-share-button
Version:
Stencil Mastodon share button
1 lines • 6.97 kB
JavaScript
import{r as t,g as s,h as i,c as e}from"./p-5f8a7ed8.js";const o=class{constructor(i){t(this,i),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",this.icon_url=s("./assets/mastodon-logo.png"),this.share_message=null,this.open=!1,this.dark_mode=!1,this.instances='["https://mastodon.social"]',this.selected_instance=0!=this.instances.length?this.parseJSON(this.instances)[0]:["https://mastodon.social"]}componentDidLoad(){this.instances=0==this.instances.length?'["https://mastodon.social"]':this.instances;const t=this.element.shadowRoot.getElementById("modal");t.addEventListener("click",s=>{s.target==t&&this.closeModal()})}closeModal(){this.open=!1}openModal(){this.open=!0}handleSubmit(t){t.preventDefault(),this.share_message?"other_instance"==this.selected_instance?this.value&&window.open(this.value+"/share?text="+this.share_message):window.open(this.selected_instance+"/share?text="+this.share_message):console.error("share_message tag return: ",this.share_message,"\n> Make sure you fill in the label 'share_message'")}handleChange(t){this.value=t.target.value}handleSelect(t){this.selected_instance=t.target.value}parseJSON(t){return JSON.parse(t)}render(){return i("div",{class:this.dark_mode?"is-dark-mode":""},i("button",{onClick:()=>this.openModal(),class:"share-button"},this.share_button_text,this.icon_url?i("img",{src:this.icon_url,class:0!=this.share_button_text.length?"icon-with-text":""}):""),i("div",{class:"overlay "+(this.open?"is-visible":""),id:"modal"},i("div",{class:"modal-window"},i("div",{class:"modal-window__content"},i("slot",null,i("button",{class:"close-modal",onClick:()=>this.closeModal()},this.close_button_text),i("br",null),i("h2",{class:"modal-title"},this.modal_title),i("form",{onSubmit:t=>this.handleSubmit(t)},i("select",{onInput:t=>this.handleSelect(t),class:"form-style"},this.parseJSON(this.instances).map(t=>i("option",{value:t},t)),i("option",{value:"other_instance"},this.other_instance_text)),i("br",null),"other_instance"===this.selected_instance?i("input",{type:"url",placeholder:"https://",value:this.value,onInput:t=>this.handleChange(t),class:"form-style input-width"}):null,i("br",null),i("input",{type:"submit",value:this.send_button_text,class:"send-button"})))))))}static get assetsDirs(){return["assets"]}get element(){return e(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{o as mastodon_share_button};