From 7458fdde419fa69c0799da7e5a02d25a8227182b Mon Sep 17 00:00:00 2001 From: DmitriyMX Date: Wed, 7 Jun 2017 02:00:25 +0300 Subject: [PATCH] =?UTF-8?q?MCSM:WebConsole:=20=D0=BA=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D0=BE=D0=BC=D0=BD=D1=8B=D0=B9=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB?= =?UTF-8?q?=D0=BB?= 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 | 65 ++++++++++++++++++- .../src/main/resources/moduleStyle.css | 31 ++++++++- 3 files changed, 91 insertions(+), 7 deletions(-) diff --git a/mcserver-manager/build.gradle b/mcserver-manager/build.gradle index b45f816..083c88e 100644 --- a/mcserver-manager/build.gradle +++ b/mcserver-manager/build.gradle @@ -1,5 +1,5 @@ group = 'asys' -version = '0.8.11-SNAPSHOT' +version = '0.8.12-SNAPSHOT' apply plugin: 'osgi' diff --git a/mcserver-manager/src/main/resources/components.js b/mcserver-manager/src/main/resources/components.js index e838fb4..eb95959 100644 --- a/mcserver-manager/src/main/resources/components.js +++ b/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){ - return ce('p', {dangerouslySetInnerHTML: {__html: ansi_up.ansi_to_html(line)}}); - }) + 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('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 a66d2b5..3dbd1e8 100644 --- a/mcserver-manager/src/main/resources/moduleStyle.css +++ b/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,>');