https://asthma.net/_nuxt/DIPFThub.js

1import{_,o,c as a,a as m,n as u,t as h,q as R,e as p,f as v,b as S,d as $,aa as b,S as l,bB as f,v as T,r as k,h as M,F as E,Z as L,P as g}from"./Bv6rD22K.js";const B={name:"ReactionButton",props:{reactionCount:{type:Number,required:!0},selectedReaction:{type:String,default:""},contentType:{type:String,required:!0},isCondensed:{type:Boolean,default:!1}},computed:{reactionName(){return this.selectedReaction},textContent(){return this.reactionCount===1?"reaction":"reactions"}},methods:{handleReactionButtonClick(e){this.$snowplow.trackButtonEvent({data:{type:"reaction",text:e.target.textContent.trim(),classes:e.target.classList,id:e.target.id}}),this.$emit("toggle-reaction-menu")}}},I={key:2,class:"reaction-button__count"},x={class:"reaction-button__text"};function N(e,n,t,y,s,i){const r=v;return o(),a("button",{class:u(["reaction-button",{"reaction-button--condensed":t.isCondensed}]),onClick:n[0]||(n[0]=(...d)=>i.handleReactionButtonClick&&i.handleReactionButtonClick(...d))},[t.selectedReaction?(o(),m(r,{key:t.selectedReaction,name:i.reactionName,class:u(`reaction-button__icon reaction-button__icon--${t.selectedReaction}`)},null,8,["name","class"])):(o(),m(r,{key:"default-reaction",name:"like",class:"reaction-button__icon reaction-button__icon--default"})),t.reactionCount!==0?(o(),a("span",I,h(t.reactionCount),1)):R("",!0),p("span",x,h(i.textContent),1)],2)}const w=Object.assign(_(B,[["render",N],["__scopeId","data-v-c1fa7ce5"]]),{__name:"ReactionButton"}),U={name:"ReactionOption",props:{id:{type:String,required:!0},type:{type:String,required:!0},count:{type:Number,default:0},isSelected:{type:Boolean,default:!1}},computed:{formatType(){return this.type.charAt(0).toUpperCase()+this.type.slice(1)}},methods:{handleReaction(e){if(this.$snowplow.trackButtonEvent({data:{type:"reaction",text:e.currentTarget.innerText,classes:e.target.classList,id:e.target.id}}),this.isSelected){this.$emit("remove-reaction");return}this.$emit("select-reaction")}}},j=["data-test-id"],D=["value","data-test-id"],q={key:0,class:"reaction-option__count","data-test-id":"reaction-option-count"};function A(e,n,t,y,s,i){const r=v;return o(),a("li",{class:u(`reaction-option ${t.isSelected?"reaction-option--selected":""}`),"data-test-id":t.isSelected?"selected-reaction-option":null},[p("button",{value:`${t.id}--${t.type}`,class:u(`reaction-option__button reaction-option__button--${t.type}`),"data-test-id":`${t.type}-reaction-option-button`,onClick:n[0]||(n[0]=(...d)=>i.handleReaction&&i.handleReaction(...d))},[S(r,{name:t.type,class:"reaction-option__icon"},null,8,["name"]),n[1]||(n[1]=p("span",{class:"visually-hidden"},"React with",-1)),$(" "+h(i.formatType)+" ",1),t.count>0?(o(),a("span",q,h(t.count),1)):R("",!0)],10,D)],10,j)}const G=Object.assign(_(U,[["render",A],["__scopeId","data-v-f49d44a1"]]),{__name:"ReactionOption"}),V=b`
2  mutation createReaction($assocId: NexusId!, $reactedType: ReactableType!, $type: String!) {
3    createReaction(assocId: $assocId, reactedType: $reactedType, type: $type) {
4      type
5    }
6  }
7`,P=b`
8  mutation removeReaction($assocId: NexusId!, $reactedType: ReactableType!) {
9    removeReaction(assocId: $assocId, reactedType: $reactedType) {
10      type
11    }
12  }
13`,z={data(){return{selectedReaction:"",previouslySelectedReaction:"",reactions:{like:{id:`${this.id}-${this.contentType}-like`,count:0,isSelected:!1},support:{id:`${this.id}-${this.contentType}-support`,count:0,isSelected:!1},sad:{id:`${this.id}-${this.contentType}-sad`,count:0,isSelected:!1},wow:{id:`${this.id}-${this.contentType}-wow`,count:0,isSelected:!1},same:{id:`${this.id}-${this.contentType}-same`,count:0,isSelected:!1}}}},created(){this.$reactions.subscribe(this.contentType,this.id,this.setReactions)},computed:{totalReactions(){return Object.values(this.reactions).reduce((e,n)=>e+n.count,0)},userReactionType(){return Object.keys(this.reactions).filter(e=>this.reactions[e].isSelected)[0]},priorReactions(){const e=Object.keys(this.reactions).map(n=>[n,this.reactions[n].count]);return Object.fromEntries(e)}},methods:{setReactions(e){e.forEach(n=>{this.reactions[n.type]&&(this.reactions[n.type].count=n.count,this.reactions[n.type].isSelected=n.isSelected)}),this.setupCurrentUserPreviousReaction()},setupCurrentUserPreviousReaction(){this.userReactionType&&(this.previouslySelectedReaction=this.userReactionType,this.selectedReaction=this.userReactionType)},incrementReaction(e){this.reactions[e].count+=1},decrementReaction(e){this.reactions[e].count>0&&(this.reactions[e].count-=1)},selectReaction(e){return this.contentType==="message"?this.reactToMessage(e):this.$apollo.mutate({mutation:V,variables:{assocId:this.id,reactedType:f(this.contentType),type:e}}).then(()=>{this.$snowplow.enableReactionTracking({data:{reaction_type:e,prior_reactions:this.priorReactions,reaction_toggle:"reaction made"}}),this.selectedReaction=e,this.incrementReaction(e),this.previouslySelectedReaction&&this.previouslySelectedReaction!==this.selectedReaction&&this.decrementReaction(this.previouslySelectedReaction),this.previouslySelectedReaction=e}).catch(()=>{l().addGenericErrorNotification()})},removeReaction(e){return this.contentType==="message"?this.removeMessageReaction(e):this.$apollo.mutate({mutation:P,variables:{assocId:this.id,reactedType:f(this.contentType)}}).then(()=>{this.selectedReaction="",this.decrementReaction(e),this.previouslySelectedReaction="",this.$snowplow.enableReactionTracking({data:{reaction_type:e,prior_reactions:this.priorReactions,reaction_toggle:"reaction rescinded"}})}).catch(()=>{l().addGenericErrorNotification()})},removeMessageReaction(e){return this.$apollo.mutate({mutation:REACT_TO_MESSAGE,variables:{messageID:this.id,reaction:null}}).then(()=>{this.selectedReaction="",this.decrementReaction(e),this.previouslySelectedReaction=""}).catch(()=>{l().addGenericErrorNotification()})},reactToMessage(e){return this.$apollo.mutate({mutation:REACT_TO_MESSAGE,variables:{messageID:this.id,reaction:e.toUpperCase()}}).then(()=>{this.selectedReaction=e,this.incrementReaction(e),this.previouslySelectedReaction&&this.previouslySelectedReaction!==this.selectedReaction&&this.decrementReaction(this.previouslySelectedReaction),this.previouslySelectedReaction=e}).catch(()=>{l().addGenericErrorNotification()})}}},F={name:"ReactionMenu",directives:{clickOutside:T.directive},mixins:[z],props:{id:{type:String,required:!0},contentType:{type:String,required:!0},isCondensed:{type:Boolean,default:!1}},data(){return{reactionListOpen:!1,menuOpensUp:!1,menuOpensLeft:!1}},methods:{toggleMenu(){this.reactionListOpen=!this.reactionListOpen,this.reactionListOpen&&this.$nextTick(this.setMenuDirection),this.reactionListOpen||(this.menuOpensUp=!1,this.menuOpensLeft=!1)},setMenuDirection(){if(this.$refs.menu){const e=this.$refs.menu.getBoundingClientRect();if((this._.provides[g]||this.$route).name==="conversation"){const t=document.getElementById("single-conversation-message-list").getBoundingClientRect();this.menuOpensUp=e.bottom>t.bottom,this.menuOpensLeft=e.right>t.right}else(this._.provides[g]||this.$route).name==="journai"?this.menuOpensUp=!0:(this.menuOpensUp=e.bottom>document.documentElement.clientHeight,this.menuOpensLeft=e.right>document.documentElement.clientWidth)}},removeReactionAndCloseMenu(e){this.removeReaction(e).then(()=>{this.toggleMenu()})},selectReactionAndCloseMenu(e){this.selectReaction(e),this.toggleMenu()},onClickOutside(){this.reactionListOpen&&this.toggleMenu()}}}

13,H={key:0,id:"reaction-menu-options",ref:"menu",class:"reaction-menu__options list-reset"};function W(e,n,t,y,s,i){const r=w,d=G,O=k("click-outside");return M((o(),a("div",{class:u(["reaction-menu",{"reaction-menu--condensed":t.isCondensed,"reaction-menu--open":s.reactionListOpen,"reaction-menu--opened-up":s.menuOpensUp,"reaction-menu--opened-left":s.menuOpensLeft}])},[S(r,{"reaction-count":e.totalReactions,"selected-reaction":e.selectedReaction,"content-type":t.contentType,"is-condensed":t.isCondensed,"aria-expanded":s.reactionListOpen?"true":"false","aria-controls":"reaction-menu-options",onToggleReactionMenu:i.toggleMenu},null,8,["reaction-count","selected-reaction","content-type","is-condensed","aria-expanded","onToggleReactionMenu"]),s.reactionListOpen?(o(),a("ul",H,[(o(!0),a(E,null,L(Object.keys(e.reactions),c=>(o(),m(d,{id:e.reactions[c].id,key:`${e.reactions[c].id}-reaction-menu`,type:c,count:e.reactions[c].count,"is-selected":c===e.selectedReaction,onRemoveReaction:C=>i.removeReactionAndCloseMenu(c),onSelectReaction:C=>i.selectReactionAndCloseMenu(c)},null,8,["id","type","count","is-selected","onRemoveReaction","onSelectReaction"]))),128))],512)):R("",!0)],2)),[[O,i.onClickOutside]])}const J=Object.assign(_(F,[["render",W],["__scopeId","data-v-28716740"]]),{__name:"ReactionMenu"});export{J as _,G as a,z as r};