cdn-experiments/social/d4s-social.js

128 lines
4.1 KiB
JavaScript

/**
* Prints VRE d4s-social-posts (limiting to @quantity number)
*/
window.customElements.define('d4s-social-posts', class extends HTMLElement {
#basepath = 'https://api.d4science.org/rest'
#quantity = 20
constructor() {
super()
}
connectedCallback() {
const shadowRoot = this.attachShadow({mode: 'open'})
var d4s = document.querySelector('d4s-boot-2')
d4s.service(
this.#basepath + '/2/posts/get-posts-vre',
'GET', null,
(resp) => {
var jresp = JSON.parse(resp)
if (jresp.success) {
var ul = document.createElement('ul')
jresp.result.reverse().forEach(post => {
if (this.#quantity-- > 0) {
var li = document.createElement('li')
li.setAttribute('class', 'd4s-social-post')
const datetime = new Date(0)
datetime.setUTCMilliseconds(post.time)
const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + d4s.clientId + post.thumbnail_url : post.thumbnail_url
li.innerHTML = `
<div class="d4s-post-heading">
<div class="d4s-post-avatar">
<img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
</div>
<div class="d4s-post-meta">
<div class="fullname">${post.full_name}</div>
<div class="time">${datetime.toLocaleString()}</div>
</div>
</div>
<div class="d4s-post-body">${post.description}</div>
<div class="d4s-post-footer"></div>
`
ul.appendChild(li)
}
})
shadowRoot.appendChild(ul)
}
},
() => { alert('Forbidden') }
)
}
static get observedAttributes() {
return ["url", "quantity"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
switch (name) {
case "url":
this.#basepath = newValue
break
case "quantity":
this.#quantity = newValue
break
}
}
}
get url() {
return this.#basepath
}
set url(url) {
this.#basepath = url
this.setAttribute("url", url)
}
get quantity() {
return this.#quantity
}
set quantity(quantity) {
this.#quantity = quantity
this.setAttribute("quantity", quantity)
}
})
window.customElements.define('d4s-social-search', class extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
//console.log(typeof d4s)
//console.log(this)
//this.attachShadow({mode: "open"})
//console.log(this.shadowRoot.querySelector("*[name=search]"))
//const shadowRoot = this.attachShadow({mode: 'open'})
//console.log(shadowRoot.innerHTML)
console.log("d4s-social-search connectedCallback")
var d4s = document.querySelector('d4s-boot-2')
/*
d4s.service(
'https://api.dev.d4science.org/rest/2/full-text-search/search-by-query?query=d4science',
'GET', null,
(resp) => {
document.getElementById('output').innerText = resp
},
() => { alert('Forbidden') }
)
d4s.service(
'https://api.dev.d4science.org/rest/2/posts/get-posts-user-quantity',
'GET', null,
(resp) => {
document.getElementById('output').innerText = resp
},
() => { alert('Forbidden') }
)
*/
}
})