Minecraft/asys
Archived
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
DmitriyMX
2017-06-07 13:30:39 +03:00
parent 177e66c00d
commit 8e361fab2b
3 changed files with 66 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
mcserver-manager/src/main/resources/components.js
View File

@@ -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();
}

6
mcserver-manager/src/main/resources/moduleStyle.css
View File

@@ -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;
}