diff --git a/index.html b/index.html index 19e7701..eaec27a 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,7 @@
- Creative Writing + Creative Writing Marketing Design Development diff --git a/scripts/app.js b/scripts/app.js index b1f6808..085b8c9 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -695,6 +695,7 @@ async function saveTask() { task.date = Date.now(); floGlobals.appObjects.rmInterns.tasks.unshift(task) } + buttonLoader('task_popup__submit', true) floCloudAPI.updateObjectData('rmInterns') .then(response => { notify('Task saved successfully', 'success') @@ -704,6 +705,7 @@ async function saveTask() { notify('An error occurred while saving the task', 'error') console.error(e) }).finally(() => { + buttonLoader('task_popup__submit', false) closePopup() }) } @@ -741,7 +743,7 @@ const render = { actions = html` - ${floGlobals.applications[id].size} applied + ${floGlobals.applications[id]?.size || 0} applied ` } else if (!floGlobals.isAdmin) { const applied = floGlobals.applications.has(id) @@ -749,6 +751,9 @@ const render = { ` } + } else { + actions = html`Apply` + floGlobals.applyingForTask = id; } return html`
  • @@ -788,8 +793,9 @@ const router = new Router({ } } }) -const header = (page) => { - const isUserLoggedIn = page === 'loading' || floGlobals.isUserLoggedIn +const header = () => { + const { page } = router.state + const isUserLoggedIn = page === 'loading' || floGlobals.isUserLoggedIn; return html`
    @@ -798,8 +804,8 @@ const header = (page) => { ${isUserLoggedIn ? html`` : html`
    - Get Started - Sign in + ${page !== 'sign_up' ? html`Get Started` : ''} + ${page !== 'sign_in' ? html`Sign in` : ''}
    `}
    @@ -808,7 +814,7 @@ const header = (page) => { router.addRoute('loading', (state) => { renderElem(getRef('app_body'), html`
    - ${header('loading')} + ${header()}
    @@ -823,7 +829,7 @@ router.addRoute('landing', (state) => { const { page } = state; renderElem(getRef('app_body'), html`
    - ${header(page)} + ${header()}

    @@ -951,21 +957,26 @@ function renderHome(state) { getRef('task_popup__title').textContent = 'Add Task'; render.availableTasks() } else { - renderElem(getRef('app_body'), html` -
    - ${header()} -
    -

    Home

    -
    -

    Available

    -
      - -
    -
    -
    -
    - `) - render.availableTasks() + if (floGlobals.applyingForTask) { + applyToTask(floGlobals.applyingForTask) + floGlobals.applyingForTask = null; + } else { + renderElem(getRef('app_body'), html` +
    + ${header()} +
    +

    Home

    +
    +

    Available

    +
      + +
    +
    +
    +
    + `) + render.availableTasks() + } } } @@ -1214,4 +1225,5 @@ window.addEventListener("load", () => { // If yes, then we can allow users to send updates regarding the task. // handle task deadlines // should we allow users to apply for multiple tasks? -// Add icons to the task categories \ No newline at end of file +// Add icons to the task categories +// handle applicants data securely (encrypted) and allow sub-admins to view them \ No newline at end of file diff --git a/scripts/app.min.js b/scripts/app.min.js index fb20fa2..c341a1a 100644 --- a/scripts/app.min.js +++ b/scripts/app.min.js @@ -1,10 +1,10 @@ -const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(elementId){return document.getElementById(elementId)}uiGlobals.connectionErrorNotification=[],navigator.onLine||uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error")),window.addEventListener("offline",(()=>{uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error"))})),window.addEventListener("online",(()=>{uiGlobals.connectionErrorNotification.forEach((notification=>{getRef("notification_drawer").remove(notification)})),notify("We are back online.","success")}));const getConfirmation=(title,options={})=>new Promise((resolve=>{const{message:message="",cancelText:cancelText="Cancel",confirmText:confirmText="OK",danger:danger=!1}=options;getRef("confirm_title").innerText=title,getRef("confirm_message").innerText=message;const cancelButton=getRef("confirmation_popup").querySelector(".cancel-button"),confirmButton=getRef("confirmation_popup").querySelector(".confirm-button");confirmButton.textContent=confirmText,cancelButton.textContent=cancelText,danger?confirmButton.classList.add("button--danger"):confirmButton.classList.remove("button--danger");const{opened:opened,closed:closed}=openPopup("confirmation_popup");confirmButton.onclick=()=>{closePopup({payload:!0})},cancelButton.onclick=()=>{closePopup()},closed.then((payload=>{confirmButton.onclick=null,cancelButton.onclick=null,resolve(!!payload)}))})),debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};function addClass(elements,className){elements.forEach((element=>{document.querySelector(element).classList.add(className)}))}function removeClass(elements,className){elements.forEach((element=>{document.querySelector(element).classList.remove(className)}))}function getAllElements(selector){return Array.from(document.querySelectorAll(selector))}let zIndex=50;function openPopup(popupId,pinned){return void 0===popupStack.peek()&&document.addEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()})),zIndex++,getRef(popupId).setAttribute("style",`z-index: ${zIndex}`),getRef(popupId).show({pinned:pinned})}function closePopup(options={}){void 0!==popupStack.peek()&&popupStack.peek().popup.hide(options)}function notify(message,mode,options={}){let icon;switch(mode){case"success":icon='';break;case"error":icon='',options.pinned=!0}return"error"===mode&&console.error(message),getRef("notification_drawer").push(message,{icon:icon,...options})}function getFormattedTime(timestamp,format){try{String(timestamp).length<13&&(timestamp*=1e3);let[day,month,date,year]=new Date(timestamp).toString().split(" "),minutes=new Date(timestamp).getMinutes(),hours=new Date(timestamp).getHours();(new Date).toString().split(" ");minutes=minutes<10?`0${minutes}`:minutes;let finalHours="";switch(finalHours=hours>12?`${hours-12}:${minutes}`:0===hours?`12:${minutes}`:`${hours}:${minutes}`,finalHours=hours>=12?`${finalHours} PM`:`${finalHours} AM`,format){case"date-only":return`${month} ${date}, ${year}`;case"time-only":return finalHours;default:return`${month} ${date} ${year}, ${finalHours}`}}catch(e){return console.error(e),timestamp}}function detectBrowser(){let tem,ua=navigator.userAgent,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)||[];return/trident/i.test(M[1])?(tem=/\brv[ :]+(\d+)/g.exec(ua)||[],"IE "+(tem[1]||"")):"Chrome"===M[1]&&(tem=ua.match(/\b(OPR|Edge)\/(\d+)/),null!=tem)?tem.slice(1).join(" ").replace("OPR","Opera"):(M=M[2]?[M[1],M[2]]:[navigator.appName,navigator.appVersion,"-?"],null!=(tem=ua.match(/version\/(\d+)/i))&&M.splice(1,1,tem[1]),M.join(" "))}function createRipple(event,target){const circle=document.createElement("span"),diameter=Math.max(target.clientWidth,target.clientHeight),radius=diameter/2,targetDimensions=target.getBoundingClientRect();circle.style.width=circle.style.height=`${diameter}px`,circle.style.left=event.clientX-(targetDimensions.left+radius)+"px",circle.style.top=event.clientY-(targetDimensions.top+radius)+"px",circle.classList.add("ripple");const rippleAnimation=circle.animate([{opacity:1,transform:"scale(0)"},{transform:"scale(4)",opacity:0}],{duration:600,fill:"forwards",easing:"ease-out"});target.append(circle),rippleAnimation.onfinish=()=>{circle.remove()}}document.addEventListener("popupopened",(async e=>{history.pushState({type:"popup"},null,null),e.target.id})),document.addEventListener("popupclosed",(e=>{if(zIndex--,"task_popup"===e.target.id)delete getRef("task_popup").dataset.taskId;void 0===popupStack.peek()&&document.removeEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()}))})),window.addEventListener("popstate",(e=>{if(e.state&&"popup"===e.state.type)closePopup()}));class Router{constructor(options={}){const{routes:routes={},state:state={},routingStart:routingStart,routingEnd:routingEnd}=options;this.routes=routes,this.state=state,this.routingStart=routingStart,this.routingEnd=routingEnd,this.lastPage=null,window.addEventListener("hashchange",(e=>this.routeTo(window.location.hash)))}addRoute(route,callback){this.routes[route]=callback}handleRouting=async page=>{this.routingStart&&this.routingStart(this.state),this.routes[page]?(await this.routes[page](this.state),this.lastPage=page):this.routes[404]?this.routes[404](this.state):console.error(`No route found for '${page}' and no '404' route is defined.`),this.routingEnd&&this.routingEnd(this.state)};async routeTo(destination){try{let page,wildcards=[],params={},[path,queryString]=destination.split("?");path.includes("#")&&(path=path.split("#")[1]),path.includes("/")?[,page,...wildcards]=path.split("/"):page=path,this.state={page:page,wildcards:wildcards,lastPage:this.lastPage,params:params},queryString&&(params=new URLSearchParams(queryString),this.state.params=Object.fromEntries(params)),document.startViewTransition?document.startViewTransition((async()=>{await this.handleRouting(page)})):await this.handleRouting(page)}catch(e){console.error(e)}}}class LazyLoader{constructor(container,elementsToRender,renderFn,options={}){const{batchSize:batchSize=10,freshRender:freshRender,bottomFirst:bottomFirst=!1,domUpdated:domUpdated}=options;this.elementsToRender=elementsToRender,this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[],this.renderFn=renderFn,this.intersectionObserver,this.batchSize=batchSize,this.freshRender=freshRender,this.domUpdated=domUpdated,this.bottomFirst=bottomFirst,this.shouldLazyLoad=!1,this.lastScrollTop=0,this.lastScrollHeight=0,this.lazyContainer=document.querySelector(container),this.update=this.update.bind(this),this.render=this.render.bind(this),this.init=this.init.bind(this),this.clear=this.clear.bind(this)}get elements(){return this.arrayOfElements}init(){this.intersectionObserver=new IntersectionObserver(((entries,observer)=>{entries.forEach((entry=>{entry.isIntersecting&&(observer.disconnect(),this.render({lazyLoad:!0}))}))})),this.mutationObserver=new MutationObserver((mutationList=>{mutationList.forEach((mutation=>{"childList"===mutation.type&&mutation.addedNodes.length&&(this.bottomFirst?this.lazyContainer.firstElementChild&&this.intersectionObserver.observe(this.lazyContainer.firstElementChild):this.lazyContainer.lastElementChild&&this.intersectionObserver.observe(this.lazyContainer.lastElementChild))}))})),this.mutationObserver.observe(this.lazyContainer,{childList:!0}),this.render()}update(elementsToRender){this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[]}render(options={}){let{lazyLoad:lazyLoad=!1}=options;this.shouldLazyLoad=lazyLoad;const frag=document.createDocumentFragment();lazyLoad?this.bottomFirst?(this.updateEndIndex=this.updateStartIndex,this.updateStartIndex=this.updateEndIndex-this.batchSize):(this.updateStartIndex=this.updateEndIndex,this.updateEndIndex=this.updateEndIndex+this.batchSize):(this.intersectionObserver.disconnect(),this.bottomFirst?(this.updateEndIndex=this.arrayOfElements.length,this.updateStartIndex=this.updateEndIndex-this.batchSize-1):(this.updateStartIndex=0,this.updateEndIndex=this.batchSize),this.lazyContainer.innerHTML=""),this.lastScrollHeight=this.lazyContainer.scrollHeight,this.lastScrollTop=this.lazyContainer.scrollTop,this.arrayOfElements.slice(this.updateStartIndex,this.updateEndIndex).forEach(((element,index)=>{frag.append(this.renderFn(element))})),this.bottomFirst?(this.lazyContainer.prepend(frag),this.lastScrollTop+=this.lazyContainer.scrollHeight-this.lastScrollHeight,this.lazyContainer.scrollTo({top:this.lastScrollTop}),this.lastScrollHeight=this.lazyContainer.scrollHeight):this.lazyContainer.append(frag),!lazyLoad&&this.bottomFirst&&(this.lazyContainer.scrollTop=this.lazyContainer.scrollHeight),!lazyLoad&&this.freshRender&&this.freshRender()}clear(){this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.lazyContainer.innerHTML=""}reset(){this.arrayOfElements="function"==typeof this.elementsToRender?this.elementsToRender():this.elementsToRender||[],this.render()}}function buttonLoader(id,show){const button="string"==typeof id?document.getElementById(id):id;if(!button)return;button.dataset.hasOwnProperty("wasDisabled")||(button.dataset.wasDisabled=button.disabled);const animOptions={duration:200,fill:"forwards",easing:"ease"};if(show)button.disabled=!0,button.parentNode.append(document.createElement("sm-spinner")),button.animate([{clipPath:"circle(100%)"},{clipPath:"circle(0)"}],animOptions);else{button.disabled="true"===button.dataset.wasDisabled,button.animate([{clipPath:"circle(0)"},{clipPath:"circle(100%)"}],animOptions).onfinish=e=>{button.removeAttribute("data-original-state")};const potentialTarget=button.parentNode.querySelector("sm-spinner");potentialTarget&&potentialTarget.remove()}}let isMobileView=!1;const mobileQuery=window.matchMedia("(max-width: 40rem)");function handleMobileChange(e){isMobileView=e.matches}mobileQuery.addEventListener("change",handleMobileChange),handleMobileChange(mobileQuery);const slideInLeft=[{opacity:0,transform:"translateX(1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutLeft=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-1.5rem)"}],slideInRight=[{opacity:0,transform:"translateX(-1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutRight=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(1.5rem)"}],slideInDown=[{opacity:0,transform:"translateY(-1.5rem)"},{opacity:1,transform:"translateY(0)"}],slideOutUp=[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-1.5rem)"}];async function saveProfile(){const name=getRef("profile__name").value.trim(),email=getRef("profile__email").value.trim(),college=getRef("profile__college").value.trim(),course=getRef("profile__course").value.trim(),whatsappNumber=getRef("profile__whatsapp_number").value.trim(),stringifiedData=JSON.stringify({name:name,email:email,college:college,course:course,whatsappNumber:whatsappNumber});if(stringifiedData===floDapps.user.decipher(floGlobals.userProfile))return notify("No changes detected","error");if(!await getConfirmation("Save details",{message:"Are you sure you want to save these details?",confirmText:"Save"}))return;const encryptedData=floDapps.user.encipher(stringifiedData);buttonLoader("profile__save",!0),floCloudAPI.sendGeneralData({encryptedData:encryptedData},"userProfile").then((response=>{notify("Profile saved successfully","success"),floGlobals.userProfile=encryptedData})).catch((e=>{notify("An error occurred while saving the profile","error"),console.error(e)})).finally((()=>{buttonLoader("profile__save",!1)}))}async function applyToTask(id){if(!floGlobals.isUserLoggedIn)return location.hash="#/sign_in",notify("You need to be logged in to apply to a task");await getConfirmation("Apply to task",{message:"Are you sure you want to apply to this task?"})&&floCloudAPI.sendGeneralData({taskID:id},"taskApplications").then((response=>{notify("You have successfully applied to the task","success"),floGlobals.applications.add(id),render.availableTasks()})).catch((e=>{notify("An error occurred while applying to the task","error")}))}function editTask(id){const task=floGlobals.appObjects.rmInterns.tasks.find((task=>task.id===id));if(!task)return notify("Task not found","error");const{title:title,description:description,category:category,deadline:deadline}=task;getRef("task_popup__title_input").value=title,getRef("task_popup__description").value=description,getRef("task_popup__category").value=category,getRef("task_popup__deadline").value=deadline,getRef("task_popup").dataset.taskId=id,openPopup("task_popup")}async function saveTask(){if(!await getConfirmation("Save task",{message:"Are you sure you want to save this task?",confirmText:"Save"}))return;const id=getRef("task_popup").dataset.taskId||Math.random().toString(36).substr(2,9),title=getRef("task_popup__title_input").value,description=getRef("task_popup__description").value,category=getRef("task_popup__category").value,deadline=getRef("task_popup__deadline").value,task={id:id,title:title,description:description,category:category,deadline:deadline,status:"open"},foundTask=floGlobals.appObjects.rmInterns.tasks.find((task=>task.id===id));if(foundTask){let taskDetailsChanged=!1;for(const key in task)task[key]!==foundTask[key]&&(taskDetailsChanged=!0,foundTask[key]=task[key]);if(!taskDetailsChanged)return notify("Please update at least one detail to save the changes","error")}else task.date=Date.now(),floGlobals.appObjects.rmInterns.tasks.unshift(task);floCloudAPI.updateObjectData("rmInterns").then((response=>{notify("Task saved successfully","success"),render.availableTasks()})).catch((e=>{notify("An error occurred while saving the task","error"),console.error(e)})).finally((()=>{closePopup()}))}async function deleteTask(id){if(!await getConfirmation("Delete task",{message:"Are you sure you want to delete this task?",confirmText:"Delete",danger:!0}))return;console;const taskIndex=floGlobals.appObjects.rmInterns.tasks.findIndex((task=>task.id===id));if(taskIndex<0)return notify("Task not found","error");const[cloneOfTaskToBeDeleted]=floGlobals.appObjects.rmInterns.tasks.splice(taskIndex,1);floCloudAPI.updateObjectData("rmInterns").then((response=>{notify("Task deleted successfully","success")})).catch((e=>{notify("An error occurred while deleting the task","error"),floGlobals.appObjects.rmInterns.tasks.splice(taskIndex,0,cloneOfTaskToBeDeleted)})).finally((()=>{closePopup(),render.availableTasks()}))}window.smCompConfig={"sm-input":[{selector:"[data-flo-address]",customValidation:value=>value?{isValid:floCrypto.validateFloID(value),errorText:'Invalid FLO address.
    It usually starts with "F"'}:{isValid:!1,errorText:"Please enter a FLO address"}},{selector:"[data-btc-address]",customValidation:value=>value?{isValid:btcOperator.validateAddress(value),errorText:'Invalid address.
    It usually starts with "1", "3" or "bc1"'}:{isValid:!1,errorText:"Please enter a BTC address"}},{selector:"[data-private-key]",customValidation:(value,inputElem)=>{if(!value)return{isValid:!1,errorText:"Please enter a private key"};if(floCrypto.getPubKeyHex(value)){const forAddress=inputElem.dataset.forAddress;return forAddress?{isValid:btcOperator.verifyKey(forAddress,value),errorText:`This private key does not match the address ${forAddress}`}:{isValid:!0}}return{isValid:!1,errorText:"Invalid private key. Please check and try again."}}},{selector:'[type="email"]',customValidation:(value,target)=>""===value?{isValid:!1,errorText:"Please enter an email address"}:{isValid:/\S+@\S+\.\S+/.test(value),errorText:"Invalid email address"}},{selector:"#profile__whatsapp_number",customValidation:(value,target)=>value.length<10?{isValid:!1,errorText:"Number must be at least 10 digits long"}:value.length>13?{isValid:!1,errorText:"Number must be at most 13 digits long"}:{isValid:!0}}]};const render={task(details={}){const{title:title,description:description,date:date,id:id,status:status,deadline:deadline,category:category}=details;let actions="";if(floGlobals.isUserLoggedIn)if(floGlobals.isSubAdmin)actions=html` +const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(elementId){return document.getElementById(elementId)}uiGlobals.connectionErrorNotification=[],navigator.onLine||uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error")),window.addEventListener("offline",(()=>{uiGlobals.connectionErrorNotification.push(notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error"))})),window.addEventListener("online",(()=>{uiGlobals.connectionErrorNotification.forEach((notification=>{getRef("notification_drawer").remove(notification)})),notify("We are back online.","success")}));const getConfirmation=(title,options={})=>new Promise((resolve=>{const{message:message="",cancelText:cancelText="Cancel",confirmText:confirmText="OK",danger:danger=!1}=options;getRef("confirm_title").innerText=title,getRef("confirm_message").innerText=message;const cancelButton=getRef("confirmation_popup").querySelector(".cancel-button"),confirmButton=getRef("confirmation_popup").querySelector(".confirm-button");confirmButton.textContent=confirmText,cancelButton.textContent=cancelText,danger?confirmButton.classList.add("button--danger"):confirmButton.classList.remove("button--danger");const{opened:opened,closed:closed}=openPopup("confirmation_popup");confirmButton.onclick=()=>{closePopup({payload:!0})},cancelButton.onclick=()=>{closePopup()},closed.then((payload=>{confirmButton.onclick=null,cancelButton.onclick=null,resolve(!!payload)}))})),debounce=(callback,wait)=>{let timeoutId=null;return(...args)=>{window.clearTimeout(timeoutId),timeoutId=window.setTimeout((()=>{callback.apply(null,args)}),wait)}};function addClass(elements,className){elements.forEach((element=>{document.querySelector(element).classList.add(className)}))}function removeClass(elements,className){elements.forEach((element=>{document.querySelector(element).classList.remove(className)}))}function getAllElements(selector){return Array.from(document.querySelectorAll(selector))}let zIndex=50;function openPopup(popupId,pinned){return void 0===popupStack.peek()&&document.addEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()})),zIndex++,getRef(popupId).setAttribute("style",`z-index: ${zIndex}`),getRef(popupId).show({pinned:pinned})}function closePopup(options={}){void 0!==popupStack.peek()&&popupStack.peek().popup.hide(options)}function notify(message,mode,options={}){let icon;switch(mode){case"success":icon='';break;case"error":icon='',options.pinned=!0}return"error"===mode&&console.error(message),getRef("notification_drawer").push(message,{icon:icon,...options})}function getFormattedTime(timestamp,format){try{String(timestamp).length<13&&(timestamp*=1e3);let[day,month,date,year]=new Date(timestamp).toString().split(" "),minutes=new Date(timestamp).getMinutes(),hours=new Date(timestamp).getHours();(new Date).toString().split(" ");minutes=minutes<10?`0${minutes}`:minutes;let finalHours="";switch(finalHours=hours>12?`${hours-12}:${minutes}`:0===hours?`12:${minutes}`:`${hours}:${minutes}`,finalHours=hours>=12?`${finalHours} PM`:`${finalHours} AM`,format){case"date-only":return`${month} ${date}, ${year}`;case"time-only":return finalHours;default:return`${month} ${date} ${year}, ${finalHours}`}}catch(e){return console.error(e),timestamp}}function detectBrowser(){let tem,ua=navigator.userAgent,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)||[];return/trident/i.test(M[1])?(tem=/\brv[ :]+(\d+)/g.exec(ua)||[],"IE "+(tem[1]||"")):"Chrome"===M[1]&&(tem=ua.match(/\b(OPR|Edge)\/(\d+)/),null!=tem)?tem.slice(1).join(" ").replace("OPR","Opera"):(M=M[2]?[M[1],M[2]]:[navigator.appName,navigator.appVersion,"-?"],null!=(tem=ua.match(/version\/(\d+)/i))&&M.splice(1,1,tem[1]),M.join(" "))}function createRipple(event,target){const circle=document.createElement("span"),diameter=Math.max(target.clientWidth,target.clientHeight),radius=diameter/2,targetDimensions=target.getBoundingClientRect();circle.style.width=circle.style.height=`${diameter}px`,circle.style.left=event.clientX-(targetDimensions.left+radius)+"px",circle.style.top=event.clientY-(targetDimensions.top+radius)+"px",circle.classList.add("ripple");const rippleAnimation=circle.animate([{opacity:1,transform:"scale(0)"},{transform:"scale(4)",opacity:0}],{duration:600,fill:"forwards",easing:"ease-out"});target.append(circle),rippleAnimation.onfinish=()=>{circle.remove()}}document.addEventListener("popupopened",(async e=>{history.pushState({type:"popup"},null,null),e.target.id})),document.addEventListener("popupclosed",(e=>{if(zIndex--,"task_popup"===e.target.id)delete getRef("task_popup").dataset.taskId;void 0===popupStack.peek()&&document.removeEventListener("keydown",(e=>{"Escape"===e.key&&closePopup()}))})),window.addEventListener("popstate",(e=>{if(e.state&&"popup"===e.state.type)closePopup()}));class Router{constructor(options={}){const{routes:routes={},state:state={},routingStart:routingStart,routingEnd:routingEnd}=options;this.routes=routes,this.state=state,this.routingStart=routingStart,this.routingEnd=routingEnd,this.lastPage=null,window.addEventListener("hashchange",(e=>this.routeTo(window.location.hash)))}addRoute(route,callback){this.routes[route]=callback}handleRouting=async page=>{this.routingStart&&this.routingStart(this.state),this.routes[page]?(await this.routes[page](this.state),this.lastPage=page):this.routes[404]?this.routes[404](this.state):console.error(`No route found for '${page}' and no '404' route is defined.`),this.routingEnd&&this.routingEnd(this.state)};async routeTo(destination){try{let page,wildcards=[],params={},[path,queryString]=destination.split("?");path.includes("#")&&(path=path.split("#")[1]),path.includes("/")?[,page,...wildcards]=path.split("/"):page=path,this.state={page:page,wildcards:wildcards,lastPage:this.lastPage,params:params},queryString&&(params=new URLSearchParams(queryString),this.state.params=Object.fromEntries(params)),document.startViewTransition?document.startViewTransition((async()=>{await this.handleRouting(page)})):await this.handleRouting(page)}catch(e){console.error(e)}}}class LazyLoader{constructor(container,elementsToRender,renderFn,options={}){const{batchSize:batchSize=10,freshRender:freshRender,bottomFirst:bottomFirst=!1,domUpdated:domUpdated}=options;this.elementsToRender=elementsToRender,this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[],this.renderFn=renderFn,this.intersectionObserver,this.batchSize=batchSize,this.freshRender=freshRender,this.domUpdated=domUpdated,this.bottomFirst=bottomFirst,this.shouldLazyLoad=!1,this.lastScrollTop=0,this.lastScrollHeight=0,this.lazyContainer=document.querySelector(container),this.update=this.update.bind(this),this.render=this.render.bind(this),this.init=this.init.bind(this),this.clear=this.clear.bind(this)}get elements(){return this.arrayOfElements}init(){this.intersectionObserver=new IntersectionObserver(((entries,observer)=>{entries.forEach((entry=>{entry.isIntersecting&&(observer.disconnect(),this.render({lazyLoad:!0}))}))})),this.mutationObserver=new MutationObserver((mutationList=>{mutationList.forEach((mutation=>{"childList"===mutation.type&&mutation.addedNodes.length&&(this.bottomFirst?this.lazyContainer.firstElementChild&&this.intersectionObserver.observe(this.lazyContainer.firstElementChild):this.lazyContainer.lastElementChild&&this.intersectionObserver.observe(this.lazyContainer.lastElementChild))}))})),this.mutationObserver.observe(this.lazyContainer,{childList:!0}),this.render()}update(elementsToRender){this.arrayOfElements="function"==typeof elementsToRender?this.elementsToRender():elementsToRender||[]}render(options={}){let{lazyLoad:lazyLoad=!1}=options;this.shouldLazyLoad=lazyLoad;const frag=document.createDocumentFragment();lazyLoad?this.bottomFirst?(this.updateEndIndex=this.updateStartIndex,this.updateStartIndex=this.updateEndIndex-this.batchSize):(this.updateStartIndex=this.updateEndIndex,this.updateEndIndex=this.updateEndIndex+this.batchSize):(this.intersectionObserver.disconnect(),this.bottomFirst?(this.updateEndIndex=this.arrayOfElements.length,this.updateStartIndex=this.updateEndIndex-this.batchSize-1):(this.updateStartIndex=0,this.updateEndIndex=this.batchSize),this.lazyContainer.innerHTML=""),this.lastScrollHeight=this.lazyContainer.scrollHeight,this.lastScrollTop=this.lazyContainer.scrollTop,this.arrayOfElements.slice(this.updateStartIndex,this.updateEndIndex).forEach(((element,index)=>{frag.append(this.renderFn(element))})),this.bottomFirst?(this.lazyContainer.prepend(frag),this.lastScrollTop+=this.lazyContainer.scrollHeight-this.lastScrollHeight,this.lazyContainer.scrollTo({top:this.lastScrollTop}),this.lastScrollHeight=this.lazyContainer.scrollHeight):this.lazyContainer.append(frag),!lazyLoad&&this.bottomFirst&&(this.lazyContainer.scrollTop=this.lazyContainer.scrollHeight),!lazyLoad&&this.freshRender&&this.freshRender()}clear(){this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.lazyContainer.innerHTML=""}reset(){this.arrayOfElements="function"==typeof this.elementsToRender?this.elementsToRender():this.elementsToRender||[],this.render()}}function buttonLoader(id,show){const button="string"==typeof id?document.getElementById(id):id;if(!button)return;button.dataset.hasOwnProperty("wasDisabled")||(button.dataset.wasDisabled=button.disabled);const animOptions={duration:200,fill:"forwards",easing:"ease"};if(show)button.disabled=!0,button.parentNode.append(document.createElement("sm-spinner")),button.animate([{clipPath:"circle(100%)"},{clipPath:"circle(0)"}],animOptions);else{button.disabled="true"===button.dataset.wasDisabled,button.animate([{clipPath:"circle(0)"},{clipPath:"circle(100%)"}],animOptions).onfinish=e=>{button.removeAttribute("data-original-state")};const potentialTarget=button.parentNode.querySelector("sm-spinner");potentialTarget&&potentialTarget.remove()}}let isMobileView=!1;const mobileQuery=window.matchMedia("(max-width: 40rem)");function handleMobileChange(e){isMobileView=e.matches}mobileQuery.addEventListener("change",handleMobileChange),handleMobileChange(mobileQuery);const slideInLeft=[{opacity:0,transform:"translateX(1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutLeft=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-1.5rem)"}],slideInRight=[{opacity:0,transform:"translateX(-1.5rem)"},{opacity:1,transform:"translateX(0)"}],slideOutRight=[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(1.5rem)"}],slideInDown=[{opacity:0,transform:"translateY(-1.5rem)"},{opacity:1,transform:"translateY(0)"}],slideOutUp=[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:"translateY(-1.5rem)"}];async function saveProfile(){const name=getRef("profile__name").value.trim(),email=getRef("profile__email").value.trim(),college=getRef("profile__college").value.trim(),course=getRef("profile__course").value.trim(),whatsappNumber=getRef("profile__whatsapp_number").value.trim(),stringifiedData=JSON.stringify({name:name,email:email,college:college,course:course,whatsappNumber:whatsappNumber});if(stringifiedData===floDapps.user.decipher(floGlobals.userProfile))return notify("No changes detected","error");if(!await getConfirmation("Save details",{message:"Are you sure you want to save these details?",confirmText:"Save"}))return;const encryptedData=floDapps.user.encipher(stringifiedData);buttonLoader("profile__save",!0),floCloudAPI.sendGeneralData({encryptedData:encryptedData},"userProfile").then((response=>{notify("Profile saved successfully","success"),floGlobals.userProfile=encryptedData})).catch((e=>{notify("An error occurred while saving the profile","error"),console.error(e)})).finally((()=>{buttonLoader("profile__save",!1)}))}async function applyToTask(id){if(!floGlobals.isUserLoggedIn)return location.hash="#/sign_in",notify("You need to be logged in to apply to a task");await getConfirmation("Apply to task",{message:"Are you sure you want to apply to this task?"})&&floCloudAPI.sendGeneralData({taskID:id},"taskApplications").then((response=>{notify("You have successfully applied to the task","success"),floGlobals.applications.add(id),render.availableTasks()})).catch((e=>{notify("An error occurred while applying to the task","error")}))}function editTask(id){const task=floGlobals.appObjects.rmInterns.tasks.find((task=>task.id===id));if(!task)return notify("Task not found","error");const{title:title,description:description,category:category,deadline:deadline}=task;getRef("task_popup__title_input").value=title,getRef("task_popup__description").value=description,getRef("task_popup__category").value=category,getRef("task_popup__deadline").value=deadline,getRef("task_popup").dataset.taskId=id,openPopup("task_popup")}async function saveTask(){if(!await getConfirmation("Save task",{message:"Are you sure you want to save this task?",confirmText:"Save"}))return;const id=getRef("task_popup").dataset.taskId||Math.random().toString(36).substr(2,9),title=getRef("task_popup__title_input").value,description=getRef("task_popup__description").value,category=getRef("task_popup__category").value,deadline=getRef("task_popup__deadline").value,task={id:id,title:title,description:description,category:category,deadline:deadline,status:"open"},foundTask=floGlobals.appObjects.rmInterns.tasks.find((task=>task.id===id));if(foundTask){let taskDetailsChanged=!1;for(const key in task)task[key]!==foundTask[key]&&(taskDetailsChanged=!0,foundTask[key]=task[key]);if(!taskDetailsChanged)return notify("Please update at least one detail to save the changes","error")}else task.date=Date.now(),floGlobals.appObjects.rmInterns.tasks.unshift(task);buttonLoader("task_popup__submit",!0),floCloudAPI.updateObjectData("rmInterns").then((response=>{notify("Task saved successfully","success"),render.availableTasks()})).catch((e=>{notify("An error occurred while saving the task","error"),console.error(e)})).finally((()=>{buttonLoader("task_popup__submit",!1),closePopup()}))}async function deleteTask(id){if(!await getConfirmation("Delete task",{message:"Are you sure you want to delete this task?",confirmText:"Delete",danger:!0}))return;console;const taskIndex=floGlobals.appObjects.rmInterns.tasks.findIndex((task=>task.id===id));if(taskIndex<0)return notify("Task not found","error");const[cloneOfTaskToBeDeleted]=floGlobals.appObjects.rmInterns.tasks.splice(taskIndex,1);floCloudAPI.updateObjectData("rmInterns").then((response=>{notify("Task deleted successfully","success")})).catch((e=>{notify("An error occurred while deleting the task","error"),floGlobals.appObjects.rmInterns.tasks.splice(taskIndex,0,cloneOfTaskToBeDeleted)})).finally((()=>{closePopup(),render.availableTasks()}))}window.smCompConfig={"sm-input":[{selector:"[data-flo-address]",customValidation:value=>value?{isValid:floCrypto.validateFloID(value),errorText:'Invalid FLO address.
    It usually starts with "F"'}:{isValid:!1,errorText:"Please enter a FLO address"}},{selector:"[data-btc-address]",customValidation:value=>value?{isValid:btcOperator.validateAddress(value),errorText:'Invalid address.
    It usually starts with "1", "3" or "bc1"'}:{isValid:!1,errorText:"Please enter a BTC address"}},{selector:"[data-private-key]",customValidation:(value,inputElem)=>{if(!value)return{isValid:!1,errorText:"Please enter a private key"};if(floCrypto.getPubKeyHex(value)){const forAddress=inputElem.dataset.forAddress;return forAddress?{isValid:btcOperator.verifyKey(forAddress,value),errorText:`This private key does not match the address ${forAddress}`}:{isValid:!0}}return{isValid:!1,errorText:"Invalid private key. Please check and try again."}}},{selector:'[type="email"]',customValidation:(value,target)=>""===value?{isValid:!1,errorText:"Please enter an email address"}:{isValid:/\S+@\S+\.\S+/.test(value),errorText:"Invalid email address"}},{selector:"#profile__whatsapp_number",customValidation:(value,target)=>value.length<10?{isValid:!1,errorText:"Number must be at least 10 digits long"}:value.length>13?{isValid:!1,errorText:"Number must be at most 13 digits long"}:{isValid:!0}}]};const render={task(details={}){const{title:title,description:description,date:date,id:id,status:status,deadline:deadline,category:category}=details;let actions="";if(floGlobals.isUserLoggedIn){if(floGlobals.isSubAdmin)actions=html` - ${floGlobals.applications[id].size} applied + ${floGlobals.applications[id]?.size||0} applied `;else if(!floGlobals.isAdmin){const applied=floGlobals.applications.has(id);actions=html` - `}return html` + `}}else actions=html`Apply`,floGlobals.applyingForTask=id;return html`

  • ${title}

    @@ -17,7 +17,7 @@ const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(e ${actions}

    • - `},availableTasks(target="available_tasks_list"){if(0===(floGlobals.appObjects?.rmInterns.tasks||[]).length)return renderElem(getRef(target),html`

    No tasks available

    `);const tasksList=floGlobals.appObjects.rmInterns.tasks.map(render.task);renderElem(getRef(target),html`${tasksList}`)}},router=new Router({routingStart(state){"scrollRestoration"in history&&(history.scrollRestoration="manual"),window.scrollTo(0,0)},routingEnd(state){const{page:page,lastPage:lastPage}=state;lastPage!==page&&closePopup()}}),header=page=>{const isUserLoggedIn="loading"===page||floGlobals.isUserLoggedIn;return html` + `},availableTasks(target="available_tasks_list"){if(0===(floGlobals.appObjects?.rmInterns.tasks||[]).length)return renderElem(getRef(target),html`

    No tasks available

    `);const tasksList=floGlobals.appObjects.rmInterns.tasks.map(render.task);renderElem(getRef(target),html`${tasksList}`)}},router=new Router({routingStart(state){"scrollRestoration"in history&&(history.scrollRestoration="manual"),window.scrollTo(0,0)},routingEnd(state){const{page:page,lastPage:lastPage}=state;lastPage!==page&&closePopup()}}),header=()=>{const{page:page}=router.state,isUserLoggedIn="loading"===page||floGlobals.isUserLoggedIn;return html`
    @@ -25,8 +25,8 @@ const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(e ${isUserLoggedIn?html``:html`
    - Get Started - Sign in + ${"sign_up"!==page?html`Get Started`:""} + ${"sign_in"!==page?html`Sign in`:""}
    `}
    @@ -46,22 +46,22 @@ const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(e - `),getRef("task_popup__title").textContent="Add Task",render.availableTasks()):(renderElem(getRef("app_body"),html` -
    - ${header()} -
    -

    Home

    -
    -

    Available

    -
      - -
    -
    -
    -
    - `),render.availableTasks()))}router.addRoute("loading",(state=>{renderElem(getRef("app_body"),html` + `),getRef("task_popup__title").textContent="Add Task",render.availableTasks()):floGlobals.applyingForTask?(applyToTask(floGlobals.applyingForTask),floGlobals.applyingForTask=null):(renderElem(getRef("app_body"),html` +
    + ${header()} +
    +

    Home

    +
    +

    Available

    +
      + +
    +
    +
    +
    + `),render.availableTasks()))}router.addRoute("loading",(state=>{renderElem(getRef("app_body"),html`
    - ${header("loading")} + ${header()}
    @@ -72,7 +72,7 @@ const uiGlobals={},{html:html,svg:svg,render:renderElem}=uhtml;function getRef(e
    `)})),router.addRoute("landing",(state=>{const{page:page}=state;renderElem(getRef("app_body"),html`
    - ${header(page)} + ${header()}

    diff --git a/scripts/components.min.js b/scripts/components.min.js index 5cdd5a2..c27f200 100644 --- a/scripts/components.min.js +++ b/scripts/components.min.js @@ -1,5 +1,5 @@ // Components downloaded: copy,form,input,notifications,popup,select,spinner,textarea,theme-toggle -const smChips = document.createElement("template"); smChips.innerHTML = '
    ', customElements.define("sm-chips", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChips.content.cloneNode(!0)), this.chipsWrapper = this.shadowRoot.querySelector(".sm-chips"), this.coverLeft = this.shadowRoot.querySelector(".cover--left"), this.coverRight = this.shadowRoot.querySelector(".cover--right"), this.navButtonLeft = this.shadowRoot.querySelector(".nav-button--left"), this.navButtonRight = this.shadowRoot.querySelector(".nav-button--right"), this.slottedOptions = void 0, this._value = void 0, this.scrollDistance = 0, this.assignedElements = [], this.scrollLeft = this.scrollLeft.bind(this), this.scrollRight = this.scrollRight.bind(this), this.fireEvent = this.fireEvent.bind(this), this.setSelectedOption = this.setSelectedOption.bind(this) } get value() { return this._value } set value(val) { this.setSelectedOption(val) } scrollLeft() { this.chipsWrapper.scrollBy({ left: -this.scrollDistance, behavior: "smooth" }) } scrollRight() { this.chipsWrapper.scrollBy({ left: this.scrollDistance, behavior: "smooth" }) } setSelectedOption(value) { this._value !== value && (this._value = value, this.assignedElements.forEach((elem => { elem.value == value ? (elem.setAttribute("selected", ""), elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })) : elem.removeAttribute("selected") }))) } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this._value } })) } connectedCallback() { this.setAttribute("role", "listbox"); const slot = this.shadowRoot.querySelector("slot"); slot.addEventListener("slotchange", (e => { firstOptionObserver.disconnect(), lastOptionObserver.disconnect(), this.observeSelf.disconnect(), clearTimeout(this.slotChangeTimeout), this.slotChangeTimeout = setTimeout((() => { this.assignedElements = slot.assignedElements(), this.observeSelf.observe(this) }), 0) })); new ResizeObserver((entries => { entries.forEach((entry => { if (entry.contentBoxSize) { const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; this.scrollDistance = .6 * contentBoxSize.inlineSize } else this.scrollDistance = .6 * entry.contentRect.width })) })).observe(this), this.observeSelf = new IntersectionObserver(((entries, observer) => { entries.forEach((entry => { entry.isIntersecting && !this.hasAttribute("multiline") && this.assignedElements.length > 0 && (firstOptionObserver.observe(this.assignedElements[0]), lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]), observer.unobserve(this)) })) }), { threshold: 1 }), this.chipsWrapper.addEventListener("option-clicked", (e => { this._value !== e.target.value && (this.setSelectedOption(e.target.value), this.fireEvent()) })); const firstOptionObserver = new IntersectionObserver((entries => { entries.forEach((entry => { entry.isIntersecting ? (this.navButtonLeft.classList.add("hide"), this.coverLeft.classList.add("hide")) : (this.navButtonLeft.classList.remove("hide"), this.coverLeft.classList.remove("hide")) })) }), { threshold: 1, root: this }), lastOptionObserver = new IntersectionObserver((entries => { entries.forEach((entry => { entry.isIntersecting ? (this.navButtonRight.classList.add("hide"), this.coverRight.classList.add("hide")) : (this.navButtonRight.classList.remove("hide"), this.coverRight.classList.remove("hide")) })) }), { threshold: 1, root: this }); this.navButtonLeft.addEventListener("click", this.scrollLeft), this.navButtonRight.addEventListener("click", this.scrollRight) } disconnectedCallback() { this.navButtonLeft.removeEventListener("click", this.scrollLeft), this.navButtonRight.removeEventListener("click", this.scrollRight) } }); const smChip = document.createElement("template"); smChip.innerHTML = ' ', customElements.define("sm-chip", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChip.content.cloneNode(!0)), this._value = void 0, this.radioButton = this.shadowRoot.querySelector("input"), this.fireEvent = this.fireEvent.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this) } static get observedAttributes() { return ["selected"] } get value() { return this._value } fireEvent() { this.dispatchEvent(new CustomEvent("option-clicked", { bubbles: !0, composed: !0, detail: { value: this._value } })) } handleKeyDown(e) { "Enter" !== e.key && "Space" !== e.key || this.fireEvent() } connectedCallback() { this.setAttribute("role", "option"), this.setAttribute("tabindex", "0"), this._value = this.getAttribute("value"), this.addEventListener("click", this.fireEvent), this.addEventListener("keydown", this.handleKeyDown) } attributeChangedCallback(name, oldValue, newValue) { "selected" === name && (null !== newValue ? (this.fireEvent(), this.setAttribute("aria-selected", "true")) : this.removeAttribute("aria-selected")) } disconnectedCallback() { this.removeEventListener("click", this.fireEvent), this.removeEventListener("keydown", this.handleKeyDown) } }); +const smChips = document.createElement("template"); smChips.innerHTML = '
    ', customElements.define("sm-chips", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChips.content.cloneNode(!0)), this.chipsWrapper = this.shadowRoot.querySelector(".sm-chips"), this.coverLeft = this.shadowRoot.querySelector(".cover--left"), this.coverRight = this.shadowRoot.querySelector(".cover--right"), this.navButtonLeft = this.shadowRoot.querySelector(".nav-button--left"), this.navButtonRight = this.shadowRoot.querySelector(".nav-button--right"), this.slottedOptions = void 0, this._value = void 0, this.scrollDistance = 0, this.assignedElements = [], this.scrollLeft = this.scrollLeft.bind(this), this.scrollRight = this.scrollRight.bind(this), this.fireEvent = this.fireEvent.bind(this), this.setSelectedOption = this.setSelectedOption.bind(this) } get value() { return this._value } set value(val) { this.setSelectedOption(val) } scrollLeft() { this.chipsWrapper.scrollBy({ left: -this.scrollDistance, behavior: "smooth" }) } scrollRight() { this.chipsWrapper.scrollBy({ left: this.scrollDistance, behavior: "smooth" }) } setSelectedOption(value) { this._value !== value && (this._value = value, this.assignedElements.forEach((elem => { elem.value == value ? (elem.setAttribute("selected", ""), elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })) : elem.removeAttribute("selected") }))) } fireEvent() { this.dispatchEvent(new CustomEvent("change", { bubbles: !0, composed: !0, detail: { value: this._value } })) } connectedCallback() { this.setAttribute("role", "listbox"); const slot = this.shadowRoot.querySelector("slot"); slot.addEventListener("slotchange", (e => { firstOptionObserver.disconnect(), lastOptionObserver.disconnect(), this.observeSelf.disconnect(), clearTimeout(this.slotChangeTimeout), this.slotChangeTimeout = setTimeout((() => { this.assignedElements = slot.assignedElements(), this.observeSelf.observe(this) }), 0) })); new ResizeObserver((entries => { entries.forEach((entry => { if (entry.contentBoxSize) { const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize; this.scrollDistance = .6 * contentBoxSize.inlineSize } else this.scrollDistance = .6 * entry.contentRect.width })) })).observe(this), this.observeSelf = new IntersectionObserver(((entries, observer) => { entries.forEach((entry => { entry.isIntersecting && !this.hasAttribute("multiline") && this.assignedElements.length > 0 && (firstOptionObserver.observe(this.assignedElements[0]), lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]), observer.unobserve(this)) })) }), { threshold: 1 }), this.chipsWrapper.addEventListener("option-clicked", (e => { this._value !== e.detail.value && (this.setSelectedOption(e.detail.value), this.fireEvent()) })); const firstOptionObserver = new IntersectionObserver((entries => { entries.forEach((entry => { entry.isIntersecting ? (this.navButtonLeft.classList.add("hide"), this.coverLeft.classList.add("hide")) : (this.navButtonLeft.classList.remove("hide"), this.coverLeft.classList.remove("hide")) })) }), { threshold: 1, root: this }), lastOptionObserver = new IntersectionObserver((entries => { entries.forEach((entry => { entry.isIntersecting ? (this.navButtonRight.classList.add("hide"), this.coverRight.classList.add("hide")) : (this.navButtonRight.classList.remove("hide"), this.coverRight.classList.remove("hide")) })) }), { threshold: 1, root: this }); this.navButtonLeft.addEventListener("click", this.scrollLeft), this.navButtonRight.addEventListener("click", this.scrollRight) } disconnectedCallback() { this.navButtonLeft.removeEventListener("click", this.scrollLeft), this.navButtonRight.removeEventListener("click", this.scrollRight) } }); const smChip = document.createElement("template"); smChip.innerHTML = ' ', customElements.define("sm-chip", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smChip.content.cloneNode(!0)), this._value = this.getAttribute("value"), this.radioButton = this.shadowRoot.querySelector("input"), this.fireEvent = this.fireEvent.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this) } static get observedAttributes() { return ["selected"] } get value() { return this._value } fireEvent() { this.dispatchEvent(new CustomEvent("option-clicked", { bubbles: !0, composed: !0, detail: { value: this._value } })) } handleKeyDown(e) { "Enter" !== e.key && "Space" !== e.key || this.fireEvent() } connectedCallback() { this.setAttribute("role", "option"), this.setAttribute("tabindex", "0"), this.addEventListener("click", this.fireEvent), this.addEventListener("keydown", this.handleKeyDown) } attributeChangedCallback(name, oldValue, newValue) { "selected" === name ? null !== newValue ? (this.fireEvent(), this.setAttribute("aria-selected", "true")) : this.removeAttribute("aria-selected") : "value" === name && (this._value = newValue) } disconnectedCallback() { this.removeEventListener("click", this.fireEvent), this.removeEventListener("keydown", this.handleKeyDown) } }); const smCopy = document.createElement("template"); smCopy.innerHTML = '

    ', customElements.define("sm-copy", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smCopy.content.cloneNode(!0)), this.copyContent = this.shadowRoot.querySelector(".copy-content"), this.copyButton = this.shadowRoot.querySelector(".copy-button"), this.copy = this.copy.bind(this) } static get observedAttributes() { return ["value"] } set value(val) { this.setAttribute("value", val) } get value() { return this.getAttribute("value") } fireEvent() { this.dispatchEvent(new CustomEvent("copy", { composed: !0, bubbles: !0, cancelable: !0 })) } copy() { navigator.clipboard.writeText(this.getAttribute("value")).then((res => this.fireEvent())).catch((err => console.error(err))) } connectedCallback() { this.copyButton.addEventListener("click", this.copy) } attributeChangedCallback(name, oldValue, newValue) { if ("value" === name) { const slot = this.copyContent.querySelector("slot"); if (!slot) return; const assignedNodes = slot.assignedNodes(); assignedNodes && assignedNodes.length || (slot.textContent = newValue) } } disconnectedCallback() { this.copyButton.removeEventListener("click", this.copy) } }); const smForm = document.createElement("template"); smForm.innerHTML = '
    ', customElements.define("sm-form", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smForm.content.cloneNode(!0)), this.form = this.shadowRoot.querySelector("form"), this.invalidFieldsCount, this.skipSubmit = !1, this.isFormValid = void 0, this.supportedElements = "input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio", this.formElements = [], this._requiredElements = [] } static get observedAttributes() { return ["skip-submit"] } get validity() { return this.isFormValid } debounce = (callback, wait) => { let timeoutId = null; return (...args) => { window.clearTimeout(timeoutId), timeoutId = window.setTimeout((() => { callback.apply(null, args) }), wait) } }; _checkValidity = () => { this.submitButton && 0 !== this._requiredElements.length && (this.invalidFieldsCount = 0, this._requiredElements.forEach((([elem, isWC]) => { (!elem.disabled && isWC && !elem.isValid || !isWC && !elem.checkValidity()) && this.invalidFieldsCount++ })), this.isFormValid !== (0 === this.invalidFieldsCount) && (this.isFormValid = 0 === this.invalidFieldsCount, this.dispatchEvent(new CustomEvent(this.isFormValid ? "valid" : "invalid", { bubbles: !0, composed: !0 })), this.skipSubmit || (this.submitButton.disabled = !this.isFormValid))) }; handleKeydown = e => { if ("Enter" === e.key && e.target.tagName.includes("INPUT")) if (0 === this.invalidFieldsCount) this.submitButton && this.submitButton.click(), this.dispatchEvent(new CustomEvent("submit", { bubbles: !0, composed: !0 })); else for (const [elem, isWC] of this._requiredElements) { if (isWC ? !elem.isValid : !elem.checkValidity()) { (elem?.shadowRoot?.lastElementChild || elem).animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" }], { duration: 300, easing: "ease" }), isWC ? (elem.focusIn(), "SM-INPUT" === elem.tagName && "" === elem.value.trim() && elem.showError()) : elem.focus(); break } } }; reset = () => { this.formElements.forEach((([elem, isWC]) => { if (isWC) elem.reset(); else switch (elem.type) { case "checkbox": case "radio": elem.checked = !1; break; default: elem.value = "" } })), this._checkValidity() }; elementsChanged = () => { this.formElements = [...this.querySelectorAll(this.supportedElements)].map((elem => [elem, elem.tagName.includes("-")])), this._requiredElements = this.formElements.filter((([elem]) => elem.hasAttribute("required"))), this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'), this.resetButton = this.querySelector('[type="reset"]'), this.resetButton && this.resetButton.addEventListener("click", this.reset), this._checkValidity() }; checkIfSupported = elem => 1 === elem.nodeType && (elem.tagName.includes("-") || "input" === elem.tagName || elem.querySelector(this.supportedElements)); connectedCallback() { const updateFormDecedents = this.debounce(this.elementsChanged, 100); this.addEventListener("input", this.debounce(this._checkValidity, 100)), this.addEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.shadowRoot.querySelector("slot").addEventListener("slotchange", updateFormDecedents), this.mutationObserver = new MutationObserver((mutations => { mutations.forEach((mutation => { ("childList" === mutation.type && [...mutation.addedNodes].some((node => this.checkIfSupported(node))) || [...mutation.removedNodes].some((node => this.checkIfSupported(node)))) && updateFormDecedents() })) })), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }) } attributeChangedCallback(name, oldValue, newValue) { "skip-submit" === name && (this.skipSubmit = this.hasAttribute("skip-submit")) } disconnectedCallback() { this.removeEventListener("input", this.debounce(this._checkValidity, 100)), this.removeEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.mutationObserver.disconnect() } }); const smInput = document.createElement("template"); smInput.innerHTML = '
    ', customElements.define("sm-input", class SmInput extends HTMLElement { static hasAppendedStyles = !1; #validationState = { validatedFor: void 0, isValid: !1, errorMessage: "Please fill out this field." }; constructor() { super(), this.attachShadow({ mode: "open" }).append(smInput.content.cloneNode(!0)), this.inputParent = this.shadowRoot.querySelector(".input"), this.input = this.shadowRoot.querySelector("input"), this.clearBtn = this.shadowRoot.querySelector(".clear"), this.placeholderElement = this.shadowRoot.querySelector(".placeholder"), this.outerContainer = this.shadowRoot.querySelector(".outer-container"), this.optionList = this.shadowRoot.querySelector(".datalist"), this._helperText = "", this.isRequired = !1, this.datalist = [], this.validationFunction = void 0, this.reflectedAttributes = ["value", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "list", "autocomplete"] } static get observedAttributes() { return ["value", "placeholder", "required", "disabled", "type", "inputmode", "readonly", "min", "max", "pattern", "minlength", "maxlength", "step", "helper-text", "error-text", "list"] } get value() { return this.input.value } set value(val) { val !== this.input.value && (this.input.value = val, this._value = val, this.checkInput()) } get placeholder() { return this.getAttribute("placeholder") } set placeholder(val) { this.setAttribute("placeholder", val) } get type() { return this.getAttribute("type") } set type(val) { this.setAttribute("type", val) } get validity() { return this.input.validity } get disabled() { return this.hasAttribute("disabled") } set disabled(value) { value ? (this.inputParent.classList.add("disabled"), this.setAttribute("disabled", "")) : (this.inputParent.classList.remove("disabled"), this.removeAttribute("disabled")) } get readOnly() { return this.hasAttribute("readonly") } set readOnly(value) { value ? this.setAttribute("readonly", "") : this.removeAttribute("readonly") } set customValidation(val) { val && (this.validationFunction = val) } set errorText(val) { this.#validationState.errorText = val } showError = (errorText = this.#validationState.errorText) => { const appendedNew = this.appendFeedbackElement(); this.feedbackPopover.innerHTML = ` ${errorText} `, this.feedbackPopover.dataset.state = "error", appendedNew && this.feedbackPopover.animate([{ transform: "scale(0.95)", opacity: 0 }, { transform: "scale(1)", opacity: 1 }], { duration: 200, easing: "ease", fill: "forwards" }) }; set helperText(val) { this._helperText = val } get isValid() { if (this.#validationState.validatedFor === this.input.value) return this.#validationState.isValid; const _isValid = this.input.checkValidity(); let _validity = { isValid: !0, errorText: "" }; return this.validationFunction && (_validity = this.validationFunction(this.input.value, this)), _isValid && _validity.isValid ? (this.setAttribute("valid", ""), this.removeAttribute("invalid"), this.hideFeedback()) : (this.removeAttribute("valid"), this.setAttribute("invalid", ""), "" !== this.value.trim() && (_validity.errorText || this.#validationState.errorText) && this.showError(_validity.errorText || this.#validationState.errorText)), this.#validationState.validatedFor = this.input.value, this.#validationState.isValid = _isValid && _validity.isValid, this.#validationState.errorText = _validity.errorText || this.#validationState.errorText, this.#validationState.isValid } reset = () => { this.value = "" }; clear = () => { this.value = "", this.input.focus(), this.fireEvent(), this.hideFeedback() }; focusIn = () => { this.input.focus() }; focusOut = () => { this.input.blur() }; fireEvent = () => { let event = new Event("input", { bubbles: !0, cancelable: !0, composed: !0 }); this.dispatchEvent(event) }; searchDatalist = searchKey => { const filteredData = this.datalist.filter((item => item.toLowerCase().includes(searchKey.toLowerCase()))); if (filteredData.sort(((a, b) => a.toLowerCase().indexOf(searchKey.toLowerCase()) - b.toLowerCase().indexOf(searchKey.toLowerCase()))), filteredData.length) { if (this.optionList.children.length > filteredData.length) { const optionsToRemove = this.optionList.children.length - filteredData.length; for (let i = 0; i < optionsToRemove; i++)this.optionList.removeChild(this.optionList.lastChild) } filteredData.forEach(((item, index) => { if (this.optionList.children[index]) this.optionList.children[index].textContent = item; else { const option = document.createElement("li"); option.textContent = item, option.classList.add("datalist-item"), option.setAttribute("tabindex", "0"), this.optionList.appendChild(option) } })), this.optionList.classList.remove("hidden") } else this.optionList.classList.add("hidden") }; checkInput = e => { this.hasAttribute("readonly") || ("" !== this.input.value ? this.clearBtn.classList.remove("hidden") : this.clearBtn.classList.add("hidden")), this.hasAttribute("placeholder") && "" !== this.getAttribute("placeholder").trim() && ("" !== this.input.value ? (this.shouldAnimatePlaceholder && this.inputParent.classList.add("animate-placeholder"), this.placeholderElement.classList.toggle("hidden", !this.shouldAnimatePlaceholder), this.datalist.length && (this.searchTimeout && clearTimeout(this.searchTimeout), this.searchTimeout = setTimeout((() => { this.searchDatalist(this.input.value.trim()) }), 100))) : (this.shouldAnimatePlaceholder && this.inputParent.classList.remove("animate-placeholder"), this.placeholderElement.classList.remove("hidden"), this.hideFeedback(), this.datalist.length && (this.optionList.innerHTML = "", this.optionList.classList.add("hidden")))) }; allowOnlyNum = e => { e.ctrlKey || 1 === e.key.length && (("." !== e.key || !e.target.value.includes(".") && 0 !== e.target.value.length) && ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "."].includes(e.key) || e.preventDefault()) }; handleOptionClick = e => { this.input.value = e.target.textContent, this.optionList.classList.add("hidden"), this.input.focus() }; handleInputNavigation = e => { "ArrowDown" === e.key ? (e.preventDefault(), this.optionList.children.length && this.optionList.children[0].focus()) : "ArrowUp" === e.key && (e.preventDefault(), this.optionList.children.length && this.optionList.children[this.optionList.children.length - 1].focus()) }; handleDatalistNavigation = e => { "ArrowUp" === e.key ? (e.preventDefault(), this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus()) : "ArrowDown" === e.key ? (e.preventDefault(), this.shadowRoot.activeElement.nextElementSibling ? this.shadowRoot.activeElement.nextElementSibling.focus() : this.input.focus()) : "Enter" !== e.key && " " !== e.key || (e.preventDefault(), this.input.value = e.target.textContent, this.optionList.classList.add("hidden"), this.input.focus()) }; handleFocus = e => { this.datalist.length && this.searchDatalist(this.input.value.trim()) }; handleBlur = e => { "" === this.input.value.trim() && this.hideFeedback(), this.datalist.length && this.optionList.classList.add("hidden") }; applyGlobalCustomValidation = () => { if (void 0 !== window.smCompConfig && window.smCompConfig["sm-input"]) { const config = window.smCompConfig["sm-input"].find((config => this.matches(config.selector))); this.customValidation = config?.customValidation } }; updatePosition = () => { requestAnimationFrame((() => { if (this.dimensions = this.getBoundingClientRect(), this.scrollingParentDimensions = this.scrollingParent.getBoundingClientRect(), 0 === this.dimensions.width || 0 === this.dimensions.height) return; let topOffset = this.dimensions.top - this.scrollingParentDimensions.top + this.dimensions.height, leftOffset = this.dimensions.left - this.scrollingParentDimensions.left; const maxWidth = this.dimensions.width; this.feedbackPopover.style = `top: ${topOffset}px; left: ${leftOffset}px; max-width: ${maxWidth}px;` })) }; appendFeedbackElement = () => { if (this.feedbackPopover) return !1; this.feedbackPopover = document.createElement("div"), this.feedbackPopover.className = "feedback-popover", this.feedbackPopover.setAttribute("aria-live", "polite"), this.containment = this.closest("[data-sm-containment]"), this.scrollingParent = this.getNearestScrollingParent(this); return (this.containment || this.scrollingParent).appendChild(this.feedbackPopover), "" === this.scrollingParent.style.position && (this.scrollingParent.style.position = "relative"), this.containment || (this.observerHidFeedback = !1, this.intersectionObserver = new IntersectionObserver((entries => { if (this.feedbackPopover) if (entries[0].isIntersecting) { if (!this.observerHidFeedback) return; this.feedbackPopover.classList.remove("hidden"), this.observerHidFeedback = !1 } else this.feedbackPopover.classList.add("hidden"), this.observerHidFeedback = !0 })).observe(this)), this.updatePosition(), window.addEventListener("resize", this.updatePosition, { passive: !0 }), !0 }; getNearestScrollingParent = element => { let parent = element.parentNode; for (; parent;) { if (parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth || parent.tagName.includes("SM-") || parent.hasAttribute("data-scrollable")) return parent; parent = parent.parentNode } return document.body }; hideFeedback = () => { this.feedbackPopover && (this.feedbackPopover.animate([{ transform: "none", opacity: 1 }, { transform: "scale(0.95)", opacity: 0 }], { duration: 100, easing: "ease-in-out", fill: "forwards" }).onfinish = () => { this.intersectionObserver?.disconnect(), this.feedbackPopover && (this.feedbackPopover.remove(), this.feedbackPopover = null), window.removeEventListener("resize", this.updatePosition, { passive: !0 }) }) }; connectedCallback() { SmInput.hasAppendedStyles || (document.head.insertAdjacentHTML("beforeend", ""), SmInput.hasAppendedStyles = !0), this.shouldAnimatePlaceholder = this.hasAttribute("animate"), this.shouldAnimatePlaceholder && "" !== this.placeholderElement && this.value && (this.inputParent.classList.add("animate-placeholder"), this.placeholderElement.classList.remove("hidden")), this.setAttribute("role", "textbox"), "loading" === document.readyState ? window.addEventListener("load", this.applyGlobalCustomValidation, { once: !0 }) : this.applyGlobalCustomValidation(), this.input.addEventListener("input", this.checkInput), this.clearBtn.addEventListener("click", this.clear), this.datalist.length && (this.optionList.addEventListener("click", this.handleOptionClick), this.input.addEventListener("keydown", this.handleInputNavigation), this.optionList.addEventListener("keydown", this.handleDatalistNavigation)), this.input.addEventListener("focusin", this.handleFocus), this.addEventListener("focusout", this.handleBlur) } attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue) switch (this.reflectedAttributes.includes(name) && (this.hasAttribute(name) ? this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : "") : this.input.removeAttribute(name)), name) { case "placeholder": this.placeholderElement.textContent = newValue, this.setAttribute("aria-label", newValue); break; case "value": this.checkInput(); break; case "type": this.hasAttribute("type") && "number" === this.getAttribute("type") ? (this.input.setAttribute("inputmode", "decimal"), this.input.addEventListener("keydown", this.allowOnlyNum)) : this.input.removeEventListener("keydown", this.allowOnlyNum); break; case "helper-text": this._helperText = newValue; break; case "error-text": this.#validationState.errorText = newValue; break; case "required": this.isRequired = this.hasAttribute("required"), this.isRequired ? this.setAttribute("aria-required", "true") : this.setAttribute("aria-required", "false"); break; case "readonly": this.hasAttribute("readonly") ? this.inputParent.classList.add("readonly") : this.inputParent.classList.remove("readonly"); break; case "disabled": this.hasAttribute("disabled") ? this.inputParent.classList.add("disabled") : this.inputParent.classList.remove("disabled"); break; case "list": this.hasAttribute("list") && "" !== this.getAttribute("list").trim() && (this.datalist = this.getAttribute("list").split(",")) } } disconnectedCallback() { this.input.removeEventListener("input", this.checkInput), this.clearBtn.removeEventListener("click", this.clear), this.input.removeEventListener("keydown", this.allowOnlyNum), this.optionList.removeEventListener("click", this.handleOptionClick), this.input.removeEventListener("keydown", this.handleInputNavigation), this.optionList.removeEventListener("keydown", this.handleDatalistNavigation), this.input.removeEventListener("focusin", this.handleFocus), this.removeEventListener("focusout", this.handleBlur), window.removeEventListener("resize", this.updatePosition, { passive: !0 }), this.feedbackPopover && this.feedbackPopover.remove(), this.intersectionObserver && this.intersectionObserver.disconnect() } });