angular-twitter-timeline
Version:
Angular Public Twitter Timeline Widget
205 lines (197 loc) • 7.93 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, input, inject, ElementRef, effect, Component } from '@angular/core';
import { Observable } from 'rxjs';
class AngularTwitterTimelineService {
TWITTER_SCRIPT_ID = 'twitter-wjs';
TWITTER_WIDGET_URL = 'https://platform.twitter.com/widgets.js';
loadScript() {
return new Observable((observer) => {
this.startScriptLoad();
window['twttr'].ready((twttr) => {
observer.next(twttr);
observer.complete();
});
});
}
startScriptLoad() {
window['twttr'] = (function (d, s, id, url) {
let script;
let firstScriptEl = d.getElementsByTagName(s)[0];
let twitterScript = window['twttr'] || {};
if (d.getElementById(id)) {
return twitterScript;
}
script = d.createElement(s);
script.id = id;
script.src = url;
firstScriptEl.parentNode.insertBefore(script, firstScriptEl);
twitterScript._e = [];
twitterScript.ready = function (f) {
twitterScript._e.push(f);
};
return twitterScript;
}(document, 'script', this.TWITTER_SCRIPT_ID, this.TWITTER_WIDGET_URL));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AngularTwitterTimelineService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AngularTwitterTimelineService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AngularTwitterTimelineService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class AngularTwitterTimelineComponent {
// Modern Angular signals
data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
/**
* A hash of additional options to configure the widget
*/
opts = input(...(ngDevMode ? [undefined, { debugName: "opts" }] : []));
element = inject(ElementRef);
twitterTimelineService = inject(AngularTwitterTimelineService);
defaultOpts = {
theme: 'light',
height: 600
};
defaultData = {
sourceType: 'url',
url: 'https://twitter.com/mustafaer_dev',
screenName: 'Mustafa ER'
};
constructor() {
// Use effect to respond to input changes
effect(() => {
const currentData = this.data();
if (currentData && currentData.sourceType) {
switch (currentData.sourceType) {
case 'url':
delete this.defaultData.screenName;
break;
case 'profile':
delete this.defaultData.url;
break;
default:
break;
}
this.loadTwitterWidget();
}
});
}
loadTwitterWidget() {
this.twitterTimelineService
.loadScript()
.subscribe({
next: () => {
let nativeElement = this.element.nativeElement;
nativeElement.innerHTML = "";
window['twttr']
.widgets
.createTimeline({ ...this.defaultData, ...this.data() }, nativeElement, { ...this.defaultOpts, ...this.opts() })
.then(() => {
})
.catch((error) => console.error(error));
},
error: (error) => console.error(error),
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AngularTwitterTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AngularTwitterTimelineComponent, isStandalone: true, selector: "angular-twitter-timeline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, opts: { classPropertyName: "opts", publicName: "opts", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AngularTwitterTimelineService], ngImport: i0, template: ``, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AngularTwitterTimelineComponent, decorators: [{
type: Component,
args: [{
selector: 'angular-twitter-timeline',
standalone: true,
template: ``,
providers: [AngularTwitterTimelineService]
}]
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], opts: [{ type: i0.Input, args: [{ isSignal: true, alias: "opts", required: false }] }] } });
/**
* Interface for X (Twitter) Embedded Timeline data configuration
* Updated for X platform changes (November 2024)
*/
class AngularTwitterTimelineDataInterface {
/**
* Type of timeline to embed
* 'profile' - User profile timeline
* 'url' - Timeline from a specific URL (profile, likes, list, or collection)
*/
sourceType = 'profile';
/**
* Valid X (Twitter) username (without @ symbol)
* Used when sourceType is 'profile'
* Example: 'mustafaer_dev'
*/
screenName;
/**
* Absolute URL of an X (Twitter) profile, likes, list, or collection
* Used when sourceType is 'url'
* Example: 'https://twitter.com/angular' or 'https://x.com/angular'
*/
url;
}
/**
* Updated interface for X (Twitter) Embedded Timeline options
* Based on the latest X platform changes (November 2024)
* Reference: https://twittercommunity.com/t/embedded-timelines-update-parameters-support/177112
*
* DEPRECATED PARAMETERS (no longer supported):
* - tweetLimit (removed)
* - chrome (removed)
* - ariaPolite (removed)
* - borderColor (removed)
*/
class AngularTwitterTimelineOptionsInterface {
/**
* Set a fixed height of the embedded widget
* Positive integer (in pixels)
* Recommended range: 200-2000
*/
height;
/**
* Set a fixed width of the embedded widget
* Positive integer (in pixels)
* Note: Timeline will be responsive if not specified
*/
width;
/**
* Sets the theme of the widget. Default = 'light'.
* Supported values: 'light' or 'dark'
*/
theme;
/**
* Language code for the rendered timeline
* BCP 47 language code (e.g., 'en', 'es', 'fr', 'de', 'ja')
* Default: User's browser language
*/
lang;
/**
* @deprecated This parameter is no longer supported by X (Twitter)
* Previously used to limit the number of tweets displayed
*/
tweetLimit;
/**
* @deprecated This parameter is no longer supported by X (Twitter)
* Previously used to adjust border colors
*/
borderColor;
/**
* @deprecated This parameter is no longer supported by X (Twitter)
* Previously used to toggle display elements (noheader, nofooter, etc.)
*/
chrome;
/**
* @deprecated This parameter is no longer supported by X (Twitter)
* Previously used for aria-polite behavior
*/
ariaPolite;
}
/*
* Public API Surface of angular-twitter-timeline
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularTwitterTimelineComponent, AngularTwitterTimelineDataInterface, AngularTwitterTimelineOptionsInterface, AngularTwitterTimelineService };
//# sourceMappingURL=angular-twitter-timeline.mjs.map