mastodon-share-button
Version:
Stencil Mastodon share button
1 lines • 7.62 kB
JavaScript
System.register(["./p-ac07bc51.system.js"],(function(t){"use strict";var e,s,n,o;return{setters:[function(t){e=t.r;s=t.g;n=t.h;o=t.c}],execute:function(){var i=t("mastodon_share_button",function(){function t(t){e(this,t);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=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"]}t.prototype.componentDidLoad=function(){var t=this;this.instances=this.instances.length==0?'["https://mastodon.social"]':this.instances;var e=this.element.shadowRoot.getElementById("modal");e.addEventListener("click",(function(s){if(s.target==e){t.closeModal()}}))};t.prototype.closeModal=function(){this.open=false};t.prototype.openModal=function(){this.open=true};t.prototype.handleSubmit=function(t){t.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'")}};t.prototype.handleChange=function(t){this.value=t.target.value};t.prototype.handleSelect=function(t){this.selected_instance=t.target.value};t.prototype.parseJSON=function(t){return JSON.parse(t)};t.prototype.render=function(){var t=this;return n("div",{class:this.dark_mode?"is-dark-mode":""},n("button",{onClick:function(){return t.openModal()},class:"share-button"},this.share_button_text,this.icon_url?n("img",{src:this.icon_url,class:this.share_button_text.length!=0?"icon-with-text":""}):""),n("div",{class:"overlay "+(this.open?"is-visible":""),id:"modal"},n("div",{class:"modal-window"},n("div",{class:"modal-window__content"},n("slot",null,n("button",{class:"close-modal",onClick:function(){return t.closeModal()}},this.close_button_text),n("br",null),n("h2",{class:"modal-title"},this.modal_title),n("form",{onSubmit:function(e){return t.handleSubmit(e)}},n("select",{onInput:function(e){return t.handleSelect(e)},class:"form-style"},this.parseJSON(this.instances).map((function(t){return n("option",{value:t},t)})),n("option",{value:"other_instance"},this.other_instance_text)),n("br",null),this.selected_instance==="other_instance"?n("input",{type:"url",placeholder:"https://",value:this.value,onInput:function(e){return t.handleChange(e)},class:"form-style input-width"}):null,n("br",null),n("input",{type:"submit",value:this.send_button_text,class:"send-button"})))))))};Object.defineProperty(t,"assetsDirs",{get:function(){return["assets"]},enumerable:true,configurable:true});Object.defineProperty(t.prototype,"element",{get:function(){return o(this)},enumerable:true,configurable:true});Object.defineProperty(t,"style",{get:function(){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)}"},enumerable:true,configurable:true});return t}())}}}));