Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
232 lines (186 sloc) 7.68 KB
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="/javascripts/fowl/init.js"></script>
<script src="/javascripts/3dparty/js_humanized_time_span/humanized_time_span.js"></script>
</head>
<body style="width: 340px; height: 462px;">
<div id="main">
<header>
<h1 id="screen_name">screenname</h1>
<nav>
<ul id="top_menu">
<li data-type='home' class="selected"><span id="home_timeline_icon"></span></li>
<!--
<li><span id="mentions_timeline_icon"></span></li>
<li><span id="dm_timeline_icon"></span></li>
<li><span id="search_timeline_icon"></span></li>
-->
</ul>
</nav>
</header>
<div class="shadow"></div>
<div class="arrow">
<div class="arrow_transparent"></div>
<div class="arrow_border"></div>
<div class="arrow_shadow"></div>
</div>
<div id="timeline">
<div id="home" class="slide">
<ul></ul>
</div>
<div id="mentions" class="slide" style="position: absolute; top: 0; left: 340px;">
<ul></ul>
</div>
<div id="temp" class="slide" style="position: absolute; top: 0; left: 680px;">
<ul>
<li>
<div>
<span class="nickname">alxgsv</span>
<time datetime="{$datetime}">1 day ago</time>
<p>Россия мокренькая</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="/javascripts/3dparty/js_humanized_time_span/humanized_time_span.js"></script>
<script src="/javascripts/3dparty/js-date-format/date-format.js"></script>
<script src="/javascripts/fowl/storage.js"></script>
<script>
var background = chrome.extension.getBackgroundPage(),
credentials = background.getCredentials();
if( !credentials.accessTokenKey ){
return;
}
var homeTimelineMenu,
homeTimelineList,
onSelectItem, onScrollHandler,
getScrollTopWithListItems, setScrollTop, scrollTimeout,
timeline, shadow, arrow, arrowShadow,
arrowValues;
arrowValues = [ 107 ];
timeline = document.getElementById('timeline');
homeTimelineMenu = document.querySelector('#home_timeline_icon').parentNode;
homeTimelineList = document.getElementById('home');
shadow = document.querySelector('.shadow');
arrow = document.querySelector('.arrow');
arrowShadow = document.querySelector('.arrow_shadow');
onSelectItem = function( event ){
var target = event.target.parentNode,
selected = document.querySelector('.selected');
if( target == selected ){
return;
}
var listItems = Array.prototype.slice.call(target.parentNode.children, 0),
targetIndex = listItems.indexOf( target ),
selectedIndex = listItems.indexOf( selected ),
marginOffset = targetIndex * 340;
selected.classList.remove('selected');
target.classList.add('selected');
timeline.style.marginLeft = -marginOffset + 'px';
arrow.style.left = arrowValues[ targetIndex ] + 'px';
var id = target.querySelector('span').getAttribute('id').split('_')[0];
onScrollHandler( { target: document.getElementById( id ) } );
};
onScrollHandler = function( event ){
var meta = fowl.storage.get('meta') || {},
selectedTimelineType = document.querySelector('.selected').dataset.type,
metaTimelineData = meta[ selectedTimelineType ] || {},
scrollTop = event.target.scrollTop;
metaTimelineData['scroll'] = scrollTop;
meta[ selectedTimelineType ] = metaTimelineData;
if( scrollTimeout ){
clearTimeout( scrollTimeout );
}
scrollTimeout = setTimeout(function(){
fowl.storage.set( 'meta', meta );
}, 500);
if( scrollTop > 0 ){
shadow.style.display = 'block';
arrowShadow.style.display = 'block';
}
else{
shadow.style.display = 'none';
arrowShadow.style.display = 'none';
}
};
getScrollTopWithListItems = function( aTimelineType, aTweets, calcScrollTop ){
var meta = fowl.storage.get('meta') || {},
metaTimelineData = meta[ aTimelineType ] || {},
lastScrollTimelineVal = metaTimelineData['scroll'] || 0;
var tempTimeline = document.querySelector('#temp ul'),
documentFragment = document.createDocumentFragment();
tempTimeline.innerHTML = '';
aTweets.forEach(function( tweet ){
var li = document.createElement('li'),
div = '<div><span class="nickname">{$screenName}</span><time datetime="{$datetime}">{$time}</time><p>{$text}</p></div>',
data = {};
data.screenName = tweet.user.screen_name;
data.text = fowl.parse(tweet.text);
data.time = humanized_time_span( new Date(tweet.created_at) );
li.innerHTML = fowl.getMsg( div, data );
documentFragment.appendChild( li );
});
tempTimeline.appendChild( documentFragment );
var scrollTop = lastScrollTimelineVal,
listItems = document.querySelectorAll('#temp li');
if( calcScrollTop ){
scrollTop += tempTimeline.offsetHeight;
}
metaTimelineData['scroll'] = scrollTop;
meta[ aTimelineType ] = metaTimelineData;
fowl.storage.set('meta', meta);
tempTimeline.innerHTML = '';
return {
scrollTop: scrollTop,
listItems: Array.prototype.slice.call( listItems, 0 )
};
};
setScrollTop = function( aTimelineType ){
var lastScrollTimelineVal = getCalcScrollTop( aTimelineType );
document.getElementById( aTimelineType ).scrollTop = lastScrollTimelineVal;
};
homeTimelineMenu.addEventListener( 'click', onSelectItem, false );
homeTimelineList.addEventListener( 'scroll', onScrollHandler, false );
var updateTimelineWithType = function( aTimelineType, aTweets, calcScrollTop ){
var timeline = document.querySelector('#' + aTimelineType + ' ul'),
data = getScrollTopWithListItems( aTimelineType, aTweets, calcScrollTop ),
account = background.getUserInfo();
document.getElementById('screen_name').innerHTML = account.screenName;
var listItems = timeline.querySelectorAll('li');
listItems = Array.prototype.slice.call( listItems, 0 );
listItems = data.listItems.concat( listItems );
var documentFragment = document.createDocumentFragment();
for( var i=0, l=listItems.length; i<l; i++ ){
documentFragment.appendChild( listItems[i] );
}
timeline.appendChild( documentFragment );
timeline.parentNode.scrollTop = data.scrollTop;
};
var homeTimeline = fowl.storage.get('home_timeline'),
homeTimelineNew = fowl.storage.get('home_timeline_new');
if( homeTimeline && homeTimeline.length ){
if( homeTimelineNew && homeTimelineNew.length ){
for( var i=0, il=homeTimelineNew.length; i<il; i++ ){
for( var j=0, jl=homeTimeline.length; j<jl; j++ ){
if( homeTimelineNew[i]['id_str'] == homeTimeline[j]['id_str'] ){
homeTimeline.splice(j, 1);
break;
}
}
}
}
updateTimelineWithType( 'home', homeTimeline );
}
if( homeTimelineNew && homeTimelineNew.length ){
updateTimelineWithType( 'home', homeTimelineNew, homeTimeline.length );
homeTimelineNew = [];
fowl.storage.set('home_timeline_new', homeTimelineNew);
}
</script>
</body>
</html>