Added effect on document title hover event

res/extensions/documentTitle.js

@@ -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);
 
@@ -40,6 +41,21 @@ define([
     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;
 
 });

res/styles/main.less

@@ -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;
+	}
 }
 
 /*******************