diff --git a/README.md b/README.md
index 54b9737..b50a3b1 100644
--- a/README.md
+++ b/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 : '' // http://fontawesome.io利用
+ target_selector : '#myTimeline'
+ ,instance_uri : '[マストドンのインスタンスURL]'
+ ,access_token : '[アクセストークン]'
+ ,account_id : '[ユーザのアカウントID]'
+ // === optional parameters ===
+ //,toots_limit : 5
+ // 下記のサンプルはhttp://fontawesome.io使用
+ //,pic_icon : ''
+ //,boosts_count_icon : ''
+ //,favourites_count_icon : ''
});
});
@@ -50,17 +53,22 @@
```
+`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` の場合は、`
` のような設定ができます。
-[font-awesome](http://fontawesome.io)をご利用の方は`` を設定もできます。
+[font-awesome](http://fontawesome.io)をご利用の方は`` を設定もできます。
+同じく、 `boosts_count_icon` と `favourites_count_icon` の設定もできます。
## カスタマイズ
diff --git a/README_en.md b/README_en.md
index df81095..6db1082 100644
--- a/README_en.md
+++ b/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 : '' // 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 : ''
+ //,boosts_count_icon : ''
+ //,favourites_count_icon : ''
});
});
@@ -49,17 +52,22 @@ In the sample above, you have to replace the folowing:
```
+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: ``.
-Or you can also use [font-awesome](http://fontawesome.io) and set ``.
+Or you can also use [font-awesome](http://fontawesome.io) and set ``.
+Same goes for `boosts_count_icon` and `favourites_count_icon`.
## Customization
diff --git a/mastodon.widget.css b/mastodon.widget.css
index 60452f6..40aa382 100644
--- a/mastodon.widget.css
+++ b/mastodon.widget.css
@@ -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;
}
diff --git a/mastodon.widget.js b/mastodon.widget.js
index 5efebc7..7fcd3bb 100644
--- a/mastodon.widget.js
+++ b/mastodon.widget.js
@@ -5,7 +5,7 @@
* see license file for details.
*
* @author Azet
- * @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 = '' + this.boostsCountIcon +":"+ status_.reblogs_count + '';
+ var favouritesCountIcon = '' + this.favouritesCountIcon +":"+ status_.favourites_count + '';
+
+ // html nodes
+ var statusBar = $('' +
+ boostsCountIcon +
+ favouritesCountIcon +
+ '
');
+
+ toot.append( statusBar );
+ // <<<
};