gCubeSystem
/
cdn-experiments
15
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Reformatting code. Replaced alerts.

This commit is contained in:
Vincenzo Cestone 2022-04-28 15:55:38 +02:00
parent 91d6e6abc6
commit 000e790e64
1 changed files with 51 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
social/d4s-social.js
View File

@ -3,58 +3,57 @@
*/ */
window.customElements.define('d4s-social-posts', class extends HTMLElement { window.customElements.define('d4s-social-posts', class extends HTMLElement {
#basepath = 'https://api.d4science.org/rest' #basepath = 'https://api.d4science.org/rest'
//#basepath = 'https://api.dev.d4science.org/rest' //#basepath = 'https://api.dev.d4science.org/rest'
#quantity = 20 #quantity = 20
#boot = null; #boot = null;
#data = null; #data = null;
#shadowRoot = null; #shadowRoot = null;
constructor() { constructor() {
super() super()
this.#boot = document.querySelector("d4s-boot-2") this.#boot = document.querySelector("d4s-boot-2")
this.#shadowRoot = this.attachShadow({mode: 'open'}) this.#shadowRoot = this.attachShadow({mode: 'open'})
} }
connectedCallback() { connectedCallback() {
this.fetchPosts() this.fetchPosts()
} }
fetchPosts(){ fetchPosts() {
const url = this.#basepath + '/2/posts/get-posts-vre' const url = this.#basepath + '/2/posts/get-posts-vre'
this.#boot.secureFetch(url).then( this.#boot.secureFetch(url).then(reply => {
reply=>{ if(reply.status !== 200) throw "Unable to fetch posts";
if(reply.status !== 200) throw "Unable to fetch posts"; return reply.json()
return reply.json()
} }).then(data => {
).then(data => { this.#data = data
this.#data = data this.renderPosts()
this.renderPosts()
}).catch(err=>alert("Unable to fetch posts " + err)) }).catch(err => console.error("Unable to fetch posts " + err))
}
}
renderPosts(){ renderPosts() {
var ul = document.createElement('ul') var ul = document.createElement('ul')
this.#data.result.reverse().forEach(post => { this.#data.result.reverse().forEach(post => {
if (this.#quantity-- > 0) { if (this.#quantity-- > 0) {
var li = document.createElement('li') var li = document.createElement('li')
li.setAttribute('class', 'd4s-social-post') li.setAttribute('class', 'd4s-social-post')
const datetime = new Date(0) const datetime = new Date(0)
datetime.setUTCMilliseconds(post.time) datetime.setUTCMilliseconds(post.time)
const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url
li.innerHTML = ` li.innerHTML = `
<div class="d4s-post-heading"> <div class="d4s-post-heading">
<div class="d4s-post-avatar"> <div class="d4s-post-avatar">
<img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot> <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>
<div class="d4s-post-body">${post.description}</div> <div class="d4s-post-meta">
<div class="d4s-post-footer"></div> <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) ul.appendChild(li)
} }
@ -63,18 +62,18 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
} }
static get observedAttributes() { static get observedAttributes() {
return ["url", "quantity"]; return ["url", "quantity"];
} }
attributeChangedCallback(name, oldValue, newValue) { attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) { if (oldValue !== newValue) {
switch (name) { switch (name) {
case "url": case "url":
this.#basepath = newValue this.#basepath = newValue
break break
case "quantity": case "quantity":
this.#quantity = newValue this.#quantity = newValue
break break
} }
} }
} }
@ -98,41 +97,3 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement {
} }
}) })
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') }
)
*/
}
})