MCSM:WebConsole: рефакторинг скроллинга

mcserver-manager/build.gradle

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

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

@@ -71,6 +71,64 @@ var Tabs = React.createClass({
     }
 });
 
+var ScrollingContent = React.createClass({
+    totalHeight: 0,
+    ownHeight: 0,
+    scrollRatio: 0,
+    lastPageY: 0,
+    updateScrollParams: function () {
+        this.totalHeight = this.refs.content.scrollHeight;
+        this.ownHeight   = this.refs.content.clientHeight;
+        this.scrollRatio = this.ownHeight / this.totalHeight;
+        if (isNaN(this.scrollRatio)) this.scrollRatio = 0;
+        this.refs.scroll.style.height = this.scrollRatio * 100 + "%";
+    },
+    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;
+        window.requestAnimationFrame(function(){
+            _this.refs.content.scrollTop += delta / _this.scrollRatio;
+            _this.refs.scroll.style.top = (_this.refs.content.scrollTop / _this.totalHeight) * 100 + "%";
+        });
+    },
+    handleScrollMouseUp: function (event) {
+        document.removeEventListener('mousemove', this.handleScrollMouseMove);
+        document.removeEventListener('mouseup', this.handleScrollMouseUp);
+    },
+    /*--------------------*/
+    render: function () {
+        return (
+            ce('div', {className: this.props.className},
+                ce('div', {className: 'wrapper'},
+                    ce('div', {className: 'content', ref: 'content'}, this.props.children)
+                ),
+                ce('div', {className: 'scroll', ref: 'scroll'})
+            )
+        );
+    },
+    componentDidMount: function () {
+        this.updateScrollParams();
+        this.refs.scroll.addEventListener('mousedown', this.handleScrollMouseDown);
+
+        var _this = this;
+        this.refs.content.addEventListener('scroll', function(){
+            window.requestAnimationFrame(function(){
+                _this.refs.scroll.style.top = (_this.refs.content.scrollTop / _this.totalHeight) * 100 + "%";
+            });
+        });
+    },
+    componentDidUpdate: function () {
+        this.updateScrollParams();
+    }
+});
+
 var WebConsole = React.createClass({
     ws: null,
     connect: function(){
@@ -100,37 +158,6 @@ 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: []
@@ -140,43 +167,15 @@ var WebConsole = React.createClass({
 
         return(
             ce('div', {id: 'webconsole'},
-                ce('div', {className: 'output'},
+                ce(ScrollingContent, {className: 'output'},
-                    ce('div', {className: 'scrollContent'},
+                    this.state.lines.map(function(line){
-                        ce('div', {className: 'content', ref: 'content'},
+                        return ce('p', {dangerouslySetInnerHTML: {__html: ansi_up.ansi_to_html(line)}});
-                            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

@@ -8,12 +8,12 @@
     position: relative;
 }
 
-#webconsole .output .scrollContent {
+#webconsole .output .wrapper {
     overflow: hidden;
     height: 100%;
 }
 
-#webconsole .output .scrollContent .content {
+#webconsole .output .wrapper .content {
     overflow: auto;
     height: 100%;
     position: relative;
@@ -21,7 +21,7 @@
     margin-left: -18px;
 }
 
-#webconsole .output .scrollContent .content p {
+#webconsole .output .wrapper .content p {
     margin: 0;
 }