mirror of
https://github.com/nicolabs/mastodon-timeline-widget.git
synced 2026-02-22 18:45:49 +01:00
add boost display + fix federated content from gnusocial
This commit is contained in:
シモン
parent
eec852f7d0
commit
389ecae923
|
|
@ -63,8 +63,8 @@
|
|||
|--- |--- |--- |
|
||||
| toots_limit | 20 | 最大トゥーツ表示数 |
|
||||
| pic_icon | [picture] | 画像のアイコン |
|
||||
| boosts_count_icon | [boosts] | ブースト数のステータスタイトル|
|
||||
| favourites_count_icon | [favourites] | お気に入り数のステータスタイトル|
|
||||
| boosts_count_icon | [boost] | ブースト数のステータスタイトル|
|
||||
| favourites_count_icon | [favourite] | お気に入り数のステータスタイトル|
|
||||
|
||||
`pic_icon` の場合は、`<img src="mypicicon.gif" />` のような設定ができます。
|
||||
[font-awesome](http://fontawesome.io)をご利用の方は`<i class="fa fa-picture-o"></i>` を設定もできます。
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ The parameters below are optional.
|
|||
|--- |---- |--- |
|
||||
| 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 |
|
||||
| boosts_count_icon | [boost] | boosts count status header entry |
|
||||
| favourites_count_icon | [favourite] | 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>`.
|
||||
|
|
|
|||
|
|
@ -103,6 +103,18 @@
|
|||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.mt-avatar-boosted {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mt-avatar-booster {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.mt-error {
|
||||
color: darkred;
|
||||
background: lightpink;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* see license file for details.
|
||||
*
|
||||
* @author Azet <http://www.azet.jp>
|
||||
* @version 1.06 (also update MastodonAPI.version below)
|
||||
* @version 1.07 (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)
|
||||
|
|
@ -24,8 +24,8 @@ var MastodonApi = function(params_) {
|
|||
// 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]';
|
||||
this.boostsCountIcon = params_.boosts_count_icon || '[Boost]';
|
||||
this.favouritesCountIcon = params_.favourites_count_icon || '[Favourite]';
|
||||
|
||||
// display target element
|
||||
this.widget = $(params_.target_selector);
|
||||
|
|
@ -121,8 +121,8 @@ var MastodonApi = function(params_) {
|
|||
|
||||
|
||||
/* widget Attributes >>> */
|
||||
MastodonApi.build = 6; // later for version comparisons if needed
|
||||
MastodonApi.version = "1.06"; // display
|
||||
MastodonApi.build = 7; // later for version comparisons if needed
|
||||
MastodonApi.version = "1.07"; // display
|
||||
/* <<< */
|
||||
|
||||
|
||||
|
|
@ -223,6 +223,7 @@ MastodonApi.prototype.listStatuses = function() {
|
|||
var appendStatus = function(status_) {
|
||||
//console.log( status_ );
|
||||
var content;
|
||||
var date, url, avatar, user;
|
||||
|
||||
// dealing with spoiler content
|
||||
if(status_.spoiler_text != "") {
|
||||
|
|
@ -230,44 +231,76 @@ MastodonApi.prototype.listStatuses = function() {
|
|||
//content.wrap('<div class="spoiler"></div>');
|
||||
content = $(
|
||||
'<div class="spoiler-header">'+status_.spoiler_text+'<a class="btn-spoiler" href="#open-spoiler">'+MastodonApi.text.spoilerBtnClosed+'</a></div>'+
|
||||
'<div class="spoiler-body">'+status_.content+'</div>' +
|
||||
'<div class="spoiler-body toot-text">'+status_.content+'</div>' +
|
||||
'<div class="toot-medias"></div>'
|
||||
);
|
||||
}
|
||||
else {
|
||||
content = $(status_.content +
|
||||
'<div class="toot-medias"></div>'
|
||||
);
|
||||
content = $("<div class='toot-text'>" + status_.content + "</div>" + "<div class='toot-medias'></div>");
|
||||
}
|
||||
|
||||
var date = prepareDateDisplay(status_.created_at);
|
||||
var timestamp = $("<div class='mt-date'><a href='"+status_.url+"'>" + date + "</a></div>");
|
||||
if(status_.reblog) {
|
||||
// data from BOOSTED status
|
||||
|
||||
// toot date
|
||||
date = prepareDateDisplay(status_.reblog.created_at);
|
||||
|
||||
// toot url
|
||||
url = status_.reblog.url;
|
||||
|
||||
// boosted avatar
|
||||
avatar = $("<div class='mt-avatar mt-avatar-boosted'></div>");
|
||||
avatar.css(makeAvatarCss(status_.reblog.account.avatar));
|
||||
|
||||
// booster avatar
|
||||
var boosterAvatar = $("<div class='mt-avatar mt-avatar-booster'></div>");
|
||||
boosterAvatar.css(makeAvatarCss(status_.account.avatar));
|
||||
avatar.append(boosterAvatar);
|
||||
|
||||
// user name and url
|
||||
user = $("<div class='mt-user'><a href='"+status_.reblog.account.url+"'>"+status_.reblog.account.username+"</a></div>");
|
||||
}
|
||||
else {
|
||||
// data from status
|
||||
|
||||
// toot date
|
||||
date = prepareDateDisplay(status_.created_at);
|
||||
|
||||
// toot url
|
||||
url = status_.url;
|
||||
|
||||
// avatar
|
||||
avatar = $("<div class='mt-avatar'></div>");
|
||||
avatar.css(makeAvatarCss(status_.account.avatar));
|
||||
|
||||
// user name and url
|
||||
user = $("<div class='mt-user'><a href='"+status_.account.url+"'>"+status_.account.username+"</a></div>");
|
||||
}
|
||||
|
||||
// format date
|
||||
var timestamp = $("<div class='mt-date'><a href='"+url+"'>" + date + "</a></div>");
|
||||
|
||||
// sensitive content
|
||||
if(status_.sensitive) {
|
||||
timestamp.prepend('<span class="nsfw">' + MastodonApi.text.nsfwLabel + '</span>');
|
||||
}
|
||||
|
||||
|
||||
// status container
|
||||
var toot = $("<div class='mt-toot'></div>");
|
||||
// avatar
|
||||
var avatar = $("<div class='mt-avatar'></div>");
|
||||
avatar.css({
|
||||
'background' : "white url('"+status_.account.avatar+"') 50% 50% no-repeat"
|
||||
,'background-size' : 'contain'
|
||||
});
|
||||
// user name and url
|
||||
var user = $("<div class='mt-user'><a href='"+status_.account.url+"'>"+status_.account.username+"</a></div>");
|
||||
|
||||
// add to HTML
|
||||
|
||||
if(status_.reblog) {
|
||||
toot.append("<div class='toot-retoot'>"+ this.boostsCountIcon +"</div>");
|
||||
}
|
||||
|
||||
toot.append( avatar );
|
||||
toot.append( user );
|
||||
toot.append( timestamp );
|
||||
toot.append( content );
|
||||
$('.mt-body', this.widget).append(toot);
|
||||
|
||||
// media attachmets? >>>
|
||||
// media attachments? >>>
|
||||
if(status_.media_attachments.length>0) {
|
||||
var pic;
|
||||
for(var picid in status_.media_attachments) {
|
||||
|
|
@ -316,6 +349,19 @@ MastodonApi.prototype.listStatuses = function() {
|
|||
return displayTime;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* simple method that sets CSS attributes for the avatar
|
||||
* @param string avatar_ url of the avatar picture to apply
|
||||
* @return object css properties to apply with jQuery.css method
|
||||
*/
|
||||
var makeAvatarCss = function(avatar_) {
|
||||
return {
|
||||
'background' : "white url('"+avatar_+"') 50% 50% no-repeat"
|
||||
,'background-size' : 'contain'
|
||||
};
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue