mirror of
https://gitlab.com/idotj/mastodon-embed-timeline.git
synced 2025-05-23 08:29:08 +00:00
V4.5.0
This commit is contained in:
i.j
parent
ec1055e8ec
commit
72751a25cb
@ -1,3 +1,12 @@
|
||||
v4.5.0 - 01/03/2025
|
||||
- Allow to filter posts by language
|
||||
- Update documentation
|
||||
- Improve documentation content/structure
|
||||
- Update Rollup module bundler
|
||||
- Change dateLocale and dateOptions param names
|
||||
- JS refactoring
|
||||
- Improve performance
|
||||
|
||||
v4.4.2 - 04/04/2024
|
||||
- Fix render emojos in warning/spoiler text
|
||||
- Sanitize post content before rendering
|
||||
|
||||
338
README.md
338
README.md
@ -1,340 +1,46 @@
|
||||
# 🐘 Mastodon embed timeline
|
||||
|
||||
|
||||
|
||||
|
||||
Embed a Mastodon timeline in your page, only with a CSS and JS file.
|
||||
Embed a Mastodon timeline in your page with just a CSS and JS file.
|
||||
|
||||
Demo running:
|
||||
Demo:
|
||||
<https://codepen.io/ipuntoj/pen/MWppNGL>
|
||||
|
||||
## 📋 Table of contents
|
||||
|
||||
- [Installation](#installation)
|
||||
- [Download](#download)
|
||||
- [CDN](#cdn)
|
||||
- [Package manager](#package-manager)
|
||||
- [Setup](#setup)
|
||||
- [Initialize](#initialize)
|
||||
- [Local timeline](#local-timeline)
|
||||
- [Profile timeline](#profile-timeline)
|
||||
- [Hashtag timeline](#hashtag-timeline)
|
||||
- [Customize](#customize)
|
||||
- [API](#api)
|
||||
- [Examples](#examples)
|
||||
- [Installation](#-installation)
|
||||
- [Setup](#-setup)
|
||||
- [API](#-api)
|
||||
- [Examples](#-examples)
|
||||
- [Browser support](#-browser-support)
|
||||
- [Improve me](#-improve-me)
|
||||
- [License](#️-license)
|
||||
- [FAQ](#-faq)
|
||||
- [Alternatives](#alternatives)
|
||||
|
||||
## Installation
|
||||
## 🛠️ Installation
|
||||
|
||||
You have three different ways to install it in your project, choose the one that best suits your needs:
|
||||
Steps for installing the timeline in three different ways. [Click here](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/docs/INSTALLATION.md)
|
||||
|
||||
### Download
|
||||
## ⚙️ Setup
|
||||
|
||||
Download into your project the following compiled and minified files:
|
||||
Steps to configure and customize your timeline. [Click here](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/docs/SETUP.md)
|
||||
|
||||
- `dist/mastodon-timeline.min.css`
|
||||
- `dist/mastodon-timeline.umd.js`
|
||||
## 🔌 API
|
||||
|
||||
Now call the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Your site title</title>
|
||||
<!-- CSS -->
|
||||
<link href="path/to/mastodon-timeline.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Your HTML content -->
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="path/to/mastodon-timeline.umd.js"></script>
|
||||
<script>
|
||||
// You can initialize the script here
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
This option allows you to start without the need to upload any files on your server.
|
||||
Copy the following CSS and JS links to include them in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.min.css" integrity="sha256-1UGgxsonaMCfOEnVOL89aMKSo3GEAmaRP0ISbsWa6lU=" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.4.2/dist/mastodon-timeline.umd.js" integrity="sha256-E6WPG6iq+qQIzvu3HPJJxoAeRdum5siq13x4ITjyxu8=" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
### Package manager
|
||||
|
||||
A quick way to get it installed using **npm** or **yarn**:
|
||||
|
||||
```terminal
|
||||
npm install @idotj/mastodon-embed-timeline
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```terminal
|
||||
yarn add @idotj/mastodon-embed-timeline
|
||||
```
|
||||
|
||||
After installation, you can import it as follows:
|
||||
|
||||
```js
|
||||
import * as MastodonTimeline from "@idotj/mastodon-embed-timeline";
|
||||
```
|
||||
|
||||
Make sure to import also the file `mastodon-timeline.min.css` into your project.
|
||||
|
||||
## Setup
|
||||
|
||||
### Initialize
|
||||
|
||||
To get your timeline up add the following HTML structure in your page:
|
||||
|
||||
```html
|
||||
<div id="mt-container" class="mt-container">
|
||||
<div class="mt-body" role="feed">
|
||||
<div class="mt-loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Now you can then initialize the script running:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init();
|
||||
```
|
||||
|
||||
By default it will show a timeline with 20 posts from the instance [mastodon.social](https://mastodon.social/public/local)
|
||||
|
||||
ℹ️ If you are trying to initialize the script before `mastodon-timeline.umd.js` is loaded, you will probably get such an error in the console:
|
||||
"_MastodonTimeline is not defined_".
|
||||
To fix that try to initialize the script as follow:
|
||||
|
||||
```js
|
||||
window.addEventListener("load", () => {
|
||||
const myTimeline = new MastodonTimeline.Init();
|
||||
});
|
||||
```
|
||||
|
||||
The next step is to configure the options/values of your timeline according to the type you prefer. There are three types, **Local**, **Profile** and **Hashtag**. Here you have an example of each one to see how it works:
|
||||
|
||||
#### Local timeline
|
||||
|
||||
To show a timeline with posts from the instance [mastodon.online](https://mastodon.online/public/local) add the following option/value when initializing the timeline:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
});
|
||||
```
|
||||
|
||||
#### Profile timeline
|
||||
|
||||
To show a timeline with posts from my Mastodon profile [@idotj](https://mastodon.online/@idotj) add the following options/values when initializing the timeline:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
timelineType: "profile",
|
||||
userId: "000180745",
|
||||
profileName: "@idotj",
|
||||
});
|
||||
```
|
||||
|
||||
ℹ️ If you don't know your `userId` you have two ways to get it:
|
||||
|
||||
- Copy the url below and paste it in a new tab. Remember to replace the words `INSTANCE` and `USERNAME` with your current values in the url:
|
||||
<https://INSTANCE/api/v1/accounts/lookup?acct=USERNAME>
|
||||
The first value you see in the list is your `id` number.
|
||||
|
||||
- Click on the link below and put your `@USERNAME` and `@INSTANCE` in the input field:
|
||||
[https://prouser123.me/mastodon-userid-lookup/](https://prouser123.me/mastodon-userid-lookup/)
|
||||
|
||||
#### Hashtag timeline
|
||||
|
||||
To show a timeline with posts containing the hashtag [#fediverse](https://mastodon.online/tags/fediverse) add the following options/values when initializing the timeline:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
timelineType: "hashtag",
|
||||
hashtagName: "fediverse",
|
||||
});
|
||||
```
|
||||
|
||||
### Customize
|
||||
|
||||
In the `examples/` folder there is an HTML file `local-timeline-customized.html` where you can see how to customize your timeline by overwriting the CSS styles and using several JS options when initializing the timeline.
|
||||
|
||||
If you need to change something in the core files (`src/` folder), I recommend you to read the document [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing) to see how to compile and test your changes.
|
||||
|
||||
Here you have all the options available to quickly setup and customize your timeline:
|
||||
|
||||
```js
|
||||
// Id of the <div> containing the timeline
|
||||
// Default: "mt-container"
|
||||
mtContainerId: "mt-container",
|
||||
|
||||
// Mastodon instance Url including https://
|
||||
// Default: "https://mastodon.social"
|
||||
instanceUrl: "https://mastodon.social",
|
||||
|
||||
// Choose type of posts to show in the timeline: 'local', 'profile', 'hashtag'
|
||||
// Default: "local"
|
||||
timelineType: "local",
|
||||
|
||||
// Your user ID number on Mastodon instance
|
||||
// Leave it empty if you didn't choose 'profile' as type of timeline
|
||||
// Default: ""
|
||||
userId: "",
|
||||
|
||||
// Your user name on Mastodon instance (including the @ symbol at the beginning)
|
||||
// Leave it empty if you didn't choose 'profile' as type of timeline
|
||||
// Default: ""
|
||||
profileName: "",
|
||||
|
||||
// The name of the hashtag (not including the # symbol)
|
||||
// Leave it empty if you didn't choose 'hashtag' as type of timeline
|
||||
// Default: ""
|
||||
hashtagName: "",
|
||||
|
||||
// Class name for the loading spinner (also used in CSS file)
|
||||
// Default: "mt-loading-spinner"
|
||||
spinnerClass: "mt-loading-spinner",
|
||||
|
||||
// Preferred color theme: "light", "dark" or "auto"
|
||||
// Default: "auto"
|
||||
defaultTheme: "auto",
|
||||
|
||||
// Maximum number of posts to request to the server
|
||||
// Default: "20"
|
||||
maxNbPostFetch: "20",
|
||||
|
||||
// Maximum number of posts to show in the timeline
|
||||
// Default: "20"
|
||||
maxNbPostShow: "20",
|
||||
|
||||
// Specifies the format of the date according to the chosen language/country
|
||||
// Default: "en-GB" (British English: day-month-year order)
|
||||
dateLocale: "en-GB",
|
||||
|
||||
// Customize the date format using the options for day, month and year
|
||||
// Default: day: "2-digit", month: "short", year: "numeric" (DD MMM YYYY)
|
||||
dateOptions: {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
},
|
||||
|
||||
// Hide unlisted posts
|
||||
// Default: false (don't hide)
|
||||
hideUnlisted: false,
|
||||
|
||||
// Hide boosted posts
|
||||
// Default: false (don't hide)
|
||||
hideReblog: false,
|
||||
|
||||
// Hide replies posts
|
||||
// Default: false (don't hide)
|
||||
hideReplies: false,
|
||||
|
||||
// Hide pinned posts from the profile timeline
|
||||
// Default: false (don't hide)
|
||||
hidePinnedPosts: false,
|
||||
|
||||
// Hide the user account under the user name
|
||||
// Default: false (don't hide)
|
||||
hideUserAccount: false,
|
||||
|
||||
// Limit the text content to a maximum number of lines
|
||||
// Use "0" to show no text
|
||||
// Default: "" (unlimited)
|
||||
txtMaxLines: "",
|
||||
|
||||
// Customize the text of the button used for showing/hiding sensitive/spoiler text
|
||||
btnShowMore: "SHOW MORE",
|
||||
btnShowLess: "SHOW LESS",
|
||||
|
||||
// Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag
|
||||
// Default: false (don't apply)
|
||||
markdownBlockquote: false,
|
||||
|
||||
// Hide custom emojis available on the server
|
||||
// Default: false (don't hide)
|
||||
hideEmojos: false,
|
||||
|
||||
// Customize the text of the button used for showing a sensitive/spoiler media content
|
||||
btnShowContent: "SHOW CONTENT",
|
||||
|
||||
// Hide video image preview and load the video player instead
|
||||
// Default: false (don't hide)
|
||||
hideVideoPreview: false,
|
||||
|
||||
// Customize the text of the button used for the image preview to play the video
|
||||
btnPlayVideoTxt: "Load and play video",
|
||||
|
||||
// Hide preview card if post contains a link, photo or video from a Url
|
||||
// Default: false (don't hide)
|
||||
hidePreviewLink: false,
|
||||
|
||||
// Limit the preview text description to a maximum number of lines
|
||||
// Use "0" to show no text
|
||||
// Default: "" (unlimited)
|
||||
previewMaxLines: "",
|
||||
|
||||
// Hide replies, boosts and favourites posts counter
|
||||
// Default: false (don't hide)
|
||||
hideCounterBar: false,
|
||||
|
||||
// Disable a carousel/lightbox when the user clicks on a picture in a post
|
||||
// Default: false (not disabled)
|
||||
disableCarousel: false,
|
||||
|
||||
// Customize the text of the buttons used for the carousel/lightbox
|
||||
carouselCloseTxt: "Close carousel",
|
||||
carouselPrevTxt: "Previous media item",
|
||||
carouselNextTxt: "Next media item",
|
||||
|
||||
// Customize the text of the button pointing to the Mastodon page placed at the end of the timeline
|
||||
// Leave the value empty to hide it
|
||||
btnSeeMore: "See more posts at Mastodon",
|
||||
|
||||
// Customize the text of the button reloading the list of posts placed at the end of the timeline
|
||||
// Leave the value empty to hide it
|
||||
btnReload: "Refresh",
|
||||
|
||||
// Keep searching for the main <div> container before building the timeline. Useful in some cases where extra time is needed to render the page
|
||||
// Default: false (don't apply)
|
||||
insistSearchContainer: false,
|
||||
|
||||
// Defines the maximum time to continue searching for the main <div> container
|
||||
// Default: "3000" (3 seconds)
|
||||
insistSearchContainerTime: "3000",
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
The current version has the following functions that can be performed:
|
||||
|
||||
| Function | Description |
|
||||
| ------------------------- | ------------------------------------------------------------------------------- |
|
||||
| `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` |
|
||||
| `mtUpdate()` | Reload the timeline by fetching the lastest posts |
|
||||
|
||||
## Examples
|
||||
## 📚 Examples
|
||||
|
||||
The folder `examples/` contains several demos in HTML to play with. Download the full project and open each HTML file in your favorite browser.
|
||||
The folder `examples/` contains different demos of timeline types to play with. Download the full project and open each HTML file in your favorite browser.
|
||||
|
||||
Also, you have other alternatives to run these examples locally. Consult the document [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing) to use options such as Docker or Http-server.
|
||||
If you have any problems loading the examples in your browser (e.g. CORS error), check the documentation [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing) to run the examples using alternatives such as Docker or Http-server.
|
||||
|
||||
## 🌐 Browser support
|
||||
|
||||
@ -350,7 +56,7 @@ Mastodon embed timeline is supported on the latest versions of the following bro
|
||||
## 🚀 Improve me
|
||||
|
||||
Feel free to add your features and improvements.
|
||||
Take a look at the [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md) document to learn more about how to build and collaborate on the project.
|
||||
The [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md) document to learn more about how to modify, build and collaborate on the project.
|
||||
|
||||
## ⚖️ License
|
||||
|
||||
|
||||
4
dist/mastodon-timeline.esm.js
vendored
4
dist/mastodon-timeline.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mastodon-timeline.min.css
vendored
2
dist/mastodon-timeline.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/mastodon-timeline.umd.js
vendored
4
dist/mastodon-timeline.umd.js
vendored
File diff suppressed because one or more lines are too long
75
docs/INSTALLATION.md
Normal file
75
docs/INSTALLATION.md
Normal file
@ -0,0 +1,75 @@
|
||||
# 🐘 Mastodon embed timeline - 🛠️ Installation
|
||||
|
||||
You have three different ways to install it in your project:
|
||||
- [Download](#download)
|
||||
- [CDN](#cdn)
|
||||
- [Package manager](#package-manager)
|
||||
|
||||
## Download
|
||||
|
||||
Download and copy these two files into your project folder:
|
||||
|
||||
- `dist/mastodon-timeline.min.css`
|
||||
- `dist/mastodon-timeline.umd.js`
|
||||
|
||||
Load the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Example of site title</title>
|
||||
<!-- Your CSS -->
|
||||
<link href="your/path/to/file/mastodon-timeline.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- HTML content -->
|
||||
...
|
||||
|
||||
<!-- Your JavaScript -->
|
||||
<script src="your/path/to/file/mastodon-timeline.umd.js"></script>
|
||||
<script>
|
||||
// You can initialize the script here
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
This option allows you to start without the need to upload any files on your server.
|
||||
Copy the following CSS and JS links to include them in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.5.0/dist/mastodon-timeline.min.css" crossorigin="anonymous">
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.5.0/dist/mastodon-timeline.umd.js" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
## Package manager
|
||||
|
||||
A quick way to get it installed using **npm** or **yarn**:
|
||||
|
||||
```terminal
|
||||
npm install @idotj/mastodon-embed-timeline
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```terminal
|
||||
yarn add @idotj/mastodon-embed-timeline
|
||||
```
|
||||
|
||||
After installation, you can import it as follows:
|
||||
|
||||
```js
|
||||
import * as MastodonTimeline from "@idotj/mastodon-embed-timeline";
|
||||
```
|
||||
|
||||
Make sure to import also the file `mastodon-timeline.min.css` into your project.
|
||||
239
docs/SETUP.md
Normal file
239
docs/SETUP.md
Normal file
@ -0,0 +1,239 @@
|
||||
# 🐘 Mastodon embed timeline - ⚙️ Setup
|
||||
|
||||
## Initialize
|
||||
|
||||
Add the following HTML structure in your page:
|
||||
|
||||
```html
|
||||
<div id="mt-container" class="mt-container">
|
||||
<div class="mt-body" role="feed">
|
||||
<div class="mt-loading-spinner"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Now you can then initialize the script running:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init();
|
||||
```
|
||||
|
||||
By default it will show a timeline with 20 posts from the instance [mastodon.social](https://mastodon.social/public/local)
|
||||
|
||||
ℹ️ If you are trying to initialize the script before `mastodon-timeline.umd.js` is loaded, you will probably get such an error in the console:
|
||||
"_MastodonTimeline is not defined_".
|
||||
To fix that try to initialize the script as follow:
|
||||
|
||||
```js
|
||||
window.addEventListener("load", () => {
|
||||
const myTimeline = new MastodonTimeline.Init();
|
||||
});
|
||||
```
|
||||
|
||||
## Timeline type
|
||||
|
||||
There are three types, **Local**, **Profile** and **Hashtag**. Here you have an example of each one to see how it works:
|
||||
|
||||
### Local timeline
|
||||
|
||||
To show a timeline with posts from a local instance (e.g. [mastodon.online](https://mastodon.online/public/local)) add the following option/value when initializing the timeline:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
});
|
||||
```
|
||||
|
||||
### Profile timeline
|
||||
|
||||
To show a timeline with posts from a Mastodon profile (e.g. [@idotj](https://mastodon.online/@idotj)) add the following options/values when initializing the timeline:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
timelineType: "profile",
|
||||
userId: "000180745",
|
||||
profileName: "@idotj",
|
||||
});
|
||||
```
|
||||
|
||||
ℹ️ If you don't know your `userId` you have two ways to get it:
|
||||
|
||||
- Copy the url below and paste it in a new tab. Remember to replace the words `INSTANCE` and `USERNAME` with your current values in the url:
|
||||
<https://INSTANCE/api/v1/accounts/lookup?acct=USERNAME>
|
||||
The first value you see in the list is your `id` number.
|
||||
|
||||
- Click on the link below and put your `@USERNAME` and `@INSTANCE` in the input field:
|
||||
[https://mastodon-userid-lookup.jcxldn.net/](https://mastodon-userid-lookup.jcxldn.net/)
|
||||
|
||||
### Hashtag timeline
|
||||
|
||||
To show a timeline with posts containing a hashtag (e.g. [#fediverse](https://mastodon.online/tags/fediverse)) add the following options/values when initializing the timeline:
|
||||
|
||||
```js
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
timelineType: "hashtag",
|
||||
hashtagName: "fediverse",
|
||||
});
|
||||
```
|
||||
|
||||
## Customize
|
||||
|
||||
There is a long list of parameters that allows you to quickly customize your timeline:
|
||||
|
||||
```js
|
||||
// Id of the <div> containing the timeline
|
||||
// Default: "mt-container"
|
||||
mtContainerId: "mt-container",
|
||||
|
||||
// Mastodon instance Url including https://
|
||||
// Default: "https://mastodon.social"
|
||||
instanceUrl: "https://mastodon.social",
|
||||
|
||||
// Choose type of posts to show in the timeline: 'local', 'profile', 'hashtag'
|
||||
// Default: "local"
|
||||
timelineType: "local",
|
||||
|
||||
// Your user ID number on Mastodon instance
|
||||
// Leave it empty if you didn't choose 'profile' as type of timeline
|
||||
// Default: ""
|
||||
userId: "",
|
||||
|
||||
// Your user name on Mastodon instance (including the @ symbol at the beginning)
|
||||
// Leave it empty if you didn't choose 'profile' as type of timeline
|
||||
// Default: ""
|
||||
profileName: "",
|
||||
|
||||
// The name of the hashtag (without the # symbol)
|
||||
// Leave it empty if you didn't choose 'hashtag' as type of timeline
|
||||
// Default: ""
|
||||
hashtagName: "",
|
||||
|
||||
// Class name for the loading spinner (also used in CSS file)
|
||||
// Default: "mt-loading-spinner"
|
||||
spinnerClass: "mt-loading-spinner",
|
||||
|
||||
// Preferred color theme: "light", "dark" or "auto"
|
||||
// Default: "auto"
|
||||
defaultTheme: "auto",
|
||||
|
||||
// Maximum number of posts to request to the server
|
||||
// Default: "20"
|
||||
maxNbPostFetch: "20",
|
||||
|
||||
// Maximum number of posts to show in the timeline
|
||||
// Default: "20"
|
||||
maxNbPostShow: "20",
|
||||
|
||||
// Set the format of the date according to the chosen language/country
|
||||
// Default: "en-GB" (British English: day-month-year order)
|
||||
dateFormatLocale: "en-GB",
|
||||
|
||||
// Customize the date format using the options for day, month and year
|
||||
// Default: day: "2-digit", month: "short", year: "numeric" (DD MMM YYYY)
|
||||
dateFormatOptions: {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
},
|
||||
|
||||
// Hide unlisted posts
|
||||
// Default: false (don't hide)
|
||||
hideUnlisted: false,
|
||||
|
||||
// Hide boosted posts
|
||||
// Default: false (don't hide)
|
||||
hideReblog: false,
|
||||
|
||||
// Hide replies posts
|
||||
// Default: false (don't hide)
|
||||
hideReplies: false,
|
||||
|
||||
// Hide pinned posts from the profile timeline
|
||||
// Default: false (don't hide)
|
||||
hidePinnedPosts: false,
|
||||
|
||||
// Hide the user account under the user name
|
||||
// Default: false (don't hide)
|
||||
hideUserAccount: false,
|
||||
|
||||
// Show only posts with the selected language (ISO 639-1)
|
||||
// Use "en" to show only posts in English
|
||||
// Default: "" (don't filter by language)
|
||||
filterByLanguage: "",
|
||||
|
||||
// Limit the text content to a maximum number of lines
|
||||
// Use "0" to show no text
|
||||
// Default: "" (unlimited)
|
||||
txtMaxLines: "",
|
||||
|
||||
// Customize the text of the button used for showing/hiding sensitive/spoiler text
|
||||
btnShowMore: "SHOW MORE",
|
||||
btnShowLess: "SHOW LESS",
|
||||
|
||||
// Convert Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag
|
||||
// Default: false (don't apply)
|
||||
markdownBlockquote: false,
|
||||
|
||||
// Hide custom emojis available on the server
|
||||
// Default: false (don't hide)
|
||||
hideEmojos: false,
|
||||
|
||||
// Customize the text of the button used for showing a sensitive/spoiler media content
|
||||
btnShowContent: "SHOW CONTENT",
|
||||
|
||||
// Hide video image preview and load the video player instead
|
||||
// Default: false (don't hide)
|
||||
hideVideoPreview: false,
|
||||
|
||||
// Customize the text of the button used for the image preview to play the video
|
||||
btnPlayVideoTxt: "Load and play video",
|
||||
|
||||
// Hide preview card if post contains a link, photo or video from a Url
|
||||
// Default: false (don't hide)
|
||||
hidePreviewLink: false,
|
||||
|
||||
// Limit the preview text description to a maximum number of lines
|
||||
// Use "0" to show no text
|
||||
// Default: "" (unlimited)
|
||||
previewMaxLines: "",
|
||||
|
||||
// Hide replies, boosts and favourites posts counter
|
||||
// Default: false (don't hide)
|
||||
hideCounterBar: false,
|
||||
|
||||
// Disable a carousel/lightbox when the user clicks on a picture in a post
|
||||
// Default: false (not disabled)
|
||||
disableCarousel: false,
|
||||
|
||||
// Customize the text of the buttons used for the carousel/lightbox
|
||||
// Default:
|
||||
carouselCloseTxt: "Close carousel",
|
||||
carouselPrevTxt: "Previous media item",
|
||||
carouselNextTxt: "Next media item",
|
||||
|
||||
// Customize the text of the button pointing to the Mastodon page placed at the end of the timeline
|
||||
// Leave the value empty to hide it
|
||||
// Default:
|
||||
btnSeeMore: "See more posts at Mastodon",
|
||||
|
||||
// Customize the text of the button reloading the list of posts placed at the end of the timeline
|
||||
// Leave the value empty to hide it
|
||||
// Default:
|
||||
btnReload: "Refresh",
|
||||
|
||||
// Keep searching for the main <div> container before building the timeline. Useful in some cases where extra time is needed to render the page
|
||||
// Default: false (don't apply)
|
||||
insistSearchContainer: false,
|
||||
|
||||
// Define the maximum time to continue searching for the main <div> container
|
||||
// Default: "3000" (3 seconds)
|
||||
insistSearchContainerTime: "3000",
|
||||
|
||||
```
|
||||
|
||||
In the `examples/` folder there is an HTML file `local-timeline-customized.html` that you can use as a referente to see how to customize your timeline by overwriting some CSS styles and using several parameters when initializing the timeline.
|
||||
|
||||
Also, if you need to change something in the core files (`src/` folder), I recommend you to read the document [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing) to see how to compile and test your changes.
|
||||
|
||||
|
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 278 KiB |
@ -187,8 +187,8 @@
|
||||
defaultTheme: "light",
|
||||
maxNbPostFetch: "42",
|
||||
maxNbPostShow: "42",
|
||||
dateLocale: "en-CA",
|
||||
dateOptions: {
|
||||
dateFormatLocale: "en-CA",
|
||||
dateFormatOptions: {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
@ -225,8 +225,8 @@
|
||||
defaultTheme: "light",
|
||||
maxNbPostFetch: "42",
|
||||
maxNbPostShow: "42",
|
||||
dateLocale: "en-CA",
|
||||
dateOptions: {
|
||||
dateFormatLocale: "en-CA",
|
||||
dateFormatOptions: {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
|
||||
239
package-lock.json
generated
239
package-lock.json
generated
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "@idotj/mastodon-embed-timeline",
|
||||
"version": "4.4.2",
|
||||
"version": "4.5.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@idotj/mastodon-embed-timeline",
|
||||
"version": "4.4.2",
|
||||
"version": "4.5.0",
|
||||
"license": "GNU",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"rollup": "^4.14.0"
|
||||
"rollup": "^4.34.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
@ -95,205 +95,277 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz",
|
||||
"integrity": "sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
|
||||
"integrity": "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm64": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz",
|
||||
"integrity": "sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.8.tgz",
|
||||
"integrity": "sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-arm64": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz",
|
||||
"integrity": "sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.8.tgz",
|
||||
"integrity": "sha512-02rVdZ5tgdUNRxIUrFdcMBZQoaPMrxtwSb+/hOfBdqkatYHR3lZ2A2EGyHq2sGOd0Owk80oV3snlDASC24He3Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz",
|
||||
"integrity": "sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.8.tgz",
|
||||
"integrity": "sha512-qIP/elwR/tq/dYRx3lgwK31jkZvMiD6qUtOycLhTzCvrjbZ3LjQnEM9rNhSGpbLXVJYQ3rq39A6Re0h9tU2ynw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-arm64": {
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.8.tgz",
|
||||
"integrity": "sha512-IQNVXL9iY6NniYbTaOKdrlVP3XIqazBgJOVkddzJlqnCpRi/yAeSOa8PLcECFSQochzqApIOE1GHNu3pCz+BDA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-x64": {
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.8.tgz",
|
||||
"integrity": "sha512-TYXcHghgnCqYFiE3FT5QwXtOZqDj5GmaFNTNt3jNC+vh22dc/ukG2cG+pi75QO4kACohZzidsq7yKTKwq/Jq7Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz",
|
||||
"integrity": "sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.8.tgz",
|
||||
"integrity": "sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.8.tgz",
|
||||
"integrity": "sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz",
|
||||
"integrity": "sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.8.tgz",
|
||||
"integrity": "sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz",
|
||||
"integrity": "sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.8.tgz",
|
||||
"integrity": "sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.8.tgz",
|
||||
"integrity": "sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz",
|
||||
"integrity": "sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.8.tgz",
|
||||
"integrity": "sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==",
|
||||
"cpu": [
|
||||
"ppc64le"
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz",
|
||||
"integrity": "sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz",
|
||||
"integrity": "sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz",
|
||||
"integrity": "sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz",
|
||||
"integrity": "sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz",
|
||||
"integrity": "sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.8.tgz",
|
||||
"integrity": "sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-musl": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz",
|
||||
"integrity": "sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.8.tgz",
|
||||
"integrity": "sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz",
|
||||
"integrity": "sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.8.tgz",
|
||||
"integrity": "sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz",
|
||||
"integrity": "sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.8.tgz",
|
||||
"integrity": "sha512-r3NRQrXkHr4uWy5TOjTpTYojR9XmF0j/RYgKCef+Ag46FWUTltm5ziticv8LdNsDMehjJ543x/+TJAek/xBA2w==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz",
|
||||
"integrity": "sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.8.tgz",
|
||||
"integrity": "sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
|
||||
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
|
||||
"dev": true
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
||||
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.11.3",
|
||||
@ -346,12 +418,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
"fill-range": "^7.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
@ -433,10 +506,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fill-range": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
@ -550,6 +624,7 @@
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
@ -627,12 +702,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.14.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz",
|
||||
"integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==",
|
||||
"version": "4.34.8",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.8.tgz",
|
||||
"integrity": "sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.5"
|
||||
"@types/estree": "1.0.6"
|
||||
},
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
@ -642,21 +718,25 @@
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rollup/rollup-android-arm-eabi": "4.14.0",
|
||||
"@rollup/rollup-android-arm64": "4.14.0",
|
||||
"@rollup/rollup-darwin-arm64": "4.14.0",
|
||||
"@rollup/rollup-darwin-x64": "4.14.0",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.14.0",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.14.0",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.14.0",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.14.0",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.14.0",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.14.0",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.14.0",
|
||||
"@rollup/rollup-linux-x64-musl": "4.14.0",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.14.0",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.14.0",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.14.0",
|
||||
"@rollup/rollup-android-arm-eabi": "4.34.8",
|
||||
"@rollup/rollup-android-arm64": "4.34.8",
|
||||
"@rollup/rollup-darwin-arm64": "4.34.8",
|
||||
"@rollup/rollup-darwin-x64": "4.34.8",
|
||||
"@rollup/rollup-freebsd-arm64": "4.34.8",
|
||||
"@rollup/rollup-freebsd-x64": "4.34.8",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.34.8",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.34.8",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.34.8",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.34.8",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.34.8",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.34.8",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.34.8",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.34.8",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.34.8",
|
||||
"@rollup/rollup-linux-x64-musl": "4.34.8",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.34.8",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.34.8",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.34.8",
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
@ -743,6 +823,7 @@
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@idotj/mastodon-embed-timeline",
|
||||
"version": "4.4.2",
|
||||
"description": "Displays Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
|
||||
"version": "4.5.0",
|
||||
"description": "Displays a Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
|
||||
"license": "GNU",
|
||||
"author": {
|
||||
"name": "idotj",
|
||||
@ -34,7 +34,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"rollup": "^4.14.0",
|
||||
"rollup": "^4.34.8",
|
||||
"@rollup/plugin-terser": "^0.4.4"
|
||||
},
|
||||
"files": [
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Mastodon embed timeline v4.4.2 */
|
||||
/* Mastodon embed timeline v4.5.0 */
|
||||
/* More info at: */
|
||||
/* https://gitlab.com/idotj/mastodon-embed-timeline */
|
||||
|
||||
@ -476,6 +476,7 @@ body:has(dialog.mt-dialog[open]) {
|
||||
gap: 0.25rem;
|
||||
align-items: center;
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
.mt-post-counter-bar-replies > svg,
|
||||
.mt-post-counter-bar-reblog > svg,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Mastodon embed timeline
|
||||
* @author idotj
|
||||
* @version 4.4.2
|
||||
* @version 4.5.0
|
||||
* @url https://gitlab.com/idotj/mastodon-embed-timeline
|
||||
* @license GNU AGPLv3
|
||||
*/
|
||||
@ -20,8 +20,8 @@ export class Init {
|
||||
defaultTheme: "auto",
|
||||
maxNbPostFetch: "20",
|
||||
maxNbPostShow: "20",
|
||||
dateLocale: "en-GB",
|
||||
dateOptions: {
|
||||
dateFormatLocale: "en-GB",
|
||||
dateFormatOptions: {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
@ -32,6 +32,7 @@ export class Init {
|
||||
hidePinnedPosts: false,
|
||||
hideUserAccount: false,
|
||||
txtMaxLines: "",
|
||||
filterByLanguage: "",
|
||||
btnShowMore: "SHOW MORE",
|
||||
btnShowLess: "SHOW LESS",
|
||||
markdownBlockquote: false,
|
||||
@ -100,7 +101,10 @@ export class Init {
|
||||
* Find main container in DOM before building the timeline
|
||||
*/
|
||||
#getContainerNode() {
|
||||
// console.log("Initializing Mastodon timeline with settings: ", this.mtSettings);
|
||||
// console.log(
|
||||
// "Initializing Mastodon timeline with settings: ",
|
||||
// this.mtSettings
|
||||
// );
|
||||
|
||||
const assignContainerNode = () => {
|
||||
this.mtContainerNode = document.getElementById(
|
||||
@ -261,39 +265,55 @@ export class Init {
|
||||
* @returns {Object}
|
||||
*/
|
||||
#setUrls(i) {
|
||||
let urls = {};
|
||||
const {
|
||||
timelineType,
|
||||
userId,
|
||||
hashtagName,
|
||||
maxNbPostFetch,
|
||||
hidePinnedPosts,
|
||||
hideEmojos,
|
||||
} = this.mtSettings;
|
||||
|
||||
if (this.mtSettings.timelineType === "profile") {
|
||||
if (this.mtSettings.userId) {
|
||||
urls.timeline = `${i}accounts/${this.mtSettings.userId}/statuses?limit=${this.mtSettings.maxNbPostFetch}`;
|
||||
if (!this.mtSettings.hidePinnedPosts) {
|
||||
urls.pinned = `${i}accounts/${this.mtSettings.userId}/statuses?pinned=true`;
|
||||
}
|
||||
} else {
|
||||
const urls = {};
|
||||
|
||||
switch (timelineType) {
|
||||
case "profile":
|
||||
if (!userId) {
|
||||
this.#showError(
|
||||
"Please check your <strong>userId</strong> value",
|
||||
"⚠️"
|
||||
);
|
||||
break;
|
||||
}
|
||||
} else if (this.mtSettings.timelineType === "hashtag") {
|
||||
if (this.mtSettings.hashtagName) {
|
||||
urls.timeline = `${i}timelines/tag/${this.mtSettings.hashtagName}?limit=${this.mtSettings.maxNbPostFetch}`;
|
||||
} else {
|
||||
urls.timeline = `${i}accounts/${userId}/statuses?limit=${maxNbPostFetch}`;
|
||||
if (!hidePinnedPosts) {
|
||||
urls.pinned = `${i}accounts/${userId}/statuses?pinned=true`;
|
||||
}
|
||||
break;
|
||||
|
||||
case "hashtag":
|
||||
if (!hashtagName) {
|
||||
this.#showError(
|
||||
"Please check your <strong>hashtagName</strong> value",
|
||||
"⚠️"
|
||||
);
|
||||
break;
|
||||
}
|
||||
} else if (this.mtSettings.timelineType === "local") {
|
||||
urls.timeline = `${i}timelines/public?local=true&limit=${this.mtSettings.maxNbPostFetch}`;
|
||||
} else {
|
||||
urls.timeline = `${i}timelines/tag/${hashtagName}?limit=${maxNbPostFetch}`;
|
||||
break;
|
||||
|
||||
case "local":
|
||||
urls.timeline = `${i}timelines/public?local=true&limit=${maxNbPostFetch}`;
|
||||
break;
|
||||
|
||||
default:
|
||||
this.#showError(
|
||||
"Please check your <strong>timelineType</strong> value",
|
||||
"⚠️"
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.mtSettings.hideEmojos) {
|
||||
if (!hideEmojos) {
|
||||
urls.emojos = `${i}custom_emojis`;
|
||||
}
|
||||
|
||||
@ -375,27 +395,39 @@ export class Init {
|
||||
|
||||
// console.log("Mastodon timeline data fetched: ", this.fetchedData);
|
||||
|
||||
const {
|
||||
hideUnlisted,
|
||||
hideReblog,
|
||||
hideReplies,
|
||||
maxNbPostShow,
|
||||
filterByLanguage,
|
||||
} = this.mtSettings;
|
||||
const posts = this.fetchedData.timeline;
|
||||
let nbPostToShow = 0;
|
||||
|
||||
this.mtBodyNode.replaceChildren();
|
||||
|
||||
posts.forEach((post) => {
|
||||
const filteredPosts = posts.filter((post) => {
|
||||
const isPublicOrUnlisted =
|
||||
post.visibility === "public" ||
|
||||
(!this.mtSettings.hideUnlisted && post.visibility === "unlisted");
|
||||
const shouldHideReblog = this.mtSettings.hideReblog && post.reblog;
|
||||
const shouldHideReplies =
|
||||
this.mtSettings.hideReplies && post.in_reply_to_id;
|
||||
(!hideUnlisted && post.visibility === "unlisted");
|
||||
const shouldHideReblog = hideReblog && post.reblog;
|
||||
const shouldHideReplies = hideReplies && post.in_reply_to_id;
|
||||
const postLanguage =
|
||||
post.language || (post.reblog ? post.reblog.language : null);
|
||||
const matchesLanguage =
|
||||
filterByLanguage === "" || postLanguage === filterByLanguage;
|
||||
|
||||
// Filter by (Public / Unlisted)
|
||||
if (isPublicOrUnlisted && !shouldHideReblog && !shouldHideReplies) {
|
||||
if (nbPostToShow < this.mtSettings.maxNbPostShow) {
|
||||
this.#appendPost(post, nbPostToShow);
|
||||
nbPostToShow++;
|
||||
} else {
|
||||
// Reached the limit of maximum number of posts to show
|
||||
}
|
||||
return (
|
||||
isPublicOrUnlisted &&
|
||||
!shouldHideReblog &&
|
||||
!shouldHideReplies &&
|
||||
matchesLanguage
|
||||
);
|
||||
});
|
||||
|
||||
filteredPosts.forEach((post, index) => {
|
||||
if (index < maxNbPostShow) {
|
||||
this.#appendPost(post, index);
|
||||
}
|
||||
});
|
||||
|
||||
@ -472,312 +504,187 @@ export class Init {
|
||||
* @param {Number} i Index of post
|
||||
*/
|
||||
#assamblePost(c, i) {
|
||||
let avatar,
|
||||
user,
|
||||
userName,
|
||||
accountName,
|
||||
const isReblog = Boolean(c.reblog);
|
||||
const post = isReblog ? c.reblog : c;
|
||||
const {
|
||||
url,
|
||||
date,
|
||||
formattedDate,
|
||||
favoritesCount,
|
||||
reblogCount,
|
||||
repliesCount;
|
||||
|
||||
if (c.reblog) {
|
||||
// BOOSTED post
|
||||
// Post url
|
||||
url = c.reblog.url;
|
||||
|
||||
// Boosted avatar
|
||||
avatar =
|
||||
'<a href="' +
|
||||
c.reblog.account.url +
|
||||
'" class="mt-post-avatar" rel="nofollow noopener noreferrer" target="_blank">' +
|
||||
'<div class="mt-post-avatar-boosted">' +
|
||||
'<div class="mt-post-avatar-image-big mt-loading-spinner">' +
|
||||
'<img src="' +
|
||||
c.reblog.account.avatar +
|
||||
'" alt="' +
|
||||
this.#escapeHTML(c.reblog.account.username) +
|
||||
' avatar" loading="lazy" />' +
|
||||
"</div>" +
|
||||
'<div class="mt-post-avatar-image-small">' +
|
||||
'<img src="' +
|
||||
c.account.avatar +
|
||||
'" alt="' +
|
||||
this.#escapeHTML(c.account.username) +
|
||||
' avatar" loading="lazy" />' +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</a>";
|
||||
|
||||
// User name and url
|
||||
if (!this.mtSettings.hideEmojos && c.reblog.account.display_name) {
|
||||
userName = this.#shortcode2Emojos(
|
||||
c.reblog.account.display_name,
|
||||
c.reblog.account.emojis
|
||||
);
|
||||
} else {
|
||||
userName = c.reblog.account.display_name
|
||||
? c.reblog.account.display_name
|
||||
: c.reblog.account.username;
|
||||
}
|
||||
|
||||
if (!this.mtSettings.hideUserAccount) {
|
||||
accountName =
|
||||
'<br /><span class="mt-post-header-user-account">@' +
|
||||
c.reblog.account.username +
|
||||
"@" +
|
||||
new URL(c.reblog.account.url).hostname +
|
||||
"</span>";
|
||||
} else {
|
||||
accountName = "";
|
||||
}
|
||||
|
||||
user =
|
||||
'<div class="mt-post-header-user">' +
|
||||
'<a href="' +
|
||||
c.reblog.account.url +
|
||||
'" rel="nofollow noopener noreferrer" target="_blank"><bdi class="mt-post-header-user-name">' +
|
||||
userName +
|
||||
"</bdi>" +
|
||||
accountName +
|
||||
"</a>" +
|
||||
"</div>";
|
||||
|
||||
// Date
|
||||
date = c.reblog.created_at;
|
||||
|
||||
// Counter bar
|
||||
repliesCount = c.reblog.replies_count;
|
||||
reblogCount = c.reblog.reblogs_count;
|
||||
favoritesCount = c.reblog.favourites_count;
|
||||
} else {
|
||||
// STANDARD post
|
||||
// Post url
|
||||
url = c.url;
|
||||
created_at: date,
|
||||
replies_count,
|
||||
reblogs_count,
|
||||
favourites_count,
|
||||
} = post;
|
||||
const {
|
||||
avatar,
|
||||
url: accountUrl,
|
||||
username,
|
||||
display_name,
|
||||
emojis,
|
||||
} = post.account;
|
||||
|
||||
// Avatar
|
||||
avatar =
|
||||
const avatarHTML =
|
||||
'<a href="' +
|
||||
c.account.url +
|
||||
accountUrl +
|
||||
'" class="mt-post-avatar" rel="nofollow noopener noreferrer" target="_blank">' +
|
||||
'<div class="mt-post-avatar-standard">' +
|
||||
'<div class="mt-post-avatar-' +
|
||||
(isReblog ? "boosted" : "standard") +
|
||||
'">' +
|
||||
'<div class="mt-post-avatar-image-big mt-loading-spinner">' +
|
||||
'<img src="' +
|
||||
avatar +
|
||||
'" alt="' +
|
||||
this.#escapeHTML(username) +
|
||||
' avatar" loading="lazy" />' +
|
||||
"</div>" +
|
||||
(isReblog
|
||||
? '<div class="mt-post-avatar-image-small">' +
|
||||
'<img src="' +
|
||||
c.account.avatar +
|
||||
'" alt="' +
|
||||
this.#escapeHTML(c.account.username) +
|
||||
' avatar" loading="lazy" />' +
|
||||
"</div>" +
|
||||
"</div>"
|
||||
: "") +
|
||||
"</div>" +
|
||||
"</a>";
|
||||
|
||||
// User name and url
|
||||
if (!this.mtSettings.hideEmojos && c.account.display_name) {
|
||||
userName = this.#shortcode2Emojos(
|
||||
c.account.display_name,
|
||||
c.account.emojis
|
||||
);
|
||||
} else {
|
||||
userName = c.account.display_name
|
||||
? c.account.display_name
|
||||
: c.account.username;
|
||||
}
|
||||
// User
|
||||
const userNameFull =
|
||||
!this.mtSettings.hideEmojos && display_name
|
||||
? this.#shortcode2Emojos(display_name, emojis)
|
||||
: display_name || username;
|
||||
|
||||
if (!this.mtSettings.hideUserAccount) {
|
||||
accountName =
|
||||
'<br /><span class="mt-post-header-user-account">@' +
|
||||
c.account.username +
|
||||
const accountName = this.mtSettings.hideUserAccount
|
||||
? ""
|
||||
: '<br /><span class="mt-post-header-user-account">@' +
|
||||
username +
|
||||
"@" +
|
||||
new URL(c.account.url).hostname +
|
||||
new URL(accountUrl).hostname +
|
||||
"</span>";
|
||||
} else {
|
||||
accountName = "";
|
||||
}
|
||||
|
||||
user =
|
||||
const userHTML =
|
||||
'<div class="mt-post-header-user">' +
|
||||
'<a href="' +
|
||||
c.account.url +
|
||||
'" rel="nofollow noopener noreferrer" target="_blank"><bdi class="mt-post-header-user-name">' +
|
||||
userName +
|
||||
accountUrl +
|
||||
'" rel="nofollow noopener noreferrer" target="_blank">' +
|
||||
'<bdi class="mt-post-header-user-name">' +
|
||||
userNameFull +
|
||||
"</bdi>" +
|
||||
accountName +
|
||||
"</a>" +
|
||||
"</div>";
|
||||
|
||||
// Date
|
||||
date = c.created_at;
|
||||
|
||||
// Counter bar
|
||||
repliesCount = c.replies_count;
|
||||
reblogCount = c.reblogs_count;
|
||||
favoritesCount = c.favourites_count;
|
||||
}
|
||||
|
||||
// Date
|
||||
formattedDate = this.#formatDate(date);
|
||||
const timestamp = `
|
||||
<div class="mt-post-header-date">
|
||||
${
|
||||
c.pinned
|
||||
? '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" class="mt-post-pinned" aria-hidden="true"><path d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z"></path></svg>'
|
||||
: ""
|
||||
}
|
||||
<a href="${url}" rel="nofollow noopener noreferrer" target="_blank">
|
||||
<time datetime="${date}">
|
||||
${formattedDate}
|
||||
</time>
|
||||
${c.edited_at ? " *" : ""}
|
||||
</a>
|
||||
</div>`;
|
||||
|
||||
// Main text
|
||||
let content = "";
|
||||
if (this.mtSettings.txtMaxLines !== "0") {
|
||||
const txtCss =
|
||||
this.mtSettings.txtMaxLines.length !== 0 ? " truncate" : "";
|
||||
|
||||
if (c.spoiler_text !== "") {
|
||||
content =
|
||||
'<div class="mt-post-txt">' +
|
||||
this.#formatPostText(c.spoiler_text) +
|
||||
' <button type="button" class="mt-btn-dark mt-btn-spoiler-txt" aria-expanded="false">' +
|
||||
this.mtSettings.btnShowMore +
|
||||
"</button>" +
|
||||
'<div class="spoiler-txt-hidden">' +
|
||||
this.#formatPostText(c.content) +
|
||||
"</div>" +
|
||||
const formattedDate = this.#formatDate(date);
|
||||
const dateHTML =
|
||||
'<div class="mt-post-header-date">' +
|
||||
(c.pinned ? "<svg>...</svg>" : "") +
|
||||
'<a href="' +
|
||||
url +
|
||||
'" rel="nofollow noopener noreferrer" target="_blank">' +
|
||||
'<time datetime="' +
|
||||
date +
|
||||
'">' +
|
||||
formattedDate +
|
||||
"</time>" +
|
||||
(c.edited_at ? " *" : "") +
|
||||
"</a>" +
|
||||
"</div>";
|
||||
} else if (
|
||||
c.reblog &&
|
||||
c.reblog.content !== "" &&
|
||||
c.reblog.spoiler_text !== ""
|
||||
) {
|
||||
content =
|
||||
'<div class="mt-post-txt">' +
|
||||
this.#formatPostText(c.reblog.spoiler_text) +
|
||||
' <button type="button" class="mt-btn-dark mt-btn-spoiler-txt" aria-expanded="false">' +
|
||||
this.mtSettings.btnShowMore +
|
||||
"</button>" +
|
||||
'<div class="spoiler-txt-hidden">' +
|
||||
this.#formatPostText(c.reblog.content) +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
} else if (
|
||||
c.reblog &&
|
||||
c.reblog.content !== "" &&
|
||||
c.reblog.spoiler_text === ""
|
||||
) {
|
||||
content =
|
||||
|
||||
// Post text
|
||||
const txtTruncateCss =
|
||||
this.mtSettings.txtMaxLines !== "0" ? " truncate" : "";
|
||||
let postTxt = "";
|
||||
const textSource = post.spoiler_text ? post.spoiler_text : post.content;
|
||||
|
||||
if (textSource) {
|
||||
postTxt =
|
||||
'<div class="mt-post-txt' +
|
||||
txtCss +
|
||||
txtTruncateCss +
|
||||
'">' +
|
||||
'<div class="mt-post-txt-wrapper">' +
|
||||
this.#formatPostText(c.reblog.content) +
|
||||
this.#formatPostText(textSource) +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
} else {
|
||||
content =
|
||||
'<div class="mt-post-txt' +
|
||||
txtCss +
|
||||
'">' +
|
||||
'<div class="mt-post-txt-wrapper">' +
|
||||
this.#formatPostText(c.content) +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
}
|
||||
|
||||
// Media attachments
|
||||
let media = [];
|
||||
if (c.media_attachments.length > 0) {
|
||||
for (let i in c.media_attachments) {
|
||||
media.push(this.#createMedia(c.media_attachments[i], c.sensitive));
|
||||
}
|
||||
}
|
||||
if (c.reblog && c.reblog.media_attachments.length > 0) {
|
||||
for (let i in c.reblog.media_attachments) {
|
||||
media.push(
|
||||
this.#createMedia(c.reblog.media_attachments[i], c.reblog.sensitive)
|
||||
);
|
||||
}
|
||||
}
|
||||
media = `<div class="mt-post-media-wrapper">${media.join("")}</div>`;
|
||||
// Media
|
||||
const media = [
|
||||
...c.media_attachments,
|
||||
...(c.reblog?.media_attachments || []),
|
||||
]
|
||||
.map((attachment) => this.#createMedia(attachment, post.sensitive))
|
||||
.join("");
|
||||
|
||||
const mediaHTML = media
|
||||
? `<div class="mt-post-media-wrapper">${media}</div>`
|
||||
: "";
|
||||
|
||||
// Preview link
|
||||
let previewLink = "";
|
||||
if (!this.mtSettings.hidePreviewLink && c.card) {
|
||||
previewLink = this.#createPreviewLink(c.card);
|
||||
}
|
||||
const previewLinkHTML =
|
||||
!this.mtSettings.hidePreviewLink && c.card
|
||||
? this.#createPreviewLink(c.card)
|
||||
: "";
|
||||
|
||||
// Poll
|
||||
let poll = "";
|
||||
if (c.poll) {
|
||||
let pollOption = "";
|
||||
for (let i in c.poll.options) {
|
||||
pollOption += "<li>" + c.poll.options[i].title + "</li>";
|
||||
}
|
||||
poll =
|
||||
'<div class="mt-post-poll ' +
|
||||
const pollHTML = c.poll
|
||||
? '<div class="mt-post-poll ' +
|
||||
(c.poll.expired ? "mt-post-poll-expired" : "") +
|
||||
'">' +
|
||||
"<ul>" +
|
||||
pollOption +
|
||||
c.poll.options
|
||||
.map(function (opt) {
|
||||
return "<li>" + opt.title + "</li>";
|
||||
})
|
||||
.join("") +
|
||||
"</ul>" +
|
||||
"</div>";
|
||||
}
|
||||
"</div>"
|
||||
: "";
|
||||
|
||||
// Counter bar
|
||||
let counterBar = "";
|
||||
if (!this.mtSettings.hideCounterBar) {
|
||||
const repliesTag =
|
||||
'<div class="mt-post-counter-bar-replies">' +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="M774.913-185.869V-356q0-56.609-35.891-92.5-35.892-35.891-92.5-35.891H258.045L411.435-331l-56 56.566L105.869-524l249.566-249.566 56 56.566-153.39 153.391h388.477q88.957 0 148.566 59.609 59.608 59.609 59.608 148v170.131h-79.783Z"></path></svg>' +
|
||||
repliesCount +
|
||||
"</div>";
|
||||
const counterBarHTML = !this.mtSettings.hideCounterBar
|
||||
? '<div class="mt-post-counter-bar">' +
|
||||
this.#counteBarItem("replies", replies_count) +
|
||||
this.#counteBarItem("reblog", reblogs_count) +
|
||||
this.#counteBarItem("favorites", favourites_count) +
|
||||
"</div>"
|
||||
: "";
|
||||
|
||||
const reblogTag =
|
||||
'<div class="mt-post-counter-bar-reblog">' +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="M276.043-65.304 105.869-236.043l170.174-170.175 52.74 54.175-78.652 78.652h449.304v-160h75.261v235.261H250.131l78.652 78.087-52.74 54.74Zm-90.174-457.348v-235.261h524.565L631.782-836l52.74-54.74L854.696-720 684.522-549.26 631.782-604l78.652-78.652H261.13v160h-75.261Z"></path></svg>' +
|
||||
reblogCount +
|
||||
"</div>";
|
||||
|
||||
const favoritesTag =
|
||||
'<div class="mt-post-counter-bar-favorites">' +
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="m330.955-216.328 149.066-89 149.066 90.023-40.305-168.391 131.217-114.347-172.956-14.87L480-671.869l-67.043 158.521-172.956 14.305 131.427 113.796-40.473 168.919ZM212.086-50.608l70.652-305.305L45.52-561.305l312.645-26.579L480-876.176l121.835 288.292 312.645 26.579-237.218 205.392 71.217 305.306L480-213.173 212.086-50.607ZM480-433.87Z"></path></svg>' +
|
||||
favoritesCount +
|
||||
"</div>";
|
||||
|
||||
counterBar =
|
||||
'<div class="mt-post-counter-bar">' +
|
||||
repliesTag +
|
||||
reblogTag +
|
||||
favoritesTag +
|
||||
"</div>";
|
||||
}
|
||||
|
||||
// Put all elements together in the post container
|
||||
const post =
|
||||
return (
|
||||
'<article class="mt-post" aria-posinset="' +
|
||||
(i + 1) +
|
||||
'" data-location="' +
|
||||
url +
|
||||
'" tabindex="0">' +
|
||||
'<div class="mt-post-header">' +
|
||||
avatar +
|
||||
user +
|
||||
timestamp +
|
||||
avatarHTML +
|
||||
userHTML +
|
||||
dateHTML +
|
||||
"</div>" +
|
||||
content +
|
||||
media +
|
||||
previewLink +
|
||||
poll +
|
||||
counterBar +
|
||||
"</article>";
|
||||
postTxt +
|
||||
mediaHTML +
|
||||
previewLinkHTML +
|
||||
pollHTML +
|
||||
counterBarHTML +
|
||||
"</article>"
|
||||
);
|
||||
}
|
||||
|
||||
return post;
|
||||
/**
|
||||
* Build counter bar items
|
||||
* @param {string} t Type of icon
|
||||
* @param {Number} i Counter
|
||||
*/
|
||||
#counteBarItem(t, c) {
|
||||
const icons = {
|
||||
replies:
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="M774.913-185.869V-356q0-56.609-35.891-92.5-35.892-35.891-92.5-35.891H258.045L411.435-331l-56 56.566L105.869-524l249.566-249.566 56 56.566-153.39 153.391h388.477q88.957 0 148.566 59.609 59.608 59.609 59.608 148v170.131h-79.783Z"></path></svg>',
|
||||
reblog:
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="M276.043-65.304 105.869-236.043l170.174-170.175 52.74 54.175-78.652 78.652h449.304v-160h75.261v235.261H250.131l78.652 78.087-52.74 54.74Zm-90.174-457.348v-235.261h524.565L631.782-836l52.74-54.74L854.696-720 684.522-549.26 631.782-604l78.652-78.652H261.13v160h-75.261Z"></path></svg>',
|
||||
favorites:
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960" aria-hidden="true"><path d="m330.955-216.328 149.066-89 149.066 90.023-40.305-168.391 131.217-114.347-172.956-14.87L480-671.869l-67.043 158.521-172.956 14.305 131.427 113.796-40.473 168.919ZM212.086-50.608l70.652-305.305L45.52-561.305l312.645-26.579L480-876.176l121.835 288.292 312.645 26.579-237.218 205.392 71.217 305.306L480-213.173 212.086-50.607ZM480-433.87Z"></path></svg>',
|
||||
};
|
||||
return `<div class="mt-post-counter-bar-${t}">${icons[t]}${c}</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -983,8 +890,8 @@ export class Init {
|
||||
const originalDate = new Date(d);
|
||||
|
||||
const formattedDate = new Intl.DateTimeFormat(
|
||||
this.mtSettings.dateLocale,
|
||||
this.mtSettings.dateOptions
|
||||
this.mtSettings.dateFormatLocale,
|
||||
this.mtSettings.dateFormatOptions
|
||||
).format(originalDate);
|
||||
|
||||
return formattedDate;
|
||||
@ -1408,12 +1315,12 @@ export class Init {
|
||||
#createPreviewLink(c) {
|
||||
let previewDescription = "";
|
||||
if (this.mtSettings.previewMaxLines !== "0" && c.description) {
|
||||
const txtCss =
|
||||
const txtTruncateCss =
|
||||
this.mtSettings.previewMaxLines.length !== 0 ? " truncate" : "";
|
||||
|
||||
previewDescription =
|
||||
'<span class="mt-post-preview-description' +
|
||||
txtCss +
|
||||
txtTruncateCss +
|
||||
'">' +
|
||||
this.#parseHTMLstring(c.description) +
|
||||
"</span>";
|
||||
@ -1591,25 +1498,38 @@ export class Init {
|
||||
* @param {Event} e User interaction trigger
|
||||
*/
|
||||
#openPostUrl(e) {
|
||||
const urlPost = e.target.closest(".mt-post").dataset.location;
|
||||
const urlPost = e.target.closest(".mt-post")?.dataset.location;
|
||||
if (!urlPost) return;
|
||||
|
||||
const tagName = e.target.localName;
|
||||
if (
|
||||
e.target.localName !== "a" &&
|
||||
e.target.localName !== "span" &&
|
||||
e.target.localName !== "button" &&
|
||||
e.target.localName !== "bdi" &&
|
||||
e.target.localName !== "time" &&
|
||||
!e.target.classList.contains("mt-post-media-spoiler") &&
|
||||
e.target.className !== "mt-post-preview-noImage" &&
|
||||
e.target.parentNode.className !== "mt-post-avatar-image-big" &&
|
||||
e.target.parentNode.className !== "mt-post-avatar-image-small" &&
|
||||
e.target.parentNode.className !== "mt-post-header-user-name" &&
|
||||
e.target.parentNode.className !== "mt-post-preview-image" &&
|
||||
e.target.parentNode.className !== "mt-post-preview" &&
|
||||
urlPost
|
||||
) {
|
||||
tagName === "a" ||
|
||||
tagName === "span" ||
|
||||
tagName === "button" ||
|
||||
tagName === "bdi" ||
|
||||
tagName === "time"
|
||||
)
|
||||
return;
|
||||
|
||||
const targetClass = e.target.className;
|
||||
if (
|
||||
targetClass === "mt-post-media-spoiler" ||
|
||||
targetClass === "mt-post-preview-noImage"
|
||||
)
|
||||
return;
|
||||
|
||||
const parentClass = e.target.parentNode?.className;
|
||||
if (
|
||||
parentClass === "mt-post-avatar-image-big" ||
|
||||
parentClass === "mt-post-avatar-image-small" ||
|
||||
parentClass === "mt-post-header-user-name" ||
|
||||
parentClass === "mt-post-preview-image" ||
|
||||
parentClass === "mt-post-preview"
|
||||
)
|
||||
return;
|
||||
|
||||
window.open(urlPost, "_blank", "noopener");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add/Remove EventListeners for loading spinner
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user