mirror of
https://github.com/nicolabs/mastodon-timeline-widget.git
synced 2026-04-10 07:56:02 +02:00
add boosts and favourites count as a status line for each toot
This commit is contained in:
シモン
parent
9bfcf85446
commit
cfb2089fbf
32
README.md
32
README.md
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
## 設定
|
||||
|
||||
1) 必要なファイルをダウンロードをして下さい(CSSファイルとJSファイルは1つずつ).
|
||||
1) 必要なファイルをダウンロードをして下さい(CSSファイルとJSファイル).
|
||||
|
||||
2) 下記のコードをホームページに入れてください：
|
||||
|
||||
|
|
@ -26,13 +26,16 @@
|
|||
$(document).ready(function() {
|
||||
// jQUERY is required!
|
||||
var mapi = new MastodonApi({
|
||||
target_selector : '#myTimeline'
|
||||
,instance_uri : '[マストドンのインスタンスURL]'
|
||||
,access_token : '[アクセストークン]'
|
||||
,account_id : '[ユーザのアカウントID]'
|
||||
// optional parameters
|
||||
//,toots_limit : 5
|
||||
//,pic_icon : '<i class="fa fa-picture-o"></i>' // http://fontawesome.io利用
|
||||
target_selector : '#myTimeline'
|
||||
,instance_uri : '[マストドンのインスタンスURL]'
|
||||
,access_token : '[アクセストークン]'
|
||||
,account_id : '[ユーザのアカウントID]'
|
||||
// === optional parameters ===
|
||||
//,toots_limit : 5
|
||||
// 下記のサンプルはhttp://fontawesome.io使用
|
||||
//,pic_icon : '<i class="fa fa-picture-o"></i>'
|
||||
//,boosts_count_icon : '<i class="fa fa-retweet"></i>'
|
||||
//,favourites_count_icon : '<i class="fa fa-star"></i>'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -50,17 +53,22 @@
|
|||
<div id="myTimeline" class="mastodon-timeline mastodon-timeline-dark"></div>
|
||||
```
|
||||
|
||||
`mastodon-timeline-dark` の代わりに、 `mastodon-timeline-light` のテーマも用意しております。
|
||||
|
||||
### パラメータ一覧
|
||||
|
||||
下記のパラメータが任意です。
|
||||
|
||||
| パラメータ名 | 規定 | 説明 |
|
||||
|--------------|-----------|---|
|
||||
| toots_limit | 20 | 最大トゥーツ表示数 |
|
||||
| pic_icon | [picture] | 画像のアイコン |
|
||||
| パラメータ名 | 規定 | 説明 |
|
||||
|--- |--- |--- |
|
||||
| toots_limit | 20 | 最大トゥーツ表示数 |
|
||||
| pic_icon | [picture] | 画像のアイコン |
|
||||
| boosts_count_icon | [boosts] | ブースト数のステータスタイトル|
|
||||
| favourites_count_icon | [favourites] | お気に入り数のステータスタイトル|
|
||||
|
||||
`pic_icon` の場合は、`<img src="mypicicon.gif" />` のような設定ができます。
|
||||
[font-awesome](http://fontawesome.io)をご利用の方は`<i class="fa fa-picture-o"></i>` を設定もできます。
|
||||
同じく、 `boosts_count_icon` と `favourites_count_icon` の設定もできます。
|
||||
|
||||
## カスタマイズ
|
||||
|
||||
|
|
|
|||
32
README_en.md
32
README_en.md
|
|
@ -14,7 +14,7 @@ To help you create a token, we'll soon provide a page on our website that will g
|
|||
|
||||
## Installation
|
||||
|
||||
1) Download the required files (only one JS and one CSS).
|
||||
1) Download the required files (JS and CSS files in the archive).
|
||||
|
||||
2) Simply paste the code bellow in you website:
|
||||
|
||||
|
|
@ -25,13 +25,16 @@ To help you create a token, we'll soon provide a page on our website that will g
|
|||
$(document).ready(function() {
|
||||
// jQUERY is required!
|
||||
var mapi = new MastodonApi({
|
||||
target_selector : '#myTimeline'
|
||||
,instance_uri : '[MASTODON INSTANCE]'
|
||||
,access_token : '[ACCESS TOKEN]'
|
||||
,account_id : '[ACCOUNT ID]'
|
||||
// optional parameters
|
||||
//,toots_limit : 5
|
||||
//,pic_icon : '<i class="fa fa-picture-o"></i>' // requires http://fontawesome.io
|
||||
target_selector : '#myTimeline'
|
||||
,instance_uri : '[MASTODON INSTANCE]'
|
||||
,access_token : '[ACCESS TOKEN]'
|
||||
,account_id : '[ACCOUNT ID]'
|
||||
// === optional parameters ===
|
||||
//,toots_limit : 5
|
||||
// samples below require http://fontawesome.io
|
||||
//,pic_icon : '<i class="fa fa-picture-o"></i>'
|
||||
//,boosts_count_icon : '<i class="fa fa-retweet"></i>'
|
||||
//,favourites_count_icon : '<i class="fa fa-star"></i>'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -49,17 +52,22 @@ In the sample above, you have to replace the folowing:
|
|||
<div id="myTimeline" class="mastodon-timeline mastodon-timeline-dark"></div>
|
||||
```
|
||||
|
||||
Instead of the theme `mastodon-timeline-dark`, we provide a light theme `mastodon-timeline-light` as well.
|
||||
|
||||
### Available parameters
|
||||
|
||||
The parameters below are optional.
|
||||
|
||||
| Parameter name | Default | Explanation |
|
||||
|----------------|-----------|-------------|
|
||||
| toots_limit | 20 | maximum number of visible toots |
|
||||
| pic_icon | [picture] | icon to be displayed when medias are attached |
|
||||
| Parameter name | Default | Explanation |
|
||||
|--- |---- |--- |
|
||||
| toots_limit | 20 | maximum number of visible toots |
|
||||
| pic_icon | [picture] | icon to be displayed when medias are attached |
|
||||
| boosts_count_icon | [boosts] | boosts count status header entry |
|
||||
| favourites_count_icon | [favourites] | favourites count status header entry |
|
||||
|
||||
Regarding `pic_icon`, you can use an image you have on your server like so: `<img src="mypicicon.gif" />`.
|
||||
Or you can also use [font-awesome](http://fontawesome.io) and set `<i class="fa fa-picture-o"></i>`.
|
||||
Same goes for `boosts_count_icon` and `favourites_count_icon`.
|
||||
|
||||
## Customization
|
||||
|
||||
|
|
|
|||
|
|
@ -143,6 +143,20 @@ a.btn-spoiler {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* toots status === */
|
||||
.toot-status {
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.toot-status .toot-status-boosts,
|
||||
.toot-status .toot-status-favourites {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* <<< */
|
||||
|
||||
/* light theme >>> */
|
||||
|
|
@ -171,8 +185,9 @@ a.btn-spoiler {
|
|||
border-top-color: lightgrey;
|
||||
}
|
||||
|
||||
.mastodon-timeline-light .toot-status,
|
||||
.mastodon-timeline-light .mt-date a {
|
||||
color: lightgrey;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* spoiler === */
|
||||
|
|
@ -208,6 +223,7 @@ a.btn-spoiler {
|
|||
border-top-color: #606984;
|
||||
}
|
||||
|
||||
.mastodon-timeline-dark .toot-status,
|
||||
.mastodon-timeline-dark .mt-date a {
|
||||
color: #606984;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* see license file for details.
|
||||
*
|
||||
* @author Azet <http://www.azet.jp>
|
||||
* @version 1.03 (also update MastodonAPI.version below)
|
||||
* @version 1.04 (also update MastodonAPI.version below)
|
||||
* @param object params_
|
||||
* instance_uri : the instance to fetch messages from
|
||||
* access_token : widget's application access token (can be generated from http://www.azet.jp/mastodon.wizard/wizard_en.html)
|
||||
|
|
@ -14,14 +14,18 @@
|
|||
* toots_limit : max toots display count (default 20 like API)
|
||||
*/
|
||||
|
||||
/* constructor >>> */
|
||||
var MastodonApi = function(params_) {
|
||||
|
||||
// endpoint access settings
|
||||
this.INSTANCE_URI = params_.instance_uri;
|
||||
this.ACCESS_TOKEN = params_.access_token;
|
||||
this.ACCOUNT_ID = params_.account_id;
|
||||
this.INSTANCE_URI = params_.instance_uri;
|
||||
this.ACCESS_TOKEN = params_.access_token;
|
||||
this.ACCOUNT_ID = params_.account_id;
|
||||
// optional parameters
|
||||
this.toots_limit = params_.toots_limit || 20;
|
||||
this.toots_limit = params_.toots_limit || 20;
|
||||
this.picIcon = params_.pic_icon || '[PICTURE]';
|
||||
this.boostsCountIcon = params_.boosts_count_icon || '[Boosts]';
|
||||
this.favouritesCountIcon = params_.favourites_count_icon || '[Favourites]';
|
||||
|
||||
// display target element
|
||||
this.widget = $(params_.target_selector);
|
||||
|
|
@ -30,10 +34,6 @@ var MastodonApi = function(params_) {
|
|||
this.makeWidget();
|
||||
this.listStatuses();
|
||||
|
||||
this.picIcon = params_.pic_icon || '[PICTURE]';
|
||||
|
||||
var mapi = this;
|
||||
|
||||
// spoiler toggle
|
||||
// jQuery event handler
|
||||
var toggleSpoiler = function(e_) {
|
||||
|
|
@ -87,19 +87,23 @@ var MastodonApi = function(params_) {
|
|||
// hidden media display toggle
|
||||
this.widget.on('click', '.toot-media-nsfw', toggleNsfwMedia);
|
||||
}
|
||||
/* <<< end constructor */
|
||||
|
||||
|
||||
/* widget Attributes */
|
||||
MastodonApi.build = 3; // later for version comparisons if needed
|
||||
MastodonApi.version = "1.03"; // display
|
||||
/* widget Attributes >>> */
|
||||
MastodonApi.build = 4; // later for version comparisons if needed
|
||||
MastodonApi.version = "1.04"; // display
|
||||
/* <<< */
|
||||
|
||||
/* texts */
|
||||
|
||||
/* texts >>> */
|
||||
MastodonApi.text = {
|
||||
spoilerBtnClosed : "Show more"
|
||||
,spoilerBtnOpened : "Show less"
|
||||
,nsfwLabel : "NSFW"
|
||||
,nsfwViewMsg : "Click to view"
|
||||
};
|
||||
/* <<< */
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -242,6 +246,20 @@ MastodonApi.prototype.listStatuses = function() {
|
|||
}
|
||||
}
|
||||
// <<<
|
||||
|
||||
// stats (boosts + favourites counts) >>>
|
||||
// data
|
||||
var boostsCountIcon = '<span class="toot-status-boosts">' + this.boostsCountIcon +":"+ status_.reblogs_count + '</span>';
|
||||
var favouritesCountIcon = '<span class="toot-status-favourites">' + this.favouritesCountIcon +":"+ status_.favourites_count + '</span>';
|
||||
|
||||
// html nodes
|
||||
var statusBar = $('<div class="toot-status">' +
|
||||
boostsCountIcon +
|
||||
favouritesCountIcon +
|
||||
'</div>');
|
||||
|
||||
toot.append( statusBar );
|
||||
// <<<
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue