@azury/widget
Version:
📑 A beautifully crafted widget for Azury
1 lines • 13.8 kB
JavaScript
var __async=(e,n,t)=>new Promise(((o,a)=>{var r=e=>{try{s(t.next(e))}catch(e){a(e)}},l=e=>{try{s(t.throw(e))}catch(e){a(e)}},s=e=>e.done?o(e.value):Promise.resolve(e.value).then(r,l);s((t=t.apply(e,n)).next())})),uploadLimit=50,api="https://azury.dev/api",digest="448c2dbf77fb05c0b55d631704e66c5d052999dc9077e186f297199b4094c40b",css="/* widget */\n\n._widget_fy8ub_5 * {\n margin: 0;\n padding: 0;\n line-height: 100%;\n user-select: none;\n}\n\n._uploadIcon_fy8ub_19 {\n margin: 0;\n}\n\n/* icon */\n\n._icon_fy8ub_31 {\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--surfaceSecondary);\n box-shadow: var(--shadowAll);\n border-radius: 50%;\n position: fixed;\n height: 64px;\n width: 64px;\n transition: .3s;\n cursor: pointer;\n}\n\n._icon_fy8ub_31:hover {\n background: var(--surfaceTertiary);\n}\n\n._icon_fy8ub_31:active {\n background: var(--surfaceQuartiary);\n}\n\n._icon_fy8ub_31 i {\n font-size: 32px;\n color: var(--text);\n transition: .3s;\n opacity: .99;\n}\n\n._icon_fy8ub_31:hover i {\n color: var(--heading);\n}\n\n._icon_fy8ub_31:active i {\n color: var(--textLink);\n}\n\n._icon_fy8ub_31._disabled_fy8ub_105 {\n background: var(--surface) !important;\n cursor: not-allowed;\n}\n\n._icon_fy8ub_31._disabled_fy8ub_105 i {\n color: var(--textDark) !important;\n}\n\n/* popup */\n\n._popup_fy8ub_127 {\n height: calc(350px - 40px);\n width: calc(300px - 60px);\n padding: 20px 30px;\n border-radius: 28px;\n display: none;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n position: fixed;\n background: var(--surface);\n box-shadow: var(--shadowAll);\n}\n\n._popupContentWrapper_fy8ub_155 {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n._popupContent_fy8ub_155 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-direction: column;\n}\n\n._popupContent_fy8ub_155 h1 {\n font-size: 40px;\n font-family: var(--font);\n font-weight: 600;\n color: var(--heading);\n margin-bottom: 30px;\n opacity: .99;\n}\n\n._popupContent_fy8ub_155 i {\n font-size: 64px;\n color: var(--textLink);\n transition: .3s;\n cursor: pointer;\n opacity: .99;\n}\n\n._popupContent_fy8ub_155 i:hover {\n color: var(--blurple);\n}\n\n@keyframes _spin_fy8ub_1 {\n 0% {\n transform: rotate(359deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n\n._popupContent_fy8ub_155 ._loading_fy8ub_243 {\n animation: _spin_fy8ub_1 1s infinite;\n font-size: 64px;\n opacity: .99;\n color: var(--textDark) !important;\n cursor: not-allowed;\n}\n\n._popupContent_fy8ub_155 span {\n font-size: 14px;\n font-family: var(--font);\n color: var(--textDark);\n opacity: .99;\n margin-top: 10px;\n}\n\n._popup_fy8ub_127 footer {\n font-family: var(--font);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n}\n\n._popup_fy8ub_127 footer > a {\n font-size: 14px;\n color: var(--textLink);\n opacity: .99;\n}\n\n._popup_fy8ub_127 footer > p {\n font-size: 14px;\n color: var(--textDark);\n opacity: .99;\n margin-left: 5px;\n}\n\n._popup_fy8ub_127 footer > p > a {\n color: var(--text);\n font-weight: 500;\n}\n\n._popup_fy8ub_127 footer a {\n text-decoration: none;\n}\n\n._popup_fy8ub_127 footer a:hover {\n text-decoration: underline;\n}\n\n/* active styles */\n\n._widgetActive_fy8ub_347 ._icon_fy8ub_31 {\n background: var(--surfaceQuartiary);\n}\n\n._widgetActive_fy8ub_347 ._icon_fy8ub_31:hover {\n background: var(--surfaceTertiary);\n}\n\n._widgetActive_fy8ub_347 ._popup_fy8ub_127 {\n display: flex;\n}\n\n/* popup on success */\n\n._uploadSuccess_fy8ub_375 {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n._uploadSuccess_fy8ub_375 span {\n transition: .3s;\n cursor: pointer;\n margin: 0;\n}\n\n._uploadSuccess_fy8ub_375 span:hover {\n color: var(--text);\n text-decoration: underline;\n text-decoration-color: var(--text-dark);\n}\n\n#_copyButton_fy8ub_1 {\n background: var(--gray);\n transition: .3s;\n cursor: pointer;\n padding: 9px 12px;\n border-radius: 32px;\n color: white;\n box-shadow: var(--shadowBottom);\n outline: transparent;\n border: none;\n font-family: var(--font);\n opacity: .99;\n}\n\n#_copyButton_fy8ub_1:hover {\n background: var(--graySecondary);\n}\n\n#_copyButton_fy8ub_1:active {\n background: var(--grayTertiary);\n}\n\n#_copyButton_fy8ub_1._copied_fy8ub_455 {\n background: var(--green);\n}\n\n#_uploadMoreButton_fy8ub_1 {\n background: var(--blurple);\n transition: .3s;\n cursor: pointer;\n padding: 9px 12px;\n border-radius: 32px;\n color: white;\n box-shadow: var(--shadowBottom);\n outline: transparent;\n border: none;\n font-family: var(--font);\n opacity: .99;\n margin-left: 10px;\n}\n\n#_uploadMoreButton_fy8ub_1:hover {\n background: var(--textLink);\n}\n\n#_uploadMoreButton_fy8ub_1:active {\n background: var(--blurpleSecondary);\n}\n\n/* error */\n\n._error_fy8ub_513 i {\n cursor: auto;\n font-size: 32px;\n opacity: .99;\n color: var(--red) !important;\n margin-bottom: 20px;\n}\n\n._error_fy8ub_513 p {\n font-size: 16px;\n color: var(--text);\n font-weight: 500;\n opacity: .99;\n font-family: var(--font);\n text-align: center;\n margin-bottom: 5px;\n}\n\n._error_fy8ub_513 small {\n font-size: 14px;\n color: var(--textDark);\n font-family: var(--font);\n opacity: .99;\n}";!function(){if(!document.getElementById(digest)){var e=document.createElement("style");e.id=digest,e.textContent=css,document.head.appendChild(e)}}();var styles_module_css_default={widget:"_widget_fy8ub_5",uploadIcon:"_uploadIcon_fy8ub_19",icon:"_icon_fy8ub_31",disabled:"_disabled_fy8ub_105",popup:"_popup_fy8ub_127",popupContentWrapper:"_popupContentWrapper_fy8ub_155",popupContent:"_popupContent_fy8ub_155",loading:"_loading_fy8ub_243",spin:"_spin_fy8ub_1",widgetActive:"_widgetActive_fy8ub_347",uploadSuccess:"_uploadSuccess_fy8ub_375",copyButton:"_copyButton_fy8ub_1",copied:"_copied_fy8ub_455",uploadMoreButton:"_uploadMoreButton_fy8ub_1",error:"_error_fy8ub_513"},changeContent_default=(e,n)=>{const t=document.querySelector(`.${styles_module_css_default.popupContentWrapper}`);t&&(t.innerHTML=`\n <div class='${n?styles_module_css_default.popupContent+" "+styles_module_css_default.error:styles_module_css_default.popupContent}'>\n ${e}\n </div>\n `)},error_default=e=>{changeContent_default(`\n <i class='material-icons-round'>error_outline</i>\n <p>${e.toUpperCase()}</p>\n <small>Please reopen the popup!</small>\n `,!0)},handleUpload=()=>{try{const e=document.createElement("input");e.type="file",e.click(),e.addEventListener("change",(()=>__async(void 0,null,(function*(){var n,t,o,a,r,l;const s=e.files[0];if(changeContent_default(`\n <div class=${styles_module_css_default.popupContent}>\n <i class='${styles_module_css_default.loading} material-icons-round'>sync</i>\n <span>Uploading...</span>\n </div>\n `),s.size>=1024*uploadLimit*1024)return error_default("FILE EXCEEDING UPLOAD LIMIT");let u;null==(n=document.querySelector(`.${styles_module_css_default.icon}`))||n.removeEventListener("click",togglePopup_default),null==(t=document.querySelector(`.${styles_module_css_default.icon}`))||t.classList.add(styles_module_css_default.disabled);try{const e=new FormData;e.append("upload",s);const n=yield fetch(`${api}/accountless/new`,{method:"POST",body:e}),t=yield n.json();u=`${api}/accountless/${t.file.id}/download`}catch(e){return null==(o=document.querySelector(`.${styles_module_css_default.icon}`))||o.addEventListener("click",togglePopup_default),null==(a=document.querySelector(`.${styles_module_css_default.icon}`))||a.classList.remove(styles_module_css_default.disabled),error_default("SOMETHING WENT WRONG")}changeContent_default(`\n <div class=${styles_module_css_default.popupContent}>\n <h1>+1 File</h1>\n <div class=${styles_module_css_default.uploadSuccess}>\n <button id=${styles_module_css_default.copyButton}>Copy Link</button>\n <button id=${styles_module_css_default.uploadMoreButton}>Upload More</button>\n </div>\n </div>\n `);document.getElementById(styles_module_css_default.uploadMoreButton).onclick=handleUpload;const d=document.getElementById(styles_module_css_default.copyButton);d.onclick=()=>{navigator.clipboard.writeText(u),d.innerHTML="Copied",d.classList.add(styles_module_css_default.copied),setTimeout((()=>{d.innerHTML="Copy Link",d.classList.remove(styles_module_css_default.copied)}),1e3)},null==(r=document.querySelector(`.${styles_module_css_default.icon}`))||r.addEventListener("click",togglePopup_default),null==(l=document.querySelector(`.${styles_module_css_default.icon}`))||l.classList.remove(styles_module_css_default.disabled),setTimeout((()=>d.click()),1e3)}))))}catch(e){return error_default("SOMETHING WENT WRONG")}},handleUpload_default=handleUpload,togglePopup_default=()=>{var e,n;changeContent_default(`\n <div class=${styles_module_css_default.popupContent}>\n <h1>Upload File</h1>\n <i class='${styles_module_css_default.uploadIcon} material-icons-outlined'>file_upload</i>\n <span>Max. ${uploadLimit} MB</span>\n </div>\n `),null==(e=document.querySelector(`.${styles_module_css_default.widget}`))||e.classList.toggle(styles_module_css_default.widgetActive),null==(n=document.querySelector(`.${styles_module_css_default.uploadIcon}`))||n.addEventListener("click",handleUpload_default);const t=document.querySelector(`.${styles_module_css_default.icon}`);document.querySelector(`.${styles_module_css_default.widgetActive}`)?t&&(t.innerHTML="<i class='material-icons-round'>close</i>"):t&&(t.innerHTML="<i class='material-icons-round'>note_add</i>")},generatePopup_default=e=>{const n=document.createElement("div");return n.className=styles_module_css_default.popup,"bottom"===e.placement.split(" ")[0]&&(n.style.bottom="40px"),"top"===e.placement.split(" ")[0]&&(n.style.top="40px"),"right"===e.placement.split(" ")[1]&&(n.style.right="40px"),"left"===e.placement.split(" ")[1]&&(n.style.left="40px"),n.style.zIndex=(e.zIndex-1).toString(),n.innerHTML=`\n <div class=${styles_module_css_default.popupContentWrapper}>\n <div class=${styles_module_css_default.popupContent}>\n <h1>Upload File</h1>\n <i class="${styles_module_css_default.uploadIcon+" material-icons-outlined"}">file_upload</i>\n <span>Max. ${uploadLimit} MB</span>\n </div>\n </div>\n <footer>\n <a href='https://github.com/azurystudios/widget/blob/main/terms_of_service.md' target='_blank' rel='noreferrer'>TOS</a>\n <p>- Powered by <a href='https://azury.dev' target='_blank' rel='noreferrer'>Azury</a></p>\n </footer>\n `,n},font="Poppins",heading="#ffffff",text="#caccce",textDark="#8d8e91",textLink="#7a84f5",surface="#0b0c0f",surfaceSecondary="#0f1115",surfaceTertiary="#14151a",surfaceQuartiary="#181a20",gray="#2b2f3b",graySecondary="#414758",grayTertiary="#23262f",shadowAll="0 8px 15px rgba(0, 0, 0, .2)",shadowBottom="0px 4px 4px rgba(0, 0, 0, .16)",blurple="#5865f3",blurpleSecondary="#4956e4",green="#43b683",red="#f26e71",dark_default={font:font,heading:heading,text:text,textDark:textDark,textLink:textLink,surface:surface,surfaceSecondary:surfaceSecondary,surfaceTertiary:surfaceTertiary,surfaceQuartiary:surfaceQuartiary,gray:gray,graySecondary:graySecondary,grayTertiary:grayTertiary,shadowAll:shadowAll,shadowBottom:shadowBottom,blurple:blurple,blurpleSecondary:blurpleSecondary,green:green,red:red},font2="Poppins",heading2="#060607",text2="rgba(0, 0, 0, .8)",textDark2="rgba(0, 0, 0, .6)",textLink2="#4956e4",surface2="#d4d7dd",surfaceSecondary2="#f2f3f5",surfaceTertiary2="#e8eaed",surfaceQuartiary2="#e3e5e8",gray2="#2b2f3b",graySecondary2="#414758",grayTertiary2="#23262f",shadowAll2="0 8px 15px rgba(0, 0, 0, .2)",shadowBottom2="0px 4px 4px rgba(0, 0, 0, .16)",blurple2="#5865f3",blurpleSecondary2="#4956e4",green2="#43b683",red2="#ed4043",light_default={font:font2,heading:heading2,text:text2,textDark:textDark2,textLink:textLink2,surface:surface2,surfaceSecondary:surfaceSecondary2,surfaceTertiary:surfaceTertiary2,surfaceQuartiary:surfaceQuartiary2,gray:gray2,graySecondary:graySecondary2,grayTertiary:grayTertiary2,shadowAll:shadowAll2,shadowBottom:shadowBottom2,blurple:blurple2,blurpleSecondary:blurpleSecondary2,green:green2,red:red2},src_default=e=>{var n,t,o;e||(e={}),document.head.innerHTML+='<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap">',document.head.innerHTML+='<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined|Material+Icons+Round">';const a="object"==typeof e.theme?e.theme:"light"===e.theme?light_default:"automatic"===e.theme?window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?dark_default:light_default:dark_default,r=null!=(n=e.placement)?n:"bottom right",l=null!=(t=e.zIndex)?t:9999,s=document.createElement("div"),u=document.createElement("div");u.className=styles_module_css_default.widget;for(const[e,n]of Object.entries(a))u.style.setProperty(`--${e}`,n);s.className=styles_module_css_default.icon,s.innerHTML="<i class='material-icons-round'>note_add</i>",s.style.zIndex=l.toString(),"bottom"===r.split(" ")[0]&&(s.style.bottom="25px"),"top"===r.split(" ")[0]&&(s.style.top="25px"),"right"===r.split(" ")[1]&&(s.style.right="25px"),"left"===r.split(" ")[1]&&(s.style.left="25px"),u.appendChild(s),u.appendChild(generatePopup_default({placement:r,zIndex:l})),document.body.appendChild(u),null==(o=document.querySelector(`.${styles_module_css_default.icon}`))||o.addEventListener("click",togglePopup_default)};export{src_default as default};