1
0
Fork 0
mirror of https://github.com/Oreolek/kurotodon.git synced 2024-05-30 23:08:12 +03:00

2017/06/07 v0.1.6

・TLのタイトルアイコンにカーソルを乗せたときに、アクティブユーザー数(=TL上に出てきたユーザー数)を表示するようにした
・「インスタンスを覗く」をツールバーのボタンから開けるようにした
This commit is contained in:
oken1 2017-06-07 16:22:42 +09:00
parent db9cab93ce
commit 13d09e3fd1
16 changed files with 151 additions and 95 deletions

View file

@ -47,6 +47,18 @@
"message": "statuses"
},
"i18n_0012": {
"message": "Active"
},
"i18n_0013": {
"message": "Users"
},
"i18n_0014": {
"message": "Instance information"
},
"i18n_0029": {
"message": "Now Browsing"
},

View file

@ -47,6 +47,18 @@
"message": "トゥート数"
},
"i18n_0012": {
"message": "アクティブ"
},
"i18n_0013": {
"message": "人"
},
"i18n_0014": {
"message": "インスタンス情報"
},
"i18n_0029": {
"message": "Now Browsing"
},

View file

@ -8,6 +8,19 @@ div.contents.timeline .lines {
height: 100%;
}
/* インスタンス情報 */
div.contents.timeline .lines .panel_btns .instance_info_window {
display: none;
position: absolute;
z-index: 8900;
border: 1px solid #101010;
box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.5 );
background: #2e2e2e;
overflow-x: hidden;
overflow-y: auto;
padding: 4px;
}
/* Streaming Control */
div.contents.timeline .lines .panel_btns .streamctl {
text-align: right;

Binary file not shown.

View file

@ -42,7 +42,9 @@
<glyph unicode="&#xe902;" glyph-name="bubbles2" horiz-adv-x="1152" d="M480 960v0c265.096 0 480-173.914 480-388.448s-214.904-388.448-480-388.448c-25.458 0-50.446 1.62-74.834 4.71-103.106-102.694-222.172-121.108-341.166-123.814v25.134c64.252 31.354 116 88.466 116 153.734 0 9.106-0.712 18.048-2.030 26.794-108.558 71.214-177.97 179.988-177.97 301.89 0 214.534 214.904 388.448 480 388.448zM996 89.314c0-55.942 36.314-104.898 92-131.772v-21.542c-103.126 2.318-197.786 18.102-287.142 106.126-21.14-2.65-42.794-4.040-64.858-4.040-95.47 0-183.408 25.758-253.614 69.040 144.674 0.506 281.26 46.854 384.834 130.672 52.208 42.252 93.394 91.826 122.414 147.348 30.766 58.866 46.366 121.582 46.366 186.406 0 10.448-0.45 20.836-1.258 31.168 72.57-59.934 117.258-141.622 117.258-231.676 0-104.488-60.158-197.722-154.24-258.764-1.142-7.496-1.76-15.16-1.76-22.966z" />
<glyph unicode="&#xe990;" glyph-name="unlocked" d="M768 896c105.87 0 192-86.13 192-192v-192h-128v192c0 35.29-28.71 64-64 64h-128c-35.29 0-64-28.71-64-64v-192h16c26.4 0 48-21.6 48-48v-480c0-26.4-21.6-48-48-48h-544c-26.4 0-48 21.6-48 48v480c0 26.4 21.6 48 48 48h400v192c0 105.87 86.13 192 192 192h128z" />
<glyph unicode="&#xe9ad;" glyph-name="bin2" d="M192-64h640l64 704h-768zM640 832v128h-256v-128h-320v-192l64 64h768l64-64v192h-320zM576 832h-128v64h128v-64z" />
<glyph unicode="&#xe9ce;" glyph-name="eye" d="M512 768c-223.318 0-416.882-130.042-512-320 95.118-189.958 288.682-320 512-320 223.312 0 416.876 130.042 512 320-95.116 189.958-288.688 320-512 320zM764.45 598.296c60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-89.56 0-176.858 25.486-252.452 73.704-60.158 38.372-111.138 89.772-149.432 150.296 38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.86 7.3-9.96-27.328-15.41-56.822-15.41-87.596 0-141.382 114.616-256 256-256 141.382 0 256 114.618 256 256 0 30.774-5.452 60.268-15.408 87.598 3.978-2.378 7.938-4.802 11.858-7.302v0zM512 544c0-53.020-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.982 96-96z" />
<glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
<glyph unicode="&#xea0c;" glyph-name="info" d="M448 656c0 26.4 21.6 48 48 48h32c26.4 0 48-21.6 48-48v-32c0-26.4-21.6-48-48-48h-32c-26.4 0-48 21.6-48 48v32zM640 192h-256v64h64v192h-64v64h192v-256h64zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416z" />
<glyph unicode="&#xea1d;" glyph-name="pause2" d="M128 832h320v-768h-320zM576 832h320v-768h-320z" />
<glyph unicode="&#xea2a;" glyph-name="volume-mute2" d="M960 340.852v-84.852h-84.852l-107.148 107.148-107.148-107.148h-84.852v84.852l107.148 107.148-107.148 107.148v84.852h84.852l107.148-107.148 107.148 107.148h84.852v-84.852l-107.148-107.148 107.148-107.148zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
<glyph unicode="&#xf007;" glyph-name="user" horiz-adv-x="731" d="M731.429 151.428c0-83.429-54.857-151.429-121.714-151.429h-488c-66.857 0-121.714 68-121.714 151.429 0 150.286 37.143 324 186.857 324 46.286-45.143 109.143-73.143 178.857-73.143s132.571 28 178.857 73.143c149.714 0 186.857-173.714 186.857-324zM585.143 658.286c0-121.143-98.286-219.429-219.429-219.429s-219.429 98.286-219.429 219.429 98.286 219.429 219.429 219.429 219.429-98.286 219.429-219.429z" />

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Binary file not shown.

View file

@ -1,10 +1,10 @@
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?l9jv1r');
src: url('fonts/icomoon.eot?l9jv1r#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?l9jv1r') format('truetype'),
url('fonts/icomoon.woff?l9jv1r') format('woff'),
url('fonts/icomoon.svg?l9jv1r#icomoon') format('svg');
src: url('fonts/icomoon.eot?t6nu8t');
src: url('fonts/icomoon.eot?t6nu8t#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?t6nu8t') format('truetype'),
url('fonts/icomoon.woff?t6nu8t') format('woff'),
url('fonts/icomoon.svg?t6nu8t#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
@ -75,9 +75,15 @@
.icon-bin2:before {
content: "\e9ad";
}
.icon-eye:before {
content: "\e9ce";
}
.icon-eye-blocked:before {
content: "\e9d1";
}
.icon-info:before {
content: "\ea0c";
}
.icon-pause2:before {
content: "\ea1d";
}

View file

@ -71,7 +71,6 @@ Contents.image = function( cp )
{
nw = g_defwidth * 1.5;
nh = g_defwidth * 1.5 * 0.75;
console.log( nw + 'x' + nh );
}
setTimeout( function() { Loading( false, 'image_load' ); }, 0 );

View file

@ -8,7 +8,7 @@ Contents.peep = function( cp )
var p = $( '#' + cp.id );
var cont = p.find( 'div.contents' );
cp.SetIcon( 'icon-search' );
cp.SetIcon( 'icon-eye' );
////////////////////////////////////////////////////////////
// 開始処理

View file

@ -13,25 +13,13 @@ Contents.peeptimeline = function( cp )
var newitems = $();
var tm = null;
var status_ids = {};
var status_cnt = 0;
var first_status_id = null;
var last_status_id = null;
var scrollPos = null;
var scrollHeight = null;
var cursor_on_option = false;
////////////////////////////////////////////////////////////
// 読み込み済みステータスID数を取得
////////////////////////////////////////////////////////////
var StatusIDCount = function() {
var cnt = 0;
for ( var id in status_ids )
{
cnt++;
}
return cnt;
}
var active_users = {};
////////////////////////////////////////////////////////////
// 一覧作成
@ -58,12 +46,14 @@ Contents.peeptimeline = function( cp )
// 初期
case 'init':
status_ids = {};
status_cnt = 0;
break;
// 更新
case 'reload':
status_ids = {};
status_cnt = 0;
break;
// 新着
case 'new':
@ -72,6 +62,7 @@ Contents.peeptimeline = function( cp )
// 一度も読み込んでいない場合は、初期として扱う
type = 'init';
status_ids = {};
status_cnt = 0;
}
else
{
@ -116,6 +107,10 @@ Contents.peeptimeline = function( cp )
s += MakePeepTimeline( res[i], cp );
status_ids[res[i].id + '@' + instance] = true;
status_cnt++;
active_users[res[i].account.id + '@' + instance] = true;
addcnt++;
}
}
@ -198,13 +193,12 @@ Contents.peeptimeline = function( cp )
timeline_list.trigger( 'scroll' );
// "表示最大数を超えている件数
var itemcnt = StatusIDCount();
if ( itemcnt - cp.param['max_count'] > 0 )
if ( status_cnt - cp.param['max_count'] > 0 )
{
// 新着で読み込んだ分だけ削除
timeline_list.find( '> div.item:gt(' + ( itemcnt - addcnt - 1 ) + ')' ).each( function() {
timeline_list.find( '> div.item:gt(' + ( status_cnt - addcnt - 1 ) + ')' ).each( function() {
delete status_ids[$( this ).attr( 'status_id' ) + '@' + $( this ).attr( 'instance' )];
status_cnt--;
$( this ).remove();
} );
@ -325,8 +319,8 @@ Contents.peeptimeline = function( cp )
} ).done( function( data ) {
var _j = $( data );
lines.find( '.aboutmore .users' ).html( _j.find( '.information-board > .section:eq(0) > strong' ).text() );
lines.find( '.aboutmore .statuses' ).html( _j.find( '.information-board > .section:eq(1) > strong' ).text() );
lines.find( '.instance_info_window .users' ).html( _j.find( '.information-board > .section:eq(0) > strong' ).text() );
lines.find( '.instance_info_window .statuses' ).html( _j.find( '.information-board > .section:eq(1) > strong' ).text() );
} );
// タイムラインを表示
@ -372,9 +366,7 @@ Contents.peeptimeline = function( cp )
var spd;
var unit = i18nGetMessage( 'i18n_0270' );
var itemcnt = StatusIDCount();
if ( itemcnt < 1 )
if ( status_cnt < 1 )
{
spd = '--';
unit = '--';
@ -384,7 +376,7 @@ Contents.peeptimeline = function( cp )
var firstdate = new Date();
var lastdate = Date.parse( timeline_list.find( '> div.item:last' ).attr( 'created_at' ).replace( '+', 'GMT+' ) );
spd = itemcnt / ( firstdate - lastdate ) * 1000;
spd = status_cnt / ( firstdate - lastdate ) * 1000;
if ( spd < 0 )
{
@ -418,7 +410,10 @@ Contents.peeptimeline = function( cp )
}
}
$( this ).attr( 'tooltip', i18nGetMessage( 'i18n_0037' ) + ': ' + spd + '/' + unit );
var s = i18nGetMessage( 'i18n_0037' ) + ': ' + spd + '/' + unit;
s += ' ' + i18nGetMessage( 'i18n_0012' ) + ': ' + Object.keys( active_users ).length + i18nGetMessage( 'i18n_0013' );
$( this ).attr( 'tooltip', s );
} );
////////////////////////////////////////
@ -445,6 +440,13 @@ Contents.peeptimeline = function( cp )
ListMake( cp.param['get_count'], 'reload' );
} );
////////////////////////////////////////
// インスタンス情報ボタンクリック
////////////////////////////////////////
lines.find( '.panel_btns' ).find( '.instance_info' ).click( function() {
lines.find( '.instance_info_window' ).toggle();
} );
////////////////////////////////////////
// 一番上へ
////////////////////////////////////////

View file

@ -15,27 +15,15 @@ Contents.timeline = function( cp )
var newitems = $();
var tm = null;
var status_ids = {};
var status_cnt = 0;
var first_status_id = null;
var last_status_id = null;
var scrollPos = null;
var scrollHeight = null;
var cursor_on_option = false;
var socket = null;
////////////////////////////////////////////////////////////
// 読み込み済みステータスID数を取得
////////////////////////////////////////////////////////////
var StatusIDCount = function() {
var cnt = 0;
for ( var id in status_ids )
{
cnt++;
}
return cnt;
}
var active_users = {};
///////////////////////////////////////////////////////////////////
// ツールバーユーザーの情報を最新に更新
///////////////////////////////////////////////////////////////////
@ -212,12 +200,14 @@ Contents.timeline = function( cp )
// 初期
case 'init':
status_ids = {};
status_cnt = 0;
break;
// 更新
case 'reload':
status_ids = {};
status_cnt = 0;
break;
// 新着
case 'new':
@ -226,6 +216,7 @@ Contents.timeline = function( cp )
// 一度も読み込んでいない場合は、初期として扱う
type = 'init';
status_ids = {};
status_cnt = 0;
}
else
{
@ -272,6 +263,10 @@ Contents.timeline = function( cp )
s += MakeTimeline( res[i], cp );
status_ids[res[i].id + '@' + instance] = true;
status_cnt++;
active_users[res[i].account.id + '@' + instance] = true;
addcnt++;
if ( users[res[i].account.id + '@' + instance] == undefined )
@ -370,13 +365,12 @@ Contents.timeline = function( cp )
timeline_list.trigger( 'scroll' );
// "表示最大数を超えている件数
var itemcnt = StatusIDCount();
if ( itemcnt - cp.param['max_count'] > 0 )
if ( status_cnt - cp.param['max_count'] > 0 )
{
// 新着で読み込んだ分だけ削除
timeline_list.find( '> div.item:gt(' + ( itemcnt - addcnt - 1 ) + ')' ).each( function() {
timeline_list.find( '> div.item:gt(' + ( status_cnt - addcnt - 1 ) + ')' ).each( function() {
delete status_ids[$( this ).attr( 'status_id' ) + '@' + $( this ).attr( 'instance' )];
status_cnt--;
$( this ).remove();
} );
@ -622,6 +616,7 @@ Contents.timeline = function( cp )
// タイトル&ボタン設定
var account = g_cmn.account[cp.param['account_id']];
cont.find( '.panel_btns' ).find( '.instance_info' ).hide();
cont.find( '.panel_btns' ).find( '.clear_notification' ).hide();
switch ( cp.param['timeline_type'] )
@ -714,9 +709,7 @@ Contents.timeline = function( cp )
var spd;
var unit = i18nGetMessage( 'i18n_0270' );
var itemcnt = StatusIDCount();
if ( itemcnt < 1 )
if ( status_cnt < 1 )
{
spd = '--';
unit = '--';
@ -726,7 +719,7 @@ Contents.timeline = function( cp )
var firstdate = new Date();
var lastdate = Date.parse( timeline_list.find( '> div.item:last' ).attr( 'created_at' ).replace( '+', 'GMT+' ) );
spd = itemcnt / ( firstdate - lastdate ) * 1000;
spd = status_cnt / ( firstdate - lastdate ) * 1000;
if ( spd < 0 )
{
@ -760,7 +753,10 @@ Contents.timeline = function( cp )
}
}
$( this ).attr( 'tooltip', i18nGetMessage( 'i18n_0037' ) + ': ' + spd + '/' + unit );
var s = i18nGetMessage( 'i18n_0037' ) + ': ' + spd + '/' + unit;
s += ' ' + i18nGetMessage( 'i18n_0012' ) + ': ' + Object.keys( active_users ).length + i18nGetMessage( 'i18n_0013' );
$( this ).attr( 'tooltip', s );
} );
////////////////////////////////////////
@ -964,6 +960,9 @@ Contents.timeline = function( cp )
var instance = GetInstanceFromAcct( data.json.account.acct, g_cmn.account[cp.param.account_id].instance );
status_ids[data.json.id + '@' + instance] = true;
status_cnt++;
active_users[data.json.account.id + '@' + instance] = true;
var users = {};
users[data.json.account.id + '@' + instance] = {
@ -1037,13 +1036,15 @@ Contents.timeline = function( cp )
timeline_list.trigger( 'scroll' );
// "表示最大数を超えている件数
var itemcnt = StatusIDCount();
if ( itemcnt - cp.param['max_count'] > 0 )
console.log( 'status_cnt=' + status_cnt + ':max_count=' + cp.param['max_count'] + ': = ' + ( status_cnt - cp.param['max_count'] ) );
if ( status_cnt - cp.param['max_count'] > 0 )
{
console.log( 'del : ' + (status_cnt - addcnt - 1 ) );
// 新着で読み込んだ分だけ削除
timeline_list.find( '> div.item:gt(' + ( itemcnt - addcnt - 1 ) + ')' ).each( function() {
timeline_list.find( '> div.item:gt(' + ( status_cnt - addcnt - 1 ) + ')' ).each( function() {
delete status_ids[$( this ).attr( 'status_id' ) + '@' + $( this ).attr( 'instance' )];
status_cnt--;
$( this ).remove();
} );
@ -1383,6 +1384,7 @@ Contents.timeline = function( cp )
{
item.fadeOut( 'fast', function() {
delete status_ids[item.attr( 'status_id' ) + '@' + item.attr( 'instance' )];
status_cnt--;
$( this ).remove();
StatusesCountUpdate( cp.param['account_id'], 1 );

View file

@ -472,30 +472,6 @@ function Init()
}
}
break;
// インスタンスを覗く
case 3:
var pid = IsUnique( 'peep' );
if ( pid == null )
{
var _cp = new CPanel( null, null, g_defwidth, g_defheight_s / 2 );
_cp.SetType( 'peep' );
_cp.SetParam( {} );
_cp.Start();
}
else
{
SetFront( $( '#' + pid ) );
// 最小化している場合は元に戻す
if ( GetPanel( pid ).minimum.minimum == true )
{
$( '#' + pid ).find( 'titlebar' ).find( '.minimum' ).trigger( 'click' );
}
}
break;
}
@ -608,6 +584,37 @@ function Init()
}
});
////////////////////////////////////////////////////////////
// インスタンスを覗くボタンのクリック処理
////////////////////////////////////////////////////////////
$( document ).on( 'click', '#head_peep', function( e ) {
// disabledなら処理しない
if ( $( this ).hasClass( 'disabled' ) )
{
return;
}
var pid = IsUnique( 'peep' );
if ( pid == null )
{
var _cp = new CPanel( null, null, g_defwidth, g_defheight_s / 2 );
_cp.SetType( 'peep' );
_cp.SetParam( {} );
_cp.Start();
}
else
{
SetFront( $( '#' + pid ) );
// 最小化している場合は元に戻す
if ( GetPanel( pid ).minimum.minimum == true )
{
$( '#' + pid ).find( 'div.titlebar' ).find( '.minimum' ).trigger( 'click' );
}
}
});
////////////////////////////////////////////////////////////
// アカウント数変更時の処理
////////////////////////////////////////////////////////////

View file

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Kurotodon",
"version": "0.1.5.1",
"version": "0.1.6",
"author": "KEN1",
"description": "__MSG_manifest_description__",
"default_locale": "en",

View file

@ -3,13 +3,13 @@
</div>
<div>
<span id='head_users'></span>
<a id='head_peep' class='btn headerbtn icon-eye tooltip' tooltip='(i18n_0008)'></a>
<span class='subcontainer'>
<a id='head_tool' class='btn headerbtn icon-wrench tooltip' tooltip='(i18n_0090)'></a>
<div id='head_tool_sub' class='header_sub'>
<span>(i18n_0033)</span>
<span>(i18n_0029)</span>
<span>(i18n_0052)/(i18n_0053)</span>
<span>(i18n_0008)</span>
</div>
</span>
<a id='head_search' class='btn headerbtn icon-search tooltip disabled' tooltip='(i18n_0206) (Alt+S)'></a>

View file

@ -2,16 +2,17 @@
<div>
<a class='btn img panel_btn timeline_reload icon-redo tooltip' tooltip='(i18n_0218)'></a>
<a class='btn img panel_btn clear_notification icon-eraser tooltip' tooltip='(i18n_0390)'></a>
<a class='btn img panel_btn instance_info icon-info tooltip' tooltip='(i18n_0014)'></a>
{if $type=='peep'}
<div class='instance_info_window'>
<div>(i18n_0010): </span><span class='users'></div>
<div>(i18n_0011): </span><span class='statuses'></div>
</div>
{/if}
</div>
<div class='streamctl'>
<a class='stm_btn tooltip off' tooltip='(i18n_0388)'></a>
</div>
{if $type=='peep'}
<div class='aboutmore'>
<span>(i18n_0010):</span><span class='users'></span>
<span>(i18n_0011):</span><span class='statuses'></span>
</div>
{/if}
<div class='sctbl'>
<a class='tooltip icon-arrow_up' tooltip='(i18n_0194)'></a>
<a class='tooltip icon-arrow_down' tooltip='(i18n_0192)'></a>