mirror of
https://github.com/seejohnrun/haste-server
synced 2025-08-21 03:43:10 -07:00
smoother scrolling highlight
This commit is contained in:
parent
308a17b6c9
commit
4991b394b0
3 changed files with 66 additions and 24 deletions
|
@ -25,7 +25,7 @@ textarea {
|
|||
|
||||
#linenos {
|
||||
color: #7d7d7d;
|
||||
z-index: -1000;
|
||||
/*z-index: -1000;*/
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
|
@ -40,9 +40,9 @@ textarea {
|
|||
/* display: block;*/
|
||||
}
|
||||
|
||||
.line:hover {
|
||||
/*.line:hover {
|
||||
background-color: #cbd387;
|
||||
}
|
||||
}*/
|
||||
|
||||
.lineHighlight {
|
||||
background-color: yellow;
|
||||
|
|
|
@ -42,17 +42,17 @@ haste_document.prototype.load = function(key, callback, lang) {
|
|||
}
|
||||
|
||||
var currentLine = i + 1;
|
||||
var spanClass = "";
|
||||
if (
|
||||
currentLine >= selectedLines.startLine &&
|
||||
currentLine <= selectedLines.endLine
|
||||
) {
|
||||
highlighted =
|
||||
"<span class='lineHighlight'>" + highlighted + "</span>";
|
||||
spanClass = "lineHighlight";
|
||||
}
|
||||
highlighted = "<span onclick='handleLineClick(event," + i + ")' class='line' id='line-" + i + "'>" + highlighted + "</span>";
|
||||
highlighted = "<span id='line-" + (i+1) + "' class="+spanClass+">" + highlighted + "</span>";
|
||||
high.value += highlighted + "\n";
|
||||
}
|
||||
// scroll to position in document after ensuring components h"ve had time to render
|
||||
//// scroll to position in document after ensuring components h"ve had time to render
|
||||
setTimeout(function() {
|
||||
// show current line and the one before it
|
||||
if (selectedLines.startLine >= 3) {
|
||||
|
@ -217,11 +217,11 @@ haste.prototype.lookupTypeByExtension = function(ext) {
|
|||
};
|
||||
|
||||
// Add line numbers to the document
|
||||
// For the specified number of lines
|
||||
// For the specified number of lines, each with a class and id
|
||||
haste.prototype.addLineNumbers = function(lineCount) {
|
||||
var h = '';
|
||||
for (var i = 0; i < lineCount; i++) {
|
||||
h += (i + 1).toString() + '<br/>';
|
||||
h += '<span onclick="handleLineClick(' + i.toString() + ')" onmouseenter="handleMouseEnter(' + i.toString() + ')" onmouseleave="handleMouseLeave(' + i.toString() + ')" onmousedown="handleMouseDown(' + i.toString() + ')" onmouseup="handleMouseUp(' + i.toString() + ')" id="line-number-' + (i + 1) + '">' + (i + 1) + '</span><br/>';
|
||||
}
|
||||
$('#linenos').html(h);
|
||||
};
|
||||
|
|
|
@ -15,8 +15,16 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
var app = null;
|
||||
var isHashChange=false;
|
||||
var isDragging=false;
|
||||
// Handle pops
|
||||
var handlePop = function (evt) {
|
||||
if (isHashChange||isDragging) {
|
||||
evt.preventDefault();
|
||||
// reset
|
||||
isHashChange = false;
|
||||
return false;
|
||||
}
|
||||
var path = evt.target.location.href;
|
||||
if (path === app.baseUrl) { app.newDocument(true); }
|
||||
else { app.loadDocument(path.split('#')[0].split('/').slice(-1)[0]); }
|
||||
|
@ -66,24 +74,58 @@
|
|||
app = new haste('hastebin', { twitter: false, baseUrl: baseUrl, selectedLines: selectedLines });
|
||||
handlePop({ target: window });
|
||||
});
|
||||
|
||||
$(window).on('hashchange', function() {
|
||||
isHashChange = true;
|
||||
});
|
||||
|
||||
function handleLineClick(event, lineId) {
|
||||
var lineNumber = lineId + 1;
|
||||
if (event.shiftKey && app.selectedLines.startLine != undefined && lineNumber != app.selectedLines.startLine) {
|
||||
if (lineNumber > app.selectedLines.startLine) {
|
||||
app.selectedLines.endLine = lineNumber;
|
||||
} else {
|
||||
app.selectedLines.endLine = this.app.selectedLines.startLine;
|
||||
app.selectedLines.startLine = lineNumber;
|
||||
}
|
||||
window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
|
||||
} else {
|
||||
// no shift range to consider
|
||||
app.selectedLines.startLine = lineNumber;
|
||||
app.selectedLines.endLine = lineNumber;
|
||||
window.location.hash = "#L" + (lineNumber);
|
||||
function updateWindowLineHash(lineId){
|
||||
console.log('updateWindowLineHash', lineId, app.selectedLines.startLine, app.selectedLines.endLine);
|
||||
app.selectedLines.startLine = Math.min(lineId,app.selectedLines.startLine);
|
||||
app.selectedLines.endLine = Math.max(lineId,app.selectedLines.endLine);
|
||||
window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
|
||||
}
|
||||
|
||||
function handleMouseEnter(lineId) {
|
||||
lineId = lineId + 1;
|
||||
console.log('lineId', lineId);
|
||||
$('#line-number-' + lineId).css('background-color', '#cbd387');
|
||||
$('#line-' + lineId).css('background-color', '#cbd387');
|
||||
if(isDragging){
|
||||
$('#line-' + lineId).addClass("lineHighlight");
|
||||
updateWindowLineHash(lineId);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseLeave(lineId) {
|
||||
lineId = lineId + 1;
|
||||
$('#line-number-' + lineId).css('background-color', '');
|
||||
$('#line-' + lineId).css('background-color', '');
|
||||
}
|
||||
|
||||
function unHighlightCurrent(){
|
||||
startLine = app.selectedLines.startLine;
|
||||
endLine = app.selectedLines.endLine;
|
||||
for (var i = startLine; i <= endLine; i++) {
|
||||
$('#line-' + i).removeClass("lineHighlight");
|
||||
}
|
||||
app.selectedLines.startLine = Number.MAX_SAFE_INTEGER;
|
||||
app.selectedLines.endLine = Number.MIN_SAFE_INTEGER;
|
||||
}
|
||||
function handleMouseDown(lineId) {
|
||||
unHighlightCurrent();
|
||||
lineId = lineId + 1;
|
||||
$('#line-' + lineId).addClass("lineHighlight");
|
||||
isDragging = true;
|
||||
updateWindowLineHash(lineId);
|
||||
}
|
||||
|
||||
function handleMouseUp(lineId) {
|
||||
lineId = lineId + 1;
|
||||
isDragging = false;
|
||||
updateWindowLineHash(lineId);
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue