From 8e361fab2b64cd0298dcd549d0cfc11ae29b1976 Mon Sep 17 00:00:00 2001 From: DmitriyMX Date: Wed, 7 Jun 2017 13:30:39 +0300 Subject: [PATCH] =?UTF-8?q?MCSM:WebConsole:=20=D1=80=D0=B5=D1=84=D0=B0?= =?UTF-8?q?=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=20=D1=81=D0=BA=D1=80?= =?UTF-8?q?=D0=BE=D0=BB=D0=BB=D0=B8=D0=BD=D0=B3=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mcserver-manager/build.gradle | 2 +- .../src/main/resources/components.js | 125 +++++++++--------- .../src/main/resources/moduleStyle.css | 6 +- 3 files changed, 66 insertions(+), 67 deletions(-) diff --git a/mcserver-manager/build.gradle b/mcserver-manager/build.gradle index 083c88e..e47c984 100644 --- a/mcserver-manager/build.gradle +++ b/mcserver-manager/build.gradle @@ -1,5 +1,5 @@ group = 'asys' -version = '0.8.12-SNAPSHOT' +version = '0.8.13-SNAPSHOT' apply plugin: 'osgi' diff --git a/mcserver-manager/src/main/resources/components.js b/mcserver-manager/src/main/resources/components.js index 2484a9a..70bb06f 100644 --- a/mcserver-manager/src/main/resources/components.js +++ b/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('div', {className: 'scrollContent'}, - 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(ScrollingContent, {className: 'output'}, + this.state.lines.map(function(line){ + return ce('p', {dangerouslySetInnerHTML: {__html: ansi_up.ansi_to_html(line)}}); + }) ), 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(); } diff --git a/mcserver-manager/src/main/resources/moduleStyle.css b/mcserver-manager/src/main/resources/moduleStyle.css index 3dbd1e8..b3f7b82 100644 --- a/mcserver-manager/src/main/resources/moduleStyle.css +++ b/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; }