Minecraft/asys
Archived
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
DmitriyMX
2017-06-07 02:00:25 +03:00
parent 97fb820dd3
commit 7458fdde41
3 changed files with 91 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mcserver-manager/build.gradle
View File

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

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

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

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

@@ -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>');