@keditor/components
Version:
A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Contentful
89 lines (76 loc) • 2.13 kB
JavaScript
import { LitElement, html } from "lit-element/lit-element.js";
import get from "lodash/get";
import {getEntryData} from '../helper.js'
export class SocialMedia extends LitElement {
/**
* HTMLElement spec
*/
constructor() {
super();
this.id = 'Somebody';
this.accessToken = 'accessToken';
this.space = 'space';
this.environment = 'environment';
this.content = "";
this.socialMediaCheckTwitter = true;
}
/**
* LitElement properties definition
*/
static get properties() {
return {
id: {type: String},
accessToken: {type: String},
space: {type: String},
environment: {type: String},
entryData: { type: Array },
socialMediaCheckTwitter: {
type: Boolean
},
blockQuote: {type: String}
}
}
async firstUpdated() {
this.entryData = await getEntryData(this.id, this.accessToken, this.space, this.environment);
}
script() {
const script = document.createElement('script');
script.onload = this.onLoad.bind(this);
if(this.socialMediaCheckTwitter===true){
script.src = 'https://platform.twitter.com/widgets.js';
}else{
script.src = 'https://www.instagram.com/static/bundles/es6/EmbedSDK.js/58b07fec4121.js';
}
return script;
}
// eslint-disable-next-line class-methods-use-this
onLoad() {
if(this.socialMediaCheckTwitter===false){
window.instgrm.Embeds.process();
}
}
updated() {
}
render() {
if(get(this.entryData, "ContentType") === "twitter"){
this.socialMediaCheckTwitter = true;
this.blockQuote = get(this.entryData, "twitterBlockquote");
}else{
this.socialMediaCheckTwitter = false;
this.blockQuote = get(this.entryData, "instagramBlockquote");
}
const dom = document.createElement("div");
dom.innerHTML = this.blockQuote;
return html `
${dom}
${this.script()}
`;
}
createRenderRoot() {
/**
* Render template without shadow DOM. Note that shadow DOM features like
* encapsulated CSS and slots are unavailable.
*/
return this;
}
}