MCSM:WebConsole: кастомный скролл

mcserver-manager/build.gradle

@@ -1,5 +1,5 @@
 group = 'asys'
-version = '0.8.11-SNAPSHOT'
+version = '0.8.12-SNAPSHOT'
 
 apply plugin: 'osgi'
 

mcserver-manager/src/main/resources/components.js

@@ -100,6 +100,37 @@ var WebConsole = React.createClass({
             this.refs.input.value = '';
         }
     },
+    // raf: window.requestAnimationFrame //FIXME
+    //     || window.webkitRequestAnimationFrame
+    //     || window.mozRequestAnimationFrame
+    //     || window.msRequestAnimationFrame
+    //     || function(cb) { return window.setTimeout(cb, 1000 / 60); },
+    scrollRatio: 0,
+    lastPageY: 0,
+    handleScrollMouseDown: function(event) {
+        this.lastPageY = event.pageY;
+        document.addEventListener('mousemove', this.handleScrollMouseMove);
+        document.addEventListener('mouseup', this.handleScrollMouseUp);
+    },
+    handleScrollMouseMove: function(event) {
+        var delta = event.pageY - this.lastPageY;
+        this.lastPageY = event.pageY;
+
+        var _this = this;
+        // this.raf(function(){ //FIXME
+        window.requestAnimationFrame(function(){
+            var totalHeight = _this.refs.content.scrollHeight;
+            var ownHeight   = _this.refs.content.clientHeight;
+            _this.refs.scroll.style.height = (ownHeight / totalHeight) * 100 + "%";
+
+            _this.refs.content.scrollTop += delta / _this.scrollRatio;
+            _this.refs.scroll.style.top = (_this.refs.content.scrollTop / totalHeight) * 100 + "%";
+        });
+    },
+    handleScrollMouseUp: function(event) {
+        document.removeEventListener('mousemove', this.handleScrollMouseMove);
+        document.removeEventListener('mouseup', this.handleScrollMouseUp);
+    },
     /*--------------------*/
     getInitialState: function(){return{
         lines: []
@@ -110,14 +141,42 @@ var WebConsole = React.createClass({
         return(
             ce('div', {id: 'webconsole'},
                 ce('div', {className: 'output'},
-                    this.state.lines.map(function(line){
+                    ce('div', {className: 'scrollContent'},
-                        return ce('p', {dangerouslySetInnerHTML: {__html: ansi_up.ansi_to_html(line)}});
+                        ce('div', {className: 'content', ref: 'content'},
-                    })
+                            this.state.lines.map(function(line){
+                                return ce('p', {dangerouslySetInnerHTML: {__html: ansi_up.ansi_to_html(line)}});
+                            })
+                        ),
+                    ),
+                    ce('div', {className: 'scroll', ref: 'scroll'})
                 ),
                 ce('input', {ref: 'input', 'onKeyPress': this.handleKeyInput})
             )
         )
     },
+    componentDidMount: function() {
+        this.refs.scroll.addEventListener('mousedown', this.handleScrollMouseDown);
+
+        var totalHeight = this.refs.content.scrollHeight;
+        var ownHeight   = this.refs.content.clientHeight;
+        this.refs.scroll.style.height = (ownHeight / totalHeight) * 100 + "%";
+        this.scrollRatio = ownHeight / totalHeight;
+
+        var _this = this;
+        this.refs.content.addEventListener('scroll', function(){
+            // this.raf(function(){ //FIXME
+            window.requestAnimationFrame(function(){
+                var totalHeight = _this.refs.content.scrollHeight;
+                _this.refs.scroll.style.top = (_this.refs.content.scrollTop / totalHeight) * 100 + "%";
+            });
+        });
+    },
+    componentDidUpdate: function() {
+        var totalHeight = this.refs.content.scrollHeight;
+        var ownHeight   = this.refs.content.clientHeight;
+        this.refs.scroll.style.height = (ownHeight / totalHeight) * 100 + "%";
+        this.scrollRatio = ownHeight / totalHeight;
+    },
     componentWillUnmount: function(){
         this.disconnect();
     }

mcserver-manager/src/main/resources/moduleStyle.css

@@ -1,16 +1,41 @@
 #webconsole .output {
     background-color: #1e1e1e;
     color: #eee;
-    height: 500px;
+    min-height: 500px;
+    height: 1px;
     padding: 8px;
     font-family: monospace;
-    overflow-y: scroll;
+    position: relative;
 }
 
-#webconsole .output p {
+#webconsole .output .scrollContent {
+    overflow: hidden;
+    height: 100%;
+}
+
+#webconsole .output .scrollContent .content {
+    overflow: auto;
+    height: 100%;
+    position: relative;
+    right: -18px;
+    margin-left: -18px;
+}
+
+#webconsole .output .scrollContent .content p {
     margin: 0;
 }
 
+#webconsole .output .scroll {
+    width: 9px;
+    background: #f00;
+    position: absolute;
+    top: 0;
+    height: 21.0836%;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    right: 0;
+}
+
 #webconsole input {
     background-color: #1e1e1e;
     background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="7" y="24" style="font-size: 1.5em; font-family: monospace" fill="#ffffff">&gt;</text></svg>');