add boosts and favourites count as a status line for each toot

README.md

@@ -14,7 +14,7 @@
 
 ## 設定
 
-1) 必要なファイルをダウンロードをして下さい(CSSファイルとJSファイルは1つずつ).
+1) 必要なファイルをダウンロードをして下さい(CSSファイルとJSファイル).
 
 2) 下記のコードをホームページに入れてください：
 
@@ -30,9 +30,12 @@
 			,instance_uri            : '[マストドンのインスタンスURL]'
 			,access_token            : '[アクセストークン]'
 			,account_id              : '[ユーザのアカウントID]'
-			// optional parameters
+			// === optional parameters ===
 			//,toots_limit           : 5
-			//,pic_icon        : '<i class="fa fa-picture-o"></i>' // http://fontawesome.io利用
+			// 下記のサンプルは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]    | 画像のアイコン |
+| 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` の設定もできます。
 
 ## カスタマイズ
 

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:
 
@@ -29,9 +29,12 @@ To help you create a token, we'll soon provide a page on our website that will g
 			,instance_uri            : '[MASTODON INSTANCE]'
 			,access_token            : '[ACCESS TOKEN]'
 			,account_id              : '[ACCOUNT ID]'
-			// optional parameters
+			// === optional parameters ===
 			//,toots_limit           : 5
-			//,pic_icon        : '<i class="fa fa-picture-o"></i>' // requires http://fontawesome.io
+			// 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 |
+| 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
 

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;
 }

mastodon.widget.js

@@ -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,6 +14,7 @@
  *    toots_limit     : max toots display count (default 20 like API)
  */
 
+/* constructor >>> */
 var MastodonApi = function(params_) {
 	
 	// endpoint access settings
@@ -22,6 +23,9 @@ var MastodonApi = function(params_) {
 	this.ACCOUNT_ID          = params_.account_id;
 	// optional parameters
 	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 */
+/* widget Attributes >>> */
-MastodonApi.build = 3;        // later for version comparisons if needed
+MastodonApi.build = 4;        // later for version comparisons if needed
-MastodonApi.version = "1.03"; // display
+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 );
+		// <<<
 	};