70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
|
import app from './../../js/app.js'
|
||
|
|
var tag = 'app-avatar';
|
||
|
|
app.init({tag});
|
||
|
|
|
||
|
|
var html = `
|
||
|
|
<div>
|
||
|
|
<button class="nav-profile w-inline-block w--current" :style="{ backgroundImage: 'url(' + imgSrc + ')', backgroundColor: this.bgColor }" @click="redirect">
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
Vue.customElement(tag, {
|
||
|
|
template: html,
|
||
|
|
props: [
|
||
|
|
'redirectUrl',
|
||
|
|
'sessionKey',
|
||
|
|
'objectId',
|
||
|
|
'parseClass'
|
||
|
|
],
|
||
|
|
data: () => ({
|
||
|
|
t: {
|
||
|
|
override: "",
|
||
|
|
},
|
||
|
|
store: app.store,
|
||
|
|
imgSrc: '',
|
||
|
|
bgColor: '#FFF'
|
||
|
|
}),
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
// Retrieve existing Parse Object based on parseClass and objectId/sessionKey provided as props
|
||
|
|
const parseObject = Parse.Object.extend(this.parseClass);
|
||
|
|
let query = new Parse.Query(parseObject);
|
||
|
|
query.get(this.objectIdLocal)
|
||
|
|
.then((item) => {
|
||
|
|
if (item.attributes.image) {
|
||
|
|
this.imgSrc = item.attributes.image.url()+'?w=80';
|
||
|
|
}else this.defaultImg()
|
||
|
|
})
|
||
|
|
.catch(this.defaultImg)
|
||
|
|
},
|
||
|
|
defaultImg(){
|
||
|
|
this.bgColor = '#efefef';
|
||
|
|
this.imgSrc = "https://assets.website-files.com/5dc3f0f96a906d57b4336cb9/5dd7e53fbe26702e3830a1bd_icon-user.svg"
|
||
|
|
},
|
||
|
|
redirect() {
|
||
|
|
// Redirect if url was passed
|
||
|
|
if (this.redirectUrl) {
|
||
|
|
window.location.href = this.redirectUrl;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeMount() {
|
||
|
|
app.extendFromDOM(this, this.override) // fix for vue's lack of dynamic props/html-attributes
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// Get objectId from session if there was no prop
|
||
|
|
if (!this.objectId && this.sessionKey) {
|
||
|
|
Parse.Session.current()
|
||
|
|
.then((session) => {
|
||
|
|
this.objectIdLocal = session.get(this.sessionKey).id;
|
||
|
|
this.init();
|
||
|
|
}).catch((error) => {
|
||
|
|
console.log(error);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.objectIdLocal = this.objectId;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|