Added effect on document title hover event

This commit is contained in:
Benoit Schweblin 2013-09-26 19:27:38 -04:00
parent b91e52530f
commit 9853f30563
2 changed files with 23 additions and 2 deletions

View File

@ -12,6 +12,7 @@ define([
};
var fileDesc = undefined;
var $fileTitleNavbar = undefined;
var updateTitle = function(fileDescParameter) {
if(fileDescParameter !== fileDesc) {
return;
@ -19,7 +20,7 @@ define([
var title = fileDesc.title;
document.title = "StackEdit - " + title;
$(".file-title-navbar").html(fileDesc.composeTitle());
$fileTitleNavbar.html(fileDesc.composeTitle());
$(".file-title").text(title);
$(".input-file-title").val(title);
@ -39,6 +40,21 @@ define([
documentTitle.onSyncRemoved = updateTitle;
documentTitle.onNewPublishSuccess = updateTitle;
documentTitle.onPublishRemoved = updateTitle;
documentTitle.onReady = function() {
$fileTitleNavbar = $(".file-title-navbar");
// Add a scrolling effect on hover
$fileTitleNavbar.hover(function() {
var scrollLeft = $fileTitleNavbar[0].scrollWidth - $fileTitleNavbar.outerWidth();
$fileTitleNavbar.stop(true, true).animate({
scrollLeft: scrollLeft
}, scrollLeft * 15, 'linear');
}, function() {
$fileTitleNavbar.stop(true, true).scrollLeft(0);
}).click(function() {
$fileTitleNavbar.stop(true, true).scrollLeft(0);
});
};
return documentTitle;

View File

@ -305,8 +305,9 @@ body {
font-size: 20px;
font-weight: 200;
color: @btn-success-color;
max-width: 320px;
max-width: 280px;
overflow: hidden;
white-space: nowrap;
i {
margin-right: 6px;
}
@ -1262,6 +1263,10 @@ div.jGrowl {
.ui-layout-toggler {
display: none !important;
}
.navbar .file-title-navbar {
max-width: 500px;
}
}
/*******************