@nextcloud/vue
Version:
Nextcloud vue components
2 lines (1 loc) • 10.3 kB
JavaScript
var I=require("../assets/index16.css");const f=require("../Components/NcActions.cjs"),m=require("../Components/NcActionLink.cjs"),y=require("../Components/NcButton.cjs"),U=require("../Components/NcLoadingIcon.cjs"),d=require("../Functions/usernameToColor.cjs");require("./IsMobileState-151fc57d.cjs");const o=require("@nextcloud/router");/* empty css */const M=require("./_plugin-vue2_normalizer-764a4c12.cjs");require("linkify-string"),require("escape-html"),require("striptags"),require("vue");const l=require("@nextcloud/auth"),h=require("@nextcloud/axios"),b=require("@nextcloud/capabilities"),u=require("./l10n-46d0c1c0.cjs"),N=require("vue-material-design-icons/DotsHorizontal.vue"),r=require("@nextcloud/event-bus"),w=require("@nextcloud/browser-storage"),_=require("@vueuse/components"),p={data(){return{hasStatus:!1,userStatus:{status:null,message:null,icon:null}}},methods:{async fetchUserStatus(t){var e,a;if(!t)return;const s=b.getCapabilities();if(!(!Object.prototype.hasOwnProperty.call(s,"user_status")||!s.user_status.enabled)&&l.getCurrentUser())try{const{data:i}=await h.get(o.generateOcsUrl("apps/user_status/api/v1/statuses/{userId}",{userId:t})),{status:n,message:g,icon:S}=i.ocs.data;this.userStatus.status=n,this.userStatus.message=g||"",this.userStatus.icon=S||"",this.hasStatus=!0}catch(i){if(i.response.status===404&&((a=(e=i.response.data.ocs)==null?void 0:e.data)==null?void 0:a.length)===0)return;console.error(i)}}}};const v=w.getBuilder("nextcloud").persist().build();function L(t){const s=v.getItem("user-has-avatar."+t);return typeof s=="string"?!!s:null}function c(t,s){t&&v.setItem("user-has-avatar."+t,s)}const x={name:"NcAvatar",directives:{ClickOutside:_.vOnClickOutside},components:{DotsHorizontal:N,NcActions:f,NcActionLink:m,NcButton:y,NcLoadingIcon:U},mixins:[p],props:{url:{type:String,default:void 0},iconClass:{type:String,default:void 0},user:{type:String,default:void 0},showUserStatus:{type:Boolean,default:!0},showUserStatusCompact:{type:Boolean,default:!0},preloadedUserStatus:{type:Object,default:void 0},isGuest:{type:Boolean,default:!1},displayName:{type:String,default:void 0},size:{type:Number,default:32},allowPlaceholder:{type:Boolean,default:!0},disableTooltip:{type:Boolean,default:!1},disableMenu:{type:Boolean,default:!1},tooltipMessage:{type:String,default:null},isNoUser:{type:Boolean,default:!1},menuContainer:{type:[String,Object,Element,Boolean],default:"body"}},data(){return{avatarUrlLoaded:null,avatarSrcSetLoaded:null,userDoesNotExist:!1,isAvatarLoaded:!1,isMenuLoaded:!1,contactsMenuLoading:!1,contactsMenuActions:[],contactsMenuOpenState:!1}},computed:{avatarAriaLabel(){var t,s;if(this.hasMenu)return this.hasStatus&&this.showUserStatus&&this.showUserStatusCompact?u.t("Avatar of {displayName}, {status}",{displayName:(t=this.displayName)!=null?t:this.user,status:this.userStatus.status}):u.t("Avatar of {displayName}",{displayName:(s=this.displayName)!=null?s:this.user})},canDisplayUserStatus(){return this.showUserStatus&&this.hasStatus&&["online","away","dnd"].includes(this.userStatus.status)},showUserStatusIconOnAvatar(){return this.showUserStatus&&this.showUserStatusCompact&&this.hasStatus&&this.userStatus.status!=="dnd"&&this.userStatus.icon},getUserIdentifier(){return this.isDisplayNameDefined?this.displayName:this.isUserDefined?this.user:""},isUserDefined(){return typeof this.user<"u"},isDisplayNameDefined(){return typeof this.displayName<"u"},isUrlDefined(){return typeof this.url<"u"},hasMenu(){var t;return this.disableMenu?!1:this.isMenuLoaded?this.menu.length>0:!(this.user===((t=l.getCurrentUser())==null?void 0:t.uid)||this.userDoesNotExist||this.url)},shouldShowPlaceholder(){return this.allowPlaceholder&&this.userDoesNotExist},avatarStyle(){return{"--size":this.size+"px",lineHeight:this.size+"px",fontSize:Math.round(this.size*.45)+"px"}},initialsWrapperStyle(){const{r:t,g:s,b:e}=d(this.getUserIdentifier);return{backgroundColor:`rgba(${t}, ${s}, ${e}, 0.1)`}},initialsStyle(){const{r:t,g:s,b:e}=d(this.getUserIdentifier);return{color:`rgb(${t}, ${s}, ${e})`}},tooltip(){return this.disableTooltip?!1:this.tooltipMessage?this.tooltipMessage:this.displayName},initials(){let t;if(this.shouldShowPlaceholder){const s=this.getUserIdentifier,e=s.indexOf(" ");s===""?t="?":(t=String.fromCodePoint(s.codePointAt(0)),e!==-1&&(t=t.concat(String.fromCodePoint(s.codePointAt(e+1)))))}return t.toUpperCase()},menu(){const t=this.contactsMenuActions.map(e=>({href:e.hyperlink,icon:e.icon,text:e.title}));function s(e){const a=document.createTextNode(e),i=document.createElement("p");return i.appendChild(a),i.innerHTML}return this.showUserStatus&&(this.userStatus.icon||this.userStatus.message)?[{href:"#",icon:`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='14' font-size='14'>${s(this.userStatus.icon)}</text></svg>`,text:`${this.userStatus.message}`}].concat(t):t}},watch:{url(){this.userDoesNotExist=!1,this.loadAvatarUrl()},user(){this.userDoesNotExist=!1,this.isMenuLoaded=!1,this.loadAvatarUrl()}},mounted(){this.loadAvatarUrl(),r.subscribe("settings:avatar:updated",this.loadAvatarUrl),r.subscribe("settings:display-name:updated",this.loadAvatarUrl),this.showUserStatus&&this.user&&!this.isNoUser&&(this.preloadedUserStatus?(this.userStatus.status=this.preloadedUserStatus.status||"",this.userStatus.message=this.preloadedUserStatus.message||"",this.userStatus.icon=this.preloadedUserStatus.icon||"",this.hasStatus=this.preloadedUserStatus.status!==null):this.fetchUserStatus(this.user),r.subscribe("user_status:status.updated",this.handleUserStatusUpdated))},beforeDestroy(){r.unsubscribe("settings:avatar:updated",this.loadAvatarUrl),r.unsubscribe("settings:display-name:updated",this.loadAvatarUrl),this.showUserStatus&&this.user&&!this.isNoUser&&r.unsubscribe("user_status:status.updated",this.handleUserStatusUpdated)},methods:{t:u.t,handleUserStatusUpdated(t){this.user===t.userId&&(this.userStatus={status:t.status,icon:t.icon,message:t.message})},async toggleMenu(){this.hasMenu&&(this.contactsMenuOpenState||await this.fetchContactsMenu(),this.contactsMenuOpenState=!this.contactsMenuOpenState)},closeMenu(){this.contactsMenuOpenState=!1},async fetchContactsMenu(){this.contactsMenuLoading=!0;try{const t=encodeURIComponent(this.user),{data:s}=await h.post(o.generateUrl("contactsmenu/findOne"),`shareType=0&shareWith=${t}`);this.contactsMenuActions=s.topAction?[s.topAction].concat(s.actions):s.actions}catch{this.contactsMenuOpenState=!1}this.contactsMenuLoading=!1,this.isMenuLoaded=!0},loadAvatarUrl(){if(this.isAvatarLoaded=!1,!this.isUrlDefined&&(!this.isUserDefined||this.isNoUser)){this.isAvatarLoaded=!0,this.userDoesNotExist=!0;return}if(this.isUrlDefined){this.updateImageIfValid(this.url);return}if(this.size<=64){const t=this.avatarUrlGenerator(this.user,64),s=[t+" 1x",this.avatarUrlGenerator(this.user,512)+" 8x"].join(", ");this.updateImageIfValid(t,s)}else{const t=this.avatarUrlGenerator(this.user,512);this.updateImageIfValid(t)}},avatarUrlGenerator(t,s){var n;const e=window.getComputedStyle(document.body).getPropertyValue("--background-invert-if-dark")==="invert(100%)";let a="/avatar/{user}/{size}"+(e?"/dark":"");this.isGuest&&(a="/avatar/guest/{user}/{size}"+(e?"/dark":""));let i=o.generateUrl(a,{user:t,size:s});return t===((n=l.getCurrentUser())==null?void 0:n.uid)&&typeof oc_userconfig<"u"&&(i+="?v="+oc_userconfig.avatar.version),i},updateImageIfValid(t,s=null){const e=L(this.user);if(this.isUserDefined&&typeof e=="boolean"){this.isAvatarLoaded=!0,this.avatarUrlLoaded=t,s&&(this.avatarSrcSetLoaded=s),e===!1&&(this.userDoesNotExist=!0);return}const a=new Image;a.onload=()=>{this.avatarUrlLoaded=t,s&&(this.avatarSrcSetLoaded=s),this.isAvatarLoaded=!0,c(this.user,!0)},a.onerror=()=>{console.debug("Invalid avatar url",t),this.avatarUrlLoaded=null,this.avatarSrcSetLoaded=null,this.userDoesNotExist=!0,this.isAvatarLoaded=!1,c(this.user,!1)},s&&(a.srcset=s),a.src=t}}};var A=function(){var t=this,s=t._self._c;return s("div",{directives:[{name:"click-outside",rawName:"v-click-outside",value:t.closeMenu,expression:"closeMenu"}],ref:"main",staticClass:"avatardiv popovermenu-wrapper",class:{"avatardiv--unknown":t.userDoesNotExist,"avatardiv--with-menu":t.hasMenu,"avatardiv--with-menu-loading":t.contactsMenuLoading},style:t.avatarStyle,attrs:{title:t.tooltip,tabindex:t.hasMenu?"0":void 0,"aria-label":t.avatarAriaLabel,role:t.hasMenu?"button":void 0},on:{click:t.toggleMenu,keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.toggleMenu.apply(null,arguments)}}},[t._t("icon",function(){return[t.iconClass?s("div",{staticClass:"avatar-class-icon",class:t.iconClass}):t.isAvatarLoaded&&!t.userDoesNotExist?s("img",{attrs:{src:t.avatarUrlLoaded,srcset:t.avatarSrcSetLoaded,alt:""}}):t._e()]}),t.hasMenu&&!t.menu.length?s("NcButton",{staticClass:"action-item action-item__menutoggle",attrs:{"aria-label":t.t("Open contact menu"),type:"tertiary-no-background"},scopedSlots:t._u([{key:"icon",fn:function(){return[t.contactsMenuLoading?s("NcLoadingIcon"):s("DotsHorizontal",{attrs:{size:20}})]},proxy:!0}],null,!1,2617833509)}):t.hasMenu?s("NcActions",{attrs:{"force-menu":"","manual-open":"",type:"tertiary-no-background",container:t.menuContainer,open:t.contactsMenuOpenState},scopedSlots:t._u([t.contactsMenuLoading?{key:"icon",fn:function(){return[s("NcLoadingIcon")]},proxy:!0}:null],null,!0)},t._l(t.menu,function(e,a){return s("NcActionLink",{key:a,attrs:{href:e.href,icon:e.icon}},[t._v(" "+t._s(e.text)+" ")])}),1):t._e(),t.showUserStatusIconOnAvatar?s("div",{staticClass:"avatardiv__user-status avatardiv__user-status--icon"},[t._v(" "+t._s(t.userStatus.icon)+" ")]):t.canDisplayUserStatus?s("div",{staticClass:"avatardiv__user-status",class:"avatardiv__user-status--"+t.userStatus.status}):t._e(),t.userDoesNotExist&&!(t.iconClass||t.$slots.icon)?s("div",{staticClass:"avatardiv__initials-wrapper",style:t.initialsWrapperStyle},[s("div",{staticClass:"unknown",style:t.initialsStyle},[t._v(" "+t._s(t.initials)+" ")])]):t._e()],2)},C=[],D=M.normalizeComponent(x,A,C,!1,null,"5a1a428c",null,null);const k=D.exports;exports.NcAvatar=k,exports.userStatus=p;