Editor: add resize grip
This commit is contained in:
parent
0b2a86337d
commit
a4f602c7aa
15
edit.html
15
edit.html
|
@ -132,6 +132,21 @@
|
||||||
.CodeMirror-lint-mark-warning {
|
.CodeMirror-lint-mark-warning {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
.CodeMirror-vscrollbar {
|
||||||
|
margin-bottom: 8px; /* make space for resize-grip */
|
||||||
|
}
|
||||||
|
.resize-grip {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
content: " ";
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 99;
|
||||||
|
cursor: n-resize;
|
||||||
|
background: linear-gradient(-45deg, transparent 2px, rgba(0,0,0,0.5) 2px, transparent 3px, transparent 4.5px, rgba(0,0,0,0.5) 5px, transparent 5.5px);
|
||||||
|
}
|
||||||
/* applies-to */
|
/* applies-to */
|
||||||
.applies-to {
|
.applies-to {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
18
edit.js
18
edit.js
|
@ -187,6 +187,24 @@ function setupCodeMirror(textarea, index) {
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var resizeGrip = cm.display.wrapper.appendChild(document.createElement("div"));
|
||||||
|
resizeGrip.className = "resize-grip";
|
||||||
|
resizeGrip.addEventListener("mousedown", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var cm = e.target.parentNode.CodeMirror;
|
||||||
|
var minHeight = cm.defaultTextHeight()
|
||||||
|
+ cm.display.lineDiv.offsetParent.offsetTop /* .CodeMirror-lines padding */
|
||||||
|
+ cm.display.wrapper.offsetHeight - cm.display.wrapper.scrollHeight /* borders */;
|
||||||
|
function resize(e) {
|
||||||
|
cm.setSize(null, Math.max(minHeight, cm.display.wrapper.scrollHeight + e.movementY));
|
||||||
|
}
|
||||||
|
document.addEventListener("mousemove", resize);
|
||||||
|
document.addEventListener("mouseup", function resizeStop() {
|
||||||
|
document.removeEventListener("mouseup", resizeStop);
|
||||||
|
document.removeEventListener("mousemove", resize);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
editors.splice(index || editors.length, 0, cm);
|
editors.splice(index || editors.length, 0, cm);
|
||||||
return cm;
|
return cm;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user