diff --git a/js/Reporter.js b/js/Reporter.js index 0fa3a81..e149658 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -134,13 +134,30 @@ var List = function(data) { this.el = null; // jQuery element for list this.containerEl = null; + this.scrollbar = null; }; List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+this.listName); - this.containerEl = $('
').appendTo(this.el); - this.el.append('
+'); + var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); + var s = this.scrollbar = $('
').appendTo(this.el); + var sb = s.children('.list-scrollbar'); + sb.mousedown(function(e){ + if (e.which===1) $(this).data({scrolling:true,startY:e.pageY}); // left button + }); + $('body').mousemove(function(e){ + if (sb.data('scrolling')) { + var offset = e.pageY-sb.data('startY'); + if (offset > -1 && offset < c.height()-sb.height()) { + sb.css('top',offset); + c.scrollTop(offset); + } + } + }).mouseup(function(){ + if ($.hasData(sb[0],'scrolling')) sb.removeData(['scrolling','startY']); + }); +// this.el.append('
+'); // disabled because it doesn't do anything even in the original this.el.append('
length: '+this.contents.length); scene.append(this.el); this.update(); @@ -161,6 +178,8 @@ List.prototype.update = function(){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); c.height(this.height-26); + var s = this.scrollbar.height(this.height-26); + s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); }; diff --git a/player.css b/player.css index 8402a3e..61573de 100644 --- a/player.css +++ b/player.css @@ -113,6 +113,20 @@ font-weight: bold; } +.list .list-scrollbar-container { + float: right; + width: 10px; + position: relative; +} + +.list .list-scrollbar { + position: absolute; + top: 0px; + width: 10px; + background-color: #a8aaad; + border-radius: 10px; +} + .list .list-index { color: rgb(81, 81, 81); float: left;